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 de pantalla completa utilizando Divi’s Theme Builder. Mientras se desplaza hacia abajo por 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 altamente receptivo y también podrás descargar el archivo JSON gratis!

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

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

Agregar 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 espaciado del módulo a continuación.

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

encabezado global de pantalla completa

Frontera

Y complete la configuración del módulo agregando un borde inferior.

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

encabezado global de pantalla completa

Clonar módulo de texto tres veces

Una vez que haya completado el primer Módulo de texto, puede clonarlo tantas veces como desee (dependiendo de 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

Tendrá que 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

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 las siguientes líneas de código CSS y JQuery para que el menú de pantalla completa funcione:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18 años
19
20
21
22
23
24
<script>
jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
});
</script>
<style>
.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;
}</style>

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 un 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:

01
02
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.

01
02
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:

01
02
03
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.

01
02
03
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

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!