¿Le gustaría crear una sección de héroe en Divi ¿Cuál es fluido en lugar del tradicional responsive?
La sección 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 a diferentes puntos de interrupción, el diseño fluido se adapta perfectamente a la ventana del navegador y mantiene el diseño uniforme en cualquier dispositivo. Después de todo, la sección Hero es lo primero que ven los usuarios en un Sitio web.
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 (quien es relativo al tamaño de fuente del cuerpo raíz ) en la configuración del módulo.
¡Empecemos!
vista
Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.
Observe cómo el diseño fluido se adapta suavemente al ancho de la ventana del navegador.
Crear una nueva página con Divi Builder
Para comenzar, deberá hacer lo siguiente:
Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.
Dale un título que tenga sentido para ti y haz clic en Uso Divi Astillero
A continuación, haga clic Empezar a construir (Construir desde cero)
Después de eso tendrás un lienzo en blanco para empezar a diseñar en Divi.
Lea también: Divi: Cómo crear una sección Hero con el módulo Fullwidth Header
Cómo diseñar una sección de héroe fluido en Divi
Configuraciones 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:
- Paradas de gradiente:
- 30%: #ff2000
- 30%: #121212
- Dirección del gradiente: 45 grados
En la pestaña Diseño, actualice el relleno:
- Relleno: 0px arriba, 0px abajo
crear una línea
A continuación, agregue una fila de una columna a la sección.
Configuraciones de línea
Abra la configuración de línea y actualice lo siguiente en la pestaña Diseño :
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 1px
- Altura mínima: 100 vh (escritorio), ninguno (tableta y teléfono)
- Relleno: 0px (superior e inferior)
Crear texto de encabezado fluido con borde
Ahora que la sección y la línea están completas, podemos agregar el texto del encabezado fluido a la sección Hero. También agregaremos un borde fluido al módulo Texto para un elemento de diseño creativo.
Agregar un módulo de texto
Para crear el texto del título y el borde, agregue un nuevo módulo de texto a la columna.
Configuraciones de texto
En la pestaña Contenido, actualizarla contenido del cuerpo con el siguiente código HTML:
<h1>Fluid Fullscreen Page Design<spanstyle="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 mediante la función CSS Clamp().
En la pestaña Avanzado, pegue el siguiente fragmento de CSS:
font-size: clamp(32px, 4.1vw, 70px);
En la pestaña Diseño, actualice la siguiente configuración de diseño del texto del encabezado:
- Texto de encabezado:
- Tipo: H1
- Fuente: Montserrat
- Peso de fuente: Pesado
- Color: #ffffff
- Tamaño: 1em
- Espaciado entre letras: 0,1 em
- Altura de la línea: 1,2 cm
También actualice el relleno de mod de la siguiente manera:
- Relleno: 1º (Superior, Inferior, Izquierda y Derecha)
Para crear el diseño de borde fluido, actualice lo siguiente:
- Ancho del borde: 1em
- Color del borde: #ffffff
- Color del borde inferior: claro
- Color del borde izquierdo: claro
Crear el borde de énfasis
Para crear el borde de acento, podemos duplicar el módulo de texto existente.
Bórralo contenido del cuerpo existente y actualizar los parámetros de diseño de la siguiente manera:
- Ancho máximo: 6,5 cm
- Altura: 3,25 cm
- Ancho del borde: 0,5 em
- Color del borde: #ff2000
Para posicionar el borde de énfasis, agregue una posición absoluta con un desplazamiento igual al ancho del borde en el módulo Texto de encabezado (1em).
En la pestaña Avanzado, actualice las siguientes opciones de Posición:
- Posición: Absoluta
- Ubicación: arriba a la derecha
- Desplazamiento vertical: 1em
- Desplazamiento horizontal: 1em
Crear texto de subtítulos
Debajo del texto del título, agregaremos el texto del subtítulo que fluye. Dado que este texto es más pequeño, agregaremos un tamaño de fuente de raíz fluida más pequeño.
Agregar un nuevo módulo de texto
Para crear el texto del tí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: 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 funcione mejor para texto pequeño. En la pestaña Avanzado, pegue el siguiente fragmento de CSS debajo del elemento principal:
font-size: clamp(14px, 1.4vw, 24px);
Configuraciones de diseño de texto
En la pestaña Diseño, actualice lo siguiente:
- Texto:
- Peso de fuente: semi negrita
- Color: #ffffff
- Tamaño: 1em
- Altura: 1,6 cm
Luego actualice el tamaño y el espaciado de la siguiente manera:
- Ancho máximo: 19 cm
- Margen: 2 em (Inferior), automático (Izquierdo), 5 em (Derecho)
Crear el botón fluido
Para crear el botón fluido, agregue un nuevo módulo Botón debajo del módulo Texto del subtítulo.
A continuación, actualice el texto del botón para que diga "Trail gratuito 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 adecuado para un botón.
En la pestaña Avanzado, pegue el siguiente fragmento de CSS debajo del elemento principal:
font-size: clamp(20px, 2.35vw, 40px);
Configuración de diseño de botones
En la pestaña Diseño, actualice lo siguiente:
- Alineación de botones: Derecha
- Usar tamaño personalizado para el botón: SÍ
- Color del texto del botón: #ff2000
- Paradas de gradiente:
- Color 1 25%: claro
- Color 2 25%: #ffffff
- Dirección del gradiente: 45 grados
- Botón:
- Ancho del borde: 0 píxeles
- Radio del borde: 0 píxeles
- Fuente: Montserrat
- Peso de la fuente: grueso
- Estilo: cursiva
- Mostrar icono de botón: SÍ
- Icono: flecha en forma de triángulo hacia la derecha (ver captura de pantalla)
- Ubicación del icono: Derecha
- Margen: 8em (Derecho)
- Relleno: 0,2 em (superior e inferior), 1,5 em (izquierda), 1 em (derecha)
Crea una imagen para la sección Héroe
Con todo el contenido de la sección Héroe al tamaño correcto de la página, estamos listos para agregar la imagen de la sección 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 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 Tablet)
- Desplazamiento vertical: 30vmin (Escritorio y tableta), 0px (Teléfono)
Resultado final
Aquí está el resultado final en una página en vivo.
Ver también: Divi: Cómo usar máscaras y patrones de fondo para una sección de héroe
Así es como el diseño fluido se adapta sin problemas al ancho de la ventana del navegador.
Descarga DIVI ahora!!!
Conclusión
Agregar un diseño fluido a una sección principal puede ser una forma práctica de garantizar que la parte superior de la página sea uniforme en todos los tamaños de navegador, sin tener que actualizar el diseño en puntos, paradas específicas o usar consultas de medios.
Con suerte, esta técnica agregará otra habilidad de diseño útil para proyectos futuros.
También esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
