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 con la opción integrada de Divi. En este tutorial, nos enfocaremos en crear un encabezado global usando Divi’s Theme Builder. Un encabezado global aparecerá 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

 

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 Generador de temas en Opciones de tema de Divi. Una vez allí, notará 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 poco de 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.

 

01
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

 

Pase 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 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 también el color del enlace activo en la pestaña de diseño.

 

  • 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 que la sección se adhiera a la parte superior de nuestras páginas y publicaciones. Para hacer eso, 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.

 

01
02
03
04
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

 

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!