¿Cómo funciona Divi?

Te muestro en pocos minutos cómo funciona el constructor Divi para crear una página de WordPress.
  1. Inicio
  2. Divi
  3. Guías Divi
  4. ¿Cómo funciona Divi?

WordPress es Mejor con Divi

Para explicarte de forma sencilla cómo usar Divi se me ocurre empezar por el momento en el que vas a crear una nueva página para tu web.

Cómo hacer una página con Divi desde cero

En el video te muestro paso a paso cómo crear una página con Divi desde el principio.

En el momento de crear una nueva página con WordPress tenemos la posibilidad de elegir una plantilla de página entre dos opciones:

  • Plantilla predeterminada. Es un diseño que conserva la cabecera y el pie de página de Divi. Esta plantilla te permite activar el constructor Divi para editar todo lo que va entre medio de ambos, y por todo el ancho de la página.
  • Blank page. Al activar esta plantilla de página en blanco desaparecen por completo la cabecera y el pie de página de Divi, y te queda toda la página vacía para diseñarla con el constructor visual.

Plantillas de pagina de Divi

Selector para elegir la plantilla de página que necesitamos y botón para activar el constructor Divi.

Una vez elegida la plantilla de página tenemos que Guardar o Publicar la página para después hacer clic en el botón Usar el constructor Divi.

El constructor Divi

Es importante saber que Divi cuenta con dos constructores que podemos utilizar en paralelo:

  • Constructor de esquema Divi.
  • Constructor visual Divi.

El constructor visual es el mejor y el que más vas a usar, sin ninguna duda. Pero, para empezar a entender cómo funciona Divi, me parece necesario conocer brevemente el primero.

Una vez activado el constructor de esquema Divi vas a ver que el editor de la página se transforma en algo así:

Plantilla Divi para WordPress

Es un esquema básico en el cual vemos la página diagramada en una sección (caja azul) y una fila (caja verde). Dentro de la fila tenemos que comenzar a añadir columnas y módulos.

Si hacemos clic en Insertar columnas Divi nos pregunta que esquema de columnas queremos para esta fila en particular.

Constructor Divi

Supongamos que elegimos insertar 2 columnas en esta fila. En ese caso ahora nuestro esquema quedaría así:

Insertar módulos en la plantilla Divi

Lo que sigue es insertar módulos en estas columnas. Los módulos son las herramientas de diseño propiamente dichas, y la plantilla Divi para WordPress te ofrece una gran variedad.

Módulos de la plantilla Divi para WordPress

Si elegimos insertar por ejemplo un módulo de Acordeón se abre una nueva ventana donde podemos cargar el contenido y configurar los ajustes de este módulo en particular.

Ajustes de módulos del constructor Divi para WordPress

Como ya te estarás imaginando, esta ventana será diferente según el tipo de módulo a insertar. Por eso la vamos a estudiar bien en detalle cuando hablemos de cada uno de los módulos de Divi.

Lo importante es que recuerdes que siempre, en todos los módulos, vas a tener tres pestañas:

  • Contenido: para cargar los títulos, textos, imágenes y demás elementos que correspondan a este módulo.
  • Diseño: para ajustar tipografías, tamaños, colores, etc.
  • Avanzado: para otros ajustes como clase CSS y CSS personalizado.

Y así quedaría ahora nuestro esquema:

Insertando más módulos con Divi

Como se puede ver, podemos seguir insertando módulosfilas y secciones a la página, y repetir el proceso cuantas veces sea necesario.

Por último, cada caja de sección, fila y módulos contiene unos botones para poder seguir haciendo ajustes en los mismos cuantas veces necesites.

Barra de herramientas del constructor Divi

En concreto estos botones te permiten:

  • Acceder nuevamente a los ajustes del elemento.
  • Duplicar el elemento.
  • Borrar el elemento.
  • Cambiar la distribución de columnas (solo en filas).

Las Secciones del constructor Divi

Antes vimos que, al insertar un fila, podíamos elegir en cuántas columnas estaría dividida. En el caso de las secciones también tenemos 3 tipos de secciones diferentes:

  • Sección estándar: es la sección normal, en la que podemos insertar filas, columnas y módulos como ya vimos.
  • Sección de anchura completa: es una sección en la que no se insertan filas y columnas sino solo algunos tipos de módulos especiales, que cubren todo el ancho de la página.
  • Sección especial: es útil cuando necesitamos un esquema de filas y columnas más complejo.

Sección especial Divi Elegant Themes

Opciones de layout de sección especial que ofrece Divi.

Cargar esquemas prediseñados

Una de las herramientas más potentes de Divi es la posibilidad de guardar diseños para reutilizarlos más tarde en otras páginas. Incluso podemos exportar el diseño de una página a un archivo para utilizarlo luego en otros sitios web.

Si vamos a la opción Cargar diseño, que ya habrás visto en la parte superior del constructor Divi, accedemos a una ventana con 3 posibilidades.

Layouts prediseñados de Divi theme

Divi te da la opción de cargar un diseño desde:

  • Catálogo de diseños que ya vienen hechos con Divi.
  • Tus propios diseños que hayas guardado en la biblioteca.
  • Tus anteriores páginas de este mismo sitio web.

De lejos la primera opción es la mejor, y la más útil de todas si recién estás empezando con tu página. Así quedaría nuestro esquema con un layout prediseñado.

Layout prediseñado plantilla Divi para WordPress

El esquema del constructor aumenta en complejidad con más filas y módulos.

Como ya estarás notando, si bien el constructor Divi es muy potente, a medida que le añadimos más secciones y más filas al esquema, se nos va haciendo un poco confuso trabajar.

Porque visualmente son todas cajas muy similares donde no vemos el aspecto final de la página y se nos dificulta tener que encontrar un módulo en particular para corregirlo.

Y encima estamos obligados a ir y venir permanentemente entre el esquema y la vista previa, para saber cómo va quedando.

El constructor visual Divi

El constructor visual Divi resuelve estos dos problemas ya que nos permite trabajar directamente sobre una vista final de la página: vamos viendo los cambios que hacemos en tiempo real, tal cual van a quedar.

De esta forma evitamos tener que pasar del constructor a la vista previa para ver el resultado final, y editamos los elementos de la página directamente.

Divi constructor visual

Una vez activado el constructor visual, Divi nos muestra una vista previa del layout con todo su contenido donde, a medida que nos desplazamos por los distintos elementos, van apareciendo las herramientas que nos permiten editarlos.

Usando el constructor visual de Divi

En este caso el color violeta indica que se trata de una sección de ancho completo que a su vez ya tiene dentro un módulo específico con contenido.

La barra de herramientas violeta nos deja acceder a los ajustes de la sección mientras que la gris a los ajustes del módulo.

También en la parte inferior hay un círculo con 3 puntos. Si hacemos clic ahí se despliegan herramientas generales del editor para toda la página.

Plantilla Divi configuración de layout

Las herramientas de la izquierda nos permiten emular la visualización en diferentes dispositivos, pasar a una vista de esquema y hacer zoom.

Las herramientas centrales son para añadir un nuevo layout o guardar el actual en la biblioteca de Divi, eliminarlo, exportarlo y hacer algunos ajustes generales del editor.

Por último, los dos botones de la derecha son para guardar o publicar los cambios.

Si activamos los ajustes del módulo (barra de herramientas gris) se abre una ventana modal donde tenemos las misma tres pestañas que ya vimos en el editor Divi básico: contenidodiseño y avanzado.

Configuración del módulo de Divi

Y si hacemos clic en los lápices que aparecen junto a cada elemento nos lleva a los ajustes propios de cada uno de ellos. Incluso, en los módulos de texto de Divi, podemos hacer clic y empezar a escribir directamente en esta vista previa.

Si me desplazo hacia abajo en el mismo layout encuentro ahora una sección que contiene una fila de dos columnas (similar a las que ya vimos).

Plantilla Divi para WordPress

En la parte superior tenemos la barra de herramientas azul (para activar los ajustes de la sección) y si nos acercamos a los bordes podemos ampliar o reducir los márgenes simplemente arrastrando.

El signo más de la parte inferior nos permite añadir una nueva sección.

Si nos aproximamos a la fila se visualizan los ajustes de ésta (en color verde), de la misma forma que con la sección.

Usando Divi Elegant Themes

Y lo mismo si nos posicionamos arriba de alguno de los módulos.

Cómo funciona Divi Elegant Themes

Estarás de acuerdo en que este editor visual Divi es mucho más práctico que el otro que vimos antes.

En otras guías analizamos en detalle cada uno de los módulos del constructor Divi, pero ya estás en condiciones de explorarlos por tu cuenta.

Te recomiendo: Los Módulos de Divi

Jorge B.

Jorge B.

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Curso Gratis de WordPress con Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *