Divi es definitivamente uno de Temas de WordPress más populares hoy en día. Uno de los elementos que constituye la fuerza de este tema es su constructor (Divi Builder), que nos recuerda mucho al de Visual Composer.

Divi Builder viene en dos formas: el estándar "Back-end Builder" y el "Visual Builder". Ambas interfaces le permiten crear exactamente los mismos tipos de sitios web con los mismos contenidos y los mismos parámetros de diseño. La única diferencia es la interfaz. El generador de back-end vive dentro del panel de WordPress y es accesible con todas las demás configuraciones estándar de WordPress.

Se encuentra dentro de la interfaz de usuario de WordPress y reemplaza al editor de publicaciones estándar de WordPress. Es excelente para realizar cambios rápidos mientras está dentro del tablero, pero también está limitado por el tablero y se representa como una representación en bloque de su sitio web. Este tutorial se centrará únicamente en el constructor visual.

Descargar DIVI WordPress Theme

El nuevo Visual Builder, por otro lado, le permite crear sus páginas en la parte frontal de su sitio web. Es una experiencia increíble y permite un diseño mucho más rápido. Cuando agrega contenido o ajusta la configuración de diseño dentro del generador visual, sus cambios aparecen instantáneamente.

Puede hacer clic en la página y comenzar a escribir. Puede resaltar el texto y ajustar su fuente y estilo. Puede agregar contenido nuevo, crear su página y ver todo lo que sucede ante sus ojos.

Cómo habilitar Visual Builder

Cuando haya iniciado sesión en su panel de WordPress, puede navegar a cualquier página en la parte frontal de su sitio web y hacer clic en el botón "Activar Visual Builder" en la barra de administración de WordPress para iniciar el constructor. visual.

Si está editando su página en el panel, puede cambiar al constructor visual haciendo clic en el botón "Habilitar el constructor visual" que se encuentra en la parte superior de la interfaz de fondo de Divi Builder (tenga en cuenta que primero debe active el Divi Builder antes de que aparezca el botón del constructor visual).

Lo básico de Visual Builder

El poder de Divi radica en Visual Builder, un creador de páginas que funciona con "Arrastrar y soltar" que le permite crear casi cualquier tipo de sitio web combinando y organizando las piezas de contenido.

El constructor utiliza tres bloques de construcción principales: secciones, filas y módulos. Usarlos al unísono le permite crear innumerables diseños. Las secciones son los bloques de construcción más grandes y albergan grupos de filas. Las filas están dentro de las secciones y se utilizan para albergar los módulos. Los módulos se colocan dentro de las filas. Esta es la estructura de cada sitio web Divi.

secciones

Los bloques de construcción más básicos y más grandes utilizados en el diseño de diseños con Divi son las secciones. Se utilizan para crear grandes grupos de contenido, y esto es lo primero que agrega a su página. Hay tres tipos de secciones: Regular, Especial y Ancho completo.

Las secciones regulares están formadas por filas de columnas, mientras que las secciones de ancho completo están formadas por módulos de ancho completo que amplían todo el ancho de la pantalla. Las secciones especiales permiten diseños laterales más avanzados.

fila

Las filas están dentro de las secciones y puede colocar cualquier número de filas dentro de una sección. Hay muchos tipos diferentes de columnas para elegir. Una vez que haya definido una estructura de columna para su fila, puede colocar módulos en la columna deseada. No hay límite para la cantidad de módulos que puede colocar en una columna.

Módulos

Los módulos son las piezas de contenido que componen su sitio web. Cada módulo Divi puede adaptarse a cualquier ancho de columna y todos responden completamente.

Construye tu primera página

Los tres bloques de construcción básicos (secciones, líneas y módulos) se utilizan para construir su página.

Agregando tu primera sección

Antes de que pueda agregar algo a su página, primero deberá agregar una sección. Se pueden agregar secciones haciendo clic en el botón azul (+). Cuando pase el cursor sobre una sección que ya existe en la página, aparecerá un botón azul (+) debajo. Al hacer clic, se agregará una nueva sección debajo de la sección sobre la que se encuentra actualmente.

Si comienza una nueva página, su primera sección se agregará automáticamente.

Agregando tu primera línea

Después de agregar su primera sección, puede comenzar a agregar filas de columnas dentro. Una sección puede contener cualquier cantidad de filas, y puede mezclar y combinar filas de diferentes tipos de columnas para crear una variedad de diseños.

Para agregar una fila, haga clic en el botón verde (+) dentro de una sección vacía, o haga clic en el botón verde (+) que aparece al pasar el cursor sobre una fila actual para agregar una nueva fila a continuación. Una vez que haya hecho clic en el botón verde (+), aparecerá una lista de tipos de columnas. Elija la columna de su elección y estará listo para agregar su primer módulo.

Agregar tu primer módulo

Los módulos se pueden agregar dentro de las filas y cada fila puede contener cualquier número de módulos. Los módulos son los elementos de contenido de su página y Divi viene con más de 40 elementos diferentes que puede usar para construir.

Puede usar módulos básicos como Textos, Imágenes y Botones, o módulos más avanzados como Deslizadores, Galerías de Portafolios y eCommerce Tiendas.

Para agregar un módulo, haga clic en el botón gris (+) que existe dentro de una columna vacía o haga clic en el botón gris (+) que existe cuando se desplaza sobre un módulo en la página para agregar un nuevo módulo a continuación . Una vez que haga clic en el botón, será recibido con una lista de módulos.

Elija el módulo que prefiera y se agregará a su página y aparecerá el panel de control del módulo. Con este panel de control, puede comenzar a configurar su módulo.

Eso es todo por este tutorial. Con lo que has aprendido hoy, podrás crear un diseño con Divi. Volveremos con tutoriales avanzados sobre el tema. Ya puedes descargar el Tema divi.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" extended "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DESCARGUE EL TEMA DIVI [/ vcex_button] [/ width_column] [»vc_column] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" extended "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DESCARGAR PLANTILLAS DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Otros tutoriales de Divi

• 5 sitios web para su uso restaurante temático Divi
• Cómo agregar texto en un producto Divi WooCommerce
• Cómo cambiar el color del menú entre páginas Divi
• Cómo personalizar las cuadrículas de un blog con Divi
• Cómo utilizar la función de editor Divi en WordPress
• Cómo crear un control deslizante Divi a pantalla completa
• Cómo cambiar el color de los menús entre páginas Divi
• Características que probablemente no conozcas sobre Divi
• Cómo usar Divi Builder en WordPress
• Cómo usar el módulo de desplazamiento de video Divi
• Cómo usar el módulo Divi Builder Flip
• Cómo agregar un módulo testimonial en Divi Builder
• Cómo usar el módulo de texto Divi
• Cómo crear un control deslizante en Divi
• Cómo editar un rol de usuario Divi
• Cómo usar el módulo de Divi Social Media
• Cómo usar el módulo de tienda en el tema WordPress Divi
• Cómo usar el módulo de la barra lateral Divi
• Cómo usar el Módulo Divi Price Table
• Cómo usar el módulo de título de las publicaciones de Divi
• Cómo agregar un módulo de video de Divi
• Cómo usar el módulo de navegación del artículo
• Cómo usar el módulo de búsqueda Divi
• Cómo usar el módulo Divi wallet
• Cómo usar el módulo de persona en Divi Builder
• Cómo usar el módulo de billetera con filtro Divi
• Cómo usar el módulo deslizante de ancho completo
• Cómo usar el Módulo de imagen Divi Builder
• Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
• Cómo usar el módulo de la galería de imágenes
• Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
• Cómo utilizar el módulo de cartera de ancho completo de Divi
• Cómo usar el módulo de encabezado de ancho completo Divi
• Cómo usar el módulo Divi Counter
• Cómo usar el control deslizante de artículos en Divi Builder
• Cómo usar el módulo Divi Email Optin