Pero José, ¿Me estás hablando sobre cómo crear una página web con Divi siendo tú un amante de Elementor?
Así es, Elementor Page Builder es el constructor web que más uso para mis proyectos y los de mis clientes, pero eso no quieres decir que Divi no merezca ser mencionado con un Tutorial.
Divi forma parte de la lista que recomendé en su momento sobre los mejores page builder para WordPress, puedes leerlo aquí y decidir tú mismo.
Aunque yo use más a menudo otros constructores, tienes que saber que depende del proyecto puedes ser muy interesante usar este constructor web.
La principal ventaja que veo en Divi respecto a otros es que forma parte de Elegant Themes, una plataforma con más de 570.000 miembros donde puedes no sólo comprar la plantilla Divi, además incluye el maquetador del mismo incluido así como más de 85 plantillas Divi gratis haciendo un sólo pago.
Además aunque yo use más otros y crea que pueden tener cierta ventajas respecto a este, no significa que sea el mejor de los mejores. Es importante que sepas que cada persona tiene una forma de trabajar y existen maquetadores con los que uno se siente más cómodo a la hora de diseñar.
Divi es muy personalizable, es rápido y tiene cientos de miles de miembros a los que le encanta esta Plantilla-maquetador. Con esto ya ves el potencial que tiene.
Aunque yo use Divi puntualmente ya que mi principal herramienta es Generatepress + Elementor, no soy un experto en él, por eso he traído al invitado número 22 . Se trata de Jorge Baffa y el va a explicarte paso a paso a través de este enorme Tutorial todas las ventajas que tiene crear una página web con Divi Builder.
Te dejo con él
Hola estimado lector de Tu Web de Cero. Es un gran placer para mí tener la oportunidad de escribir en este gran blog.
Si quieres vivir de internet ¡Suscríbete!
¿No quieres?, no lo hagas
Y vengo nada menos que a hablarte de un tema para WordPress y de un page builder que, en realidad, son la misma cosa.
Se trata de Divi, la plantilla para WordPress desarrollada por Elegant Themes que incorpora un constructor visual de páginas y entradas.
DIVI=Plantilla+Page Builder (2 en 1)
Divi se ha convertido en uno de los page builder más populares de WordPress en los últimos años. Y ésto a pesar de no contar con una versión gratuita en el repositorio de WordPress, como hacen otros page builders de este tipo, ni ser el más barato.
En parte por eso se me ocurrió proponerle a José esta guía. Para ofrecerte una muestra de cómo funciona el Theme Divi y así puedas tomar la decisión de adoptarlo para tu próxima web o bien para rediseñar la actual.
Así que vamos a ver cómo se crea una página con la plantilla Divi.
Si quieres ver como se crear una web con Divi en 8 minutos aquí tienes un video para que veas todo su potencial
Si necesitas más información sobre este gran page builder ¡sigue leyendo!
Ojo, si no has comprado todavía el hosting no compres Divi todavía ya que Webempresa regala Divi Gratis si adquieres alguno de sus planes. Además te regala el dominio
Haz clic en el Banner y escoge plan (Además puedes meter el código tuwebdecero25 y te harán un 25% de descuento :))
Ahora sí, te cuento como crear una página web en WordPress con Divi
Crear la página en WordPress con Divi
Para comenzar a diseñar una página con Divi lo primero que hay que hacer es crear una nueva página en WordPress de la forma tradicional, desde la opción Páginas > Añadir nueva.
Una vez que estás en el editor de la nueva página vas a ver dos botones que te permiten elegir si diseñar la página con Divi o con el editor predeterminado, Gutenberg.
Antes de ir al botón Usar el constructor Divi te recomiendo ponerle un título a la página. Cuando elegimos activar Divi, la página se guarda automáticamente como borrador y nos redirige al constructor.
Eligiendo como comenzar a hacer la web
Al iniciar el constructor Divi para una página nueva lo primero que tenemos que decidir es de qué forma queremos comenzar a crear la página.
Tenemos tres maneras de comenzar a crear una página con Divi:
- Construir desde cero.
- Elegir un diseño predefinido.
- Clonar una página existente.
1. Construir desde cero
Esta opción abre el editor Divi en una página completamente vacía o en blanco para que comencemos a crear literalmente desde cero.
No te recomiendo elegir esta opción si tienes poca experiencia con Divi y quieres tener tu página lista en poco tiempo.
La opción construir desde cero es útil para diseñadores profesionales que dominan perfectamente Divi y quieren total libertad para realizar su diseño.
También puede ser útil si necesitamos crear una página muy básica. Por ejemplo una página de agradecimiento con alguna foto y un bloque texto solamente.
2. Elegir un diseño predefinido
Esta opción es la recomendada por Jorge para quien empieza con Divi y quiere un diseño profesionalEsta es la opción ideal para quien recién empieza con Divi y quiere tener una página bien lograda, con aspecto profesional, en relativamente poco tiempo.
Consiste en importar un diseño desde la biblioteca de layouts de Divi y luego hacerle los cambios que sean necesarios.
Al momento de escribir esta guía el repositorio de Divi cuenta con 814 diseños predefinidos o layouts que podemos importar libremente y sin ningún costo adicional.
3. Clonar una página existente
Y la tercera opción ya debes imaginarte de qué se trata. Es similar a la anterior solo que en este caso importamos el diseño de una página nuestra que hayamos creado previamente.
Es muy útil cuando necesitamos hacer una página que sea similar a otra ya existente. Por ejemplo para crear una nueva versión de la landing page, de la página de suscripción o de la home.
Cómo funciona Divi
Vamos con el Tutorial sobre Divi, ¡te va a encantar!
Recién te decía que la forma más rápida de comenzar con Divi es mediante la elección de un diseño predefinido.
Pero para poder adaptar un diseño a tu propio proyecto vas a necesitar saber cómo funciona Divi, y la mejor forma de mostrártelo es comenzando una página desde cero.
Cuando elegimos la opción Construir desde Cero se activa el constructor Divi en una página completamente vacía. En esta página ya tenemos cargada la primera Sección, a la cual debemos añadirle contenido.
La manera de organizar el contenido en el constructor Divi es a través de 3 niveles de elementos:
- Las secciones.
- Las filas.
- Los módulos.
En cualquier página hecha con Divi tendrás unas primeras divisiones o agrupamientos de contenidos llamados secciones.
Dentro de estas secciones podrás tener varias filas. Hay filas de una sola columna y de hasta 6 columnas. E incluso podemos elegir filas con columnas de ancho diferente.
Luego, dentro de las filas ubicarás módulos. Los módulos son el contenido de la página propiamente dicho. Hay módulos de Texto, de Imagen, de Vídeo, de Botón, y muchísimos elementos más. E incluso hay módulos complejos que agrupan varios de estos elementos en uno solo.
Insertar una Fila en Divi
En la siguiente imagen puedes ver cómo podemos insertar una fila en la primera sección de nuestra página, seleccionando la cantidad y diseño de columnas que queramos.
En este ejemplo voy a insertar una fila de 2 columnas iguales.
Insertar Módulos con Divi
Ahora que ya tenemos insertada la fila de 2 columnas puedes ver que en cada columna hay un signo + de color negro. Es el que despliega la biblioteca de módulos de Divi y te permite insertarlos en la página.
Por ejemplo voy a insertar una fotografía utilizando el módulo de imagen en la columna de la izquierda.
Luego de elegir el módulo que queremos insertar en la página se abrirá una ventana modal que corresponde a los ajustes del módulo y desde la cual vamos a configurarlo.
En absolutamente todos los elementos de Divi los ajustes están repartidos en tres pestañas:
- Contenido: donde definimos qué va a mostrar el módulo.
- Diseño: tenemos las opciones para definir cómo se muestra.
- Avanzado: encontramos algunas opciones adicionales para usuarios avanzados.
El constructor Divi
Ahora que ya tenemos contenido en la página podemos apreciar más claro los 3 niveles de organización del constructor Divi.
Divi cuenta con 3 niveles para organizarte a la hora de trabajar
- La barra de herramientas azul, que vemos arriba a la izquierda, corresponde a la primera (y única) sección de la página.
- La barra de herramientas verde corresponde a la fila de 2 columnas.
- Y la barra de herramientas negra a cada uno de los módulos de contenido que tuviéramos.
Los botones de estas barras de herramientas nos permiten tanto acceder a los ajustes del elemento como copiarlo, borrarlo y desplazarlo a otra ubicación.
También puedes ver más a la derecha el signo + para insertar módulos en la otra columna.
Y por último en la parte inferior están los controles generales del editor organizados en tres grupos:
- Modos de visualización.
- Ajustes de la página.
- Guardar y publicar.
Estructura de la página
En el primer grupo de botones hay uno que nos permite cambiar del editor visual a la vista de esquema o estructura de la página.
En esta vista vemos los mismos elementos que hay en la página pero representados por cajas. Aquí se aprecia mejor la organización de los elementos en secciones, filas y módulos.
Esta vista de esquema es bastante útil a veces ya que, en páginas con mucho contenido, puede resultar difícil arrastrar un módulo de un lugar a otro, por ejemplo.
Ahora que ya tienes claro cómo funciona Divi vamos a ponernos a construir una página completa.
La Biblioteca de Diseños de Divi
Excepto que seas un experto diseñador web, la mejor manera de tener lista en relativamente poco tiempo una página con aspecto profesional es recurriendo a los diseños o layouts predefinidos de Divi.
Esta opción abre una biblioteca de diseños creados por diseñadores profesionales que podrás importar y adaptar a tu proyecto sin ningún costo.
Al momento de escribir esta guía el repositorio de Divi cuenta con 814 layouts gratuitos y también existe la posibilidad de comprar e importar layouts para Divi creados por otros desarrolladores.
Podemos establecer una similitud entre los layouts prediseñados para Divi y los temas para WordPress. La única diferencia es que en Divi los diseños se aplican solo a la página que estamos creando, no al sitio completo.
La biblioteca de layouts de Divi está clasificada temáticamente para ayudarte a encontrar más rápido un diseño que tenga relación con tu proyecto, y además los diseños están agrupados en packs.
Cada pack de layouts corresponde a un sitio web. Cuando abrimos un pack de layouts encontramos dentro los layout para la home, página de contacto, acerca de, landing page, etc.
Ahora estamos dentro de un pack de layouts para un sitio de moda.
Si seleccionamos alguno de los diseños de la derecha podemos verlo rápidamente haciendo scroll en la vista previa de la izquierda, e incluso acceder a una demo completa que se abrirá en una pestaña aparte.
Y si queremos probarlo nosotros mismos hacemos clic en Usar este layout para que se importe y cargue en la página.
A diferencia de cuando instalamos un tema en WordPress (que en la demo se ve muy bonito pero después no sabemos por dónde empezar) los layouts de Divi se instalan completos, con todas las imágenes y textos genéricos, tal cual lo vemos en la demo.
Esto significa que, con solo cambiar los textos y titulares predefinidos, podrías tener tu página lista para publicar.
Creando tu página con Divi
Ahora que ya tenemos cargado en la página un layout predefinido voy a mostrarte cómo editarlo para adaptarlo a los requerimientos de tu propio proyecto.
Quitar el encabezado y pie de página
Lo primero que probablemente te llame la atención es que la página aún conserva la barra de navegación y el pie de página estandar del tema Divi.
Ésto puede ser útil en la mayoría de las páginas y entradas de blog pero si estás diseñando una landing page seguro querrás quitarlos y hacer que el diseño que has importado ocupe toda la página.
Para conseguir quitar el encabezado y el pie de página necesitas salir del constructor Divi e ir a Editar página.
Ahí tienes que buscar los Atributos de página y cambiar la plantilla (theme) por defecto a Blank Page.
Luego de guardar los cambios vuelves al editor Divi para comprobar que ya desapareció el encabezado y que el layout elegido ahora ocupa toda la página.
Editar los textos de un layout
Si solo necesitas modificar un texto puedes hacerlo posicionando el cursor y escribiendo directamente sobre el layout como si fuera un editor de texto. Así de simple.
Pero si además quieres modificar el color, márgenes y cualquier otro formato vas a tener que ingresar a los ajustes del módulo.
Editar los formatos de cada elemento
Cuando estás en el constructor Divi, a medida que vas pasando por arriba de los distintos elementos, aparecen sus barras de herramientas respectivas.
Con el botón de la rueda dentada puedes acceder a los ajustes de cualquier módulo.
Se abrirá una ventana modal que contiene todas las opciones de ajustes organizadas en tres pestañas. Esto ya lo vimos antes cuando explicaba cómo funciona el constructor Divi.
Con estos ajustes vas a poder modificar todo lo que necesites, desde tamaños, colores y márgenes, hasta tipo y tamaño de fuente, estilos, pasando por formato y estilo de los bordes, redondeo de esquinas, sombras, animaciones, etc.
Solo debes ir navegando por las distintas opciones de cada módulo para encontrar lo que necesitas corregir.
Si quieres conocer en detalle todos los ajustes posibles para cada uno de los 37 módulos de Divi te recomiendo leer este artículo.
Borrar elementos de un layout de Divi
En un diseño predefinido siempre puede haber elementos que no necesites.
Para borrar cualquier elemento del constructor Divi debes simplemente hacer clic en el ícono de la papelera que vas a encontrar en todas las barras de herramientas.
Puedes borrar una sección completa, una fila, o bien solo un módulo según te parezca.
Duplicar o copiar elementos
Cuando estás adaptando un layout es también muy común necesitar crear nuevos elementos. Y en muchos casos esos elementos serán similares a otros que ya están en la página. Por ejemplo en un catálogo de productos.
Con Divi es muy fácil duplicar elementos para luego cambiarlos. Lo haces con el ícono correspondiente que se encuentra en la barra de herramientas de cada módulo, fila o sección, y se generará una copia idéntica del elemento justo debajo del actual.
Otros ejemplos de cómo usar Divi
Una ventaja secundaria de los layouts predefinidos es que analizando cómo están hechos puedes aprender a crear muchas cosas con Divi.
A veces vemos un determinado diseño y nos parece complicado de hacer pero cuando lo analizamos nos damos cuenta de que todo se puede con los ajustes estándares de Divi.
Por ejemplo, lo siguiente está hecho utilizando una fila de 2 columnas iguales.
En la columna izquierda insertamos solo un módulo de imagen y en la columna de la derecha hay 4 módulos de contenido: un texto, un separador, otro texto y un botón.
Si bien Divi cuenta con un módulo de galería que nos permite mostrar automáticamente imágenes seleccionadas desde la biblioteca de medios, el siguiente catálogo básico está hecho de una forma más artesanal.
Son dos filas. La primera fila es de 4 columnas y cada columna contiene un módulo de imagen y un módulo de texto para la descripción.
Mientras que la segunda fila es de ancho completo y solo contiene un módulo de botón, ver más.
Hacerlo de esta forma nos da más libertad y precisión en los ajustes que con el módulo de galería. Siempre y cuando se trate de pocas las imágenes a mostrar.
La sección de novedades de una home también es muy fácil de hacer. Tenemos en total 4 módulos en una sola fila de ancho completo.
Primero un texto para el título, luego un separador y después otro módulo de texto para la introducción. Y por último insertamos el módulo de blog, que muestra las últimas entradas de las categorías que elijamos.
Y la sección para suscribirse tampoco es algo difícil de hacer. Solo insertamos una fila de 2 columnas.
En la primera columna ponemos el módulo de suscripción de Divi, que configuraremos para que se conecte con nuestro gestor de email marketing preferido.
Y en la segunda un módulo de imagen simple como ya vimos antes.
Conclusión
Podríamos pasarnos horas hablando de cada uno de los 37 módulos que incluye el constructor Divi al día de hoy y de cada uno de sus ajustes.
Pero, como te decía al principio, la intención de esta guía es que puedas decidir si Divi es una buena opción para desarrollar tu próximo sitio web o rediseñar el actual. Y creo que con lo que vimos ya tendrás una idea clara sobre si darle una oportunidad.
Si te decides a comprar Divi estás comprando una plantilla + un Page Builder de calidad.
Si te ha quedado alguna duda o si quieres contar tu experiencia con Divi te espero en los comentarios.
¡Compártelo y déjame un comentario!
