Cómo crear una sección de título en pantalla completa con Divi

Muchas personas me habéis preguntado cómo hago para establecer una sección a pantalla completa con Divi. Así que he decidido explicároslo con unos sencillos pasos. Te sorprenderá lo fácil que resulta hacerlo.

Cuando quieres establecer una sección a pantalla completa con Divi, lo más habitual es hacerlo para el título o para una sección muy importante de la web. En la siguiente imagen te muestro un ejemplo de lo que vamos a crear.

¿Cómo crear un título que ocupe toda la pantalla con Divi?

Tienes que saber que para crear un título de pantalla completa con Divi tienes dos opciones:

1. Módulo título de ancho completo

Esta se trata de la opción más rápida y fácil para crear un título de ancho completo en tu página web Divi. Sin embargo, presenta algunas limitaciones creativas que, en función de tu objetivo, te pueden provocar algún dolor de cabeza.

Insertar módulo de ancho completo

1. Lo primero que tienes que hacer es crear una sección de ancho completo.

2. A continuación tienes que selección la opción Título de anchura completa

Añadir detalles del título

3. En la siguiente ventana tendrás que añadir la información del título, subtítulo y los botones con sus enlaces respectivos.

Editar opciones de diseño

4. A continuación tienes que abrir las opciones de diseño y seleccionar la opción Hacer que se muestre a pantalla completa. (Marcado en amarillo). ¡Y listo! A partir de este momento habrás establecido ya el título de ancho completo.

5. Finalmente tan solo te quedará añadir la foto o color de fondo que desees, terminar de ajustar los tamaños de las fuentes y listo.

El resultado final será algo como lo que te muestro a continuación.

2. Establecer un título de ancho completo de forma manual

La segunda opción para crear un título de ancho completo con Divi es hacerlo de forma manual. Es un poco más largo, pero tendrás más libertad creativa para adaptar el diseño completamente a tus necesidades.

Insertar una sección regular y añadir una fila

1. Lo primero que tendrás que hacer es crear una sección de tipo regular.

Lo siguiente es de vital importancia para conseguir el efecto que buscamos.

Ahora tienes que ir a la pestaña Diseño y en la opción de Altura deberás especificar 100vh. Con esto conseguimos que la sección ocupe todo el alto de la pantalla.

Si quieres profundizar más sobre las unidades de medida en Divi este artículo te interesa.

Añade el siguiente código

Para terminar con las opciones de la sección tendrás que ir a la pestaña avanzado y pegar el siguiente código.

display: flex;
flex-wrap: wrap;
align-content: vertical;

Todo el contenido que incluyas a partir de la inserción de este código quedará alineado al centro verticalmente.

Diseñando la sección de título de ancho completo de forma manual

2. Ahora tienes que añadir dos filas para distribuir el contenido.
   1. La primera fila será de una sola columna en la que incluiremos los textos.
   2. La segunda fila de dos columnas en las que incluiremos nuestros botones.

Añadir los elementos del titular en Divi

3. Ahora es momento de crear dos módulos de texto.

4. Lo siguiente será crear dos botones.

5. Llegados a este punto ya deberías tener una sección similar a la que te muestro a continuación.

6. Dado que el primer texto que mostraremos en la página va a ser su título y, por tanto, el texto más importante para el SEO, lo identificaremos con la etiqueta Heading 1.

Te recomiendo leer la siguiente entrada si quieres saber más sobre SEO.

Editar las opciones de diseño del titular

7. Finalmente, vamos a editar las opciones de diseño del titular, el subtítulo, los botones, el fondo, los colores de texto y todo lo relacionado con el diseño.

Si todo ha ido bien, deberías tener una sección similar a la que te muestro y que se adapta a todos los tamaños de pantalla en que se visualice.

Puedes ver los dos ejemplos de este post en esta página.

Conclusión

Tal y como has visto, Divi es un constructor visual ideal para crear tu página web de forma rápida y sencilla. Además, te soluciona la vida con una infinidad de módulos prediseñados que puedes utilizar a tu antojo para crear lo que desees.

En esta entrada hemos visto cómo crear un título en pantalla completa con Divi. Para ello hemos utilizado el módulo titular en pantalla completa y, posteriormente, hemos realizado lo mismo de forma manual haciendo uso de un poco de css.

Si quieres conocer más sobre Divi y Elegant themes aquí te dejo un enlace para que lo conozcas y veas todo el potencial que puede desarrollar en tu página web.

Como siempre, deseo que te haya gustado este post práctico para crear tu título a pantalla completa usando Divi. Pero sobre todo espero que lo apliques y me dejes aquí tu comentario explicándome tu experiencia.