Agregar un botón a su encabezado Divi no podría ser más simple. Al usar Divi Theme Builder , puede controlar la ubicación, el diseño y la asignación de páginas específicas. Tal vez sea necesario un botón en su encabezado en páginas de destino específicas, pero no en blogs individuales. Lo guiaremos a través del proceso de uso del generador de temas para agregar un botón a su encabezado Divi. Luego, puede usar estas habilidades para agregar botones en cualquier lugar que desee en las plantillas de su generador de temas. ¡Empecemos!
Aquí hay una vista previa de lo que estamos trabajando hoy, utilizando el diseño de encabezado gratuito descargable que coincide con nuestro paquete de diseño de Servicios de seguridad .
Escritorio
Móvil
Vamos a utilizar Divi Builder para lograr esta adición, así que asegúrese de cargarlo en su panel de control de WordPress. Lo encontrará en Divi – Theme Builder en su panel de administración, y la página principal se verá similar a esto.
Crear o agregar un encabezado
Una vez que esté dentro de Divi Theme Builder, debe crear, agregar o editar el encabezado al que necesita agregar el botón. Si tiene un encabezado existente al que agregará el botón, simplemente continúe e ingrese al generador para que pueda comenzar a trabajar.
Para el resto de nosotros, vamos a utilizar el encabezado gratuito para nuestro paquete de diseño de Servicios de seguridad . Si desea utilizar este (u otro encabezado que haya descargado), deberá abrir las opciones de Portabilidad en el generador de temas haciendo clic en el ícono de doble flecha en el generador.
Si descargó un encabezado nuestro o de otro lugar (tal vez incluso exportó el suyo propio como respaldo), busque el archivo JSON del encabezado que cargará y haga clic en Importar plantillas de Divi Theme Builder . Cuando finalice la importación, su sitio tendrá el nuevo encabezado instalado y listo para que lo coloque en su botón.
Ingrese al Divi Builder
Haga doble clic en el encabezado para ingresar al generador (o haga clic con el botón derecho y seleccione Editar en el menú contextual).
El encabezado se cargará en el generador y podrá ver todos los espacios en los que Divi le permite colocar el módulo.
Cuando se trata de editar el encabezado de su sitio, debe considerar el espaciado antes que nada. No solo es un elemento que todos los visitantes ven, sino que también es un elemento que cambia drásticamente entre el escritorio y el móvil. Entonces, si está agregando un botón a un diseño existente de cualquier tipo, debe asegurarse de que no arruine nada.
Para este encabezado en particular, agregaremos un botón Suscribirse al encabezado principal. Para hacerlo, debemos ajustar la estructura de columna de la fila contenedora de 1 a 3 columnas .
Con ese, mueva el Módulo de menú a la columna más a la derecha y vaya a su Configuración . En la pestaña Contenido , vaya a las opciones de Logotipo y elimínelo.
Tenga en cuenta que también puede cambiar esto a un logotipo de marca, o puede mantener el suyo propio si no está utilizando este paquete de diseño. El logo del sobre simplemente no funciona para este diseño.
Cuando se haya movido el módulo Menú, puede continuar y agregar el módulo Botón a la columna más a la izquierda. Haga clic en el círculo + negro y busque el módulo Botón en la lista que aparece.
Luego, vaya a la configuración del módulo y, en la pestaña Contenido , busque el área Texto y, en el campo Botón , agregue el texto que desea que se muestre a los usuarios.
Debajo de eso, en la pestaña Contenido , vaya a las opciones de Enlace y configure el botón en cualquier URL donde envíe nuevos suscriptores. Algunos proveedores de correo electrónico brindan URL específicas a los formularios, mientras que otros solo le brindan incrustaciones para sus propias páginas. Cualquiera que funcione mejor para su embudo de conversión irá aquí.
El módulo de botones Divi es excelente, pero el estilo predeterminado no coincide con el encabezado en el que lo colocamos. Así que queremos tener un botón que use las mismas fuentes, colores y estilos que el resto del sitio.
Primero, vaya a la configuración del módulo Botón y a la pestaña Diseño . Luego, busque el área etiquetada como Botón y habilite la opción Usar estilos personalizados para el botón .
A continuación, elija el color de la paleta de su sitio que funcione mejor. Para este encabezado, estamos usando el mismo color de fondo e ícono que los íconos sociales, que es #ffc230 para el fondo y #000724 para el color del texto.
Después de eso, debe asegurarse de que las fuentes y otros estilos de texto coincidan. Es posible que desee que el texto del botón sea más grande y más prominente, pero para este encabezado en particular, vamos a hacer que el texto del botón coincida y complemente el menú con el que comparte el encabezado.
En este caso, esto significa que estamos configurando el Ancho del borde del botón en 0px y el Color del borde del botón en transparente, eliminando así el borde por completo. Luego, establecemos el Tamaño del texto del botón en 15 px para que coincida con el menú del encabezado, y usamos Microma como Fuente del botón y Negrita como Peso de fuente .
Con todo eso hecho, ahora debería tener un botón en su encabezado Divi que coincida con el resto del diseño del sitio.
Resultados finales
Cuando se completa toda la personalización, los resultados finales pueden aparecer así.
Escritorio
Móvil
Terminando
Si es un usuario de Divi, sentirse cómodo con el generador de temas puede ayudarlo a expandir en gran medida su conjunto de habilidades y su potencial de diseño. Incluso algo tan simple como cambiar la estructura de la columna y agregar un botón puede convertir un buen diseño en un gran diseño. Solo asegúrese de que su estilo se mantenga consistente y que el botón lleve a los usuarios al contenido que realmente hace que valga la pena colocar el botón al frente y al centro.
¿Por qué usas botones en tu encabezado Divi?