Desde que salió Divi Theme Builder, hemos tratado de guiarlo a través del proceso de creación de sus propios encabezados globales. Continuaremos haciéndolo mostrándole cómo crear un encabezado vertical que aparece en el lado izquierdo de sus páginas y publicaciones. El color de fondo del encabezado es completamente transparente, lo que permite mostrar el contenido de la página / publicación. Nos hemos asegurado de que el encabezado global permanezca fijo en el lado izquierdo durante el desplazamiento y también hemos transformado el menú en una versión optimizada para dispositivos móviles. 

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 girado

Móvil

encabezado global girado

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

Ir a Divi Theme Builder

Comience yendo al Divi Theme Builder en su sitio web de WordPress.

encabezado global girado

Comience a construir encabezado global

Haga clic en ‘Agregar encabezado global’ y seleccione ‘Crear encabezado global’.

encabezado global girado

2. Comience a construir el encabezado global del lado girado

Agregar nueva sección

Color de fondo

Una vez dentro del editor de plantillas, puede abrir la sección que ya está allí y cambiar el color de fondo en diferentes tamaños de pantalla.

  • Color de fondo: rgba (0,0,0,0) (escritorio), #FFFFFF (tableta y teléfono)

encabezado global girado

Dimensionamiento

Modifique la configuración de tamaño de la sección a continuación.

  • Ancho: 5vw (escritorio), 100% (tableta y teléfono)
  • Altura mínima: 100vw (escritorio), automático (tableta y teléfono)

encabezado global girado

Espaciado

Agregue también algunos rellenos superiores e inferiores personalizados.

  • Relleno superior: 2vw
  • Relleno inferior: 2vw

encabezado global girado

Sombra de la caja

Luego, vaya a la configuración de sombra de cuadro y agregue una sombra de cuadro personalizada en diferentes tamaños de pantalla.

  • Posición horizontal de Box Shadow: 32px (escritorio), 0px (tableta y teléfono)
  • Box Shadow Blur Fuerza: 49px
  • Box Shadow Spread Strength: 0px (escritorio), 19px (tableta y teléfono)
  • Color de sombra: rgba (0,0,0,0.12)

encabezado global girado

Elemento principal predeterminado

También nos aseguraremos de que el encabezado global girado permanezca fijo en el lado izquierdo agregando algunas líneas de código CSS al elemento principal de la sección.

01
02
03
04
05
position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;

encabezado global girado

Pase el elemento principal

Asegúrese de agregar esas mismas líneas de código CSS al elemento principal de desplazamiento de la sección también.

01
02
position: fixed;
top: 0;

encabezado global girado

Visibilidad predeterminada

Luego, aumente el índice z en la configuración de visibilidad.

  • Índice Z: 99999

encabezado global girado

Visibilidad de desplazamiento

Asegúrese de que se aplica el mismo valor al pasar el mouse por encima.

  • Índice Z: 99999

encabezado global girado

Agregar nueva fila

Estructura de columna

Una vez que haya completado la configuración de la sección, continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

encabezado global girado

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1

encabezado global girado

Espaciado

Elimine también todos los rellenos superiores e inferiores predeterminados.

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

encabezado global girado

Configuraciones de columna

Elemento principal (tableta y teléfono)

En tabletas y teléfonos, buscamos una apariencia completamente diferente. Colocaremos tres módulos diferentes uno al lado del otro. Para hacer eso, necesitaremos agregar un poco de código CSS. Abra la configuración de la columna, vaya a la pestaña avanzada e inserte las siguientes líneas de código CSS en el elemento principal de la tableta y el teléfono:

01
02
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;

encabezado global girado

Agregar módulo de imagen a la columna

Subir logo

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitamos es un módulo de imagen. Cargue un archivo de imagen de logotipo semitransparente de su elección.

encabezado global girado

Dimensionamiento

Luego, vaya a la pestaña de diseño y cambie el ancho en diferentes tamaños de pantalla.

  • Ancho: 4vw (escritorio), 12vw (tableta), 16vw (teléfono)

encabezado global girado

Escala de transformación

Aumente el tamaño del módulo modificando la configuración de la escala de transformación a continuación.

  • Derecha: 170% (escritorio), 100% (tableta y teléfono)
  • Inferior: 170% (escritorio), 100% (tableta y teléfono)

encabezado global girado

Transformar Traducir

Y empuje el módulo hacia la derecha agregando un valor de traducción de transformación inferior en el escritorio.

  • Inferior: 1vw (escritorio), 0vw (tableta y teléfono)

encabezado global girado

Agregar módulo de menú a la columna

Seleccione el menú

El siguiente módulo que necesitamos es el Módulo de menú. Seleccione un menú de su elección.

encabezado global girado

Eliminar color de fondo

Elimine el color de fondo del módulo a continuación.

encabezado global girado

Diseño

Luego, vaya a la pestaña de diseño y cambie la configuración de diseño.

  • Estilo: Centrado
  • Dirección del menú desplegable: hacia abajo

encabezado global girado

Texto de menú predeterminado

Modifique la configuración del texto del menú también.

  • Color de enlace activo: #cecece
  • Fuente del menú: Montserrat
  • Peso de fuente del menú: negrita
  • Color del texto del menú: # 000000
  • Tamaño del texto del menú: 0.9vw (escritorio), 2vw (tableta), 2.5vw (teléfono)

encabezado global girado

Pase el texto del menú

Cambie el color del texto del menú al pasar el mouse.

  • Color del texto del menú: #afafaf

encabezado global girado

Menú desplegable

También estamos haciendo algunos cambios en la configuración del menú desplegable.

  • Color de línea del menú desplegable: # 000000
  • Color del texto del menú desplegable: # 000000

encabezado global girado

Íconos

Cambie el color del icono del menú de hamburguesas a continuación.

  • Color del icono del menú de hamburguesas: # 000000

encabezado global girado

Espaciado

Y agregue algunos valores de margen personalizados en diferentes tamaños de pantalla.

  • Margen superior: 18vw (escritorio), 0vw (tableta y teléfono)
  • Margen inferior: 18vw (escritorio), 0vw (tableta y teléfono)
  • Margen izquierdo: -13vw (escritorio), 0vw (tableta y teléfono)
  • Margen derecho: -13vw (escritorio), 0vw (tableta y teléfono)

encabezado global girado

Transformar Rotar

Ahora, para crear el efecto girado, jugaremos con los valores de rotación de transformación del módulo.

  • Izquierda: 270deg (escritorio), 0deg (tableta y teléfono)

encabezado global girado

Agregar módulo de seguimiento de redes sociales a la columna

Agregar redes sociales

En el Módulo de seguimiento de redes sociales, que es el siguiente y último módulo que necesitamos para completar nuestro encabezado global rotado. Agregue algunas redes sociales de su elección.

encabezado global girado

Restablecer estilos de redes sociales

Continúe restableciendo la configuración de cada red social individualmente. Esto nos ayudará a deshacernos de su color de fondo.

encabezado global girado

Alineación

Luego, pase a la pestaña de diseño del módulo y cambie la alineación del módulo en diferentes tamaños de pantalla.

  • Alineación: izquierda (escritorio), derecha (tableta y teléfono)

encabezado global girado

Configuraciones de iconos

Por último, pero no menos importante, cambie la configuración del icono también.

  • Color del icono: # 000000
  • Usar tamaño de icono personalizado: sí
  • Tamaño de fuente del icono: 2.1vw

encabezado global girado

3. Guardar los cambios del generador y ver el resultado

Una vez que haya completado todos los módulos, puede guardar la plantilla, salir del Divi Theme Builder y ver el resultado en su sitio web.

encabezado global girado

encabezado global girado

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

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!