Guía de inicio con el Divi Builder

El Divi Builder es un potente constructor visual sin necesidad de código que te permite diseñar páginas web de una manera intuitiva y sencilla. Con Divi, puedes construir sitios web impresionantes desde cero sin necesidad de escribir una sola línea de código.

Cómo cargar el Divi Visual Builder

Una vez que tengas Divi instalado en tu sitio web, podrás acceder al Constructor Visual en cada página. Para hacerlo, simplemente navega hasta cualquier página y haz clic en “Activar Constructor Visual” en la barra de administración superior.

Crear una nueva página y activar el Divi Visual Builder

Para empezar desde cero en una página en blanco, ve al panel de control de WordPress y haz clic en “Páginas” > “Añadir nueva”. Dale un título a tu página y luego haz clic en “Usar Divi Builder”. Esto cargará la página en el frente de tu sitio web con el Divi Visual Builder activado.

Al recargar la página, verás tres opciones que aparecen: Construir desde cero, Elegir un diseño predefinido y Clonar una página existente.

Construir desde cero

Esta opción carga el Divi Builder con un diseño de página en blanco. Elige esta opción si quieres comenzar el diseño de tu página desde cero.

Elegir un diseño predefinido

Si quieres comenzar tu diseño con uno de los diseños predefinidos o paquetes de diseños predefinidos de Divi, elige esta opción.

Clonar una página existente

También puedes comenzar tu diseño clonando una página existente en tu sitio web. Selecciona esta opción si deseas cargar un diseño de página desde una página existente en tu sitio web como punto de partida.

Conceptos básicos del Divi Visual Builder

Antes de empezar a diseñar, es importante entender los conceptos básicos del Divi Builder.

Secciones

Todo lo que construyas comienza con una sección. Las secciones son los bloques más grandes en el Divi Builder y se utilizan para agrupar el contenido en áreas visualmente distinguibles.

Filas

Las filas se encuentran dentro de las secciones y pueden contener una variedad de disposiciones de columnas para estructurar tu contenido.

Columnas

Las columnas se encuentran dentro de las filas y crean una estructura básica en caja para tu contenido.

Módulos

Los módulos son los bloques de contenido del Divi Builder. Puedes agregar módulos como formularios de contacto, imágenes, texto y deslizadores para personalizar tu página.

A medida que ajustes la configuración y apliques estilos en el Divi Builder, es importante tener en cuenta la jerarquía de los elementos principales y secundarios. Las secciones contienen filas, las filas contienen columnas y las columnas contienen módulos. Cada elemento secundario está anidado dentro de su elemento principal y se ve afectado por los estilos de diseño que se aplican al elemento principal.

Ventana emergente de ajustes del elemento

Cuando abres la configuración de un elemento en el Divi Builder, aparecerá una ventana emergente con todas las opciones de contenido, diseño y ajustes avanzados disponibles para ese elemento. En la ventana emergente, puedes ajustar el nombre del elemento, guardar presets, ajustar configuraciones adicionales y más.

La ventana emergente también incluye una barra de búsqueda y pestañas para navegar entre diferentes configuraciones y ajustes.

Recorrido por el Divi Visual Builder

En la parte inferior del Divi Toolbar, encontrarás varios iconos que brindan acceso a diferentes configuraciones y herramientas del Divi Visual Builder. Estos iconos te permiten cargar elementos desde la Biblioteca de Divi, acceder a los ajustes de la página, ver el historial de revisiones y más.

Las capacidades del Divi Builder

El Divi Builder te brinda un control completo sobre el diseño de tu sitio web. Puedes personalizar cada parte de tu sitio web, desde los encabezados hasta los pies de página, sin necesidad de escribir código.

Una de las características más destacadas del Divi Builder es su capacidad de edición responsive, lo que te permite crear sitios web que se vean increíbles en todos los dispositivos. Además, puedes copiar y pegar estilos, utilizar estilos extensibles, aprovechar los atajos de teclado y mucho más.

Con el Divi Builder, tienes la flexibilidad y la libertad creativa para diseñar sitios web impresionantes y únicos.

Mejores prácticas y consejos para el Divi Builder

Para aprovechar al máximo el Divi Builder, aquí tienes algunos consejos y trucos:

• Alternar entre el Constructor Visual y el modo de alambrado te permite ver tanto el diseño como la estructura de tu página.
• Utiliza la función de zoom para obtener una vista general de tu diseño y asegurarte de que todo se vea bien juntos.
• Construye tu biblioteca de diseños guardando elementos y diseños que puedas reutilizar en futuros proyectos.
• Aprovecha las opciones de copiar y pegar estilos para ahorrar tiempo y mantener la coherencia en tu diseño.
• Utiliza atajos de teclado para acelerar tu flujo de trabajo y realizar acciones rápidamente.

Recuerda que estas son solo algunas recomendaciones y cada diseñador puede tener su propio flujo de trabajo y preferencias. Explora todas las capacidades del Divi Builder y encuentra el enfoque que funcione mejor para ti y tus proyectos.