Si tu blog está creado en un tema divi quizás te interesa saber cómo crear un botón de llamado a la acción o un CTA personalizado. En este post te compartiré 2 maneras muy fáciles de crear un botón o personalizar tu menú.

Antes de seguir leyendo es importante que veas el siguiente tutorial, para que puedas entender cómo utilizar los códigos que te comparto más adelante y definir que tipo de botón te gustaria.

Cómo Crear un botón de llamado a la acción en WordPress

 

 

Las herramientas que menciono en el video tutorial son:

💡2 Maneras de Crear un botón de llamado a la acción

📌Cómo poner un botón en mi blog WordPress fácil

Cómo poner un botón en mi blog

Para crear este tipo de botón sigue los siguientes pasos:

  1. Ingresa a >>Apariencia<<
  2. >>Menu<<
  3. Elige cuál de tus enlaces quieres que sea el llamado a la acción
  4. Pega el siguiente link (cambia el texto en rojo por el nombre que le quieras dar a tu CTA)

Código de “etiqueta de navegación”. Este es el que va en el menú:

<span class=”et_pb_more_button et_pb_button”>TU TEXTO AQUI</span>

Para inserta el siguiente código dirígete a escritorio y busca:

  1. >>Divi<<
  2. >>Opciones del tema<<
  3. y en la parte de abajo encontrarás >>estilos CSS<<
  4. ahí pegas el siguiente código

Código que va en la opción de “estilos personalizados CSS”

/*Menu CTA Button*/

#et-top-navigation .et_pb_button {

margin-top: 0px;

font-size: inherit;

font-weight: inherit;

}

#et-top-navigation .et_pb_button:after {

font-size: 23px;

}

 

📌Como hacer botón de llamado a la acción o CTA (call to action)


Para crear un botón como el mío sigue los siguientes pasos:

  1. >>Apariencia<<
  2. >>Menú<<
  3. >>Opciones de pantalla<<
  4. >>Habilita la Clase CSS<<

  1. En en el menú escribe o edita la etiqueta de navegación por el nombre de la pestaña que le quieras dar
  2. En clase CSS escribe >>cta<<

Guarda los cambios del menú y sigue los siguientes pasos:

  1. >>Divi<<
  2. >>Theme options<<
  3. >>Custom CSS<<
  4. Pega el código a continuación, lo que esta marcado en rojo es donde debes de editar para personalizar con tus colores preferidos.

Copia el código y pegalo en la caja de CUSTOM CSS.


/*———————–[Botón CTA]————————-*/
/*—————–[por Emma Saldierna]—————-*/
.cta {border-radius: 0px;}
.cta a {color: #fff!important;}
li.cta {
background-color:#0d3b69;
font-weight: 700;
text-transform: uppercase;
text-align: center;
padding: 12px 13px 10px 10px!important;
border-radius: 3px;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;}
li.cta:hover {background-color:#febb4a;}

/* fixed header button text color */
.et-fixed-header #top-menu .cta a {
color: #fff!important;}
.cta li.current-menu-ancestor > a, .cta li.current-menu-item > a {
color: #fff!important;}

@media only screen and (min-width : 981px) {
li.cta {height: 33px;}}
/*—————–[FINAL]—————-*/

 

Si deseas descargar los códigos en formato PDF haz clic en el siguiente link:Crear un botón de llamado a la acción en PDF

Haz clic para más >>>Artículos de WordPress en Español que te pueden interesar.

Espero que este post te haya sido de utilidad para crear un botón de llamado a la accion para tu sitio web, no olvides que si tienes alguna o problema me puedes escribir en los comentarios o envíame un mensaje en Facebook.

Espero que este listado te haya sido útil. ¿Hay algún contador que utilizas y que no esté en mi listado?

 No olvides dejar tu comentario y compartirlo en las Redes Sociales😀