Cómo agregar dos botones uno al lado del otro a su encabezado global Divi

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 temas de Divi. Uno de los botones es primario, el otro secundario. ¡También podrá descargar el archivo JSON del encabezado global de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue la plantilla de encabezado global GRATIS

Para tener en sus manos la plantilla de encabezado global gratuita, primero deberá descargarla 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 formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout 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 le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Vaya a Divi Theme Builder y cree un encabezado global

Ir a Divi Theme Builder

Comience por ir al Divi Theme Builder y haga clic en 'Agregar encabezado global'.

Crear encabezado global

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

2. Cree un diseño de encabezado global

Agregar nueva sección

Espaciado

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
• Acolchado inferior: 0px

Índice Z

Asegúrese de aumentar también el índice z de la sección en la configuración de visibilidad. Esto asegurará que el contenido del encabezado global aparezca en la parte superior de toda la página y el contenido de la publicación.

• Índice Z: 99999

Agregar nueva fila

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:

Dimensionamiento

Sin agregar ningún módulo, abra la configuración de la fila y permita que la fila ocupe todo el ancho del contenedor de la sección.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Modifique también los valores de relleno izquierdo y derecho de la fila.

• Acolchado izquierdo: 2vw (escritorio), 10vw (tableta y teléfono)
• Relleno derecho: 2vw (escritorio), 10vw (tableta y teléfono)

Elemento principal

Para centrar todo el contenido de la columna, agregaremos estas dos líneas de código CSS al elemento principal de la fila.

display: flex;
align-items: center;

Elimine la propiedad de visualización de escritorio en tabletas y dispositivos móviles.

display: block;

Columna 1

Frontera

Continúe abriendo la configuración de la columna 1 y agregue un borde derecho solo en el escritorio.

• Ancho del borde derecho: 1 px (escritorio), 0 px (tableta y teléfono)
• Color del borde derecho: # d8d8d8

Índice Z

Aumente también 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 principal de la columna para convertirlo en dos columnas.

display: grid;
grid-template-columns: 50% 50%;

Agregar módulo de menú a la columna 1

Seleccione el menú

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

Subir logotipo

Sube un logo a continuación.

Diseño

Vaya 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: hacia abajo

Texto del menú

A continuación, modifique 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úsculas
• Color del texto del menú: # 333333 (predeterminado), # ef6f49 (Hover)
• Tamaño del texto del menú: 0.7vw (escritorio), 1.8vw (tableta), 2.5vw (teléfono)
• Espaciado de letras del menú: 1px

Texto del menú desplegable

Realice también algunos cambios en la configuración de texto del menú desplegable.

• Color de fondo del menú desplegable: #ffffff
• Color de la línea del menú desplegable: # ef6f49

Iconos

Luego, cambie el color del icono del menú de hamburguesas.

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

Dimensionamiento

Agregue un ancho máximo de logotipo a la configuración de tamaño también.

• Ancho máximo del logotipo: 9vw (escritorio), 12vw (tableta), 15vw (teléfono)

Menú Logo 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 módulo de código a la columna 1

Agregar 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>

Agregar módulo de botones n. ° 1 a la columna 2

Agregar copia

¡Pasemos al siguiente módulo! Agregue el primer módulo de botones e ingrese una copia de su elección.

Añadir enlace

A continuación, agregue un enlace al módulo de botones.

Alineación

Vaya 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 botones

Dale estilo al botón también.

• Usar 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 del botón: 2px
• Fuente del botón: Montserrat
• Peso de la fuente del botón: Semi negrita
• Estilo de fuente del botón: mayúsculas

Espaciado

Complete la configuración del módulo agregando algunos 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)
• Acolchado 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.

Cambiar enlace

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

Cambiar alineación

Cambie también la alineación del módulo.

• Alineación de botones: izquierda

Cambiar la configuración de los botones

Realice también algunos cambios en la configuración de los botones.

• Color del texto del botón: #ffffff
• Color de fondo del botón: # ef6f49 (predeterminado), # e06945 (Hover)

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%
• Inferior: 110%

3. Guarde los cambios del Creador de temas y obtenga una vista previa del resultado

Una vez que haya completado su encabezado global, guarde todos los cambios en el generador de temas y vea el resultado en su sitio web.

Avance

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

Escritorio

Móvil

Pensamientos finales

En este tutorial, le mostramos cómo agregar dos botones uno al lado del otro a su encabezado global usando el generador de temas de Divi. Uno de los botones que hemos agregado es el principal, el otro es el secundario. Agregar botones a su encabezado global lo ayuda a enfatizar algunas de las llamadas a la acción más importantes de su sitio web. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta, no dude en 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.