Tener llamadas a la acción claras en sus páginas es una necesidad para la mayoría de los sitios web. ¿Y qué mejor manera de llamar la atención sobre algunas de tus llamadas a la acción más importantes que colocándolas en tu encabezado?
En el tutorial de hoy, le mostraremos cómo agregar dos botones uno al lado del otro a su encabezado global usando el Generador de botones. temas de Divi. Uno de los botones es primario, el otro secundario. ¡También podrás descargar el archivo JSON del encabezado global de forma gratuita!
vista
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
oficina
1. Acceda a Divi Theme Builder y cree un encabezado global
Ir a Divi Theme Builder
Comience yendo a Divi Theme Builder y haga clic en "Agregar un encabezado global".
Crear un encabezado global
Continúe haciendo clic en "Crear encabezado global".
2. Cree un diseño de encabezado general
Añadir una nueva sección
espaciamiento
Una vez dentro del editor de plantillas, verá una sección. Abra la configuración de la sección y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Índice Z
También asegúrese de aumentar el índice z de la sección en la configuración de visibilidad. Esto asegurará que el contenido El encabezado global aparecerá en la parte superior de toda la página y publicará el contenido.
- Índice Z: 99999
Añadir una nueva linea
Estructura de la columna
Una vez que haya completado la configuración de la sección, agregue una nueva fila a la sección utilizando la siguiente estructura de columnas:
apresto
Sin agregar módulos, abra los parámetros de la línea y deje que la línea ocupe todo el ancho del contenedor de la sección.
- Use un ancho de canal personalizado: Sí
- Ancho de canal: 1
- Ecualizar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
espaciamiento
También cambie los valores de relleno a la izquierda y a la derecha de la línea.
- Acolchado izquierdo: 2vw (escritorio), 10vw (tableta y teléfono)
- Relleno derecho: 2vw (escritorio), 10vw (tableta y teléfono)
Elemento principal
Para centrar todo contenido columnas, agregaremos estas dos líneas de código CSS al elemento principal de la fila.
display: flex;align-items: center;
Elimina la propiedad de visualización de escritorio en tabletas y dispositivos móviles.
display: block;
Columna 1
Frontera
Continúe abriendo la configuración en la columna 1 y agregue un borde derecho solo en el escritorio.
- Ancho del borde derecho: 1px (escritorio), 0px (tableta y teléfono)
- Color del borde derecho: # d8d8d8
Índice Z
También aumente el índice z de la columna.
- Índice Z: 11
Columna 2
Elemento principal
Luego abra la configuración de la columna 2 y agregue las siguientes líneas de código CSS al elemento de la columna principal para convertirlo en dos columnas.
display: grid;grid-template-columns: 50% 50%;
Agregar un módulo de menú a la columna 1
Selecciona el menu
¡Es hora de comenzar a agregar módulos! Agregue un módulo de menú a la columna 1 y seleccione un menú de su elección.
Descargar logo
Luego sube un logo.
Provisión
Cambie a la pestaña de diseño del módulo y asegúrese de que se apliquen las siguientes configuraciones de diseño:
- Estilo: alineado a la izquierda
- Dirección del menú desplegable: abajo
Texto del menú
Luego cambie la configuración del texto del menú.
- Color de enlace activo: # ef6f49
- Fuente del menú: Montserrat
- Peso de la fuente del menú: semi negrita
- Estilo de fuente del menú: mayúscula
- Color del texto del menú: # 333333 (predeterminado), # ef6f49 (pasar el mouse)
- Tamaño del texto del menú: 0.7vw (escritorio), 1.8vw (tableta), 2.5vw (teléfono)
- Espaciado entre letras del menú: 1px
Texto del menú desplegable
También realice cambios en la configuración de texto en el menú desplegable.
- Color de fondo del menú desplegable: #ffffff
- Color de la línea en el menú desplegable: # ef6f49
iconos
A continuación, cambie el color del icono del menú de hamburguesas.
- Color del icono del menú de hamburguesas: # 000000
apresto
Agregue también un ancho máximo de logotipo a los parámetros de tamaño.
- Ancho máximo del logotipo: 9vw (escritorio), 12vw (tableta), 15vw (teléfono)
Menú de logotipo CSS
Y complete la configuración del módulo agregando una línea de código CSS al logotipo del menú en la pestaña avanzada.
margin-right: 10vw;
Agregue un módulo de código a la columna 1
Agregue un código CSS personalizado al módulo
El siguiente y último módulo que necesitamos en la columna 1 es un módulo de código. Agregue las siguientes líneas de código CSS para personalizar el espacio entre los elementos del menú:
<style>.et-menu>li {padding-left: 1.5vw !important;padding-right: 1.5vw !important;}</style>
Agregue el primer módulo de botones a la columna 2
Añadir una copia
¡Pasemos al siguiente módulo! Agregue el primer módulo de botones e ingrese una copia de su elección.
Ajouter un gravamen
Luego agregue un enlace al módulo de botones.
alineación
Cambie a la pestaña de diseño del módulo y cambie la alineación de los botones.
- Alineación de botones: derecha
Configuraciones de botones
También estilo el botón.
- Use estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 0.8vw (escritorio), 1.7vw (tableta), 2.5vw (teléfono)
- Color del texto del botón: # 000000
- Color de fondo del botón: # edeef0 (predeterminado), # d6d7d8 (hover)
- Ancho del borde del botón: 0px
- Radio del borde del botón: 0px
- Espacio entre letras de botones: 2 px
- Fuente del botón: Montserrat
- Peso de la fuente del botón: semi negrita
- Estilo de fuente del botón: mayúscula
espaciamiento
Complete la configuración del módulo agregando valores de relleno personalizados en diferentes tamaños de pantalla.
- Acolchado superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Relleno izquierdo: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
- Relleno derecho: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
Módulo de botón de clonación
Una vez que haya completado el primer módulo de botones, clónelo.
Editar enlace
Abra el módulo de botones duplicados y cambie la URL.
Cambiar alineación
También cambie la alineación del módulo.
- Alineación de botones: izquierda
Cambiar la configuración del botón
También realice cambios en la configuración del botón.
- Color de texto del botón: #ffffff
- Color de fondo del botón: # ef6f49 (predeterminado), # e06945 (desplazarse)
Escala de transformación de desplazamiento
Complete la configuración del botón agregando un efecto de desplazamiento de escala de transformación.
- Derecha: 110%
- Bajo: 110%
3. Guarde los cambios en el generador de temas y el resultado de la vista previa.
Una vez que su encabezado global esté completo, guarde todos los cambios realizados en el generador de temas y vea el resultado en su Sitio web!
vista
Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.
Consideraciones finales
En este tutorial, le mostramos cómo agregar dos botones uno al lado del otro a su encabezado general usando el generador de temas de Divi.
Uno de los botones que agregamos es primario, el otro es secundario. Agregar botones a su encabezado general lo ayuda a resaltar algunas de las CTA más importantes en su Sitio web. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación.