Opt In Image
APÚNTATE
Y DESCARGA GRATIS LA GUÍA PARA CREAR UNA PÁGINA WEB PROFESIONAL
  • Recibe también mi Newsletter semanal con lo último del blog

Te puedes dar de baja en cualquier momento. Nada de Spam

El Divi builder es un plugin de Elegant Themes tipo page builder (constructor de páginas) que permite crear y estructurar una página web de una manera muy sencilla e intuitiva, arrastrando y soltando bloques.

Este post pretende ser un pequeño tutorial para aprender a dar los primeros pasos con este WordPress builder.

  • Divi builder plugin – Page builder WordPress: este es un plugin que podremos utilizar en cualquier plantilla WordPress, añadiendo a la misma una manera muy flexible e intuitiva de crear páginas.
  • Plantilla Divi: La plantilla Divi de Elegant Themes incluye por defecto el divi builder como herramienta de construcción y composición visual de páginas. Aunque como ya he comentado podemos usar el Divi builder plugin para incorporar dicha herramienta de composición a otra plantilla para WordPress.

 

Para poder utilizar el divi builder plugin y la plantilla divi deberás contratar el plan developer. Si sólo quieres utilizar la plantilla divi pero no los plugins de Elegant themes puedes contratar el plan Personal.

 

DESCUENTO DIVI

 

Ahora 20% de descuento

El plan DEVELOPER de Elegant Themes incluye acceso a todas las plantillas y plugins:

  • La Plantilla DIVI
  • 86 plantillas para WordPress
  • El divi builder
  • 5 plugins para WordPress

Si quieres adquirir el plan developer de Elegant Themes con un 20% de descuento, Hazlo a través de este enlace. Con el descuento de 89$ + IVA pasará costarte 70$ + IVA (soy afiliado, gracias).

Ahora a través del siguiente enlace puedes contratar el plan Life time Access con un 10% de descuento. Es decir se te quedaría en 224$ + IVA. El plan Life time Access te da acceso a todas las plantillas y plugins presentes y futuros de por vida.

 

El plugin del Divi Builder ya incluye también una versión visual (Front end) a parte de la tradicional tipo backend.

En este post se habla del page builder de Divi en su versión back end. Pero aquí os dejo un vídeo y un enlace para que veais también un poco como funciona el page builder en su modo visual o front end

 

 

 

 

DIVI 3.0 – Page builder visual

 

curso online wordpress con la plantilla Divi

CURSO ONLINE WORDPRESS + DIVI 3.0

Ir Curso WordPress online + Divi

 

1.- Elementos del divi builder

 

Los diferentes tipos de “ladrillos” que utiliza este WordPress builder a la hora de construir páginas son:

 

A.- Secciones del divi builder:

 

las secciones son los contenedores principales que aporta este pagebuider a la hora de la composición de páginas. Este WordPress page builder incorpora tres tipos de secciones diferentes:

  • Sección estándar: la sección estándar estará compuesta por elementos que no tendrán un ancho completo. Es decir, estará constituida por elementos que no ocuparán el ancho completo de la página.
  • Sección de anchura completa: esta es un tipo de sección que incorpora el divi builder que incorporará elementos de anchura completa. Es decir, elementos que ocuparán el ancho completo de la página.
  • Sección especial: esta es la sección más adecuada para trabajar con diferentes composiciones en columnas, podremos combinar filas y módulos. Este tipo de sección que incorpora este page builder para WordPress es muy utilizada para crear una composición con uno o varios sidebars. Por ejemplo, podríamos utilizar esta sección para crear la típica estructura de un blog con su sidebar lateral.

 

B.- Filas del divi builder

 

las filas de Divi builder Plugin son elementos contenedores más pequeños que las secciones. Podremos incluir tantas filas como queramos dentro de una sección.

 

Estructura del divi builder

Los elementos estructurales del Divi Builder son : Secciones, filas y módulos.

 

Cuando insertemos una fila dentro de una sección debemos elegir su composición o estructura interna. Divi builder incorpora hasta 11 estructuras diferentes para una fila.

 

Estructuras de una sección de este page builder

Diferentes distribuciones de módulos en una sección del page builder

 

C.- Módulos del Divi Builder:

 

los módulos son los elementos finales que componen cada página construida con el divi builder. Los módulos se incluyen dentro de las filas.

Los módulos se adaptan al tamaño del continente. Es decir podemos mover un módulo situado en una determinada sección con una anchura de 1 /2 hacia otra sección con una anchura de 1 /3 y el módulo se adaptará de manera automática a la nueva anchura.

 

¿Quieres aprender a utilizar WordPress?, Curso WordPress en Murcia y Curso WordPress particular

 

Para la sección estándar y especial existen 32 módulos diferentes. Cada módulo tiene una funcionalidad específica. Así existen módulos de texto, de imagen, de slider, de iconos, llamada a la acción, etc.

Para la sección de anchura completa existen 8 módulos diferentes. La sección de anchura completa no utiliza filas, incorpora directamente los módulos dentro de la sección. Todos los módulos que incorpora serán módulos de anchura completa.

 

 2.- Opciones de diseño del Divi builder plugin (divi Builder layout options)

 

Este page builder para WordPress incluye la posibilidad de guardar cualquier diseño que hayamos creado y reutilizarlo en otra página.

 

opciones de diseño del divi builder plugin (divi builder layout options)

Opciones para guardar diseños con el divi builder

 

Esta gestión la realizaremos a través de estas dos opciones:

 

a.- Guardar en biblioteca: con esta opción podemos guardar cualquier diseño ejecutado con Divi builder. El diseño quedará guardado en la biblioteca del page builder y podrá ser recuperado posteriormente cuando estemos creando otra página.

También existe la posibilidad de exportar diseños para utilizarlos en otros sitios web que utilizan este mismo WordPress builder.

b.- Cargar de biblioteca: con esta opción podemos cargar diseños predefinidos (plantillas que incorpora el pagebuilder) o diseños guardados por nosotros previamente.

c.- Otras opciones: En la parte superior de este divi page builder también tenemos la opción de “vaciar diseño” para eliminar el diseño actual de la página, la opción de “deshacer” y “rehacer” y un botón de historia a través del cual podemos volver a anteriores momentos del proceso de construcción (similar a la herramienta de historia de photoshop).

 

3.- Acciones sobre secciones, filas y módulos del page builder

 

Ya estemos trabajando sobre una sección, una fila o un módulo podremos realizar sobre ellos las mismas acciones:

 

Acciones sobre los elementos de este divi builder plugin

Acciones sobre los elementos de este page builder WordPress

 

  • Configurar: para configurar una sección, fila o módulo debemos pulsar el icono con forma de tres rayas horizontales que aparece sobre el elemento a configurar.
  • Duplicar: para duplicar una sección, fila o módulo debemos pulsar el icono en forma de un rectángulo doble.
  • Eliminar: para eliminar una sección, fila o módulo pulsaremos el botón en forma de “x”.
  • Cambiar estructura: para modificar la estructura de una sección pulsaremos el icono que representa 3 rectángulos.

 

4.- Configuración de secciones

 

Al hacer clic sobre el icono de tres rayas horizontales de una sección entraremos a su panel de administración.

En el panel tenemos 2 pestañas diferentes: una pestaña denominada “Ajustes generales” y otra “CSS Personalizado”. Desde esta última podremos añadir código CSS y desde “Ajustes Generales” podremos personalizar la sección.

Las principales opciones de Personalización que nos ofrecen las secciones son:

  • Imagen de fondo: Divi builder nos permite añadir imágenes de fondo a la sección. Aunque estemos en una “sección estándar” y no en una de “anchura completa” la imagen de fondo ocupará todo el ancho de la pantalla. Lo que no ocupa todo el ancho de pantalla en una sección estándar son los módulos interiores.
  • Color de fondo: con este page builder podemos añadir un color de fondo a la sección. Incluso podemos añadir un efecto “Parallax” a la imagen.
  • Vídeo de fondo: también podremos añadir un vídeo de fondo.
  • Padding (margen interior): también podremos añadir un padding superior y un padding inferior.

 

La sección especial tiene además una pestaña de “Ajustes avanzados de diseño” a través del cual podemos personalizar una imagen de fondo o color de fondo para cada una de las columnas de manera independiente. Así como un padding o margen interior para cada una de las columnas.

 

5.- Configuración de filas

 

Las filas tienen tres pestañas de configuración:

  • Ajustes generales: desde aquí podremos gestionar principalmente el ancho de la fila, el margen interior (padding) superior e inferior.
  • Ajustes avanzados de diseño: desde aquí personalizaremos principalmente el color de fondo o imagen de fondo de cada columna de la fila y el margen interior o padding de cada columna interior de la fila.
  • CSS Personalizado: Añadir CSS Personalizado

 

6.- Configuración de módulos

 

En este page builder WordPress cada módulo tendrá también 3 pestañas de configuración. La pestaña de Ajustes generales será muy específica de cada módulo ya que cada uno tendrá una funcionalidad diferente.

Las opciones de la pestaña de ajustes avanzados de diseño son más comunes para todos los módulos ya que en esta pestaña se configuran opciones de diseño como el tipo de fuente de texto, tamaño de la fuente, formateo de la fuente, padding y margin de los módulos, etc.

Al igual que en los casos anteriores también tendremos una pestaña de CSS Personalizado.

 

7.- Módulos de la sección estándar y especial del divi builder.

 

Sin duda una parte fundamental de este Divi builder plugin son los diferentes tipos de módulos que presenta. Ya que los módulos son los elementos finales que conforman las páginas.

En las páginas de información de Elegant themes se denominan los módulos con su nombre en inglés, por el contrario cuando trabajes con la herramienta te aparecerá los nombres en español, por lo que aquí te voy a poner el nombre en español y en inglés para que no tengas problemas al buscar info en la web oficial de Elegant Themes.

 

Módulos de este WordPress builder

Módulos de la sección estandar del divi builder

 

*Acordeón – Accordion: es un módulo tipo botón desplegable, con la particularidad de que sólo puede haber desplegado un botón. Aquí tienes un ejemplo

 

*Anuncio – Blurbs: con este módulo podemos añadir iconos y texto. Los iconos tienen dos formatos posibles grande y pequeño. En esta página puedes ver varios ejemplos de iconos pequeños

Aquí puedes ver algunos iconos en formato más grande

 

*Audio – Audio player: módulo reproductor de audio al cual podemos añadir un archivo de audio, texto, incluso una imagen. Aquí tienes un ejemplo:

 

*Barra lateral – Sidebar: módulo que presenta divi builder plugin para añadir una sidebar o barra lateral. En este ejemplo tienes 2 barras laterales una a la izquierda y otra a la derecha

 

*Blog – Blog: a través de este módulo podemos añadir un módulo en el que se muestren entradas de blog. El módulo presenta muchas opciones de personalización tanto en diseño como en visualización de metadatos. Con este módulo podemos hacer que sólo se muestren entradas de blog de determinadas categorías.

Aquí puedes ver varios ejemplos

 

*Conmutador – Toggles: este módulo del page builder se corresponde con los típicos botones desplegables. La diferencia con el módulo acordeón es que en el caso del conmutador si puede haber varios botones desplegados de manera simultánea.

Aquí puedes ver un ejemplo

 

*Contador de número – Number counter: Se muestra un número o un porcentaje a través de un conteo desde el cero.

Aquí tienes un ejemplo de dicho módulo

 

*Contadores circulares – Circle counter: al igual que en el contador de número se produce el conteo de un número o porcentaje desde cero, pero con este módulo además se muestra una circunferencia con el porcentaje contado. Mira este ejemplo

 

*Contadores de barra – Bar counters: con este módulo del divi builder se visualiza el conteo de un porcentaje a través de barras horizontales. Aquí tienes un ejemplo de este módulo

 

*Control deslizante de vídeo – Vídeo Slider: módulo que nos ofrece un slider de diferentes vídeos. Aquí tienes un ejemplo

 

*Correo electrónico Optin – Subscribe: formulario de suscripción que puedes conectar con Mailchimp, AWeber o FeedBurner. Aquí puedes ver un ejemplo

 

*Código: módulo para introducir código html directamente

 

*Deslizador – Slider: módulo para crear una slider a través del cual se podrán visualizar varias imágenes.

Aquí tienes varios ejemplos

 

*Formulario de contacto – Contact Form: a través de este módulo del divi builder plugin podrás crear un formulario de contacto estándar con captcha. Aquí tienes varios ejemplos

 

*Galería – Image gallery: a través de este módulo podremos crear una galería de imágenes. La visualización de las imágenes podrá ser a través de slider o visualizador de imágenes. Aquí tienes varios ejemplos

 

*Imagen – Image: módulo para mostrar imágenes. A través de este módulo podremos añadir algún tipo en el modo de aparición de la imagen. Ejemplo

 

*Iniciar sesión – Login Form: con este módulo podremos añadir un bloque de inicio de sesión en el lugar que queramos. Ejemplo

 

*Llamada a la acción – Call to action: módulo que personalmente utilizo mucho. Nos servirá para crear botones de llamada a la acción. Estos botones podrán aparecer aislados o perteneciendo a un bloque. Ejemplo

 

*Mapa – Map: con este módulo del page builder podremos insertar un mapa de google maps. Aquí tienes un ejemplo

 

*Persona – Person: es el típico módulo que se utiliza para mostrar una página de “equipo”. Con este módulo podremos añadir los datos e imagen de una persona (incluso enlaces a sus redes sociales). Aquí tienes un ejemplo del módulo

 

*Pestañas – Tabs: con este módulo del page builder WordPress podemos crear bloques de información con diferentes pestañas. Aquí tienes ejemplos.

 

*Portfolios: con este módulo que incluye el divi builder podemos crea una galería de proyectos o portfolio. A través de este módulo gestionaremos los elementos denominados como proyectos y que son diferentes a las entradas y páginas. Aquí tienes ejemplos

 

*Porfolios filtrable – Filterable portfolio: igual que el anterior pero con la diferencia de que este módulo añade un filtro por categorías de proyectos. Ejemplo

 

*Recomendación – Testimonial: Módulo para incluir recomendaciones de personas que han utilizado nuestros servicios o comprado nuestros productos. Ejemplo

 

*Seguir a medios sociales – Social Follow: módulo para añadir iconos de redes sociales. Ejemplo

 

*Separador – Divider: módulo para crea una línea de división o separación. Ejemplo.

 

*Tablas de precios – Pricing Tables: módulo que incluye este WordPress page builder para añadir una tabla comparativa de productos o servicios. Ejemplo.

 

*Temporizador de cuenta atrás – Countdown timer: con este módulo podemos incorporar un temporizador de cuentas atrás hacia la fecha y hora que designemos. Este tipo de módulos se suelen usar mucho para realizar lanzamientos de productos. Ejemplo

 

*Texto – Text: Uno de los módulos que más utilizarás con este page builder. Incorpora un editor visual de texto a través del cual podremos añadir texto formateado e imágenes. Ejemplo

 

*Tienda – Shop: con este módulo podremos añadir un bloque con productos de la tienda (Woocommerce). Podremos elegir el número de productos, el número de columnas y el método de ordenación de los mismos. Ejemplo

 

*Título de Publicación: sirve para crear una estructura de post o entrada de blog. Aquí tienes un ejemplo

 

*Vídeo: sirve para insertar un vídeo. Ejemplo.

 

8.- Módulos de la sección de anchura completa del divi builder

 

Modulos de la sección de anchura completa del divi builder plugin

Módulos de la sección de anchura completa del contruactor divi

 

*Control deslizante de achura completa: a través de este módulo podremos insertar un slider de anchura completa.

Ejemplo, slider de la página de inicio de esta web

 

*Código de anchura completa: A través de este módulo podremos insertar código html en un módulo de anchura completa.

 

*Imagen de anchura completa: a través de este módulo que nos ofrece este divi builder plugin podremos insertar imágenes de anchura completa. Ejemplo

 

*Mapa de anchura completa: a través de este módulo podremos insertar un mapa de google de anchura completa. Ejemplo

 

*Menú de anchura completa – Fullwidth Menu: con este módulo podremos insertar un menú que ocupe toda la anchura de la web. Ejemplo

 

*Portafolios de anchura completa: con este módulo del pagebuilder podremos insertar portfolios de anchura completa. Aquí tienes un ejemplo al final del todo.

 

*Título de anchura completa – Fullwidth header: módulo para crea un header o encabezamiento de anchura completa. Ejemplo

 

*Título de publicación de anchura completa: módulo para crear una estructura de post o entrada de blog personalizada con anchura completa. Ejemplo

 

Técnico Superior en Desarrollo de Aplicaciones Web y Arquitecto Técnico, Profesor en la Escuela Europea de Negocios de Murcia de WordPress | Woocommerce y Prestashop. Dedicado a crear paginas web y a montar tiendas online. Prefesor WordPress y Prestashop.

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información AQUÍplugin cookies

ACEPTAR
Aviso de cookies