Cómo crear un encabezado global girado con el generador de temas de Divi

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 global rotado que aparece en el lado izquierdo de sus páginas y publicaciones. El color de fondo del encabezado es completamente transparente, lo que permite que se muestre el contenido de la página / publicación. Nos hemos asegurado de que el encabezado global permanezca fijo en el lado izquierdo mientras se desplaza y también hemos transformado el menú en una versión compatible con dispositivos móviles. En este tutorial de caso de uso, le mostraremos cómo recrear el diseño desde cero y también podrá descargar el archivo JSON de plantilla de forma gratuita.

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue la plantilla de encabezado global girada GRATIS

Para poner sus manos en la plantilla de encabezado global rotada, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Vaya a Divi Theme Builder y comience a crear un encabezado global

Ir a Divi Theme Builder

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

Comience a construir un encabezado global

Haga clic en 'Agregar encabezado global' y seleccione 'Crear encabezado global'.

2. Comience a crear un encabezado global lateral 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)

Dimensionamiento

A continuación, modifique la configuración de tamaño de la sección.

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

Espaciado

Agregue un poco de acolchado superior e inferior personalizado también.

• Acolchado superior: 2vw
• Acolchado inferior: 2vw

Sombra de la caja

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

• Posición horizontal de la sombra del cuadro: 32 px (escritorio), 0 px (tableta y teléfono)
• Fuerza de desenfoque de sombra de caja: 49px
• Fuerza de propagación de la sombra de la caja: 0px (escritorio), 19px (tableta y teléfono)
• Color de sombra: rgba (0,0,0,0.12)

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.

position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;

Elemento principal de desplazamiento

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

position: fixed;
top: 0;

Visibilidad predeterminada

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

• Índice Z: 99999

Visibilidad de desplazamiento

Asegúrese de que se aplique el mismo valor al pasar el mouse.

• Índice Z: 99999

Agregar nueva fila

Estructura de la columna

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

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ón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Elimine también todo el acolchado superior e inferior predeterminado.

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

Configuración de columna

Elemento principal (tableta y teléfono)

En la tableta y el teléfono, 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:

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

Agregar módulo de imagen a la columna

Subir logotipo

¡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.

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)

Transformar escala

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

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

Transformar Traducir

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

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

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.

Eliminar color de fondo

A continuación, elimine el color de fondo del módulo.

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

Texto de menú predeterminado

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

• Color de enlace activo: #cecece
• Fuente del menú: Montserrat
• Peso de la 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)

Texto del menú flotante

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

• Color del texto del menú: #afafaf

Menú desplegable

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

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

Iconos

A continuación, cambie el color del icono del menú de hamburguesas.

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

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)

Transformar Girar

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

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

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.

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.

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)

Configuración de iconos

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

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

3. Guarde los cambios del generador y vea el resultado

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

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear un encabezado global rotado usando el nuevo Theme Builder de Divi. También hemos transformado la barra de menú en una versión muy optimizada para dispositivos móviles. A menos que se elija lo contrario, el encabezado global que hemos creado aparecerá en todas sus publicaciones y páginas. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.