La compañía Elegant Themes dispone de una de las mejores plantillas del mercado, en cuanto a personalización se refiere, es su buque insignia y se llama Divi. Esta plantilla entra dentro del paquete al realizar la suscripción para adquirir los más de 80 temas de WordPress que tienen. Pero la plantilla EXTRA no se ha quedado atrás y ha incluido la característica «Divi Builder» para crear páginas y entradas con el Constructor Divi.

Divi Builder – Cómo construir una web con módulos

Puede que este sea el aspecto más importante de esta plantilla, la posibilidad de poder crear páginas y entradas con el Constructor Divi, hace que no tengamos apenas límites a la hora de diseñar cualquier página web. He de decir que el «Divi builder» o Constructor Divi, es también un plugin que puede adquirirse con el paquete de Elegant Themes e instalarlo en cualquier plantilla de WordPress.

Conceptos básicos del Constructor Divi

Para crear páginas y entradas con el Constructor Divi, sólo tenemos que arrastrar y mover a la posición que nos guste cada uno de los elementos que tenemos o hemos configurado previamente.

Mi recomendación es conocer que tipos de módulos existen y componer nuestro diseño en un papel antes de llevarlo a la práctica. De esta forma sabremos cuantas secciones, filas y módulos necesitamos para diseñar nuestra web.

• Sección: Es la parte que limita nuestro diseño, puede tener un ancho determinado o llenar la página de lado a lado (fullwidth). En ella se insertan las filas que contendrán los módulos.
• Fila: Sirve para especificar la configuración de los módulos en columnas, cada fila que creemos puede tener una configuración diferente de entre 1 y 4 columnas. Su anchura está limitada por la que tenga la sección.
• Módulo: Es la parte que contiene el elemento que queremos integrar en la web, cada módulo puede adaptarse a cualquier anchura de columna y podemos insertar un número ilimitado de ellos.

Cómo crear páginas y entradas con el Constructor Divi

Para iniciar el constructor Divi para crear páginas o entradas, debemos crear una página o entrada nueva y pulsar sobre el botón «Usar el constructor Divi«. Al instante se cambiará el editor clásico de WordPress por la pantalla de inicio del constructor. Si la página ya tenía contenido, se integrará todo en un módulo de texto. Si deseamos separarlo en diferentes zonas, tenemos que hacerlo manualmente.

Opciones generales del panel

• Guardar en biblioteca: Podemos guardar una copia a modo de plantilla de nuestro diseño para su reutilización en una posterior maquetación o en otra web realizada con el Constructor Divi.
• Cargar de biblioteca: Desde aquí podemos acceder a los diseños guardados para poder volver a utilizarlos. También podemos cargar plantillas de diseños, de la biblioteca Divi, que vienen pre-hechos y que son una buena opción como punto de partida para realizar nuestra personalización.
• Vaciar diseño: Si en cualquier momento no estamos convencidos del diseño que estamos realizando, podemos eliminarlo y empezar de cero.
• Hacer y deshacer: Disponemos de tres botones para rehacer y deshacer acciones durante la construcción del sitio, siempre que no demos a actualizar página para que no desaparezca el historial de los movimientos que hemos hecho.
• Importar/exportar: Nos permite guardar el diseño creado en un archivo para poder llevarlo a otra web o cargar un archivo que tengamos para utilizar una plantilla ya hecha.
• Opciones generales: Podemos dar unos valores preestablecidos a la construcción de la página o entrada, como cuál será el color oscuro o claro del texto, la distancia entre columnas, añadir especificaciones de estilos concretas…
• Plegar y desplegar: Muestra u oculta el editor del constructor Divi para tener más visibilidad sobre las otras opciones de WordPress.

Configuración de las secciones

Cada vez que añadamos una sección debemos configurarla acorde con nuestras preferencias y seleccionar las opciones que nos interesen. Tenemos que pinchar en las tres rayas para desplegar el panel de las opciones.

• Imagen de fondo: Podemos elegir una imagen que aparezca de fondo para todo el contenido que tenga esta sección. Podemos utilizar una imagen diferente para cada sección. Para eliminarla sólo tenemos que borrar la URL.
• Color del fondo transparente: Al activar esta opción no podremos elegir un color para esta sección, pero permitirá ver la imagen de fondo general de la web o el color que tengamos establecido.
• Color de fondo: Aquí podemos elegir un color de fondo o dejar el que viene por defecto si no elegimos uno.
• Vídeos: Los vídeos deberían subirse en los dos formatos para asegurar una completa compatibilidad con todos los navegadores. En los dispositivos móviles, los vídeos de fondo están deshabilitados, por lo que es aconsejable subir una imagen que sustituya a estos vídeos en los dispositivos mencionados para conseguir unos mejores resultados.
• Vídeo .MP4 de fondo: Versión en formato .mp4 del vídeo a mostrar.
• Vídeo .WEBM de fondo: Versión en formato .webm del vídeo a mostrar.
• Anchura de vídeo de fondo: Anchura exacta del vídeo en píxeles.
• Altura de vídeo de fondo: Altura exacta del vídeo en píxeles.
• Pausar vídeo: Permite que otros reproductores pausen el vídeo cuando comiencen a reproducir.
• Mostrar sombra interna: Puedes elegir si quieres que la sección disponga de una sombra interna o no.
• Usar efecto de paralaje: Cuando esté habilitado, la imagen de fondo se quedará fija cuando te desplaces.
• Relleno personalizado: Puedes ajustar el relleno con tus medidas personalizadas o dejar las medidas por defecto si lo dejas en blanco. El relleno es la distancia que hay entre el borde de la sección y la fila o filas que contiene. Puedes establecer diferentes rellenos para cada dispositivo.
• Desactivar el Teléfono, Tableta o Escritorio: Desactiva la sección en los dispositivos que seleccionemos.
• Etiqueta de administración: Es el nombre que podemos darle a la sección para identificarla sin necesidad de editarla.
• CSS personalizado: Tienes la opción de modificar o crear tu propia hoja de estilos para cada sección.

Añadir y definir las filas

Las filas nos van a permitir tener diferentes zonas dentro de las secciones, pudiendo establecer distintas anchuras de columnas para utilizar con los módulos.

Inserción de los módulos

Los módulos se añaden pinchando en «Insertar módulos«. Hay que tener en cuenta que cada módulo tiene un propósito diferente y se configuran de manera distinta. Según nuestras necesidades, tendremos que elegir cuales tenemos que usar. Una vez insertados los módulos, los podemos mover y arrastrar si no nos gusta donde los hemos situado.

Configuraciones especiales del Constructor Divi

Después de aprender a manejar el Constructor Divi, ahora podemos hacer referencia a unas configuraciones que pueden resultar útiles en determinados momentos.

SECCIÓN DE ANCHURA COMPLETA

Este tipo de sección no contiene filas, por lo que no podemos dividirlo en columnas. Está limitado a un número reducido de módulos que pueden ser usados con una anchura total de la página. La sección cambiará a color morado para indicarnos que tiene una anchura total.

SECCIÓN ESPECIAL

Esta sección permite crear unas zonas verticales a modo de barra lateral que podemos configurar como tales o utilizarlas para añadir otro tipo de módulos. Esto nos permite trabajar a modo de un WordPress clásico, pero pudiendo elegir el tipo de barra lateral que nos guste. En este caso, el color que identifica la sección es el rojo.

Editor visual para crear páginas y entradas con el Constructor Divi

Desde la versión Divi 3.0 y Extra 2.0, podemos realizar las cambio y modificaciones de manera visual y de manera gráfica por medio de la inclusión del «Constructor visual«. Este modo de trabajar nos permite ver los cambios en tiempo real en la parte frontal de la web, lo que los usuarios ven.

Tan solo hay que ir a ver la página que estamos realizando con el Constructor Divi y pulsar, en la barra del menú superior «Habilitar Constructor visual«. Según pasemos el ratón por los diferentes elementos, podremos editarlos para realizar las modificaciones. Los menús y las opciones son las mismas que podíamos ver en el editor de las páginas, solo que ahora vemos lo que hacemos.

Cuando terminemos de editar, volemos al menú superior y pinchamos en «Salir del Constructor visual» para aceptar y guardar los cambios.

Puedes pinchar a aquí para ver todas las entradas relacionadas con esta plantilla.

Suscríbete para no perderte ningún artículo nuevo, te aviso por email

¿Qué te parece esta manera de crear páginas webs? Comenta tu experiencia y trabaja como un profesional.