El deseo de todo diseñador web y gráfico es poder personalizar los CMS que utiliza y hoy WordPressnos entrega la aplicación llamada “Constructor” que facilitará tu tarea para poder hacerlo aquí te dejamos un sencillos pasos de como irle haciendo.
Paso 1:
Busca en tu instalación de WordPress en los temas la aplicación que se llama “Constructor”
Diseña tu propio tema para WordPress con Constructor
Paso 2:
Después de la instalación y activación, haga clic en el enlace Personalizar en la ficha Apariencia en la barra lateral izquierda.
Diseña tu propio tema paraWordPress con Constructor
Paso3:
El área de personalización Constructor será mostrada. Existen muchos elementos que puede ajustar aqui la combinación de diferentes ajustes de cada elemento harán de su tema para WordPress único.
Diseña tu propio tema para WordPress con Constructor
Paso4:
Luego viene la ficha Diseño. Aquí es el lugar para elegir qué tipo de diseño desea utilizar para su grupo de páginas como página de inicio y página de archivo.
Diseña tu propio tema para WordPress con Constructor
Paso 5:
El siguiente elemento que se puede modificar es la barra lateral. Usted puede decidir el número y las posiciones de las barras laterales. También puede configurar el ancho de la barra lateral, extras y loscontenedores.
Diseña tu propio tema para WordPress con Constructor
Paso 6:
Aquí puede modificar la ficha de encabezado con todos los elementos de la cabecera como la altura del encabezado, color de fuente del título, ese tipo de cosas.
Diseña tu propio tema para WordPress con Constructor
Paso 7
En el área de contendio puede ver elementos de las entradas de blog, tales como: ocultar / mostrar el vínculo del autor, de auto-generar las miniaturas y la creación de un área widget adicionales en el puesto.
Diseña tu propio tema para WordPress con Constructor
Paso 8
En la parte de otros comentarios puede ajustar el tamaño del avatar commenter.
Diseña tu propio tema para WordPress con Constructor
Paso 9
Como el nombre sugiere, en la ficha Fuente le permitirá elegir la combinación de fuentes a utilizar aunque es poco lo que se puede elegir al menos dejaron la opción disponible
Diseña tu propio tema para WordPress con Constructor
Paso 10
La pestaña de color le permite elegir los colores y la transparencia del tema.
Diseña tu propio tema para WordPress con Constructor
Paso 11
En las ofertas ficha Diseño se puede modificar con bordes y sombras.
Diseña tu propio tema para WordPress con Constructor
Paso 12
Constructor también viene con una opción para que los usuarios puedan incluir su propio CSS.
Diseña tu propio tema para WordPress con Constructor
Paso 13
Si desea utilizar sus propios gráficos para el sitio, usted puede subir manualmente a través de la ficha Imágenes.
Diseña tu propio tema para WordPress con Constructor
Paso 14
Y para aquellos que se sienten aun confundidos acerca de Constructor pueden darle clic en la imagen, del signo de interrogación para obtener ayuda.
Diseña tu propio tema para WordPress con Constructor
Paso 15
La última ficha es la función de Presentación de diapositivas permite a los usuarios mostrar presentaciones de diapositivas de las imágenes de los artículos existentes. Simplemente marque la casilla “Habilitar”.
Diseña tu propio tema para WordPress con Constructor
Paso 16
La ficha de Ayuda contiene enlaces a sitios web relacionados con Constructor y solicitud de donación.Si te gusta el tema, el autor puede donar algo de dinero a través de PayPal.
Diseña tu propio tema para WordPress con Constructor
Paso 17
Finalmente dale Guardar. Después de hacer cambios aquí y allá, tal vez quiera guardar su creación como un tema nuevo bajo Constructor. Anote la información necesaria y haga clic en “Guardar tema” y listo ya cuenta con un nueva tema personalizado para WordPress de una manera fácil y rápida
Diseña tu propio tema para WordPress con Constructor
La forma más rápida de poner en funcionamiento un sitio web personal o profesional en el que ofrecer información actualizada y contenidos diversos consiste en instalar un Sistema de Gestión de Contenidos (CMS: Content Management System).
El objetivo de este artículo es demostrar lo sencillo que puede ser instalar uno de esos CMS, concretamente WordPress.
WordPress es un sistema de gestión de contenidos libre y gratuito, de rendimiento y fiabilidad demostrados por la amplia base instalada y un elevadísimo número de usuarios.
Primera fase: instalar Xampp Lite sobre Windows
Worpress ha de ser instalado en un servidor web con soporte para PHP y que disponga de una base de datos MySQL.
Aunque se puede instalar WordPress en los servidores de un ISP (contratando el correspondiente paquete de alojamiento web), a efectos de demostración de la simplicidad de instalar Worpress, en el presente artículo vamos a centrarnos en la instalación en local y sobre sistema operativo Windows.
Para ello se puede emplear el software Xampp, que permite disponer de un servidor web con soporte PHP y MySQL.
Cuando se ha terminado de instalar Xampp, y habiendo arrancado el servidor Apache y MySQL, hay que crear una nueva base de datos antes de proceder a instalar WordPress.
Crear una nueva base de datos
Acceder a la página principal de xampp indicando en el navegador: http://localhost
Seleccionar la opción “phpMyAdmin” del menú de herramientas.
Acceder a la herramienta phpMyAdmin indicando el usuario y contraseña configurados durante la instalación de Xampp (o bien indicar usuario “root” y sin contraseña, si no se han realizado los ajustes de seguridad recomendados para Xampp).
Crear una nueva base de datos, por ejemplo de nombre “BDWORDPRESS“, con las opciones por defecto.
Instalar Worpress
Descargar el paquete de Worpress de la web oficial.
Descomprimir el paquete de WordPress y copiar los archivos y subdirectorios contenidos en el directorio “wordpress” en el directorio raíz de páginas web de Xampp (por defecto htdocs).
Abrir el archivo “wp-config-sample.php” con un editor de texto y actualizar los datos de conexión a la base de datos que se creó en MySQL: nombre de la base de datos, usuario y contraseña; para el resto de los valores se pueden respetar los que aparecen por defecto.
Salvar el archivo modificado con el nombre “wp-config.php“.
Acceder a la página de instalación de WordPress indicando en un navegador web: http://localhost/install.php
Introducir los dos datos solicitados y pulsar “Instalar WordPress“.
En este punto WordPress quedará instalado en el servidor y mostrará una contraseña para el usuario admin que deberíamos cambiar la primera vez que accedamos al interfaz de administración.
Adobe Muse, Descarga, Tutorial, Videos y Guía Gratis
Adobe Muse permite a los diseñadores crear sitios web sin necesidad de escribir código. Planificar, diseñar y publicar páginas HTML originales será igual de fácil que realizar un diseño para impresión. Con las páginas maestras, el acceso a más de 400 fuentes web proporcionadas por Adobe Typekit, las herramientas integradas para crear interactividad y una selección de alojamientos de publicación, podrás crear sitios web distintivos y profesionales que cumplan los últimos estándares web.
Obtén la última versión de Adobe Muse y maximiza tu productividad con las nuevas funciones que te ofrecen un control más preciso de tus diseños; nueva compatibilidad integrada con los formularios de contacto; y compatibilidad con una publicación más eficaz, incluidas las mejoras de SEO.
Adobe Muse, Diseño Web sin pensar en el código HTML5
NUEVAS FUNCIONES DE ADOBE MUSE
Planificación del sitio web
Crea rápidamente una base inteligente sobre la que construir el sitio y dispondrás de más tiempo para dedicarlo al diseño. Con Adobe Muse™, planificar el trabajo resulta rápido e intuitivo gracias a la facilidad de uso de mapas de sitio, páginas maestras y elementos básicos de diseño aplicados automáticamente.
Mapas del sitio
Organiza las páginas con un mapa del sitio fácil de usar que te permitirá definir y modificar rápidamente la estructura del sitio. Arrastra y coloca las miniaturas, ponles nombre y cambia su tamaño.
Páginas maestras
Define y controla elementos comunes a varias páginas, como encabezados, pies de página, logotipos y navegación. Basta con agregarlos al diseño de las páginas maestras.
Propiedades del sitio web
Define elementos básicos del diseño que se aplicarán automáticamente a todo el sitio web, como la anchura y los márgenes de las páginas, la alineación y los colores de los hipervínculos.
Libertad para diseñar
Dale alas a tu creatividad mediante la combinación de imágenes, gráficos y preciosas tipografías gracias al poder de los estilos, la edición bidireccional y otras funciones. Disfruta del control intuitivo y de toda la precisión que esperas de las herramientas de diseño de Adobe.
Herramientas de Adobe Muse
Crea tus diseños de forma intuitiva utilizando Guías inteligentes y los comandos Pegar en contexto y Editar original. Utiliza también otras funciones conocidas, como la herramienta Cuentagotas, columnas, medianiles y otras.
Selección de fuentes web
Elige entre las más de 400 fuentes web suministradas por el servicio Adobe Typekit disponibles desde la interfaz de Adobe Muse, o utiliza fuentes del sistema, que se convierten en imágenes y se etiquetan automáticamente.
Redimensionamiento dinámico de la página
Saca el máximo partido al redimensionamiento dinámico de la página. Los diseños de Adobe Muse se redimensionan verticalmente cuanto sea necesario para adaptarse a la longitud del contenido de la página.
Optimización de imágenes
Ten plena confianza en que tus imágenes tendrán un aspecto fantástico y se cargarán sin problemas en la web. Adobe Muse optimiza de forma automática los archivos PSD y PNG cuando se publican.
Edición bidireccional
Edita imágenes con Adobe Photoshop o Fireworks mediante la función Editar original. Cuando guardes la imagen, los cambios introducidos se reflejarán automáticamente en el diseño.
Estilos de texto y párrafo
Crea y formatea texto y guarda estilos de texto exactamente igual que en Adobe InDesign. Los estilos se conservan en CSS, que se genera automáticamente para todo el sitio web.
NUEVO Panel de alineación y distribución
Alinea y distribuye objetos relacionados con la página y dentro de widgets, como lo haces en los software Adobe InDesign o Adobe Illustrator.
Fondos
Rellena los fondos con una única imagen, imágenes repetidas o cualquier tipo de relleno, que se optimizarán para ofrecer el rendimiento idóneo al cargar la página.
Fijación de objetos persistentes
Fija con facilidad cualquier elemento al lugar que prefieras para que se muestre invariablemente en esa posición, incluso cuando la página se desplace hacia arriba o hacia abajo. Ver el vídeo ›
Encabezados y pies de página
Asigna encabezados y pies de página que se repitan en todas las páginas. Los pies de página se sitúan automáticamente en la parte inferior de la página, independientemente de la longitud del contenido. Ver el vídeo ›
Guías
Arrastra guías a una página desde las reglas horizontal o vertical. Como en InDesign, las guías incluyen todos los comportamientos esperados, como ver, bloquear, eliminar, añadir, ajustar y colocar.
Anchura flexible
Para retener el control completo de la apariencia del diseño, haz que los elementos se visualicen al 100% de la anchura del navegador. De esta forma, el diseño se adaptará al tamaño de la ventana del navegador.
Gestión de activos
Gracias al panel Activos, que incluye la opción de volver a vincular las imágenes, podrás mantener el control de los activos de imagen asociados con el sitio web.
Adición de interactividad sofisticada
Tus sitios serán más atractivos que nunca, con presentaciones de diapositivas, cajas de iluminación y formularios de contacto interactivos. Mantén tu contenido organizado con navegación, pestañas y acordeones personalizados. Incrusta HTML arbitrario y añade botones de las redes sociales y fuentes (feeds). Accede al panel de la biblioteca de widgets de Adobe Muse para comenzar.
Compatibilidad integrada con formularios de contacto
Crea y personaliza formularios de contacto para sitios alojados con el servicio Adobe Business Catalyst y recibe la información enviada por correo electrónico.
Navegación autogenerada
Arrastra y coloca menús de navegación totalmente personalizables que reflejen automáticamente las páginas en el mapa del sitio.
Definición de estados para los objetos
Con Adobe Muse es posible definir fácilmente estados como arriba, sobre, abajo y normal para cualquier objeto. Podrás crear botones mediante la asignación de estados a capas individuales de Adobe Photoshop. Ver el vídeo ›
HTML incrustado
Agrega mapas de Google Maps, vídeos de YouTube, feeds de Facebook y muchas cosas más. Simplemente, copia el código fuente y pégalo en el lienzo de Adobe Muse.
Vínculos con anclaje
Crea fácilmente vínculos con anclajes que remiten a los visitantes a una ubicación específica en medio de una página o diseño.
Proyecciones de diapositivas
Mostrar imágenes de forma llamativa es fácil: basta con arrastrar y colocar un widget de proyección de diapositivas totalmente personalizable. Ver el vídeo ›
Paneles con fichas y de acordeón
Si necesitas presentar un volumen considerable de información, organízala en bloques más pequeños y más atractivos visualmente mediante paneles con fichas o de tipo acordeón totalmente personalizables. Ver el vídeo ›
Cajas de iluminación
Crea una superposición para llamar la atención sobre una imagen, vídeo o cualquier otro contenido en particular, haciendo que aparezca en una capa superpuesta sobre el resto de la página.
Desencadenantes y destinos
Define zonas interactivas o desencadenantes para mostrar contenido adicional cuando el usuario haga clic con el ratón o sitúe el puntero sobre ellos.
Función para adjuntar archivos sencilla
Añade y vincula fácilmente cualquier tipo de archivo, incluidos PDF, ZIP, DMP y EXE, para que los lectores los descarguen desde tu sitio web. Todos los activos se actualizarán y exportarán con el archivo de tu sitio en el momento de la publicación.
Previsualización, publicación y gestión
Previsualiza en Adobe Muse o en el navegador que elijas para comprobar el aspecto de su sitio. Crea y comparte un sitio de prueba para realizar comprobaciones. Publica con el proveedor de alojamiento que elijas. Realiza el alojamiento con Adobe para aprovechar las ventajas de alojamiento de sitios, además de la gestión y el seguimiento de las estadísticas de los sitios en el panel.
Vista previa de página
Previsualiza tu diseño en Adobe Muse o en el navegador que prefieras para asegurarte de que tenga el aspecto deseado y que los elementos interactivos funcionen correctamente.
Sitios de prueba
Crea un sitio web de prueba alojado por Adobe para poner a prueba su comportamiento real. Si lo deseas, puedes enviar la URL del sitio a tus clientes para que lo revisen online.
Compatibilidad con navegadores
Disfruta de la tranquilidad de saber que tus diseños tendrán un aspecto fantástico en distintos navegadores. Adobe Muse crea código compatible con distintos navegadores, para que puedas concentrarte en el diseño.
Mapas de sitios autogenerados para SEO
Ten la confianza de que tu sitio será encontrado en los motores de búsqueda cuando esté alojado con Adobe Business Catalyst o un proveedor de terceros. Ahora Adobe Muse puede generar automáticamente un archivo sitemap.xml.
Tiempos de carga más rápidos
Disfruta de tiempos de carga más rápidos en tus sitios gracias a las mejoras en los resultados de HTML5/CSS3 de Adobe Muse, incluido el procesamiento de sombras y brillos.
Opción de exportación del sitio web
Aloja el sitio en el proveedor que prefieras. Para hacer el sitio web operativo basta con exportarlo desde Adobe Muse y cargar los archivos en el FTP del proveedor. Ver el vídeo ›
Alojamiento de Adobe
Publica y mantén tus sitios web con el alojamiento de Adobe. Convierte fácilmente sitios web de prueba en sitios operativos sin necesidad de desplazar los archivos. Además, podrás supervisar tus sitios web activos con la opción de informes del tablero de mandos.
Los videojuegos suelen utilizar scroll parallaxtécnica para crear una ilusión de profundidad moviendo múltiples capas de imágenes a una velocidad diferente. Esta técnica puede aplicarse también en el diseño web. Este mensaje consiste en una lista de sitios alucinantes paralaje de desplazamiento, consejos y tutoriales de diseño de recursos. Si usted está considerando iniciar un sitio de scroll parallax, esta es una lectura posterior.
Nike Better World
Nike Mundo Mejor es probablemente uno de los primeros sitios que iniciaron esta tendencia scroll parallax. Sin dejar de mirar bien.
Inteligente EE.UU.
Al desplazarse por la inteligente EE.UU. sitio, los elementos de acercar a ti. Lo que es realmente impresionante es que logró mantener la apariencia y comportamiento similares en su versión móvil . La mayoría de los diseños de desplazamiento de paralaje no se reproducen correctamente en dispositivos móviles. Tener una versión independiente es una idea inteligente.
Ben la Guardia de Corps
Aunque el punto de vista parece muy mal (no se siente como una vista de pájaro) enBen la Guardia de Corps , pero con un carácter y carreras peatonales en toda la escena está muy bien.
Laurentius
No entiendo holandés, pero la navegación en Laurentius sitio era muy agradable.Puede desplazarse a través de la presentación con la rueda del ratón, los botones de la barra de desplazamiento, la navegación o las teclas de flecha. Me gusta especialmente el desplazamiento que hay entre 4 y 5, donde las mariposas volando por la escena de forma aleatoria.
Mario Kart Wii
Mario Kart sitio le da el mismo tipo de experiencia como si estuvieras jugando en la Wii. Es divertido ver a los carros se mueven en la pista. Tenga en cuenta cuando intenta desplazarse hacia abajo en la última diapositiva o desplazarse hacia arriba en la primera diapositiva, los elementos gráficos agitar para crear el efecto de frenado.
Moods of Norway
Moods of Norway verdaderamente representa la belleza de una línea de la ciudad en un tour de scroll parallax. Te lleva desde el campo a la ciudad urbana de iluminación y la temporada. Pensé que es un sitio de viajes, pero resulta que es un sitio del producto (LOL). No te olvides de visitar el sitio en tu iPhone. Se muestra un mensaje de dulce cuando está viendo en el modo de retrato. Usted puede deslizar a través de las escenas de paisaje.
Arte de Vuelo
Al igual que el Mario Kart sitio, arte de volar proporciona la misma experiencia como si estuviera volando en un helicóptero. Me dio un dolor de cabeza (de una manera positiva) de ver los elementos que vuelan alrededor de la escena. Muy bien hecho!
Smokey Bones
Al lado del scroll parallax en Smokey Bones , me gusta la parte inferior del sitio donde se puede romper las pelotas y jugar al billar (bueno, casi).
BeerCamp
BeerCamp no tiene las imágenes tan impresionantes como la mayoría de los sitios de desplazamiento de paralaje, pero se ejecuta muy bien. Todo se pone en la pantalla. Al desplazarse, el zoom de diseño en la capa por capa.
Escarabajo
Asegúrese de que está en la conexión de alta velocidad para comprobar el escarabajo de sitio, porque es muy gráfico instense. El desplazamiento al principio se pone junto con la imagen por la imagen como la animación de fotogramas clave.
Nueva Zelanda
El diseño de la escena en la Nueva Zelanda sitio es tomar aliento - las imágenes hermosas y de alta resolución. Sin embargo, esta belleza cuesta un poco de tiempo de carga y recursos gráficos.
Activar Bebidas
Entre todos los sitios de esta lista, creo que las bebidas Activar tiene la mejor idea de pre-carga. En primer lugar, que muestra una animación de carga agradable y luego la tapa de la botella comienza a girar mientras se desplaza.
Gidsy - Hacer la lista perfecta
Este " Hacer la lista perfecta "de la página está muy bien puesto junto con el color básico y solo formas. Vaya a ver las formas se funden.
Cosas a tener en cuenta
Si usted está pensando en diseñar un sitio de scroll parallax, aquí hay algunos factores que debe considerar:
Cargar de antemano los gráficos : si su diseño es instense muy gráfica, precargar los gráficos antes de cargar el sitio. Esto le dará la experiencia del usuario más fluida.
Los dispositivos móviles : preste especial atención a los dispositivos móviles porque los usuarios no pueden tener la misma experiencia que los navegadores de escritorio.
Los tamaños de ventana gráfica : asegúrese de que su escena funciona en varios tamaños de ventana gráfica (pequeño, mediano, grande).
La forma más rápida de poner en funcionamiento un sitio web personal o profesional en el que ofrecer información actualizada y contenidos diversos consiste en instalar un Sistema de Gestión de Contenidos (CMS: Content Management System).
Adobe Muse permite a los diseñadores crear sitios web sin necesidad de escribir código. Planificar, diseñar y publicar páginas HTML originales será igual de fácil que realizar un diseño para impresión. Con las páginas maestras, el acceso a más de 400 fuentes web proporcionadas por Adobe Typekit, las herramientas integradas para crear interactividad y una selección de alojamientos de publicación, podrás crear sitios web distintivos y profesionales que cumplan los últimos estándares web.
