Cómo Crear un Encabezado de Pantalla Completa con Divi

WordPress es Mejor con Divi

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>

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

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

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.

Jorge Baffa

Jorge Baffa

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Las Guías Divi

los Módulos Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *