Cómo crear secciones de pantalla completa con enlaces de desplazamiento superior e inferior con Divi


El módulo de encabezado de ancho completo de Divi viene 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) sin importar el tamaño de su pantalla. Pero no es necesario que se detenga 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 a" superior e inferior, esto hace que los usuarios disfruten de una experiencia de visualización agradable. 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 utilizar vw unidades al tamaño para asegurarse de que el contenido se mantenga proporcional al tamaño de la pantalla.

Vistazo

Aquí hay un vistazo a lo que construiré en este tutorial:

El diseño

ejemplo de sección de pantalla completa

La funcionalidad

gif de la sección de pantalla completa

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.

Pero estas secciones de pantalla completa pueden funcionar muy bien para cierto contenido. En muchos casos (como la función de un producto), no desea tener mucho contenido de todos modos. Solo una imagen y una llamada a la acción 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 desean garantizar que las imágenes se extiendan a la 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 de manera consistente en todos los tamaños de pantalla.

(incrustar) https://www.youtube.com/watch?v=PB_p-xg4l-A (/ incrustar)

Creación de 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.

encabezado de la sección de pantalla completa

Luego agregue una imagen de fondo (aproximadamente 1920px por 1080px de tamaño).

Actualice el módulo de encabezado de ancho completo con lo siguiente:

Título: Diseño elegante
Subpartida: Vivamus suscipit tortor eget felis porttitor volutpat.
URL de la imagen del encabezado: (cargue la imagen de al menos 800 px de ancho)

imagen bg de la sección de pantalla completa

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

Orientación del texto y el logotipo: centrado
Hacer pantalla completa: SÍ
Mostrar botón de desplazamiento hacia abajo: SÍ
Desplazarse hacia abajo Tamaño del icono: 50 px (escritorio), 30 px (teléfono inteligente)
Color de superposición de fondo: rgba (240,91,76,0.91)
Color del texto: claro
Tamaño del texto del título: 5vw Desktop, 32px Smartphone

Establecer el tamaño del texto en un vw value se asegurará de que el texto se ajuste al tamaño del navegador. Agregar un valor de píxel para teléfonos inteligentes asegurará que el texto no se reduzca demasiado.

En la pestaña Avanzado, ingrese "uno" para el ID de CSS. Esto permitirá que la sección a continuación se vincule hacia atrás (o hacia arriba) a esta sección.

sección de pantalla completa agregar id

Guardar ajustes.

Aquí está el diseño final. Bastante simple.

sección de pantalla completa uno final

Creando la Sección # 2

Para la segunda sección, dupliquemos el primer encabezado de ancho completo que acabamos de crear y actualice el contenido de la siguiente manera:

Título: Optimización de conversiones de la página de destino
Texto del botón n. ° 1: Más información
Texto del botón n. ° 2: (presione la barra espaciadora para agregar un espacio para que se muestre el botón)
Contenido: Curabitur placerat leo leo, id ultrices libero tincidunt a. Vestibulum turpis quam, condimentum a pellentesque.
URL del botón n. ° 2: n. ° uno

El botón n. ° 2 se utilizará 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 "# una" para el botón número 2 se utilizará para desplazarse hasta la sección superior.

section2content de pantalla completa

En la pestaña Diseño, actualice lo siguiente:

Orientación del texto y el logotipo: izquierda
Color de superposición de fondo: 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: 50px (escritorio), 30px (teléfono inteligente)
Ancho del borde del botón dos: 0px
Icono del botón dos: (ver captura de pantalla)
Mostrar solo el icono al colocar el cursor sobre el botón dos: NO
Botón dos color de fondo de desplazamiento: rgba (0,0,0,0)

Utilice estilos personalizados para el botón uno: SÍ
Tamaño de 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 el icono del botón uno: NO

Acolchado personalizado: 7vw derecha, 7vw izquierda

En la pestaña Avanzado, ingrese "dos" para el ID de CSS. Este ID de CSS corresponderá a la URL del enlace de anclaje que estableceremos en nuestro botón en la siguiente sección para que el botón se desplace hacia la parte superior de esta sección.

Luego ingrese el siguiente CSS personalizado en el cuadro de entrada del Contenedor de encabezado:

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 del Botón dos:

position: absolute;padding-left:0.4em !important;top: 0;left: 0;right: 0;margin: 0 auto;width: 0px;

Este CSS coloca el icono del botón # 2 en la parte superior de su sección.

section2design de pantalla completa

Ahora tienes tres botones de trabajo en nuestra sección. El botón # 1 es el botón para aprender más que se utilizará en nuestra área de contenido. El botón # 2 es el botón superior personalizado con el enlace de anclaje que se desplaza hacia la sección anterior. Y el botón n. ° 3 es el botón de desplazamiento hacia abajo que ya está integrado en el encabezado de ancho completo y 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 característica. Esto permitirá al usuario hacer clic fácilmente en 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: La ciudad
URL del botón n. ° 2: n. ° dos (esto se vinculará a la sección n. ° 2 anterior)
Imagen de fondo: (suba la imagen de al menos 1920 px por 1080 px)
Tamaño de la imagen de fondo: Portada
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
Botón Un borde Color: # 333333

ID de CSS: tres

Puede que tengas que jugar con el tamaño del texto del título vw valor en función de sus necesidades. Esté atento a lo que sucede en monitores realmente grandes, ya que el texto seguirá creciendo.

diseño de la sección 3 a pantalla completa

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 saque el texto del título y el texto del subtítulo que se copió de la sección # 3 y pegue el siguiente html en el cuadro de contenido debajo de la pestaña de texto.

<span style="color: #333;">The</span> City

El html span se utiliza para dar a la palabra "The" un color gris oscuro, dejando la palabra "City" en blanco.

URL del botón n. ° 2: n. ° tres (esto se 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 de contenido: 1.3em

Tamaño de 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 de gradiente 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
Espacio entre letras del botón One Hover: 1.3vw

configuración de la sección cuatro de pantalla completa

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. Cómo se ajusta al tamaño de la pantalla sin cambiar el diseño.

pantalla completa sección 4 gif

Y aquí está el resultado final con las cuatro secciones completadas.

resultado final de la sección de pantalla completa

Usar ubicaciones de botones originales como enlaces de desplazamiento

Si tiene un diseño simple, puede usar los botones de encabezado de ancho completo originales 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 se desplacen los usuarios.

posiciones de los botones de la sección de pantalla completa

Cómo convertir cualquier sección en pantalla completa

Si desea diversificarse de la simplicidad de usar el módulo de encabezado de ancho completo para las secciones de la página de pantalla completa, puede hacerlo con CSS personalizado. Pero debo advertirle que esto puede volverse un poco complicado, especialmente cuando tiene una gran cantidad de contenido (filas, módulos), filas y módulos dentro de su sección de pantalla completa. Realmente tiene que pensar primero en el móvil 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.

Entonces, por ahora, solo les daré la idea básica. Para cambiar una sección para que abarque toda la altura del navegador, puede agregar el siguiente CSS al cuadro del elemento principal en la configuración de la sección avanzada:

 
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.

height: calc(100vh - 53px)

Esto recorta la parte inferior de su sección en 53 píxeles 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:

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 de la pantalla en los dispositivos móviles.

A continuación, se muestra un ejemplo rápido de una sección y una fila con el CSS personalizado mencionado anteriormente. Agregué un módulo de texto y un módulo de botones dentro de la fila para mostrarte cómo se vería.

ejemplo de manual de sección de pantalla completa

Perfecto para sitios web de una página

Además de utilizar 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 ancla 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 creando un sitio web de una página.

Por ejemplo, si quisiera convertir esta página en un sitio web de una página, simplemente crearía un menú personalizado y establecería las URL de sus enlaces para que coincidan con las ID de CSS de cada una de sus secciones.

enlaces de anclaje de la sección de pantalla completa

Pensamientos finales

La creación de secciones de pantalla completa utilizando el módulo de encabezado de ancho completo de Divi definitivamente le dará más prominencia 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 un aspecto excelente y que se adapte a todos los tamaños de pantalla y utilizando la vw la unidad de longitud del 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. Espero que tome algunas de las técnicas que se utilizan aquí y nos sorprenda a todos con su propio diseño.

Espero tener noticias tuyas en los comentarios.

¡Salud!