Cómo diseñar una sección de héroe fluido en Divi

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.

Observe cómo el diseño fluido se escala sin problemas con el ancho de la ventana del navegador.

Descarga el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo has hecho, instala y activa el tema Divi .
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Cómo diseñar una sección de héroe fluido en Divi

Para construir la sección de héroe fluido, agregaremos un tamaño de fuente raíz fluido a cada uno de los tres módulos. Estos módulos conformarán el encabezado, el subtítulo y el botón. Luego, usaremos la unidad de longitud em dentro de la configuración de diseño de los módulos para asegurarnos de que los elementos de diseño sean relativos al tamaño de fuente de la raíz fluida. Luego, vamos a colocar la imagen en el lado izquierdo de la página con una posición absoluta y un desplazamiento. El resultado será una sección de héroe fluida que se escala perfectamente con el ancho de la ventana gráfica para que el diseño sea consistente en todos los dispositivos.

Ajustes de sección

Para comenzar, actualicemos la configuración de diseño existente para la sección. Abra la configuración de la sección y actualice lo siguiente:

• Degradado de fondo Color izquierdo: #ff2000
• Degradado de fondo Color derecho: #121212
• Dirección del gradiente: 45 grados
• Posición inicial: 30%
• Posición final: 0%

En la pestaña de diseño, actualice el relleno:

• Relleno: 0px arriba, 0px abajo

Crear fila

A continuación, agregue una fila de una columna a la sección.

Configuración de fila

Abra la configuración de la fila y actualice lo siguiente en la pestaña de diseño:

• Ancho del canalón: 1
• Ancho: 100%
• Ancho máximo: 1700px
• Altura mínima: 100vh (escritorio), ninguno (tableta y teléfono)
• Relleno: 0px arriba, 0px abajo

Crear texto de título fluido con borde

Ahora que la sección y la fila están terminadas, podemos agregar el texto de encabezado fluido a la sección principal. También vamos a agregar un borde fluido al módulo de texto para un elemento de diseño creativo.

Agregar módulo de texto

Para crear el texto del encabezado y el borde, agregue un nuevo módulo de texto a la columna.

Configuración de texto

En la pestaña de contenido, actualice el contenido del cuerpo con el siguiente HTML:

Para que los elementos de diseño sean fluidos, primero debemos agregar un tamaño de fuente raíz fluido al módulo mediante la función CSS Clamp(). En la pestaña avanzada, pase el siguiente fragmento de CSS:

Con el tamaño de fuente de raíz fluida en su lugar, estamos listos para actualizar la configuración de diseño. Es importante utilizar la unidad de longitud em en todas partes porque la unidad de longitud em es relativa al tamaño de fuente raíz del elemento.

En la pestaña de diseño, actualice la siguiente configuración de diseño de texto de encabezado:

• Tipo de título: H1
• Fuente del encabezado: Montserrat
• Peso de fuente de encabezado: Pesado
• Color del texto del título: #ffffff
• Tamaño del texto del encabezado: 1em
• Espaciado entre letras de encabezado: 0,1 em
• Altura de la línea de encabezado: 1,2 em

Además, actualice el relleno de los módulos de la siguiente manera:

• Relleno: 1em (arriba, abajo, izquierda, derecha)

Para crear el diseño de borde fluido, actualice lo siguiente:

• Ancho del borde: 1em
• Color del borde: #ffffff
• Color del borde inferior: transparente
• Color del borde izquierdo: transparente

Crear el borde de acento

Para crear el borde de acento, podemos duplicar el módulo de texto existente.

Elimine el contenido del cuerpo existente y actualice la configuración de diseño de la siguiente manera:

• Ancho máximo: 6,5 em
• Altura: 3.25em
• Ancho del borde: 0,5 em
• Color del borde: #ff2000

Recuerde, el mismo tamaño de fuente de raíz fluida se incluye en este módulo duplicado. Entonces, podemos usar la unidad de longitud em para ajustar el tamaño y el ancho del borde. Esto asegurará que el diseño se ajuste junto con el diseño del módulo de texto del título.

Para posicionar el borde de énfasis, agregue una posición absoluta con un desplazamiento que sea igual al ancho del borde en el módulo de texto del título (1em). En la pestaña avanzada, actualice las siguientes opciones de posición :

• Posición: Absoluta
• Ubicación: arriba a la derecha
• Desplazamiento vertical: 1em
• Desplazamiento horizontal: 1em

Crear el texto del cuerpo del subtítulo fluido

Debajo del texto del encabezado, vamos a agregar el texto del cuerpo del subtítulo fluido. Debido a que este texto es más pequeño, vamos a agregar un tamaño de fuente de raíz fluida más pequeño.

Agregar nuevo módulo de texto

Para crear el texto del subtítulo, agregue un nuevo módulo de texto debajo del módulo de texto del encabezado existente.

Puede agregar algunas oraciones de texto de relleno de la siguiente manera:

• Contenido del cuerpo: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Agregar tamaño de fuente de raíz fluida

A continuación, debemos agregar un nuevo tamaño de fuente fluido que sea más apropiado para texto más pequeño. En la pestaña avanzada, pegue el siguiente fragmento de CSS en el elemento principal:

Configuración de diseño de texto

En la pestaña de diseño, actualice lo siguiente:

• Peso de fuente de texto: semi negrita
• Texto Color del texto: #ffffff
• Texto Tamaño del texto: 1em
• Altura de línea de texto: 1,6 em

Luego actualice el tamaño y el espaciado de la siguiente manera:

• Ancho máximo: 19em
• Margen: 2em abajo, auto izquierda, 5em derecha

Crear el botón de fluido

Para crear el botón fluido, agregue un nuevo módulo de botón debajo del módulo de texto de subtítulos.

Luego actualice el texto del botón para que diga «Prueba gratuita de 7 días».

Agregar tamaño de fuente de raíz fluida

A continuación, debemos agregar un nuevo tamaño de fuente fluido que sea apropiado para un botón. En la pestaña avanzada, pegue el siguiente fragmento de CSS en el elemento principal:

Configuración de diseño de botones

En la pestaña de diseño, actualice lo siguiente:

• Alineación de botones: Derecha

• Color del texto del botón: #ff2000
• Botón Fondo Degradado Izquierdo Color: transparente
• Degradado de fondo del botón Color derecho: #ffffff
• Dirección del gradiente: 45 grados
• Posición inicial: 25%
• Posición final: 0%
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px
• Fuente del botón: Montserrat
• Peso de la fuente del botón: Pesado
• Estilo de fuente del botón: Cursiva
• Icono de botón: flecha del triángulo derecho (ver captura de pantalla)
• Ubicación del icono del botón: Izquierda

• Margen: 8em derecho
• Acolchado: 0,2 em arriba, 0,2 em abajo, 1,5 em izquierda, 1 em derecha

Crear imagen para la sección de héroe

Con todo el contenido de la sección principal en el tamaño correcto de la página, estamos listos para agregar la imagen de la sección principal al lado izquierdo. Para hacer esto, primero agregue un módulo de imagen debajo del botón.

Abra la configuración de imagen y cargue una imagen.

Configuración de diseño de imagen

En la pestaña de diseño, actualice la siguiente configuración:

• Alineación de imagen: Izquierda (computadora de escritorio y tableta), Centro (teléfono)
• Ancho máximo: 48 % (computadora de escritorio y tableta), 70 % (teléfono)
• Relleno: 4% Izquierda

Finalmente, asigne a la imagen una posición absoluta con un desplazamiento usando la unidad de longitud vmin de la siguiente manera:

• Posición: Absoluta (escritorio y tableta), Relativa (teléfono)
• Ubicación: Arriba a la izquierda (escritorio y tableta)
• Desplazamiento vertical 30vmin (escritorio y tableta), 0px (teléfono)

Resultado final

Aquí está el resultado final en una página en vivo.

Así es como el diseño fluido se escala sin problemas con el ancho de la ventana del navegador.

Compatibilidad con navegador

La función CSS clamp() (utilizada para el tamaño de fuente fluido en este tutorial) es sorprendentemente compatible con todos los principales navegadores, excepto IE. Hay un extraño error de safari que no se escala dinámicamente al ajustar la ventana del navegador, pero se muestra correctamente al cargar la página. Para arreglar esto, aparentemente todo lo que necesita hacer es darle a cada uno de los módulos una altura mínima de 0vw.

Pensamientos finales

Agregar un diseño fluido a una sección principal puede ser una forma conveniente de garantizar que la mitad superior de la página se vea hermosamente consistente en todos los tamaños de navegador, sin la molestia de actualizar el diseño en puntos de interrupción específicos o usar consultas de medios.

No olvide consultar nuestros otros artículos sobre diseño fluido, que incluyen cómo crear tipografía fluida , módulos fluidos y botones fluidos .

Espero escuchar de usted en los comentarios.

¡Salud!