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:
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.
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
ID y Clase CSS
Visibilidad
Puesto
Dentro de esta sección insertamos una fila con estructura de una columna. Esta fila va a contener el ícono del menú.
Tamaño
Espaciado
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
Separación
ID y Clases CSS
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
Separación
Vamos a insertar un módulo de texto por cada opción del menú y definimos los siguiente estilos.
Texto
Separación
Borde
ID y clases CSS
Debajo de las opciones insertamos un módulo Seguir en Medios Sociales para colocar los ícono de redes sociales.
Icono
Separación
ID y clases CSS
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% ;
width: 100% ;
z-index: 99999 ;
background-color: #FFFFFF ;
}
.section-transform {
-webkit-transition: all 0.5s ease ;
-moz-transition: all 0.5s ease ;
-o-transition: all 0.5s ease ;
-ms-transition: all 0.5s ease ;
transition: all 0.5s ease ;
}
</style>
Insertamos una segunda sección que es la que contendrá al logo del sitio web o de la empresa.
Fondo
Separación
Puesto
Insertamos una fila con estructura de una columna. En ella vamos a colocar luego un módulo Imagen para insertar el logo.
Tamaño
Separación
Ahora insertamos un módulo Imagen de Divi para contener al logo del sitio web y le asignamos los siguientes estlos.
Tamaño
Separación
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
Puesto
Tamaño
Puesto
¡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.
Al momento de activar el constructor Divi se crea una nueva opción en el menú…
Divi es un constructor para WordPress que se instala como un si fuera un tema…
En esta guía te muestro paso a paso cómo crear una caja con información del…
En esta guía te muestro cómo cambiar el encabezado de la página home para que…
En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…
En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…