Divi añadir botón a la cabecera
Contenidos
Todos deberíamos saber ya lo importante que es tener una llamada a la acción en la página de inicio de tu sitio web. Y hay un montón de artículos que explican por qué. De hecho, hay un montón de debates en cuanto a dónde debe estar, qué color funciona mejor, a dónde debe conducir y así sucesivamente.
5. Asigne una clase al elemento del menú que desea convertir en un botón CTA. En este caso quiero que la gente se ponga en contacto conmigo. Así que voy a cambiar el nombre del botón Contact Me a Get Started y darle una clase llamada “get-started”
Si estás trabajando con un tema hijo puedes ir a Apariencia>Editor y abrir tu hoja de estilos. Si no, ve a Apariencia>Opciones del Tema Divi>ePanel>C CSS Personalizado (que se encuentra en la parte inferior del ePanel)
En algunos casos, si ha añadido un color personalizado al enlace activo en la configuración del Personalizador (Sólo configuración de navegación fija), el color del texto puede cambiar cuando se desplaza hacia abajo. Es mejor dejar esa opción en blanco. Pero aún puede cambiar el enlace activo del menú en la configuración de la Barra de Menú Principal y aún funciona con un encabezado fijo.
¿Cómo añado una llamada a mi botón de acción?
Para añadir un botón CTA, comience en su página. Debajo de la foto de portada de tu página, haz clic en Editar. Verás una sección de vista previa en la parte superior que muestra el aspecto del botón. Selecciona un botón para ver su aspecto.
¿Cómo añado un botón de llamada a la acción a mi cabecera en WordPress?
Para añadir un botón de llamada a la acción en la cabecera, sólo tiene que añadir un elemento de menú adicional en la página Menús de WordPress y asignar una clase CSS personalizada al menú. En la captura de pantalla anterior se puede ver que la clase asignada es cta-button al elemento de menú adicional.
Vaya a la pestaña Insertar y seleccione un botón de acción en la parte inferior del menú Formas. Haga clic en la diapositiva para añadir el botón de acción y elija las opciones deseadas en el cuadro de diálogo que aparece.
Máquina Divi
En este tutorial, te muestro Cómo crear un botón de llamada a la acción para el menú Divi. ¿Alguna vez has querido poner un botón en tu menú Divi? Por defecto, las opciones de menú de Divi son delgadas, pero con sólo un poco de magia CSS, realmente puedes hacer que los elementos del menú cobren vida. Esto es increíblemente útil para llamar a acciones como “Contáctenos”, o “Obtenga una cotización” o “Comience”. El objetivo aquí es crear un botón agradable para los ojos de los usuarios que les haga querer hacer clic o al menos pasar el ratón por encima.
Ahora bien, hay numerosas maneras de hacer esto, pero en este tutorial, te muestro cómo hacerlo sin el uso de un plugin externo, sin añadir una imagen en el menú o sin tratar de pegar el código del botón Divi en el menú (que sin duda puede causar problemas.) Este método es más similar al de Geno Transformar un elemento del menú Divi en un botón CTA, pero tiene un código ligeramente diferente y éste funciona en móviles. Después de todo, si hay un bonito botón de llamada a la acción en el menú de escritorio, ¡también debería estar ahí en el móvil! Con sólo un puñado de líneas de CSS, podemos añadir un elegante, moderno y llamativo botón de llamada a la acción en el menú Divi. ¡Disfruta y diviértete!
Es una forma sencilla de añadir un botón CTA en el menú de WordPress y personalizar la apariencia:Esencialmente, este es un elemento de menú de navegación regular que se le dará una clase CSS adicional. Además, basándose en esta clase, puede establecer estilos CSS personalizados para este botón.
Por defecto, en WordPress, el campo de entrada “Clases CSS” está oculto. Para verlo, haga clic en la casilla de verificación en “Opciones de pantalla” en la parte superior de la página Menús A continuación, en el último elemento de menú que tendrá el papel de un botón CTA, añada una clase CSS custom-action-button
Ahora puedes empezar a dar estilo al botón. Por ejemplo, vamos a desplazar este elemento de menú lo más posible a la derecha, estilizar la apariencia. Añadir una sangría para el logotipo y adaptar el botón para el menú móvil. Añadiremos todos los estilos CSS en el editor de preajustes de Groovy Menu.
Ahora puedes empezar a estilizar con Custom CSS la apariencia del botón. Vamos a mover este elemento de menú lo más a la derecha posible, cambiar la distancia entre el logotipo y los elementos de menú, y adaptar la apariencia del botón para el menú móvil.
Añadir un botón en el menú de navegación del encabezado puede hacer que tu llamada a la acción destaque. Esto puede conducir a más visitantes a las páginas más importantes de su sitio y crear una mejor experiencia de usuario, ayudando a los visitantes a tomar medidas.
Simplemente vaya a la página Apariencia ” Menús en su panel de WordPress y añada el enlace a su menú de navegación. Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo añadir un menú de navegación en WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo añadir un botón en tu menú de cabecera de WordPress. También puedes consultar nuestra guía sobre cómo crear una página de aterrizaje con WordPress y los mejores servicios de email marketing para pequeñas empresas.
The Ultimate WordPress Toolkit¡Obtenga acceso GRATUITO a nuestro kit de herramientas – una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!Descargar ahoraInteracciones del lector11 ComentariosLeave a Reply
Deja un comentario Cancelar respuestaGracias por dejar un comentario. Por favor, tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.Nombre *