Divi y su módulo de encabezado de ancho completo vienen con una opción de pantalla completa que establecerá la altura del encabezado para igualar la altura de la ventana de su navegador. Esta es una excelente manera de impulsar la UX y el diseño al mantener todo visible para el usuario (en la parte superior de la página) sin importar el tamaño de su pantalla. Pero no tiene que detenerse en un encabezado.
En esta publicación, le mostraré cómo puede usar el módulo de encabezado de ancho completo para crear múltiples secciones de «pantalla completa» que se ajustarán limpiamente a la altura de su navegador. Y, al agregar algunos botones de «desplazamiento hacia» en la parte superior e inferior, se convierte en una experiencia de visualización agradable para los usuarios. En lugar de desplazarse, todo lo que tienen que hacer es hacer clic y la siguiente sección aparecerá perfectamente en su ventana gráfica.
Esto es lo que voy a cubrir:
- Cómo crear 4 secciones únicas de pantalla completa usando el módulo de encabezado de ancho completo
- Cómo crear botones de desplazamiento hacia arriba personalizados para la parte superior de cada sección.
- Cómo usar las unidades vw al tamaño para asegurarse de que el contenido se mantenga proporcional al tamaño de la pantalla.
Aquí hay un vistazo a lo que construiré en este tutorial:
El diseño
la funcionalidad
El objetivo y la estrategia
Mi estrategia para lograr secciones de pantalla completa implica usar el módulo de encabezado de ancho completo de Divi. Soy consciente de que el módulo de encabezado de ancho completo no está diseñado para usarse en el contenido de la sección normal de su sitio web. Está limitado al contenido y la configuración de un módulo para toda la sección.
Sin embargo, estas secciones de pantalla completa pueden funcionar extremadamente bien para cierto contenido. En muchos casos (como una función de producto), de todos modos no desea tener mucho contenido. Solo una imagen y un CTA es todo lo que realmente necesitas. Y el módulo de encabezado de ancho completo es perfecto para ese tipo de cosas. También puedo ver que esto funciona para las páginas de cartera que quieren garantizar que las imágenes se extiendan a pantalla completa a medida que el usuario hace clic.
Otra razón por la que quería mostrar este diseño es dar ejemplos de cómo usar unidades de longitud con texto y espaciado para mantener el contenido centrado y visible en todos los tamaños de pantalla.
Creando la Sección 1
Para aquellos de ustedes que están familiarizados con el módulo de encabezado de ancho completo, esto debería ser fácil y directo.
Cree una nueva página y agregue una sección de ancho completo con un módulo de encabezado de ancho completo.
Luego agregue una imagen de fondo (alrededor de 1920px por 1080px de tamaño).
Actualice el Módulo de encabezado de ancho completo con lo siguiente:
Título: Diseño elegante
Subtítulo: Vivamus suscipit tortor eget felis porttitor volutpat.
URL de la imagen del encabezado: [subir imagen de al menos 800 px de ancho]
En la pestaña de diseño, actualice lo siguiente:
Orientación de texto y logo: Centrado
Hacer pantalla completa: SÍ
Mostrar botón de desplazamiento hacia abajo: SÍ
Tamaño de icono de desplazamiento hacia abajo: 50px (escritorio), 30px (teléfono inteligente)
Color de superposición de fondo: rgba(240,91,76,0.91)
Color de texto: Texto
de título claro Tamaño: escritorio 5vw, teléfono inteligente 32px
Establecer el tamaño del texto en un valor vw asegurará que el texto se ajuste al tamaño del navegador. Agregar un valor de píxel para el teléfono inteligente asegurará que el texto no se reduzca demasiado.
En la pestaña Avanzado, ingrese «uno» para la ID de CSS. Esto permitirá que la sección a continuación se vincule hacia atrás (o hacia arriba) a esta sección.
Guardar ajustes.
Aquí está el diseño final. Bastante simple.
Creando la Sección #2
Para la segunda sección, dupliquemos el primer encabezado de ancho completo que acabamos de crear y actualicemos el contenido de la siguiente manera:
Título: Optimización de la conversión de la página de destino
Botón n.° 1 Texto: Más información
Botón n.° 2 Texto: [presione la barra espaciadora para agregar un espacio para que el botón muestre]
Contenido: Curabitur placerat leo leo, id ultrices libero tincidunt a. Vestibulum turpis quam, condimentum a pellentesque.
Botón #2 URL: #one
El botón #2 se usará para la flecha hacia arriba en la parte superior de esta sección. Como solo vamos a necesitar el ícono del botón (no el texto), solo necesitamos agregar el espacio al campo de entrada de texto del botón #2 para mostrar el botón. La URL «#one» para el botón número 2 se usará para desplazarse hasta la sección superior.
En la pestaña Diseño, actualice lo siguiente:
Orientación del texto y del logotipo: Color de superposición de fondo izquierdo
: rgba(51,51,51,0.9)
Tamaño del texto del título: 3vw (escritorio), 3vw (tableta)
Tamaño del texto del botón dos: 50 px (escritorio), 30 px (teléfono inteligente) Ancho del
borde del
botón dos: 0 px Icono del botón dos: [ver captura de pantalla]
Mostrar solo el icono al pasar el mouse para el botón dos: NO
Pasar el mouse por el botón dos Color de fondo: rgba(0,0, 0,0)
Usar estilos personalizados para el botón uno: SÍ
Tamaño del texto del botón uno: 2vw (escritorio), 16px (teléfono inteligente)
Color de fondo del botón uno: #f05b4c
Color del borde del botón uno: #f05b4c
Mostrar icono del botón uno: NO
Acolchado personalizado: 7vw a la derecha, 7vw a la izquierda
En la pestaña Avanzado, ingrese «dos» para la ID de CSS. Este ID de CSS corresponderá a la URL del enlace ancla que estableceremos en nuestro botón en la siguiente sección para que el botón se desplace hacia atrás hasta la parte superior de esta sección.
Luego ingrese el siguiente CSS personalizado en el cuadro de entrada Contenedor de encabezado:
|
01
|
width: 100% |
Esto es opcional, pero pensé que sería bueno aumentar el ancho del contenedor de contenido para que le brinde más espacio horizontal para su contenido.
Además, ingrese el siguiente css personalizado en el cuadro de entrada Botón dos:
|
01
|
position: absolute;padding-left:0.4em !important;top: 0;left: 0;right: 0;margin: 0 auto;width: 0px; |
Este css coloca el ícono del botón #2 en la parte superior de tu sección.
Ahora tienes tres botones de trabajo en nuestra sección. El botón #1 es el botón de aprender más que se usará en nuestra área de contenido. El botón n.º 2 es el botón superior personalizado con el enlace ancla que se desplaza hacia atrás hasta la sección anterior. Y el Botón #3 es el botón de desplazamiento hacia abajo que ya está integrado en el encabezado de ancho completo que se desplazará automáticamente a la siguiente sección a continuación.
Puede ver cómo este diseño de sección puede ser útil para crear CTA para sus servicios destacados. Todo lo que necesita hacer es duplicar la sección y agregar otra función. Esto permitirá al usuario hacer clic fácilmente a través de sus secciones sin tener que desplazarse.
Creando la Sección #3
Para crear la Sección #3, duplique la Sección #2 y actualice la configuración del encabezado de ancho completo de la siguiente manera:
Título: El
botón de la ciudad n.° 2 URL: n.° dos (esto vinculará a la sección n.° 2 anterior)
Imagen de fondo: [suba la imagen al menos 1920 px por 1080 px]
Tamaño de la imagen de fondo: Cubierta
Mezcla de imagen de fondo: Multiplicar
Color de superposición de fondo: rgba(255,255,255,0)
Nivel de encabezado del título: H2
Tamaño del texto del título: 5vw (escritorio)
Color de fondo del botón uno: #333333
Color del borde del botón uno: #333333
ID de CSS: tres
Es posible que deba jugar con el valor vw del tamaño del texto del título según sus necesidades. Esté atento a lo que sucede en monitores realmente grandes, ya que el texto seguirá creciendo.
Creando la Sección #4
Para crear la sección #4, duplique la sección #3 y luego actualice lo siguiente:
Para esta sección, usaré dos colores en nuestro texto de encabezado. Para hacer esto necesitaremos usar algo de html. Así que elimine el texto del título y el texto del subtítulo que se copió de la sección n. ° 3 y pegue el siguiente html en el cuadro de contenido debajo de la pestaña de texto.
|
01
|
<span style="color: #333;">The</span> City |
El lapso html se usa para darle a la palabra «The» un color gris oscuro, dejando la palabra «City» en blanco.
URL del botón n.° 2: n.° tres (esto vinculará a la sección n.° 3 anterior)
Color de degradado izquierdo: rgba(240,91,76,0.88)
Color de degradado derecho: rgba(51,51,51,0.88)
Mezcla de imagen de fondo: Normal
En la pestaña de diseño….
Orientación del texto y el logotipo: centro
Color del texto del contenido: #f05b4c
Tamaño del texto del contenido: 8vw
Altura de la línea del contenido: 1,3 em
Tamaño del texto del botón uno: 1.7vw
Elimine el color de fondo actual del botón uno y luego agregue el siguiente fondo degradado:
Color de degradado izquierdo del botón uno: rgba(51,51,51,0.87)
Color de degradado izquierdo del botón uno: rgba(240,91,76,0.97)
Dirección del degradado 90 grados
Posición inicial: 50 %
Posición final: 50 %
Ancho del borde del botón uno: 0px
Radio del borde del
botón uno: 15px Espaciado de una letra del botón: 1.3vw
Espaciado de una letra de botón flotante: 1.3vw
La clave de este diseño es el contenido y el tamaño del texto del botón combinado con el espaciado entre letras del botón. Que como se ajusta al tamaño de la pantalla sin cambiar el diseño.
Y aquí está el resultado final con las cuatro secciones completadas.
Si tiene un diseño simple, puede usar los botones de encabezado originales de ancho completo como enlaces de desplazamiento. El truco aquí es establecer una posición de icono a la izquierda y otra a la derecha. Y, por supuesto, asegúrese de que las URL de sus botones coincidan con la sección a la que desea que los usuarios se desplacen.
Cómo hacer que cualquier sección sea a pantalla completa
Si desea expandirse desde la simplicidad de usar el módulo de encabezado de ancho completo para secciones de página de pantalla completa, puede hacerlo con CSS personalizado. Pero debo advertirle que esto puede ser un poco complicado, especialmente cuando tiene mucho contenido (filas, módulos) filas y módulos dentro de su sección de pantalla completa. Realmente tiene que pensar primero en dispositivos móviles para este diseño, por lo que está limitado a lo que puede caber en una pantalla móvil. Entonces, una sección con tres filas de contenido, sin duda, cabrá en una pantalla móvil.
Así que por ahora, solo te daré la idea básica. Para cambiar una sección para que abarque la altura completa del navegador, puede agregar el siguiente CSS al cuadro del elemento principal en la configuración de la sección avanzada:
|
01
|
height: 100vh; |
Para tener en cuenta el encabezado de navegación (y la posición de navegación fija), deberá agregar un pequeño cambio al css.
|
01
|
height: calc(100vh - 53px) |
Esto recorta la parte inferior de su sección en 53 px para tener en cuenta la navegación del encabezado que se encuentra en la parte superior de la página.
Para asegurarse de que su fila permanezca centrada vertical y horizontalmente en la página, deberá agregar el siguiente CSS personalizado al cuadro de entrada del elemento principal en la pestaña avanzada de configuración de fila:
|
01
|
height: 50%;width: 80%;position: absolute;top: 0; left: 0; bottom: 0; right: 0; margin: auto !important; |
Después de esto, deberá asegurarse de que el contenido de su módulo sea escalable utilizando las unidades de longitud CSS adecuadas para que el contenido no se desborde en la pantalla de los dispositivos móviles.
Aquí hay un ejemplo rápido de una sección y fila con el CSS personalizado mencionado anteriormente en su lugar. Agregué un módulo de texto y un módulo de botón dentro de la fila para mostrarle cómo se vería.
Perfecto para sitios web de una página
Además de usar los enlaces de desplazamiento para llevar al usuario a través de las secciones de pantalla completa de la página, también puede agregar enlaces de anclaje personalizados a su menú de navegación que permitirán al usuario saltar a cualquier sección de la página. Esta es la idea básica detrás de la creación de un sitio web de una página .
Por ejemplo, si quisiera convertir esta página en un sitio web de una sola página, simplemente crearía un menú personalizado y configuraría las URL de sus enlaces para que coincidan con las ID de CSS para cada una de sus secciones.
Pensamientos finales
La creación de secciones de pantalla completa con el módulo de encabezado de ancho completo de Divi definitivamente le dará más protagonismo a sus secciones. Y con los enlaces de desplazamiento, los usuarios pueden navegar fácilmente a través de su contenido como un gran control deslizante vertical de pantalla completa. El desafío es mantener su contenido con una apariencia excelente y que se ajuste a todos los tamaños de pantalla, y usar la unidad de longitud vw para el texto definitivamente lo hace más fácil.
Los diseños utilizados en esta publicación para cada una de las secciones estaban destinados a inspirar y hacer fluir esos jugos creativos. Mi esperanza es que tome algunas de las técnicas utilizadas aquí y nos sorprenda a todos con su propio diseño.
Espero escuchar de usted en los comentarios.
¡Salud!