No hay duda de que Divi de Elegant Themes es una de las mejores plantillas WordPress de todos los tiempos. Y entre las muchas razones para elegir Divi para hacer tu sitio, una importante es que…
Divi viene con montones de diseños predefinidos (Divi Premade Layouts) que puedes usar para facilitar el diseño de tu web.
Estos “diseños” “diseños predefinidos Divi” “layouts” “premade layouts” o como quieras llamarlos son simplemente páginas ya diseñadas por expertos y relativas a un nicho de mercado específico, que te permitirán crear una web super profesional muy fácilmente y en muy poco tiempo.
Packs de Divi Layouts
Estos Divi Layouts vienen agrupados en packs enfocados a diferentes sectores. En cada pack encontrarás 7 u 8 páginas diseñadas y preparadas para ser instaladas en tu sitio. Por ejemplo puede haber una página “Home”, “Contacto”, “Sobre Nosotros”, “Landing Page”, “Galería de Imágenes”, “Blog”… todas las necesarias para tener una web de éxito.
Los diseñadores expertos de Elegant Themes saben lo que necesita cada web en un nicho de mercado determinado y han hecho los diseños de página o layouts necesarios para que tan solo tengas que instalarlos (los que tú desees) y tengas tu web prácticamente ya montada. Tan solo tendrás que personalizarla a tu gusto si lo deseas y listo.
Personalización de los Diseños Predefinidos Divi
La customización de los Divi Layouts es realmente fácil. Tan solo deberás cambiar las imágenes existentes por las tuyas y poner tus propios textos. De todas formas, si te gustan las imágenes que aparecen en el Layout, puedes dejarlas y usarlas sin problema ya que son libres de derechos de autor. Además son imágenes profesionales y relativas al nicho de mercado específico que te interesa, por lo que son realmente útiles.
Y cambiar los elementos de diseño del Layout es también muy fácil. Puedes hacerlo desde el Constructor Visual, de manera totalmente intuitiva. Tu web quedará siempre a tu gusto.
¡Ultima Oportunidad!¿Deseas obtener una cuenta de Elegant Themes LifeTime al mejor precio posible?
Pues puede ser tuya a un precio de escándalo solo si te das prisa. Si te interesa dame tu email y te envío todos los detalles al instante.
¿Cómo acceder a los Premade Layouts de Divi?
Puedes acceder e importar los diseños predefinidos Divi directamente desde el Divi Builder cuando crees o edites una página.
Cuando añades una nueva página desde el panel WordPress, se despliega el Visual Builder.
Si la página es nueva, te aparecerán 3 opciones para que elijas como quieres empezar a crear tu página. Selecciona la opción “Choose a Premade Layout” (Elegir un Premade Layout).
Esto hará que salga automáticamente un pop-up “Load From Library” (Cargar desde la Biblioteca) donde encontrarás todos los Divi Layouts disponibles.
Premade Layouts, Layouts Guardados o Páginas Existentes
En el pop-up de Cargar desde la Biblioteca, tendrás 3 pestañas disponibles.
La pestaña de Premade Layouts es donde encontrarás todos los diseños predefinidos Divi creados por el equipo de diseñadores de Elegant Themes y que puedes usar de manera totalmente gratuita.
La pestaña “Your Saved Layouts” (Tus Diseños Guardados) es donde podrás acceder a cualquier Layout que hayas guardado en la Biblioteca Divi.
La pestaña “Your Existing Pages” (Tus Páginas Existentes) contiene una lista de todas las páginas (incluyendo Posts y Proyectos) que hay actualmente en tu sitio web, pudiendo elegir clonar una página existente para poder empezar el diseño de otra página de manera muy rápida.
Cargar un Premade Divi Layout
Desde la pestaña Premade Layout podrás encontrar fácilmente un nuevo diseño predefinido simplemente haciendo scroll a través de la lista de Layouts Packs o bien ayudándote con el buscador de categorías que aparece en la columna izquierda.
Una vez hayas seleccionado el pack de Layouts deseado, podrás previsualizar todas las páginas de diseño individuales incluidas en el pack. Al clicar en una página a la derecha, podrás ver un preview de la página a la izquierda.
Podrás entonces clicar en el botón “View Live Demo” para abrir la demo en vivo de la página en una nueva pestaña. Cuando ya estés listo para usar el Layout, simplemente tienes que clicar en “Use This Layout” para desplegar el diseño en tu página.
Puedes añadir Premade Layouts a tus páginas siempre que quieras desde el Visual Builder, tanto para páginas nuevas como para páginas ya existentes. Para ello simplemente tienes que abrir el menú de ajustes del Visual Builder (Constructor Visual) que aparece en la parte inferior de la página, clicando en el circulo con los 3 puntitos.
Después clica el icono de “Cargar desde la Biblioteca” (es como el símbolo +) para desplegar el popup con todos los diseños predefinido Divi.
¡Ultima Oportunidad!¿Deseas obtener una cuenta de Elegant Themes LifeTime al mejor precio posible?
Pues puede ser tuya a un precio de escándalo solo si te das prisa. Si te interesa dame tu email y te envío todos los detalles al instante.
Añade Layouts a Contenido ya Existente o Reemplaza el Contenido Existente
Lo mismo puedes cargar un diseño predefinido Divi en una página en blanco, un layout ya existente o bien puedes reemplazar contenido existente.
Cargar un diseño (layout) a una página en blanco simplemente añadirá el layout a tu página tal y como cabría esperar.
Cargar un premade layout a una página que ya existe, por defecto añadirá el layout bajo el contenido ya existente en la página. Así que si no ves un cambio en tu página inicialmente cuando añadas el nuevo diseño, haz scroll hacia abajo de la página para ver el nuevo diseño que aparecerá además del layout ya existente.
Y si quieres reemplazar el contenido existente por completo por el nuevo premade layout, puedes hacerlo con la opción “Replace Existing Content” (Reemplazar el Contenido Existente) antes de hacer uso del premade layout. Esta opción está situada justo bajo el preview del layout y los botones.
Cargar Diseños Guardados y Clonar Páginas Existentes
Si has guardado diseños (layouts) en tu Biblioteca de Divi, puedes acceder a ellos desde el pop-up “Load From Library” (Cargar desde la Biblioteca) bajo la pestaña “Your Saved Layouts” (Tus Diseños Guardados). Para cargar el diseño guardado en tu página simplemente clica el que deseas cargar desde la lista que te aparecerá.
Puedes también acelerar el diseño de tu página clonando alguna de las páginas ya existentes en tu web. Clica la pestaña “Your Existing Pages” (Tus Páginas Existentes) y selecciona la página que quieres clonar. Esto desplegará el Layout (y el contenido) de la página a tu nueva página.
Personalización y Flexibilidad
La posibilidad de añadir premade Layouts para acelerar el proceso de creación de una nueva página, abre todo un mundo de flexibilidad para crear tus propios y únicos diseños.
Una vez que los diseños de despliegan, puedes editarlos a tu gusto. Por ejemplo, si te gusta cierto Layout pero prefieres prescindir de cierta sección que aparece en él, simplemente la puedes borrar clicando en el icono de la basura para esa sección concreta y listo.
Y reemplazando cada elemento en la página con tu propio contenido, puedes tener un sitio web elegante y personal en unos pocos minutos. Gracias al Visual Builder, hacer estos cambios es muy sencillo. Desplázate sobre cualquier área donde quieras hacer cambios y te aparecerá el set de ajustes. Si deseas cambiar el texto, simplemente selecciónalo y empieza a teclear.
Si te gusta el cambio que has hecho, puedes darle al botón de Guardar. Si no te gusta el resultado del cambio, siempre puedes deshacerlo usando el editor del historial, desde donde podrás incluso volver varios pasos atrás de manera inmediata.
Seguramente nunca has visto ninguna plantilla tan completa como Divi de Elegant Themes, y ahora con sus cientos de Packs de Layouts preparados para diferentes nichos de mercado, no tiene rival.
¡Ultima Oportunidad!¿Deseas obtener una cuenta de Elegant Themes LifeTime al mejor precio posible?
Pues puede ser tuya a un precio de escándalo solo si te das prisa. Si te interesa dame tu email y te envío todos los detalles al instante.
¡Atentos al Nuevo Constructor WooCommerce de Divi!
Por fin vas a poder construir asombrosos productos WooCommerce con el Divi Builder. Descubre los nuevos 16 módulos preparados para WooCommerce. Además podrás conseguir un control total sobre las páginas de productos.
Por fin Elegant Themes ha lanzado su tan esperado WooCommerce Divi Builder, incluyendo un completo set de nuevos módulos de WooCommerce que pueden ser usados para personalizar las páginas de producto de tu tienda online e incluso construir tu propio listado de productos en cualquier sitio de tu web.
Este WooCommerce Builder para Divi, libera los productos WooCommerce de sus rígidas plantillas de producto y te da un control sorprendente sobre el diseño de cada producto individual.
Todas estas nuevas funcionalidades llevan a los eCommerce hechos con Divi a un nuevo nivel.
¡Ultima Oportunidad!¿Deseas obtener una cuenta de Elegant Themes LifeTime al mejor precio posible?
Pues puede ser tuya a un precio de escándalo solo si te das prisa. Si te interesa dame tu email y te envío todos los detalles al instante.
Control total sobre las páginas de producto
Elconstructor WooCommerce de Divi te permite tener control absoluto del diseño de tus páginas de producto. Ahora, cuando habilites el Divi Builder con un producto de WooCommerce, transformará automáticamente su plantilla estándar en una colección de módulos que pueden personalizarse totalmente dentro del constructor.
Tendrás control absoluto sobre toda la página de producto ypodrás usar el set completo de módulos de Divi y sus múltiples ajustes de diseño. Las páginas de producto también vienen con una nueva barra lateral y opciones de template de página a anchura completa.
Esta actualización de Divi viene con 16 nuevos módulos WooCommerce que te permiten crear y tener control sobre cualquier elemento individual de WooCommerce y en cualquier parte de tu web.
Decide que mostrar en tu listado de productos, mueve los elementos e incluso combina módulos WooCommerce con los módulos estándar de Divi para crear cualquier cosa que desees.
Como estos nuevos módulos vienen con la amplia gama de ajustes de diseño de Divi, realmente permiten abrir todo un mundo nuevo de posibilidades de diseño para WooCommerce.
Crea Listados de Productos Dinámicos en Cualquier Parte
Los nuevos módulos WooCommerce pueden usarse en páginas de producto individuales para mostrar la información de ese producto de otras maneras diferentes, o pueden ser usadas en páginas externas para listar información de producto dinámicamente y para cualquier producto.
Esto significa que no estás limitado a tipos de post de productos cuando vayas a crear tu tienda online con Divi.
¡Ultima Oportunidad!¿Deseas obtener una cuenta de Elegant Themes LifeTime al mejor precio posible?
Pues puede ser tuya a un precio de escándalo solo si te das prisa. Si te interesa dame tu email y te envío todos los detalles al instante.
Toma inspiración de estas asombrosas demos de productos en WooCommerce con Divi
Aquí tienes algunos increíbles diseños que el equipo de Elegant Themes ha creado valiéndose de estas fantásticas nuevas funcionalidades para las tiendas online hechas con Divi y WooCommerce.
El equipo de diseño de Elegant Themes ha estado probando los nuevos módulos WooCommerce para Divi y construyendo algunos bellos diseños de productos que antes hubiera sido imposible realizar. Usando la amplia gama de ajustes de diseño de Divi, los elementos de WooCommerce pueden ahora personalizarse totalmente. Al tener un control total de las páginas de producto, ya no hay límite de lo que puedes hacer.
Son muchas las formas de dar personalidad a nuestro sitio, pero sin duda una de las mas vistosas, a pesar de su tamaño, un cuadrado desde 16×16, 32×32, 48×48, 64×64 hasta 128×128 píxeles y que parece ocultar una programación de ligas mayores, es la del «favicon«.
Puede parecer un pequeño detalle pero resulta ser más importante de lo que muchos creen. Un favicon, o «favorite icon», es ese pequeño ícono o imagen que originalmente se utilizaba junto al nombre del sitio web en caso de que el usuario lo agregará a sus favoritos. Más adelante, otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestaña del sitio web.
Para crearlo se pueden utilizar muchos programas de diseño gráfico, para este post emplearé Photoshop, y Junior Icon Editor. Pero veamos paso a paso como se hace:
Paso 1
Selecciona la imagen que quieras utilizar como favicon. En mi caso uso mi propia foto. La abro desde Photoshop y usando la herramienta Crop la «corto» en la medida 1×1 que mencioné antes. En este caso 112mm x 112mm con una calidad de 72dpi:
Paso 2
Después de cortar la imagen, se guarda con la opción de «Guardar para web y dispositivos». En la pantalla aparecen las opciones de calidad y formato para la imagen, seleccionamos PNG-8 con las opciones de ajuste preestablecido en el panel de la derecha:
Paso 3
Una vez que hemos guardado la imagen, emplearemos el programa gratuito Junior Icon Editor para generar nuestro favicon. Al ejecutar el programa salen estas dos pantallas, solo hay que hacer click en los botones encerrados en el círculo verde:
Primeras pantallas al abrir Junior Icon Editor
Luego se abre esta pantalla con las opciones de configuración inicial para crear un nuevo favicon, solo la emplearemos si no tenemos de antemano una imagen escogida, si no, simplemente cerramos esta pantalla y pasamos al siguiente paso:
Junior Icon Editor – Configuración inicial
Lo siguiente será abrir la imagen que guardamos con Photoshop en formato PNG-8, por tanto desde el menú «File», abrimos clicamos a «Abrir» y buscamos nuestra imagen, la seleccionamos y le damos al «Abrir»:
primer paso para convertir nuestra imagen en favicon
Al abrir la imagen nos aparece esta ventanita en la que seleccionaremos el tamaño que queremos para nuestro favicon:
Selección de las características de nuestro favicon
Al darle al «ok» automáticamente el programa transforma la imagen en el siguiente patrón de colores:
Patrón de colores
En este punto, si se quiere se pueden hacer retoques con las herramientas del panel de la izquierda, si esta todo ok se pasaría a guardar el favicon:
Guardar en formato .ico
Listo, nuestro favicon esta a punto para que lo usemos:
Favicon con la extensión .ico
Esta es una forma simple y económica de crear un favicon, pero si no quieres descargarte el software, también se pueden utilizar varios servicios online que nos facilitan la tarea, como genfavicon.com, favicononline.es u otros que aparecen con la búsqueda en Google. Solo hay que seguir los pasos que nos indiquen y ya tendremos el favicon con la extensión «.ico».
En cuanto al diseño, debemos tomar en cuenta que, en un espacio muy reducido, deberemos colocar una imagen que nos represente, por lo que sería conveniente emplear o bien el isotipo de nuestra marca como hace Mercedes Benz, un detalle ampliado del logotipo, o una imagen reconocible como es el caso de este blog. En el caso de una marca que tenga alguna mascota que la identifique sería conveniente hacer uso de ella. Tal es el caso de Vía Michelin.
Una vez que tenemos creado nuestro ícono, lo aplicaremos a nuestro sitio web de la siguiente manera: añadiremos el siguiente link en el archivo index.html que es el que por defecto se abre al entrar en una página web. Colocaremos el código entre las etiquetas de la cabecera:
Si hemos creado nuestra web sin ningún gestor o plataforma de contenidos simplemente guardamos el archivo y lo subimos junto con el favicon.ico al mismo folder en el sitio donde se alojan los archivos de nuestra página web.
En Blogger simplemente se accede a la opción «Diseño» del panel izquierdo y en la parte superior izquierda se encuentra un gadget que nos permite cargar un favicon personalizado cuyo tamaño debe ser menor que 100 KB.
En WordPress depende del Theme, Plantilla o Tema que tengamos instalado, generalmente nos dan la opción para cargar nuestro favicon, si no es así, en principio deberemos subir nuestro favicon.ico al directorio raíz de nuestra web, luego accederemos a nuestro panel de control de WordPress o Dashboard y seleccionaremos la opción de «Appearance» en la que accedemos al botón de «Editor» y buscamos en la columna de la derecha el archivo header.php y copiamos el mismo código de líneas arriba antes de la etiqueta
Con eso debería funcionar de maravilla en todos los casos…
