Construyendo tu sitio web con el editor visual DIVI

Figura 1. 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 más (+).

Para construir nuestra pagina web utilizaremos los 3 bloques básicos de construcción que aprendimos en el post pasado, secciones, filas y módulos.

Agregar una sección

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

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

Figura 2. Nueva sección creada con una fila de 4 columnas.

Agregar una fila

Una vez que haya agregado su primera sección, puede comenzar a agregar filas de columnas dentro de ella. Una sección puede albergar 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 cualquier sección vacía, o haga clic en el botón verde (+) que aparece al pasar el cursor sobre cualquier fila actual para agregar una nueva fila debajo de ella. Una vez que haya hecho clic en el botón verde (+), aparecerá una lista de tipos de columnas. Elija la columna deseada y estará listo para agregar su primer módulo.

Figura 3. Agregar nueva fila dentro de la sección creada, despliega un menu de opciones de columnas.

Agregar un módulo

Los módulos se pueden agregar dentro de las filas, y cada fila puede albergar cualquier cantidad 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 su página web. Puede usar módulos básicos como Texto, Imágenes y Botones, o módulos más avanzados como Controles deslizantes, Galerías de portafolio y Tiendas de comercio electrónico. Profundizaremos en cada modulo y sus funciones en un próximo tutorial.

Para agregar un módulo, haga clic en el botón gris (+) que existe dentro de cualquier columna vacía o haga clic en el botón gris (+) que existe al pasar el mouse sobre un módulo en la página para agregar un nuevo módulo debajo. Una vez que haya hecho clic en el botón, aparecerá una lista de módulos. Elija el módulo que desee, se agregará a su página y aparecerá el panel de configuración del módulo. Usando este panel de configuración, puede comenzar a configurar su módulo.

Figura 4. Agregar un módulo, despliega la ventana de selección de modulo disponibles.

Configuración y personalización de secciones, filas y módulos

Cada sección, fila y módulo se puede personalizar de varias maneras. Puede acceder al panel de configuración de un elemento haciendo clic en el icono de configuración (figura 5) que aparece al pasar el cursor sobre cualquier elemento de la página.

Figura 5. Vista de configuración de una fila.

Esto abrirá el panel de configuración para el elemento especificado. Cada panel de configuración se divide en tres pestañas: Contenido, Diseño y Avanzado. Cada pestaña está diseñada para que acceder y ajustar la gran variedad de configuraciones de Divi sea rápido y fácil. La pestaña Contenido, por supuesto, es donde puede agregar contenido como imágenes, videos, enlaces y etiquetas de administrador. La pestaña Diseño es donde hemos colocado todas las configuraciones de diseño integradas para cada elemento. Dependiendo de lo que esté editando, puede controlar una amplia variedad de configuraciones de diseño con un clic; incluyendo: tipografía, espaciado (relleno/margen), estilos de botones y más. En un próximo tutorial profundizaremos en las diferentes configuraciones de diseño que ofrece DIVI.

Finalmente, si desea aún más control, puede dirigirse a la pestaña Avanzado donde puede aplicar CSS personalizado, ajustar la visibilidad según el dispositivo y (dependiendo del elemento que esté editando) hacer ajustes aún más complejos.

Guardar su página y acceder a la configuración de la página

Para acceder a la configuración general de la página, haga clic en el icono púrpura en la parte inferior de la pantalla, (figura 6). Esto expandirá la barra de configuración y le brindará varias opciones. Puede abrir la configuración de su página haciendo clic en el ícono de ajustes. Aquí puede ajustar cosas como el color de fondo de la página y el color del texto. También encontrará los botones Guardar y Publicar, así como alternar la vista previa para dispositivos móviles.

Figura 6. Icono de configuración de pagina ubicado al final del diseño de la pagina.

Guardar sus propios diseños en la biblioteca

Finalmente podrás guardar tu diseño propio como una plantilla para futuros usos en otros sitios o páginas, a través de la Biblioteca Divi. Cuando un diseño se guarda como un diseño Divi en la Biblioteca Divi, se puede cargar en nuevas páginas. Cuanto más construyas tu biblioteca con tus diseños propios, más rápido podrás crear nuevos sitios web. Esto agiliza tu flujo de trabajo. En próximos totorales profundizaremos sobre la biblioteca DIVI y sus usos.

Para guardar un elemento en la biblioteca, haga clic en el ícono de la biblioteca que existe al pasar el mouse sobre cualquier elemento y dentro de la barra de configuración de la página. Una vez que se ha agregado un elemento a la biblioteca, aparecerá en la pestaña «Agregar desde la biblioteca» al agregar nuevos diseños, secciones, filas y módulos de Divi.

Figura 7. Agregar un diseño propio a la biblioteca DIVI para futuros usos, una opción que agiliza la creación y diseño de nuevos sitios web.