Tener claros llamados a la acción 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 algunos de sus CTA más importantes que colocándolos en su encabezado? En el tutorial de hoy, le mostraremos cómo agregar dos botones uno al lado del otro a su encabezado global utilizando el Generador de 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!

Hagámoslo.

Avance

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

Escritorio

botones uno al lado del otro

Móvil

botones uno al lado del otro

 

1. Vaya a Divi Theme Builder y cree encabezado global

Ir a Divi Theme Builder

Comience yendo al Divi Theme Builder y haga clic en ‘Agregar encabezado global’.

botones uno al lado del otro

Construir encabezado global

Continúe haciendo clic en ‘Construir encabezado global’.

botones uno al lado del otro

2. Construir diseño de encabezado global

Agregar nueva sección

Espaciado

Una vez dentro del editor de plantillas, verás una sección. Abra la configuración de la sección y elimine todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

botones uno al lado del otro

Í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 aparecerá en la parte superior de toda la página y publicará el contenido.

  • Índice Z: 99999

botones uno al lado del otro

Agregar nueva fila

Estructura de 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:

botones uno al lado del otro

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 personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

botones uno al lado del otro

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)

botones uno al lado del otro

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.

01
02
display: flex;
align-items: center;

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

01
display: block;

botones uno al lado del otro

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: 1px (escritorio), 0px (tableta y teléfono)
  • Color del borde derecho: # d8d8d8

botones uno al lado del otro

Índice Z

Aumenta también el índice z de la columna.

  • Índice Z: 11

botones uno al lado del otro

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.

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

botones uno al lado del otro

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.

botones uno al lado del otro

Subir logo

Sube un logo a continuación.

botones uno al lado del otro

Diseño

Pase a la pestaña de diseño del módulo y asegúrese de que se aplique la siguiente configuración de diseño:

  • Estilo: alineado a la izquierda
  • Dirección del menú desplegable: hacia abajo

botones uno al lado del otro

Texto del menú

Modifique la configuración del texto del menú a continuación.

  • Color de enlace activo: # ef6f49
  • Fuente del menú: Montserrat
  • Peso de 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

botones uno al lado del otro

Texto del menú desplegable

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

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

botones uno al lado del otro

Íconos

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

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

botones uno al lado del otro

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)

botones uno al lado del otro

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.

01
margin-right: 10vw;

botones uno al lado del otro

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ú:

01
02
03
04
05
06
<style>
.et-menu>li {
padding-left: 1.5vw !important;
padding-right: 1.5vw !important;
}
</style>

botones uno al lado del otro

Agregue el módulo de botón n. ° 1 a la columna 2

Agregar copia

En el siguiente módulo! Agregue el primer Módulo de botones e ingrese alguna copia de su elección.

botones uno al lado del otro

Añadir enlace

Agregue un enlace al Módulo de botones a continuación.

botones uno al lado del otro

Alineación

Pase a la pestaña de diseño del módulo y cambie la alineación del botón.

  • Alineación de botones: derecha

botones uno al lado del otro

Configuraciones 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 (pasar el mouse)
  • Ancho del borde del botón: 0px

botones uno al lado del otro

  • Radio del borde del botón: 0px
  • Espacio entre letras de botones: 2px
  • Fuente del botón: Montserrat
  • Peso de la fuente del botón: semi negrita
  • Estilo de fuente del botón: mayúscula

botones uno al lado del otro

Espaciado

Complete la configuración del módulo agregando algunos valores de relleno personalizados en diferentes tamaños de pantalla.

  • Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Relleno 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)

botones uno al lado del otro

Módulo de botón de clonación

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

botones uno al lado del otro

Cambiar enlace

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

botones uno al lado del otro

Cambiar alineación

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

  • Alineación de botones: izquierda

botones uno al lado del otro

Cambiar la configuración del botón

Realice también algunos cambios en la configuración del botón.

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

botones uno al lado del otro

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%

botones uno al lado del otro

3. Guardar los cambios del generador de temas y el resultado de la vista previa

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

botones uno al lado del otro

botones uno al lado del otro

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

You have Successfully Subscribed!