Figura 1. Vista del constructor basado en bloques
Divi Builder viene en dos formas: el editor de bloques por defecto y el editor visual. Ambas interfaces le permiten crear exactamente los mismos tipos de sitios web con los mismos elementos de contenido y configuraciones de diseño. La única diferencia es la interfaz. El editor de bloques (fig 1.) vive dentro del Panel de WordPress y se puede acceder a él junto con todas las demás configuraciones estándar de WordPress. Se encuentra dentro de la interfaz de usuario de WordPress y reemplaza el editor de publicaciones estándar de WordPress. Es excelente para realizar cambios rápidos mientras está dentro del tablero principal, pero está limitado los cambios en su sitio web no se pueden observar en tiempo real, es precisamente en este aspecto en donde yace la ventaja principal del constructor visual, en el que centraremos nuestro tutorial.
El constructor Visual, por otro lado, le permite construir sus páginas mientras que aprecia los cambios en tiempo real directamente en su sitio web. Es una experiencia increíble y permite un diseño mucho más rápido. Puede hacer clic en la página y empezar a escribir. Puede resaltar texto y ajustar su fuente y estilo. Puede agregar contenido nuevo, crear su página y ver todo lo que sucede ante sus ojos.
Figura 2. Vista del constructor visual con el modulo de texto activo.
Una vez creada una nueva pagina o entrada de blog desde su tablero principal de WordPress, entrando allí podrá hacer clic en el botón «Habilitar el constructor visual» en la barra de administración de WordPress para iniciar el constructor visual.
Si está editando su página en el editor de bloques clásico, 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 del editor de bloques (tenga en cuenta que primero debe habilitar el constructor DIVI antes de que aparezca el botón del constructor visual).
Figura 3. Izquierda: Botón para habilitar el constructor visual, Derecha: habilitar el constructor visual en su nueva pagina de WordPress creada.
Los conceptos básicos del constructor visual
El poder de Divi radica en Visual Builder, un generador de páginas de arrastrar y soltar que le permite crear casi cualquier tipo de sitio web combinando y organizando elementos de contenido.
El constructor utiliza tres bloques de construcción principales: Secciones, Filas y Módulos. El uso y combinación de estos elementos le permite crear una innumerable variedad de diseños de página. Las secciones (resaltadas en color azul) son los bloques de construcción más grandes y albergan grupos de filas. Las filas (resaltadas en color verde) se ubican dentro de las secciones y se utilizan para albergar módulos. Los módulos se colocan dentro de las filas y contienen los diferentes elementos como imágenes, texto y video encargados de mostrar el contenido de su sitio web. Esta es la estructura básica de cada sitio web de Divi.
Secciones
Los bloques de construcción más básicos y más grandes utilizados en el diseño con Divi son las secciones. Estos se utilizan para crear grandes grupos de contenido y son lo primero que agrega a su página. Hay tres tipos de secciones: Regular, Especial y Ancho Completo. Las secciones regulares se componen de filas de columnas, mientras que las secciones de ancho completo se componen de módulos de ancho completo que se expanden por todo el ancho de la pantalla. Las secciones especializadas permiten diseños de barra lateral más avanzados, las cuales trataremos más a fondo en el proximo tutorial.
Filas
Las filas se encuentran dentro de las secciones y puede colocar cualquier cantidad de filas dentro de una sección, dependiendo de lo que mejor se adapte al estilo y diseño de su sitio web. Hay muchos tipos de columnas diferentes para elegir. Una vez que defina 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 dentro de una columna.
Módulos
Los módulos son los elementos de contenido que componen su sitio web. Cada módulo que tiene Divi puede caber en cualquier ancho de columna y todos responden completamente. 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 Texto, Imágenes y Botones, o módulos más avanzados como Controles deslizantes, Galerías de cartera y Tiendas de comercio electrónico.
Figura 4. Estructura de diseño en DIVI, las secciones están marcadas por el rectángulo azul, y las filas por el verde, con la posibilidad de añadir módulos dando click en el icono de mas (+).
Comentarios recientes