Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir botones de llamada a la acción en WordPress (sin código)

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿Quieres añadir botones de llamada a la acción en tus entradas o páginas de WordPress?

Los botones son una excelente forma de aumentar las conversiones. Son muy visibles, lo que los hace excelentes para redirigir la atención de los usuarios a una interacción deseada.

Por ejemplo, puede utilizar un botón de llamada a la acción para enviar a los usuarios a una página transaccional como una página de precios, una página de productos, una página de servicios y otras de su sitio web.

También puede utilizar botones de llamada a la acción para promocionar ofertas especiales, nuevos productos o enlaces de afiliación que dirijan a sitios web asociados.

En este artículo, le mostraremos cómo añadir fácilmente bonitos botones de llamada a la acción en WordPress sin escribir ningún código.

Adding Buttons in WordPress Step by Step

Nota: Este artículo es para añadir botones personalizados de llamada a la acción en WordPress. Si desea añadir botones para compartir en redes sociales, consulte nuestra guía sobre cómo añadir botones para compartir en redes sociales en WordPress.

Añadir botones en entradas y páginas de WordPress (paso a paso)

WordPress hace que sea súper fácil añadir botones con un bloque Botón incorporado. Es una característica que se introdujo con el editor de bloques de WordPress Gutenberg.

En este artículo, mostraremos tres formas de añadir botones de llamada a la acción en entradas y páginas de blog de WordPress. Puedes elegir la solución que mejor se adapte a tus necesidades.

No dudes en utilizar el índice de contenidos para navegar fácilmente por este artículo:

Índice de contenidos:

Tutorial en vídeo

Subscribe to WPBeginner

Si no te gusta el vídeo o necesitas más instrucciones, sigue leyendo.

Añadir Botones en Entradas / Páginas de WordPress Usando el Editor por defecto

Este método es fácil y recomendable para la mayoría de los usuarios. Utiliza el bloque Botón incorporado en el editor de bloques de WordPress. Si todavía utilizas el antiguo editor clásico, entonces puedes omitir la siguiente sección.

En primer lugar, debe crear una nueva entrada o editar una ya existente en la que desee añadir un botón.

En la pantalla de edición de entradas, haga clic en el icono “+” y seleccione el bloque Botones de la sección Elementos de disposición.

Add button block

A continuación, debería poder ver el bloque de botones añadido al editor de contenido.

Basta con hacer clic en la zona “Añadir texto…” e introducir el texto del botón.

Add button text

A continuación, haga clic en el botón Enlazar de la barra de herramientas para añadir un enlace.

Puede buscar una entrada o página o simplemente copiar y enlazar una URL.

Add button link

Una vez hecho esto, pulsa “Intro” o el icono “Aplicar” para guardar el enlace.

Si desea que el botón aparezca en el centro, puede hacer clic en el icono “Justificar” y, a continuación, seleccionar “Justificar centro”. También puede cambiar la alineación vertical del botón desde la barra de herramientas.

Change button alignment

A continuación, puede personalizar el estilo de los botones y cambiar el texto y los colores de fondo desde el panel de ajustes del bloque de la derecha.

Sólo tienes que cambiar a la pestaña “Estilo” en ajustes de bloque para ajustar el estilo de tu botón.

Change button style

Puedes elegir entre tres estilos de botón: por defecto, contorno y cuadrado. Puedes probar cada uno de ellos al hacer clic sobre ellos y elegir el que mejor te parezca.

La sección Ajustes de color incluye cinco variaciones de color tanto para el fondo como para el texto del botón. No solo eso, sino que también puede utilizar un color personalizado de su elección al hacer clic en la opción “Color personalizado”.

Button style settings

Una vez que esté satisfecho con el diseño del botón, puede guardar su entrada o publicarla para ver una vista previa en directo.

Así se ve en nuestro sitio web de demostración.

Call to action button preview

Bonificación: Si desea ver el rendimiento de sus botones, debería utilizar MonsterInsights. Tiene incorporado el seguimiento de eventos para enlaces de afiliados, enlaces salientes y eventos personalizados, para que pueda ver el rendimiento de sus botones. Para más detalles, consulte métricas de marketing importantes que debe seguir en WordPress.

Crear un botón de WordPress en el editor clásico

El editor de bloques por defecto de WordPress es moderno, más rápido y más sencillo. Algunos usuarios todavía utilizan el antiguo editor clásico de WordPress.

No recomendamos utilizar el editor clásico de WordPress. Es anticuado y no tiene suficientes características que los usuarios necesitan para crear contenido impresionante. Si todavía lo utilizas, te aconsejamos que lo desactives y empieces a usar el editor de bloques.

Por otro lado, es posible que algunos usuarios sigan queriendo utilizarlo. En ese caso, necesitará una solución alternativa para añadir botones en su sitio de WordPress.

Hay tres opciones disponibles para añadir botones en el Editor Clásico de WordPress:

  1. Añadir un botón en WordPress con código HTML / CSS.
  2. Añadir un botón en WordPress con un botón de WordPress shortcode plugin.
  3. Añadir un botón en WordPress sin usar shortcodes.

De las tres opciones, la primera es el método de código. Tendrás que escribir código HTML / CSS y añadirlo a tu sitio web allí donde necesites un botón. No es fácil para principiantes.

La segunda opción es el método más utilizado. Esto se debe a que la mayoría de los plugins de botones de WordPress proporcionan shortcodes para añadir botones.

La tercera opción es la mejor porque te permite añadir fácilmente botones a tus entradas y páginas sin tener que recordar el shortcode.

Veamos cómo añadir botones en WordPress sin usar shortcodes.

Lo primero que tienes que hacer es instalar y activar el plugin Forget About Shortcode Buttons. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado el plugin, crea una nueva entrada o edita una ya existente. En el editor, verás un nuevo botón en el editor visual llamado ‘Insertar botón’.

Insert Button Icon in Classic WordPress Editor

Para insertar un nuevo botón en tu entrada, tienes que hacer clic en el icono “Insertar botón”.

Aparecerá una ventana emergente en la que podrá diseñar su nuevo botón.

Enter Button Text and URL in Classic Editor

En primer lugar, tienes que añadir el texto y la URL del botón. A medida que añades el texto del botón, puedes ver una vista previa en vivo en el cuadro de abajo.

A continuación, puede añadir una etiqueta nofollow a su enlace y abrir el enlace en una nueva pestaña al hacer clic en las opciones de la casilla de verificación siguiente.

Después, puedes seleccionar un icono para tu botón. Si hace clic en la pestaña “Iconos”, podrá ver los iconos que puede añadir antes o después del texto en sus botones.

Add Icon to your Button in Classic Editor

Estos iconos son en realidad fuentes de iconos(aprenda a utilizar fuentes de iconos en el editor de entradas de WordPress).

A continuación, puede elegir el color del texto y el color de fondo del botón al hacer clic en el icono del cuadro Color.

Change Button Background Color in WordPress Classic Editor

A continuación, haga clic en el menú desplegable para elegir el estilo del botón.

Hay ocho estilos diferentes de botones listos para usar.

Choose a Button Style in Classic WordPress Editor

Del mismo modo, también puede elegir el tamaño del botón, desde extrapequeño a extragrande.

Cuando esté satisfecho con el aspecto, sólo tiene que hacer clic en el botón “Actualizar”.

Podrás ver tu botón tal y como aparece en tu entrada, justo dentro del editor de entradas.

También puede establecer la alineación de los botones simplemente seleccionando el texto del botón y utilizando los botones de la barra de herramientas del editor clásico.

Center Align Your Button in Classic Editor

Al hacer clic dos veces en el botón, aparecerá el mensaje / ventana emergente Insertar botón, y podrá volver a editar el botón si lo desea.

Una vez que esté satisfecho con su diseño, puede publicar o actualizar su entrada y verlo en acción. Así es como aparece el elegante botón en nuestro sitio web de demostración de WordPress.

Button Preview - Built in Classic Editor

Añadir un botón Click-to-Call en WordPress

Además de los botones de llamada a la acción habituales, también puede añadir botones de llamada con un clic en su sitio web para aumentar los clientes potenciales y las conversiones.

Un botón de llamada con un clic es un tipo específico de botón de llamada a la acción que permite a sus usuarios realizar una llamada telefónica a su equipo con sólo un toque.

Con los botones de llamada, los visitantes de su sitio pueden hablar instantáneamente con su equipo en persona y obtener la información que necesitan. Tanto si se trata de una solicitud de presupuesto, información de preventa o incidencia de soporte, las llamadas telefónicas son rápidas.

Dado que el número de usuarios de teléfonos inteligentes es cada vez mayor, añadir botones de llamada ahora es aún más importante hoy en día.

Si no dispone de un teléfono de empresa, puede que le interese obtener un número de teléfono virtual para empresas.

Dicho esto, veamos cómo añadir botones de llamada en WordPress paso a paso.

Lo primero que tienes que hacer es instalar y activar el plugin WP Call Button. Para obtener instrucciones detalladas, puedes consultar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, debe visitar la página Ajustes ” Botón de llamada WP para establecer los ajustes del plugin y diseñar su botón de llamada.

Sticky Call Button Settings in WordPress

Al principio, verá los ajustes del botón de llamada fija. El botón de llamada fijo es una característica optimizada para la conversión que mueve el botón de llamada junto con los usuarios a medida que navegan por su sitio.

Puede empezar activando el estado del botón Llamar ahora. Basta con hacer clic en el conmutador para activarlo.

Después, tienes que introducir tu número de teléfono. WP Call Button tiene un campo de número de teléfono inteligente con su código de país. Simplemente selecciona tu país e introduce el número de teléfono de tu empresa.

Si no tiene un número de empresa, puede obtener uno de Nextiva. Es un proveedor de VoIP empresarial de confianza.

A continuación, puede editar el texto del botón de llamada y elegir la posición y el color del botón.

Además, puedes seleccionar dónde mostrar el botón de llamada fijo en tu sitio web. Por defecto, muestra el botón de llamada en todas las páginas y en todos los dispositivos. Puedes mostrar u ocultar el botón en determinadas páginas y mostrarlo solo en dispositivos móviles.

Una vez que haya reseñado todas las opciones, puede hacer clic en el botón “Guardar cambios” de la parte inferior. Después de eso, puedes visitar tu sitio web y ver el botón de llamada fija en acción.

WordPress Click to Call Button

Además de los botones de llamada fijos, también puedes añadir botones de llamada estáticos en tus páginas, entradas y barras laterales de WordPress utilizando este plugin.

Si utiliza el editor de bloques de WordPress, puede añadir fácilmente el botón de llamada en sus páginas utilizando el bloque WP Call Button.

Cree una nueva página o edite una página existente y añada el bloque Botón de llamada WP utilizando su editor de páginas.

Adding WP Call Button Block in WordPress

Después, puedes personalizar el texto del botón, el color del botón, el color del texto y el tamaño de la fuente, y mostrar u ocultar el icono del teléfono.

Una vez que esté satisfecho con su diseño, puede publicar o actualizar su página.

Customizing Call Button in WordPress Page Editor

Si está utilizando el editor clásico de WordPress, entonces usted tiene que utilizar el generador de Static Call Button para obtener un shortcode.

Vaya a Ajustes ” Botón de llamada WP y haga clic en el menú ‘Botón de llamada estático’ en la parte superior.

Static Call Buttons in WordPress Settings

Simplemente personaliza las opciones del botón y luego copia el shortcode. Después de eso, puede utilizar el shortcode en cualquier entrada o página de su sitio web.

WP Call Button plugin también le permite añadir el botón de llamada en su barra lateral de WordPress y otras áreas listas para widgets.

Simplemente ve a Apariencia ” Widgets y arrastra el widget WP Call Button a un área lista para widgets donde quieras mostrar el botón de llamada.

WordPress Call Button Sidebar Widget

Ahora puedes añadir un título, una descripción y personalizar el botón de llamada desde la sección de ajustes avanzados. Una vez hecho esto, guarda tu widget.

Eso es todo. Si quieres ver un tutorial más detallado, entonces puedes comprobar nuestra guía paso a paso sobre cómo añadir un botón de click-to-call en WordPress.

Consejo adicional para añadir botones personalizados en WordPress

No siempre basta con añadir un botón de llamada a la acción. Es posible que también desee personalizar la página o entrada con una imagen de héroe, menús y una estructura / disposición / diseño / plantilla personalizada.

En ese caso, recomendamos usar un plugin editor de arrastrar y soltar de WordPress como SeedProd o Thrive Architect.

SeedProd add button

Estos maquetadores de páginas le ayudarán a crear páginas de destino personalizadas con elegantes botones de llamada a la acción exactamente como usted quiera.

Haga lo que haga, es importante que haga un seguimiento del rendimiento de sus botones, porque adivinar no es la mejor estrategia de crecimiento empresarial.

Recomendamos utilizar MonsterInsights. Tiene incorporado el seguimiento de eventos para enlaces de afiliados, enlaces salientes y eventos personalizados, para que pueda ver el rendimiento de sus botones. Para más detalles, consulte métricas de marketing importantes que debe seguir en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo añadir botones en WordPress fácilmente. Puede que también quieras ver nuestra guía completa sobre el seguimiento de conversiones en WordPress o nuestro listado de los mejores plugins de WordPress para hacer crecer tu sitio web.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

70 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    Is it possible to track some statistics of the button, only with Google Analytics? Unfortunately, I don’t have monstesight, but I do have Google Analytics on my website.

    • WPBeginner Support says

      It is possible but you would need to set up the event tracking in Google Analytics which is why we recommend using MonsterInsights :)

      Administrador

      • Jiří Vaněk says

        Thanks for the reply and explanation. I plan to dive a bit more into Google Analytics, as the only things I currently track with them are the number of users, geolocation and backlinks. I know that GA can do an awful lot. However, I have already seen and read several articles on your website, so I believe that thanks to them I will finally understand this tool a little better. Thank you for your great work. She moved me forward in many ways.

  3. sandra says

    How can I add a form (first name / email address) to my call to action button?
    Or is there a way to adjust a contact form (remove textbox) to do the trick?
    I do not code.

    • WPBeginner Support says

      You would want to check with the support for your form plugin, depending on the one you are using there are different possible methods to do what you are wanting.

      Administrador

  4. Shahzaib says

    I have added a button thanks alot but it appears very small and i can’t figure out how to increase its size in block editor

  5. Daniel Piggott says

    Hi,

    I am currently trying to make a button on WordPress. But there is no option to align in the centre.

    Has the latest wordpress omitted the alignment feature of a button?

  6. Carolyn R Cox says

    What about a button that performs an action on the page. For example executes a query, reloading the page with the query data (without replacing the page, in other words: no urls.) Is there a simple way to accomplish this without loading a different page? Thanks.

    • WPBeginner Support says

      That would be something that heavily depends on your specific use case and would likely require developer assistance.

      Administrador

  7. Roger Meachem says

    Finally, a clear instruction that works! Thank you. I’ve spent hours trying all manner of things and failing – perhaps they were out-of-date posts but this solved my problem and did so in minutes. It was perfect. I now have buttons that work on the WordPress site.

  8. Meha Jain says

    Hi,
    Any idea how I can add read more button on the theme modules?
    The theme which i am using is not giving me the option to read more button in the modules on the home page.
    How I can add read more button there?

    Regards
    Meha
    (I am a non-technical person.)

    • WPBeginner Support says

      You would want to first reach out to your theme’s support and they may have a recommended method for adding that to your theme.

      Administrador

    • WPBeginner Support says

      Sadly, for WordPress.com you would need to check with their support for what is currently allowed

      Administrador

  9. Rick Hoffarth says

    I need to add code to a button in order for the button to take the user to a merchant services portal to make secure payments. So far, the button creators want a URL, not code. How can I connect a button to another site that requires code in order to do it?

  10. Daniel says

    Ok, so I know how to make a download button now, but how do I actually make that download happen ?
    Thank you!

  11. Mark Bologna says

    This was just what I needed. Read the article, downloaded the plugin, and had a working button all within ten minutes. Thanks!

  12. Debbie says

    Super quick – just what I needed! Thank you so much. I had mucked around with some that were so hard to setup… I needed a button and this got the job done quick and easy!

  13. Utkarsh Agarwal says

    How to create links to sections on the same page? For example, I need to create a button after the completion of my post which points to the Comments section down below.

  14. Jen Lewis says

    Can this plugin be installed on a site that’s on a free plan? In general, do you have to be on one of the paid plans to install additional plugins to your WordPress site?

    • Jolynn Powers says

      Mike dose that mean that we can no longer add buttons this way and if so where do we look for other information on how to add buttons?? I need to add three buttons to my work website for a listing of dinning locations, entertainment locations and hotel locations and want to put them on a page rather than a post so that they are always on the site at the same location.

  15. Furquan says

    I am searching for button , I have found your post at top in Google but the plugin you have mentioned is no more on WordPress. Could you please help me

  16. Aachal says

    Hey.. I want a button “Apply” instead of the page “Apply” on the homepage of my website.
    How can that be done. Any lead on this?

  17. bill says

    can i add buttons and then deactivate and delete the url and the buttons are still there ???

    or is there a way to put in the css codes to function so i have them without a plugin ???

  18. Alysha says

    Thanks for this! Looks great, but is there anyway to use this plugin to add a button to the header on the homepage?

  19. Toni says

    This is a really great plugin! It allows for a lot more customization than the standard shortcakes without having to write your own css!

    One question though – why doesn’t it work in the visual text editor of the widgets? This would be so helpful it if also worked in widgets!

    Thanks,
    Toni

  20. mohamed says

    thanks for your article…i install it and worked well except for the url. for example : when i write in the url (www.example.com) and publish my post and go to press the button , i found the button rfere to (www.example.net/www.example.com). how to solve this problem?

  21. Alec says

    Hi! – is it possible to place several buttons side by side in a row? (with different items) – and how does the reference work?

  22. Jenny says

    Hello there!

    This is very useful, but is there any way to use a custom image as a button rather than the options that come with the plugin? I have button images that I’ve downloaded from, and I’d like to use those instead because the logo is familiar to my site visitors.

    Warmly,
    Jenny

  23. Karan Bhagat says

    Hey, I have been using this plugin for more than 2 of my sites and installed it on one more, it was working fine till yesterday, but suddenly now it has stopped working, it is showing any button in the toolbar to add these buttons to post. I deleted and reinstalled it, still facing the issue. Help please

  24. Blake says

    How can i add things to the dropdown menu in the editor? i want things like Font size, buttons, or what ever else i chose to put there without using a plugin, is there anyway to do this?

  25. Nancy says

    Thank you! Again! I was searching all over the internet for help with button shortcodes. Couldn’t get them to work. As always, you have the simple answer. I can stop looking any place else for WordPress help!

  26. bryan midgett says

    How do I get the buttons on one line instead of vertical? I tried putting between buttons, but the tag prints. When I put my buttons side by side, they run together. Help!

  27. Prasad Saxena says

    I want a button to be displayed with each post on the main page of the website, which says go to the website. It should be just beside read more. I did get the button, but i dont know how to configure it so that each post has a different linking url.
    Also the url can be inserted from the post itself. I mean while writing it. Just a box below, a text box where you can put the link to the button.
    Please help….

  28. CEA says

    I installed the plugin and activated it, but am not seeing any change to my editor. I am using WP 4.0. What am I missing? Please help!

  29. Bal Chandra Dhawan says

    I added this button today but URL didn’t work.
    I added to page xyz.com/policies and add URL xyz.com/registration,
    on clicking it says page not found and in address bar I see. xyz.com/policies/xyz.com/registration. Its adding existing page URL ?
    Don’t know why?

  30. Bill Gibson says

    One problem: I guess it is a link underline that is going through the button text (almost like a strikeout). I have tried smallest and largest button sizes and the line is always through the text. I even tried to add “no decoration” to the style manually and that was ignored. Could this be theme specific? Thanks.

  31. Seo service says

    I just installed this plugin and I adore it! I
    already am putting it to good use on my blog. Thanks so much for the heads-up
    on this.

  32. Prishan Latchman says

    Is there a button that will allow me to add a specific amount of money to it so that when it is clicked it will increase the current value by that set amount?

    E.G. The button is set to an amount for R20.00 and the item (a pair of shoes) for R100.00 and every time someone clicks on the button the price for the shoes goes up by R20.00 to R120.00

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.