Cómo diseñar una sección Fluid Hero en Divi
Publicado: 2021-07-26La sección de héroe de un sitio web es uno de los mejores candidatos para el diseño fluido. A diferencia del diseño receptivo tradicional que se ajusta en diferentes puntos de interrupción, el diseño fluido se escala sin problemas con la ventana del navegador y mantiene el diseño consistente en cualquier dispositivo. Después de todo, la sección de héroes es lo primero que ven los usuarios en un sitio web.
Es posible que haya visto el diseño fluido demostrado en tutoriales anteriores sobre tipografía fluida, módulos fluidos y / o botones fluidos. En este tutorial, le mostraremos cómo crear una sección completa de héroe fluido en Divi. La clave para crear este diseño fluido es agregar un tamaño de fuente raíz fluido a cada uno de los módulos utilizados y luego incorporar la unidad de longitud em (que es relativa al tamaño de fuente del cuerpo raíz) en todas las configuraciones del módulo.
¡Empecemos!
Vistazo
Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.
Observe cómo el diseño fluido se escala suavemente con el ancho de la ventana del navegador.
Descarga el diseño GRATIS
Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
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:
- Si aún no lo ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Elija la opción "Construir desde cero".
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Cómo diseñar una sección Fluid Hero 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 compondrán el título, 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 raíz fluido. Luego vamos a posicionar la imagen en el lado izquierdo de la página con una posición absoluta y offset. El resultado será una sección de héroe fluida que se adapta perfectamente al ancho de la ventana gráfica para que el diseño sea coherente en todos los dispositivos.
Configuración de la sección
Para comenzar, actualice la configuración de diseño existente para la sección. Abra la configuración de la sección y actualice lo siguiente:
- Color de degradado de fondo a la izquierda: # ff2000
- Color de fondo degradado a la derecha: # 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 filas
Abra la configuración de la fila y actualice lo siguiente en la pestaña de diseño:
- Ancho de la canaleta: 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 encabezado fluido con borde
Ahora que la sección y la fila están terminadas, podemos agregar el texto fluido del encabezado a la sección del héroe. 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:
<h1>Fluid Fullscreen Page Design<span style="color: #ff2000;">.</span></h1>
Para que los elementos de diseño sean fluidos, primero debemos agregar un tamaño de fuente raíz fluido al módulo usando la función CSS Clamp (). En la pestaña avanzada, pase el siguiente fragmento de CSS:
font-size: clamp(32px, 4.1vw, 70px);
Con el tamaño de fuente de raíz fluido 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 encabezado: H1
- Fuente de encabezado: Montserrat
- Peso de la fuente del encabezado: Pesado
- Color del texto del encabezado: #ffffff
- Tamaño del texto del encabezado: 1em
- Espaciado de letras de encabezado: 0.1em
- Altura de la línea de rumbo: 1.2em
Además, actualice el relleno de los módulos de la siguiente manera:
- Acolchado: 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.5em
- Altura: 3.25em
- Ancho del borde: 0.5em
- Color del borde: # ff2000
Recuerde, el mismo tamaño de fuente raíz fluido 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 encabezado.
Para colocar el borde de acento, agregue una posición absoluta con un desplazamiento que sea igual al ancho del borde en el módulo de texto del encabezado (1em). En la pestaña avanzada, actualice las siguientes opciones de Posición:
- Posición: Absoluto
- 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, agregaremos el texto fluido del cuerpo del subtítulo. Debido a que este texto es más pequeño, agregaremos un tamaño de fuente raíz fluido más pequeño.
Agregar nuevo módulo de texto
Para crear el texto de los subtítulos, agregue un nuevo módulo de texto debajo del módulo de texto de 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:
font-size: clamp(14px, 1.4vw, 24px);
Configuración de diseño de texto
En la pestaña de diseño, actualice lo siguiente:
- Peso de la fuente del texto: Semi negrita
- Color del texto del texto: #ffffff
- Tamaño del texto del texto: 1em
- Altura de la línea de texto: 1.6em
Luego actualice el tamaño y el espaciado de la siguiente manera:
- Ancho máximo: 19em
- Margen: 2em inferior, automático a la izquierda, 5em a la derecha
Crea el botón fluido
Para crear el botón fluido, agregue un nuevo módulo de botón debajo del módulo de texto de subtítulos.
A continuación, 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:
font-size: clamp(20px, 2.35vw, 40px);
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
- Gradiente de fondo del botón Color a la izquierda: transparente
- Gradiente 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 triangular derecha (ver captura de pantalla)
- Ubicación del icono del botón: Izquierda
- Margen: 8em a la derecha
- Acolchado: 0.2em superior, 0.2em inferior, 1.5em izquierdo, 1em derecho
Crear imagen para la sección Hero
Con todo el contenido de la sección de héroe en el tamaño correcto de la página, estamos listos para agregar la imagen de la sección de héroe en el 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 (escritorio y tableta), centro (teléfono)
- Ancho máximo: 48% (escritorio y tableta), 70% (teléfono)
- Acolchado: 4% a la izquierda
Finalmente, dé a la imagen una posición absoluta con un desplazamiento usando la unidad de longitud vmin de la siguiente manera:
- Posición: Absoluto (escritorio y tableta), Relativo (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 suavemente con el ancho de la ventana del navegador.
Soporte del navegador
La función CSS clamp () (utilizada para el tamaño de fuente fluido en este tutorial) es sorprendentemente bien soportada por 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 solucionar esto, todo lo que aparentemente 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 de héroe 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, incluido cómo crear tipografía fluida, módulos fluidos y botones fluidos.
Espero tener noticias tuyas en los comentarios.
¡Salud!