Te voy a mostrar cómo crear un encabezado global de pantalla completa con Divi.
Si estás buscando crear un encabezado global para tu sitio web que no ocupe mucho espacio, este tutorial te va a encantar.
Mientras nos desplazamos hacia abajo en la página, las únicas dos cosas que vas a notar en la cabecera son:
- 1 icono de menú de tres rayas en el que se puede hacer clic.
- 1 logo en la esquina superior derecha.
Estos dos elementos seguirán a tus visitantes durante la navegación por la página y si alguien hace clic en el icono del menú, se abre un menú de pantalla completa que permitirá a los lectores ir a otras páginas de tu sitio web.
Para hacerlo vamos al Generador de Temas o Theme Builder de Divi y creamos un nuevo encabezado global para el sitio web.
Comenzamos editando los ajustes de la sección predeterminada.
Sección del Menú
Esta sección es la que contendrá al menú, que se abre copando toda la pantalla cuando hacemos clic sobre el ícono de menú.
Separación
- Relleno Superior: 0px
- Relleno Base: 0px
ID y Clase CSS
- Clase CSS: section-transform
Visibilidad
- Desbordamiento Horizontal: Hidden
- Desbordamiento Vertical: Hidden
Puesto
- Indice Z: 100
Fila del Icono de Menú
Dentro de esta sección insertamos una fila con estructura de una columna. Esta fila va a contener el ícono del menú.
Tamaño
- Uso Personalizado del Canalón de Ancho: Sí
- Espacio entre columnas: 1
- Ancho: 100%
- Ancho Máximo: 100%
Espaciado
- Relleno Superior: 0px
- Relleno Base: 0px
Módulo Texto para el Icono
Insertamos un módulo Texto de Divi que va a contener al ícono de menú. Copia y pega este símbolo en el área de contenido del módulo «≡».
Texto
- Fuente del Texto: Abril Fatface
- Color del Texto: #000000
- Tamaño del Texto: 3vw (Escritorio), 5vw (Tablet), 7vw (Teléfono)
- Altura de Línea del Texto: 1em
Separación
- Relleno Superior: 2vw (Escritorio), 3.5vw (Tablet), 5vw (Teléfono)
- Relleno Base: 2vw (Escritorio), 3.5vw (Tablet), 5vw (Teléfono)
- Relleno Izquierda: 3vw (Escritorio), 4vw (Tablet), 7vw (Teléfono)
- Relleno Derecha: 3vw (Escritorio), 4vw (Tablet), 7vw (Teléfono)
ID y Clases CSS
- Id CSS: menu-open
Fila del Menú
Insertamos una segunda fila con estructura de una columna. Esta fila es la que va a contener las opciones o enlaces del menú.
Tamaño
- Ancho: 100%
- Ancho Máximo: 100%
Separación
- Margen Superior: 2vw (Escritorio), 4vw (Tablet), 6vw (Teléfono)
- Margen Inferior: 2vw (Escritorio), 4vw (Tablet), 6vw (Teléfono)
- Relleno Izquierda: 19vw
- Relleno Derecha: 19vw
Módulo Texto para Opciones del Menú
Vamos a insertar un módulo de texto por cada opción del menú y definimos los siguiente estilos.
Texto
- Fuente del Texto: Poppins
- Espesor del Texto: Semi Bold
- Color del Texto: #000000
- Tamaño del Texto: 3vw (Escritorio), 7vw (Tablet), 8vw (Teléfono)
- Espacio entre Letras: -0.1vw
- Altura de Línea del Texto: 1em
Separación
- Margen Superior: 1vw
- Relleno Base: 2vw
- Relleno Izquierda: 3vw
Borde
- Ancho del Borde Inferior: 1px
- Color del Borde Inferior: #333333
ID y clases CSS
- Clase CSS: menu-item-click
Módulo Seguir en Medios Sociales
Debajo de las opciones insertamos un módulo Seguir en Medios Sociales para colocar los ícono de redes sociales.
Icono
- Color del Icono: #000000
- Usar Tamaño de Icono Personalizado: Sí
- Tamaño de Fuente del Icono: 1vw (Escritorio), 2vw (Tablet), 3vw (Teléfono)
Separación
- Relleno Izquierda: 3vw
ID y clases CSS
- Clase CSS: menu-item-click
Módulo Código
Por último en esta fila insertamos un módulo Código para colocar los códigos Javascript y CSS que se van a ocupar de que el menú aparezca y desaparezca al hacer clic sobre el ícono.
<script>
jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('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>
Sección del Logo
Insertamos una segunda sección que es la que contendrá al logo del sitio web o de la empresa.
Fondo
- Color del Fondo: rgba(0,0,0,0)
Separación
- Relleno Superior: 0px
- Relleno Base: 0px
Puesto
- Indice Z: 99
Fila del logo
Insertamos una fila con estructura de una columna. En ella vamos a colocar luego un módulo Imagen para insertar el logo.
Tamaño
- Ancho: 100%
- Ancho Máximo: 100%
Separación
- Relleno Superior: 0px
- Relleno Base: 0px
Módulo Imagen
Ahora insertamos un módulo Imagen de Divi para contener al logo del sitio web y le asignamos los siguientes estlos.
Tamaño
- Forzar Ancho Completo: Sí
Separación
- Relleno Superior: 2.5vw (Escritorio), 3.5vw (Tablet), 5vw (Teléfono)
- Relleno Base: 2.5vw (Escritorio), 3.5vw (Tablet), 5vw (Teléfono)
- Relleno Izquierda: 3vw (Escritorio), 4vw (Tablet), 7vw (Teléfono)
- Relleno Derecha: 3vw (Escritorio), 4vw (Tablet), 7vw (Teléfono)
Ajustar Sección del Menú
Ahora que ya tenemos todos los elementos de nuestro encabezado vamos a finalizar haciendo unos ajustes en el tamaño y posición de las secciones.
Este paso es importante no hacerlo antes de colocar y ajustar todos los demás elementos del encabezado ya que sino te va a resultar complicado trabajar en el diseño.
Tamaño
- Ancho: 8vw (Escritorio), 11vw (Tablet), 18vw (Teléfono)
- Altura: 7vw (Escritorio), 11vw (Tablet), 18vw (Teléfono)
Puesto
- Puesto: Fixed
- Location: Arriba Izquierda
Ajustar Sección del Logo
Tamaño
- Ancho: 13vw (Escritorio), 21vw (Tablet), 30vw (Teléfono)
Puesto
- Puesto: Fixed
- Location: Arriba Derecha
¡Listo! Guardamos los cambios en el editor Divi y luego en el Theme Builder. Y ya podemos ir a cualquier de las página del sitio web y ver cómo quedó nuestro encabezado de pantalla completa.
En este tutorial te mostramos cómo crear un encabezado global de pantalla completa con el Generador de Temas de Divi.
He agregado dos elementos fijos y flotantes al diseño; un icono de menú en la esquina superior izquierda y un logotipo en la esquina superior derecha.
Al hacer clic en el ícono de menú se abre un menú de pantalla completa que tapa todos los elementos de la página.
Déjame un comentario debajo contando qué te parecieron estas posibilidades y características de Divi.
Hola, esta espectacular el tutorial. El tema es que lo hice pero no aparece cuando voy a la pagina donde lo implementé. Sabes que puede estar pasando?
te dejo el link en donde lo implemente.
https://promociones.bahiamanzano.com/be-manzano/