Cómo crear un encabezado global personalizado a pantalla completa con el generador de temas de Divi


Si está buscando una manera de crear un encabezado global para su sitio web que no ocupe mucho espacio, este tutorial le encantará. Le mostraremos cómo crear un encabezado global a pantalla completa con Divi’s Theme Builder. Mientras se desplaza hacia abajo en la página, las únicas dos cosas adicionales que notará en su publicación / página son 1) un icono de hamburguesa en la esquina superior izquierda y 2) un logotipo en la esquina superior derecha. Estos dos elementos seguirán a sus visitantes a lo largo de su proceso de navegación y una vez que se haga clic en el icono de la hamburguesa, se abrirá un menú de pantalla completa personalizado que permitirá a los visitantes ir a otras páginas de su sitio web. ¡El resultado de este diseño es muy receptivo y también podrás descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

encabezado global de pantalla completa

Móvil

encabezado global de pantalla completa

Descargue la plantilla de encabezado global de pantalla completa GRATIS

Para poner sus manos en la plantilla de encabezado global de pantalla completa, primero deberá descargarla 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

1. Vaya a Divi Theme Builder y comience a construir el encabezado global

Ir a Divi Theme Builder

Comience yendo al Divi Theme Builder.

encabezado global de pantalla completa

Comience a construir encabezado global

Luego, haga clic en "Agregar encabezado global" y proceda a hacer clic en "Crear encabezado global".

encabezado global de pantalla completa

2. Dedique la Sección # 1 a la navegación a pantalla completa

Configuraciones de sección

Color de fondo

¡Hora de empezar a crear! Abra la configuración de la sección que puede observar dentro del editor de plantillas y cambie el color de fondo a uno completamente transparente.

  • Color de fondo: rgba (255,255,255,0)

encabezado global de pantalla completa

Espaciado

Elimine el relleno superior e inferior predeterminado de la sección a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

encabezado global de pantalla completa

Clase CSS

Continúe agregando una clase CSS a la sección. Más adelante en esta publicación, necesitaremos esta clase CSS para activar el menú a pantalla completa.

  • Clase CSS: sección-transformación

encabezado global de pantalla completa

Visibilidad predeterminada

Luego, vaya a la configuración de visibilidad y oculte los desbordamientos. Asegúrese de aumentar también el índice z de la sección, esto garantizará que la sección permanezca en la parte superior de toda la página y publique contenido.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto
  • Índice Z: 999999

encabezado global de pantalla completa

Visibilidad de desplazamiento

Una vez que haya agregado el índice z, habilite la opción de desplazamiento y asegúrese de que el mismo índice z también se aplique allí.

  • Índice Z: 999999

encabezado global de pantalla completa

Agregar fila # 1

Estructura de columna

Continúe agregando una primera fila a la sección utilizando la siguiente estructura de columnas:

encabezado global de pantalla completa

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

encabezado global de pantalla completa

Espaciado

Elimine todos los rellenos superiores e inferiores predeterminados a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

encabezado global de pantalla completa

Agregar módulo de texto a la columna

Agregar contenido

El único módulo que necesitamos en esta fila es un módulo de texto. Agregue un símbolo de menú de su elección al cuadro de contenido. En este tutorial, estamos usando ‘‘ ’.

encabezado global de pantalla completa

Configuraciones de texto

Pase a la pestaña de diseño del módulo y cambie la configuración de texto de la siguiente manera:

  • Fuente de texto: Abril Fatface
  • Color del texto: # 000000
  • Tamaño del texto: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
  • Altura de la línea de texto: 1em

encabezado global de pantalla completa

Espaciado

A continuación, modifique los valores de espaciado en diferentes tamaños de pantalla.

  • Relleno superior: 2vw (escritorio), 3.5vw (tableta), 5vw (teléfono)
  • Acolchado inferior: 2vw (escritorio), 3.5vw (tableta), 5vw (teléfono)
  • Acolchado izquierdo: 3vw (escritorio), 4vw (tableta), 7vw (teléfono)
  • Relleno derecho: 3vw (escritorio), 4vw (tableta), 7vw (teléfono)

encabezado global de pantalla completa

ID de CSS

Este módulo de texto servirá como un disparador para el menú de pantalla completa. Es por eso que tendremos que asignar una ID de CSS al módulo de texto. Más adelante en el tutorial, usaremos la ID de CSS en nuestro código.

  • ID de CSS: menú abierto

encabezado global de pantalla completa

Agregar fila # 2

Estructura de columna

Continúe agregando una segunda fila a la sección utilizando la siguiente estructura de columnas:

encabezado global de pantalla completa

Dimensionamiento

Abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

  • Ancho: 100%
  • Ancho Máx .: 100%

encabezado global de pantalla completa

Espaciado

Modifique los valores de espaciado también.

  • Margen superior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
  • Margen inferior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
  • Relleno izquierdo: 19vw
  • Relleno derecho: 19vw

encabezado global de pantalla completa

Agregar módulo de texto a la columna

Agregar contenido

Luego, agregue un nuevo Módulo de texto a la columna. Este módulo de texto representa su primer elemento del menú.

encabezado global de pantalla completa

Añadir enlace

Asegúrese de agregar un enlace apropiado al módulo a continuación.

  • URL del enlace del módulo: #

encabezado global de pantalla completa

Configuraciones de texto

Pase a la pestaña de diseño del módulo y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Poppins
  • Peso de la fuente del texto: semi negrita
  • Color del texto: # 000000
  • Tamaño del texto: 3vw (escritorio), 7vw (tableta), 8vw (teléfono)
  • Espacio entre letras de texto: -0.1vw
  • Altura de la línea de texto: 1em

encabezado global de pantalla completa

Espaciado

Modifique la configuración de espacio del módulo a continuación.

  • Margen superior: 1vw
  • Acolchado inferior: 2vw
  • Acolchado izquierdo: 3vw

encabezado global de pantalla completa

Frontera

Agregue un borde inferior también.

  • Ancho del borde inferior: 1px
  • Color del borde inferior: # 333333

encabezado global de pantalla completa

Clase CSS

Y complete la configuración del módulo agregando una clase CSS personalizada. Deberá agregar esta clase CSS a todos y cada uno de los elementos de menú que coloque en su sección.

encabezado global de pantalla completa

Clonar el módulo de texto tres veces

Una vez que haya completado el primer Módulo de texto, puede clonarlo tantas veces como desee (según los elementos del menú que desee mostrar en su menú). Sin embargo, asegúrese de que los módulos no superen la altura de su pantalla.

encabezado global de pantalla completa

Cambiar contenido y enlace de cada duplicado

Deberá cambiar el contenido y el enlace de cada duplicado.

encabezado global de pantalla completa

Agregar módulo de seguimiento de redes sociales

Agregar redes sociales de elección

El siguiente y último módulo que necesitamos en esta fila es un Módulo de seguimiento de redes sociales. Agregue todas las redes sociales que desea mostrar.

encabezado global de pantalla completa

Restablecer estilos de redes sociales individuales

Continúe restableciendo los estilos de cada red social individualmente.

encabezado global de pantalla completa

Configuraciones de iconos

Luego, vaya a la pestaña de diseño del módulo y modifique la configuración del icono de la siguiente manera:

  • Color del icono: # 000000
  • Usar tamaño de icono personalizado: sí
  • Tamaño de fuente del icono: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)

encabezado global de pantalla completa

Espaciado

Agregue un poco de relleno izquierdo también.

  • Acolchado izquierdo: 3vw

encabezado global de pantalla completa

Clase CSS

Complete la configuración del módulo agregando una clase CSS.

encabezado global de pantalla completa

Agregar fila # 3

Estructura de columna

La última fila que necesitamos en esta sección contiene la siguiente estructura de columnas:

encabezado global de pantalla completa

Espaciado

Limite el espacio que ocupa esta fila eliminando todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

encabezado global de pantalla completa

Agregar módulo de código a la columna

Insertar código JQuery y CSS

Luego, agregue un Módulo de Código e inserte un código CSS y JQuery para que el menú de pantalla completa funcione. Asegúrese de colocar manualmente el código JQuery entre las etiquetas de script y el código CSS entre las etiquetas de estilo, como puede observar en la pantalla de impresión a continuación.

jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});
.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

encabezado global de pantalla completa

3. Dedique la Sección # 2 al logotipo de la esquina superior derecha

Configuraciones de sección

Color de fondo

¡A la siguiente sección! Esta sección contendrá el logotipo en la esquina superior derecha. Abra la configuración de la sección y cambie el color de fondo a uno completamente transparente.

  • Color de fondo: rgba (0,0,0,0)

encabezado global de pantalla completa

Espaciado

Elimine el relleno superior e inferior predeterminado de la sección a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

encabezado global de pantalla completa

Visibilidad predeterminada

Aumenta también el índice z de la sección.

  • Índice Z: 99999

encabezado global de pantalla completa

Visibilidad de desplazamiento

Habilite la opción de desplazamiento en el índice z y asegúrese de que el mismo valor se aplique también en el desplazamiento.

  • Índice Z: 99999

encabezado global de pantalla completa

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

encabezado global de pantalla completa

Dimensionamiento

Abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

  • Ancho: 100%
  • Ancho Máx .: 100%

encabezado global de pantalla completa

Espaciado

Elimine también el relleno superior e inferior predeterminado de la fila.

  • Relleno superior: 0px
  • Relleno inferior: 0px

encabezado global de pantalla completa

Agregar módulo de imagen a la columna

Subir imagen de logotipo PNG

El único módulo que necesitamos en esta fila y sección es un Módulo de imagen. Cargue su archivo de imagen de logotipo semitransparente.

encabezado global de pantalla completa

Dimensionamiento

Vaya a la configuración de tamaño del módulo y fuerce el ancho completo.

  • Forzar ancho completo: sí

encabezado global de pantalla completa

Espaciado

Complete la configuración del módulo agregando algo de relleno personalizado en diferentes tamaños de pantalla.

  • Relleno superior: 2.5vw (escritorio), 3.5vw (tableta), 5vw (teléfono)
  • Acolchado inferior: 2.5vw (escritorio), 3.5vw (tableta), 5vw (teléfono)
  • Acolchado izquierdo: 3vw (escritorio), 4vw (tableta), 7vw (teléfono)
  • Relleno derecho: 3vw (escritorio), 4vw (tableta), 7vw (teléfono)

encabezado global de pantalla completa

4. Configuración de sección adicional

Sección 1

Dimensionamiento

Una vez que haya completado ambas secciones y todos los módulos en él, es hora de cambiar su tamaño. Abra la primera sección y aplique los siguientes valores de ancho y alto:

  • Ancho: 8vw (escritorio), 11vw (tableta), 18vw (teléfono)
  • Altura: 7vw (escritorio), 11vw (tableta), 18vw (teléfono)

encabezado global de pantalla completa

Elemento principal predeterminado

Luego, vaya a la pestaña avanzada de la sección y agregue las siguientes líneas de código CSS:

position: fixed;
top: 0;

encabezado global de pantalla completa

Pase el elemento principal

Asegúrese de que esas mismas líneas de código CSS se apliquen al pasar el mouse por encima.

position: fixed;
top: 0;

encabezado global de pantalla completa

Sección 2

Dimensionamiento

Continúe abriendo la configuración de la segunda sección y cambie el ancho en diferentes tamaños de pantalla.

  • Ancho: 13vw (escritorio), 21vw (tableta), 30vw (teléfono)

encabezado global de pantalla completa

Elemento principal predeterminado

Luego, vaya a la pestaña avanzada y agregue las siguientes líneas de código CSS:

position: fixed;
right: 0;
top: 0;

encabezado global de pantalla completa

Pase el elemento principal

Asegúrese de que esas mismas líneas de código CSS se apliquen al pasar el mouse por encima.

position: fixed;
right: 0;
top: 0;

encabezado global de pantalla completa

5. Guardar los cambios del generador y ver el resultado

Una vez que haya completado todos los pasos anteriores, puede guardar la plantilla de encabezado global y ver el resultado en su sitio web.

encabezado global de pantalla completa

encabezado global de pantalla completa

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

encabezado global de pantalla completa

Móvil

encabezado global de pantalla completa

Pensamientos finales

En este tutorial, le mostramos cómo crear un encabezado global a pantalla completa con el Creador de temas de Divi. Hemos agregado dos elementos fijos a nuestro diseño; un icono de hamburguesa en la esquina superior izquierda y un logotipo en la esquina superior derecha. Al hacer clic, el ícono de hamburguesa abre un menú de pantalla completa que se hace con los elementos integrados de Divi. ¡Puedes usar Divi para diseñar este menú de pantalla completa como quieras! Al comienzo de este tutorial, también pudo descargar el archivo JSON de forma gratuita. Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.