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


Ahora que Theme Builder está aquí, no podemos esperar para sumergirnos en nuevos tutoriales que lo ayudarán a configurar su sitio web de la A a la Z. Esto incluye la creación de encabezados personalizados utilizando la opción integrada de Divi. En este tutorial, nos enfocaremos en crear un encabezado global usando el Creador de temas de Divi. Aparecerá un encabezado global en todas partes en su sitio web a menos que haya asignado un encabezado diferente a esa página o publicación.

¡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

Móvil

encabezado global

Descargar The Custom Header Design GRATIS

Para poner sus manos en el diseño de encabezado global personalizado gratuito, primero deberá descargarlo 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=Wx6bTxiOmRc (/ incrustar)

Suscríbase a nuestro canal de Youtube

1. Configure su menú principal

Comience creando su menú en la configuración de apariencia de su sitio web de WordPress.

encabezado global

2. Vaya a las Opciones del generador de temas

Luego, navegue al Creador de temas en las Opciones de tema de Divi. Una vez allí, verá una plantilla de sitio web predeterminada vacía.

encabezado global

3. Agregar y construir encabezado global

La plantilla de sitio web predeterminada es donde puede comenzar a crear su encabezado global personalizado, cuerpo global y pie de página global. Haga clic en "Agregar encabezado global" y continúe haciendo clic en "Crear encabezado global" para comenzar con el proceso.

encabezado global

Configuraciones de sección

Dimensionamiento

Abra la sección que puede ver en la página, pase a la pestaña de diseño y cambie el ancho en diferentes tamaños de pantalla.

  • Ancho: 100%
  • Ancho máximo: 1280 px (escritorio), 100% (tableta y teléfono)

encabezado global

Espaciado

Elimine todos los rellenos superiores e inferiores predeterminados a continuación.

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

encabezado global

Frontera

Agregue un radio de borde a las esquinas inferiores izquierda y derecha de la sección siguiente.

  • Abajo a la izquierda: 50 px
  • Abajo a la derecha: 50 px

encabezado global

Sombra de la caja

También estamos agregando una sombra de cuadro sutil.

  • Caja Shadow Blur Fuerza: 60px
  • Color de sombra: rgba (0,0,0,0.13)

encabezado global

Visibilidad

Luego, vaya a la pestaña avanzada y oculte los desbordamientos. Aumente también el índice z, esto ayudará a garantizar que la sección permanezca en la parte superior de todo el contenido de la página.

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible
  • Índice Z: 99999

encabezado global

4. Dedicar nueva fila al encabezado

Ahora que hemos completado la configuración de la sección general, podemos comenzar a agregar filas. En total, necesitaremos dos filas; uno dedicado al encabezado y otro que permite que se muestren los elementos del menú. Comenzaremos con el encabezado agregando una nueva fila usando la siguiente estructura de columnas:

encabezado global

Configuración de fila

Color de fondo

Sin agregar ningún módulo a la fila, abra la configuración de la fila y cambie el color de fondo.

  • Color de fondo: # 38383f

encabezado global

Dimensionamiento

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

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

encabezado global

Monitor

Y asegúrese de que las columnas aparezcan una al lado de la otra en tamaños de pantalla más pequeños al agregar una sola línea de código CSS al elemento principal de la fila.

display: flex;

encabezado global

Agregar módulo de imagen a la columna 1

Subir logo

Una vez que haya completado la configuración de la fila, es hora de comenzar a agregar módulos. Agregue un módulo de imagen a la columna 1 y cargue su logotipo.

encabezado global

Alineación

Vaya a la pestaña de diseño y asegúrese de estar usando la alineación izquierda de la imagen.

  • Alineación de imagen: izquierda

encabezado global

Dimensionamiento

Modifique también el ancho del módulo.

  • Ancho: 100 px

encabezado global

Espaciado

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

  • Margen superior: 5px
  • Margen izquierdo: 50 px (escritorio), 20 px (tableta y teléfono)

encabezado global

Agregue el módulo de seguimiento de redes sociales a la columna 2

Agregar redes sociales

A la segunda columna. Allí, necesitaremos un módulo de seguimiento de redes sociales. Agregue las redes sociales de su elección.

encabezado global

Color de fondo de la red social

Luego, abra cada red social individualmente y cambie el color de fondo a uno completamente transparente.

  • Color de fondo: rgba (0,0,0,0)

encabezado global

Alineación

Vuelva a la configuración normal del módulo y cambie la alineación completa del módulo a continuación.

  • Alineación del módulo: centro

encabezado global

Icono

Modifique la configuración del icono también.

  • Color del icono: #ffffff
  • Usar tamaño de icono personalizado: sí
  • Tamaño de fuente del icono: 16 px (computadora de escritorio y tableta), 12 px (teléfono)

encabezado global

Espaciado

Y agregue un poco de margen superior.

  • Margen superior: 10px

encabezado global

Agregar módulo de botón a la columna 3

Agregar copia

Pase a la tercera columna y agregue un Módulo de botones con alguna copia de su elección.

encabezado global

Alineación

Cambie la alineación del botón en la pestaña de diseño.

  • Alineación de botones: derecha

encabezado global

Configuraciones de botones

Aplicar estilo a la configuración del botón en consecuencia:

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 12 px (escritorio), 10 px (tableta), 8 px (teléfono)
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # ffae25
  • Ancho del borde del botón: 0px

encabezado global

  • Radio del borde del botón: 0px
  • Espacio entre letras de botones: 5 px (escritorio), 3 px (tableta y teléfono)
  • Fuente del botón: Abrir sin
  • Peso de fuente del botón: negrita
  • Estilo de fuente del botón: mayúscula

encabezado global

Espaciado

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

  • Relleno superior: 20px
  • Relleno inferior: 20px
  • Acolchado izquierdo: 50 px (computadora de escritorio y tableta), 15 px (teléfono)
  • Relleno derecho: 50 px (computadora de escritorio y tableta), 15 px (teléfono)

encabezado global

5. Dedicar nueva fila a la barra de menú

Una vez que haya completado la fila dedicada al encabezado global, puede agregar otra fila justo debajo de ella utilizando la siguiente estructura de columnas:

encabezado global

Configuración de fila

Dimensionamiento

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

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

encabezado global

Espaciado

Elimine todos los rellenos superiores e inferiores predeterminados a continuación.

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

encabezado global

Agregar módulo de menú a la columna

Seleccione el menú

Luego, agregue un Módulo de menú a la columna y seleccione el menú que ha creado en la primera parte de este tutorial.

encabezado global

Diseño

Pase a la pestaña de diseño y cambie la configuración de diseño de la siguiente manera:

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

encabezado global

Enlaces

Modifique el color del enlace activo en la pestaña de diseño también.

  • Color de enlace activo: # ffae25

encabezado global

Menú desplegable

Haga lo mismo para el color de línea del menú desplegable en la configuración del menú desplegable.

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

encabezado global

Íconos

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

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

encabezado global

Texto del menú

Junto con la configuración del texto del menú.

  • Fuente del menú: Prata
  • Color del texto del menú: # 000000

encabezado global

6. Haga que el encabezado y la barra de menú se peguen hacia arriba

Configuración de sección abierta

Una vez que haya completado la segunda fila, lo único que queda por hacer es hacer que la sección se adhiera a la parte superior de nuestras páginas y publicaciones. Para hacerlo, volveremos a abrir la configuración de la sección.

encabezado global

Agregar CSS personalizado al elemento principal

Luego, iremos a la pestaña avanzada y agregaremos algunas líneas de código CSS al elemento principal de la sección.

position: fixed;
top: 0;
left: 0;
right: 0;

encabezado global

7. Guardar opciones globales de encabezado y generador de temas

Una vez que haya completado todo el diseño del encabezado global, asegúrese de guardar el diseño antes de salir del diseño de la plantilla. Una vez que esté fuera del diseño de la plantilla, guarde los cambios de todo su generador de temas y ¡listo!

encabezado global

encabezado global

Avance

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

Escritorio

cabecera personalizada

Móvil

cabecera personalizada

Pensamientos finales

En esta publicación, le mostramos cómo crear un encabezado global personalizado con el nuevo Generador de temas de Divi. Este tutorial muestra lo fácil que es crear hermosos encabezados y aplicarlos a todo su sitio web o tipos de publicaciones personalizadas específicas. ¡Esperamos que este tutorial lo inspire a comenzar con Theme Builder de inmediato! Si tiene alguna pregunta o sugerencia, asegúrese de 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 regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.