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

Botón divi juxaposed

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

Usando el generador de temas

Crear un encabezado global

Continúe haciendo clic en "Crear encabezado global".

Configuración de la cabeza

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
Configuración del espacio divi

Í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
Configuración del índice Z

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:

Configuración de diseño

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%
Configuración de dimensiones

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)
Configuración de línea Divi

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;

Configuración de estilo de línea Divi

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
Configuración del borde de la columna

Índice Z

También aumente el índice z de la columna.

  • Índice Z: 11
Configuración avanzada de la columna

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%;

Configuración de estilo de columna 1

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.

Módulo de menú de selección

Descargar logo

Luego sube un logo.

Configuración del logo Divi

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
Disposición del menú

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
Configuración del menú Divi

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
Configuración del menú desplegable Divi

iconos

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

  • Color del icono del menú de hamburguesas: # 000000
Configuración del icono del menú Divi

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 dimensión de configuración divi

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;

Agregar código css menú divi

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>

Columna divi de código CSS personalizado

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.

Copia el módulo del botón divi

Ajouter un gravamen

Luego agregue un enlace al módulo de botones.

Configuración de enlace de botón

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
Configuración de alineación del módulo de botones

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
Configuración del botón de estilo Divi
  • 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
Personalizar la fuente del botón divi

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)
Configuración de espacio del botón Divi

Módulo de botón de clonación

Una vez que haya completado el primer módulo de botones, clónelo.

Ranura del módulo Divi

Editar enlace

Abra el módulo de botones duplicados y cambie la URL.

Configuración del enlace del botón Divi

Cambiar alineación

También cambie la alineación del módulo.

  • Alineación de botones: izquierda
Alineación del botón Divi

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)
Personalización del color del botón

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%
Transformación del botón Divi

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!

Guardar cambios
Configuración de cabeza divi

vista

Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.

Resultado final de la demostración

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.