Explorando Divi 2.4: usando el nuevo módulo de encabezado de pantalla completa

A principios de este mes, presentamos Divi 2.4 , la mayor actualización en la historia de Divi y un gran paso adelante para nuestro tema de WordPress más popular. Hay tantas funciones excelentes para explorar en esta actualización que fue difícil describirlas todas en la publicación de lanzamiento, por lo que hemos decidido hacer una serie de publicaciones de blog informativas de 2 semanas que tendrán como objetivo enseñarle cómo tomar aprovecha al máximo Divi 2.4 y sus nuevas opciones. En la parte once de esta serie, exploraré el módulo de encabezado de ancho completo actualizado, ¡con la nueva funcionalidad de pantalla completa!

Aprenda todo sobre Divi 2.4 aquí

El módulo de encabezado de ancho completo obtiene una gran actualización

Divi siempre ha tenido un módulo de encabezado de ancho completo. Sin embargo, en Divi 2.4, este módulo se ha ampliado considerablemente con docenas de nuevas opciones que lo convierten en uno de los módulos más versátiles de la colección de Divi. Hay más de 20 diseños posibles diferentes que ahora se pueden crear con este único módulo, y una miríada de nuevas opciones de estilo que se pueden aplicar a cada elemento (gracias a la nueva Configuración de diseño avanzado de Divi). Donde antes estaba limitado a solo dos piezas de información en su encabezado (Título y Subtítulo), el encabezado ahora se ha ampliado para incluir varias imágenes, botones y fondos (cada uno de los cuales se puede organizar de diferentes maneras). Para colmo, se ha agregado un nuevo «Modo de pantalla completa» al encabezado, que obligará al encabezado a extenderse por toda la altura del navegador.

Explorando las nuevas opciones

Hay un montón de nuevas opciones disponibles para el módulo Encabezado de ancho completo. A primera vista pueden parecer un poco abrumadores, así que repasemos cada una de las opciones disponibles para explicar mejor lo que hacen.

Cuando agregue un nuevo módulo de encabezado de ancho completo a su página, recibirá la siguiente configuración:

Título : ingrese el título de su encabezado aquí. Este texto aparecerá debajo de la imagen de su logotipo y encima del texto del subtítulo, si está definido.

Texto de subtítulo : si desea utilizar un subtítulo, agréguelo aquí. Su subtítulo aparecerá debajo de su título en una fuente más pequeña.

Color del texto : aquí puede elegir el valor de color de su texto. Si está trabajando con un fondo oscuro, entonces su texto debe establecerse en claro. Si está trabajando con un fondo claro, entonces su texto debe ser oscuro.

Orientación de texto y logotipo : controla cómo se alinea el texto dentro del módulo. Puede elegir entre alineación izquierda, derecha o centrada.

Hacer pantalla completa : aquí puede elegir si el encabezado se expande al tamaño de pantalla completa. Si esta opción está habilitada, el encabezado siempre tendrá una altura mínima igual a la altura de la ventana de su navegador. Esta es una excelente manera de agregar prominencia adicional a su encabezado, lo que lo convierte en una idea para saludar a los nuevos visitantes en su página de inicio.

Mostrar botón de desplazamiento hacia abajo : aquí puede elegir si se muestra el botón de desplazamiento hacia abajo. Cuando se hace clic en el botón de desplazamiento hacia abajo, los usuarios se desplazan automáticamente a la siguiente sección de la página. También da una indicación de que hay más contenido debajo del encabezado (ya que el efecto de «pantalla completa» a menudo puede ser engañoso).

Texto del botón : si desea mostrar un botón en su encabezado, puede ingresar el texto para su primer botón aquí.

URL del botón : si desea mostrar un botón en su encabezado, puede ingresar la URL para su primer botón aquí.

URL de la imagen de fondo : los encabezados pueden tener aplicada una imagen de fondo opcional, que aparecerá detrás del texto y la imagen del encabezado.

Color de fondo : si desea darle a su encabezado un color de fondo, puede especificar el color aquí.

Color de superposición de fondo : elija un color de superposición de fondo, que se colocará encima de la imagen de fondo y detrás del texto. Las superposiciones de fondo semitransparentes pueden crear algunos efectos interesantes cuando se colocan sobre imágenes de fondo.

Use el efecto de paralaje : si está habilitado, sus imágenes de fondo tendrán una posición fija como su desplazamiento, creando un divertido efecto de paralaje.

URL de la imagen del logotipo : las imágenes del logotipo se muestran encima del texto del título (si está definido). Al igual que con todos los elementos del encabezado, los logotipos son opcionales.

Alineación vertical del texto : esta configuración determina la alineación vertical de su contenido. Su contenido puede estar centrado verticalmente o alineado en la parte inferior.

URL de imagen de encabezado : los encabezados también pueden tener una imagen de encabezado opcional. Esta es una imagen más grande que se muestra por separado del texto del título y el logotipo.

Alineación vertical de la imagen : controla la orientación de la imagen dentro del módulo. Se puede alinear independientemente de su logotipo y texto, lo que da como resultado más de 20 diseños posibles diferentes.

Creación de su propio módulo de encabezado

Ahora que nos hemos familiarizado con las nuevas opciones disponibles, echemos un vistazo a cómo se pueden combinar estas opciones para crear algunos encabezados sorprendentes. En este tutorial, le mostraré cómo crear un encabezado con el siguiente estilo:

Ver la demostración en vivo

Esta configuración aprovecha la mayoría de las nuevas opciones agregadas en Divi 2.4 y es un gran ejemplo de cómo todos estos elementos se pueden combinar con éxito.

Primeros pasos: selección de sus imágenes

En este ejemplo, crearé una página de inicio para una panadería ficticia. En la parte superior de la página de inicio, quiero describir rápidamente de qué se trata nuestra empresa usando algunas imágenes hermosas y un poco de texto. Lo primero es lo primero, tenemos que decidir sobre algunas fotos geniales. Seleccionar imágenes que vayan bien juntas es la parte más importante del diseño de un hermoso encabezado. El encabezado de ancho completo tiene 3 imágenes diferentes disponibles:

  • La imagen del logotipo : esta imagen se coloca sobre el texto del título y, por lo general, es un logotipo pequeño para representar a su empresa.
  • La imagen de fondo : la imagen de fondo se coloca detrás del contenido del encabezado. Es mejor pensar en la imagen de fondo como un elemento de textura. No queremos algo demasiado abrumador. Debería complementar el resto de su encabezado, pero no es el tema principal del módulo.
  • La imagen de encabezado : esta es una imagen más grande que se coloca junto al texto del título y el logotipo. Se puede colocar a la izquierda, a la derecha o debajo de su contenido de texto.

Para comenzar, he seleccionado una imagen de fondo que va bien con mi tema de repostería. Esta imagen no está demasiado abarrotada, y la falta de profundidad también hace que la apariencia sea más sutil.

También he subido la imagen del logotipo de mi empresa. Esto se colocará encima de mi texto de título. Se ha guardado como una imagen PNG transparente para que la imagen de fondo sea visible dentro del espacio negativo del logotipo.

A continuación, he seleccionado una imagen para colocarla debajo de mi contenido de texto. Esta es mi principal «Imagen de encabezado».

Dado que esta imagen se colocará encima de mi imagen de fondo, también he decidido convertir esta foto en un PNG transparente (al igual que nuestro logotipo). Utilicé Photoshop y la herramienta de borrador para desvanecer los bordes para que la transparencia pueda tener un efecto completo. Así es como se ve la imagen después de que terminé de atenuarla en Photoshop:

Ahora que tenemos nuestros elementos básicos en su lugar, ¡podemos comenzar a construir nuestro encabezado!

Juntando las piezas

En primer lugar, debemos agregar un nuevo módulo de encabezado de ancho completo a nuestra página. Para hacer eso, agregue una nueva sección de ancho completo y haga clic en el botón «insertar módulo». Localice y seleccione el módulo Encabezado de ancho completo.

Esto mostrará la configuración del Módulo de ancho completo que analizamos anteriormente. Para comenzar, ingresé un texto de título («Pan con mejor sabor») y habilité la opción «Encabezado de pantalla completa». También cambié el color de mi texto a «claro» ya que la imagen de fondo que elegí antes es bastante oscura. Necesitamos asegurarnos de que nuestro texto sea legible.

A continuación, agregué mi imagen de fondo cargando la imagen que elegí anteriormente.

Después de guardar, puede ver cómo se ve nuestro encabezado hasta ahora. Solo tenemos un título y una imagen de fondo, y el encabezado se ha configurado para que se extienda por toda la altura del navegador.

¡Las cosas se ven bastante bien hasta ahora! Sin embargo, noto que a medida que me desplazo hacia abajo en la página, el color blanco de la harina contrasta con el color blanco del texto. Este es un problema muy común con las imágenes de fondo. A menudo es difícil encontrar una imagen de fondo que tenga un contraste lo suficientemente bajo como para nunca competir con el texto. Afortunadamente, implementamos una nueva característica llamada «Superposición de fondo» que resuelve este problema al agregar un color semitransparente en la parte superior de la imagen de fondo para ayudar a atenuarla. También se puede utilizar para colorear tus fotos.

Dado que busco más un esquema de color marrón en la página, he optado por colocar una superposición marrón semitransparente en la parte superior de mi imagen de fondo.

Una vez que guardamos y aplicamos el color de superposición, puede ver que el color general de la imagen de fondo ahora ha adquirido un tono marrón. Dado que solo se puede ver una parte de la imagen de fondo a través del nuevo color superpuesto, también se redujo el contraste de la imagen y se atenuó el blanco de la harina.

¡Ahora las cosas están empezando a juntarse! Continuemos agregando el resto de nuestro contenido al encabezado. A continuación, subí la imagen del logotipo que elegí antes. También completé la configuración de «texto del botón» y «URL del botón». Los botones se colocan debajo del título de su encabezado, mientras que la imagen del logotipo se coloca encima.

El logotipo, el título, el subtítulo y los botones siempre se colocan juntos (y en ese orden). Todos estos elementos son opcionales. Si no desea utilizar ninguno de estos elementos en su encabezado, simplemente deje sus campos de configuración en blanco. Después de cargar nuestro nuevo logotipo y agregar nuestros dos botones, puede ver el resultado final a continuación. Dado que la imagen de nuestro logotipo es un PNG transparente, la imagen de fondo y el color de superposición se muestran a través del espacio negativo. Este es un gran efecto, y algo que debería considerar usar en sus propios diseños.

Solo queda una pieza del rompecabezas, la imagen de encabezado del trozo de pan que elegimos anteriormente. Esta es una parte importante de nuestro encabezado, ya que permitirá que nuestros visitantes sepan rápidamente qué hace nuestra empresa. Junto con el texto del título y la imagen del logotipo, toda la información importante necesaria para comprender de qué se trata nuestro sitio web se puede ver de inmediato.

Como se mencionó anteriormente, usé Photoshop para desvanecer los bordes de la imagen y la guardé como un PNG transparente (al igual que nuestro logotipo). Cuando se combina con una imagen de fondo y un efecto de paralaje, podemos crear la ilusión de que estos dos elementos existen en el mismo espacio. Con este toque final completado, nuestro encabezado de ancho completo (y pantalla completa) ha sido terminado.

¡Este es solo un ejemplo de innumerables posibilidades!

Este ejemplo es solo una de las muchas formas diferentes en que se puede usar el módulo Encabezado de ancho completo. Al elegir diferentes orientaciones de imagen y texto, el diseño del encabezado se puede cambiar drásticamente. Aquí hay una hoja de cálculo de todas las diferentes posibilidades de diseño solo para darle una idea:

A medida que comience a experimentar con diferentes orientaciones de texto e imagen, combinadas con diferentes estilos de fotos, comenzará a ver cuán versátil se ha vuelto este módulo.