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

por | Dic 31, 2021 | Diseño web wordpress | 0 Comentarios

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.
  1. A continuación tienes que selección la opción Título de anchura completa

Añadir detalles del título

  1. 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

  1. 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.
  1. 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

  1. 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

  1. Ahora es momento de crear dos módulos de texto.
  1. Lo siguiente será crear dos botones.
  1. Llegados a este punto ya deberías tener una sección similar a la que te muestro a continuación.
  1. 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

  1. 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.

Francisco Sánchez

Francisco Sánchez

Diseño web especializado en conversiones. Fundador Nomadwebs.com Mi propósito es acompañar a emprendedores y Pymes en la digitalización de negocios utilizando el diseño web, estrategias de marketing digital y embudos de venta.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Anuncio - Hosting Web de SiteGround - Diseñado para una fácil administración web. Haz clic para saber más.

Te puede interesar

Cómo añadir textos en Divi correctamente

Cómo añadir textos en Divi correctamente

Imagina por un momento que eres yo. Y ahora te cuento una situación bastante habitual. Me paso unas semanas, quizá un par de meses, realizando la web de un cliente. Se la entrego perfecta, toda limpia, con todas las tipografías perfectas, las imágenes en su sitio,...

Qué es Divi y como utilizarlo en tu negocio **Actualizado 2022**

Qué es Divi y como utilizarlo en tu negocio **Actualizado 2022**

Diseñar una página web nunca había sido tan fácil como ahora gracias a los constructores visuales como Divi para WordPress. (Todavía recuerdo el final de la década de los 90, cuando realicé mi primera página web). ¡Que diferente que era! Llámame viejuno si quieres 😉,...

Cómo igualar el tamaño de varios botones en Divi

Cómo igualar el tamaño de varios botones en Divi

Cuando estás creando una página en WordPress y Divi, es muy habitual crear varios botones seguidos, especialmente si estás creando un listado de enlaces o un menú. El problema de los botones en Divi es que, por defecto, su tamaño depende del largo de texto que...

Los 3 elementos para tener una página web de éxito

Cuando empiezas un proyecto digital, lo normal es que comiences realizando una página web. A pesar de ello, no siempre se la da la importancia que debería y los proyectos suelen no salir como a uno le gustaría. El problema más habitual que tienen la mayoría de...

Landing Page: Qué es y como crear una página de aterrizaje efectiva

Landing Page: Qué es y como crear una página de aterrizaje efectiva

Las Landing Page, páginas de venta o de aterrizaje, son páginas cuya finalidad es convertir a los usuarios en un leads. Y te estarás preguntan ¿qué es un lead? Pues bien, esto no es más que un usuario que ha entrado a tu web y deja sus datos a través de un formulario,...