Necesita crear un encabezado global para su sitio web con divi?
Un encabezado global aparecerá en todas partes en su Sitio web, a menos que haya asignado un encabezado diferente a una página o publicación.
¡Empecemos!
vista
Aquí hay una vista previa del encabezado global que vamos a diseñar.
Configura tu menú principal
Comience creando su menú en la configuración de apariencia de su sitio de WordPress.
Acceda a la opción Theme Builder en Divi
en las opciones de Tema divi, haga clic en Generador de temas. Una vez allí, notarás un plantilla de sitio web por defecto.
Agregar y crear un encabezado global
Le plantilla de sitio web predeterminado 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 el proceso.
Configuraciones de sección
apresto
Abra la configuración de la sección que encontrará en la página, en la pestaña Estilo, cambie las dimensiones en diferentes tamaños de pantalla.
- Ancho máximo: 100%
- Ancho máximo: 1280px (para PC y tableta), 100% (para móvil)
espaciamiento
Eliminar todos los márgenes internos superior e inferior
- Vértice del margen interno: 0px
- Margen interno inferior: 0px
frontera
Ahora agregue un radio de borde a las esquinas inferiores izquierda y derecha de la sección.
- Abajo a la izquierda: 50px
- Abajo a la derecha: 50px
Caja de sombra
Agreguemos también una sombra de cuadro sutil.
- Fuerza de desenfoque de sombra de cuadro: 60px
- Color de fuente de los subtítulos: rgba(0,0,0,0.13)
visibilidad
- Desbordamiento horizontal: visible
- Desbordamiento vertical: Visible
Dedicar una nueva línea al encabezado
Ahora que hemos completado la configuración de la sección general, podemos comenzar a agregar filas. En total, necesitaremos dos líneas; uno que está 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:
Configuraciones de línea
Configuración de fondo
Sin agregar ningún módulo a la línea, abra la configuración de la línea y cambie el color de fondo.
- Fondo: #38383F
apresto
Luego modifique los parámetros de tamaño de línea.
- Usar ancho de canalón personalizado: SÍ
- Espacio entre columnas: 1
- Ancho máximo: 100%
- Ancho máximo: 100%
Mostrar
Ahora asegurémonos de que las columnas aparezcan una al lado de la otra en pantallas más pequeñas agregando esta línea de código CSS al elemento de la fila principal.
01
display: flex;
Agregar módulo de imagen en la columna 1
Descargar 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.
alineación
Vaya a la pestaña Estilo y alinee la imagen a la izquierda.
apresto
Modifique también el Ancho del módulo.
espaciamiento
También agregue valores de margen personalizados.
Agregue el módulo de seguimiento de redes sociales en la columna 2
Agregar redes sociales
Vamos a la segunda columna. Allí necesitaremos un módulo de seguimiento de redes sociales. Agrega las redes sociales de tu preferencia. Puedes agregar tantas redes sociales como quieras.
Color de fondo de la red social
Luego, abra cada red social individualmente y cambie el color de fondo a un color completamente transparente.
- Color de fondo: rgba (0,0,0,0)
alineación
Vuelva a la configuración normal del módulo y luego cambie la alineación completa del módulo.
icono
Cambie también la configuración del icono.
- Color del icono: #FFFFFF
- Usar tamaño de icono personalizado: Sí
- Tamaño de fuente del icono: 16 px (PC y tableta), 12 px (teléfono)
espaciamiento
Agrega un margen superior.
Agregue el módulo Button en la columna 3
Vaya a la tercera columna y agregue un módulo Botón que contenga un texto de su elección.
alineación
Cambie la alineación del botón en la pestaña Estilo.
Configuración de botones
Personalice la configuración de los botones de la siguiente manera:
- 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
- Botón de fondo: #ffae25
- Ancho del borde del botón: 0 píxeles
- Botón de radio del borde: 0 píxeles
- Espaciado entre letras de botones: 5 px (escritorio), 3 px (tableta y teléfono)
- Botón de fuente: abrir ninguno
- Botón de luz tenue: texto en negrita
- Copiar estilo de botón: TT
espaciamiento
Personalice los valores de margen.
Dedicar una nueva línea a la barra de menú
Una vez que haya completado la línea dedicada al encabezado global, puede agregar otra línea justo debajo.
Configuraciones de línea
apresto
Sin agregar ningún módulo todavía, abra la configuración de línea y cambie la configuración de tamaño en la pestaña Estilo.
espaciamiento
Luego elimine todos los márgenes superior e inferior.
Agregar un módulo de menú a la columna
Seleccione el menú
A continuación, agregue un módulo Menú a la columna y seleccione el menú que creó en la primera parte de este tutorial.
Provisión
Cambie a la pestaña Estilo y cambie la configuración de diseño de la siguiente manera:
Gravámenes
También cambie el color del enlace activo en la pestaña Estilo.
- Color del enlace activo: #ffae25
el menú de navegación
Haga lo mismo con el color de la línea del menú desplegable en la configuración del menú desplegable.
- Color de la fila desplegable: #ffae25
icono
- Color del icono del menú de hamburguesas: #ffae25
Texto del menú
Con ajustes de texto de menú.
- Fuente del menú: Prata
- Color del texto del menú: #000000
Hacer que el encabezado y la barra de menú permanezcan en la parte superior
Configuración de la sección abierta
Una vez que haya completado la segunda línea, todo lo que tiene que hacer es asegurarse de que la sección permanezca en la parte superior de nuestras páginas y publicaciones. Para ello, abriremos de nuevo el apartado de ajustes.
Agregar CSS personalizado al elemento principal
A continuación, iremos a la pestaña avanzada y añadiremos unas líneas de código CSS al elemento principal de la sección.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Guarde las opciones globales de creación de encabezados y 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 todos los cambios del generador de temas y ¡listo!
vista
Ahora que hemos seguido todos los pasos, echemos un último vistazo al resultado.
Conclusión
En este artículo, le mostramos cómo crear un encabezado global personalizado con el nuevo creador de temas de Divi. Este tutorial muestra lo fácil que es crear hermosos encabezados y aplicarlos a todo tu Sitio web o tipos de publicaciones personalizadas específicas.
Esperamos que le ayude a personalizar su sitio web con Theme Builder.
Si tienes alguna duda o sugerencia, por favor déjanos un comentario en el sección de comentarios a continuación.
...
