Como añadir botones en WordPress fácilmente.

En este tutorial descubriremos como añadir botones a nuestros artículos de WordPress usando un plugin gratuito, que nos permite hacerlo sin la necesidad de usar código HTML, CSS o Shortcuts.

El plugin que utilziamos en este tutorial es: Forget About Shortcode Buttons

[x_accordion_item title=»Transcripción del video»]

Buen día, bienvenido a este video tutorial de upempresa.com, mi nombre José Lievano y en este video aprenderemos una forma muy fácil de añadir botones en nuestros artículos y páginas de WordPress.

Al iniciar con WordPress es posible que no tengas conocimientos de HTML y CSS, y la mayoría de plugins de WordPress para añadir botones usan shortcode, los cuales son difíciles de recordad muchas veces. Entonces usaremos un plugin gratuito que nos ayudara con este tema, vamos a entrar en plugins y luego en añadir nuevo y buscaremos el plugin llamado: Forget about shortcode buttons.

Una vez lo encontramos vamos a instalarlo, y lo activaremos. Ahora vamos a ir hacia entradas y luego en todas las entradas, vamos a entrar en uno de estos artículos para el nuestro nuevo plugin funcionando. Muy bien, como puedes observar ahora en nuestro editor visual, tenemos este nuevo ícono que dice Insert button. Así que primero colocaremos nuestro cursor en lugar donde deseamos colocar el botón. En mi caso lo colocare aquí. Y ahora vamos a darle un poco de espacio para que se encuentre abajo del párrafo y luego damos clic en el nuevo icono en nuestro editor.

Lo primero que podemos ver en esta ventana es que tenemos una previsualización de nuestro botón y una zona abajo para configurar las opciones. De modo que podemos ver en tiempo real una previsualización de cómo quedaría nuestro botón. Podemos añadir nuestro texto en esta área, y ver como se verá nuestro botón con nuestro texto. Abajo podemos añadir la dirección a la que este botón nos llevará, en este caso diremos que nos lleve hacia los planes de Hosting de upempresa.com

Si deseamos que el botón abra la página en una nueva ventana podemos dar clic en esta opción. Luego podemos definir el color del texto y el color de fondo de nuestro botón, y aunque el plugin tiene la capacidad de usar códigos hexadecimales para el color, si damos clic en ellos podremos ver también la opción de usar un selector visual de color. En type, podemos seleccionar tipos de diseños, o estilos para nuestro botón, vemos que tenemos varias opciones y al seleccionar una de ellas nos mostrará la previsualización de como quedaría.

Y también podemos modificar el tamaño. Luego en icon, podemos añadir un icono a nuestro botón. Como puedes observar tiene una gran variedad de iconos y se encuentran todos en categorías, de modo que puedes ir explorando entre las categorías el icono que deseas seleccionar. En mi caso seleccionare este icono, y podemos también indicar si deseamos o no colocar un ícono desde esta opción.

Dentro de template podremos ir guardando los botones que vamos creando como plantillas, template significa plantilla en español, de modo que si en el futuro deseamos usar el mismo estilo de botón, no deberemos crearlo nuevamente, lo podremos seleccionar desde las plantillas. Para guardar un diseño como plantilla simplemente damos clic en este botón y listo, se añadirá a nuestra lista de plantillas. Si deseamos editar su nombre simplemente damos clic aquí y podremos hacerlo, luego damos clic en el chequesito y se guardará el nuevo nombre. Y si deseamos eliminarlo damos clic en esta x y se eliminará nuestra plantilla.

Finalmente para insertar el botón en nuestro artículo, damos clic en insert, y podrás ver que se añade a nuestro artículo correctamente. Podemos modificar su alineación como lo haríamos con cualquier otro elemento. Podemos centrarlo, colocarlo hacia la derecha o izquierda. Y ahora vamos a dar clic en actualizar para poder verlo en acción. Muy bien, damos clic en ver entrada, y al enviarnos hacia nuestro artículo, podremos ver el botón funcionando en nuestro sitio web.

Espero que este video te sea de ayuda, no olvides alojar tu sitio web en upempresa.com, tenemos los mejores y más económicos planes optimizados para WordPress. Mi nombre es José Lievano y nos veremos en un próximo video.

[/x_accordion_item]

 

9 comentarios en “Como añadir botones en WordPress fácilmente.”

    1. Buen día, gracias por la notificación Luis, te recomendamos utilizar este otro plugin en lugar del que tocamos en el tutorial: https://wordpress.org/plugins/maxbuttons/
      Parece que el plugin se encuentra desactivado por el momento, vamos a realizar un nuevo video tutorial pronto, hablando sobre ese otro plugin que te recomendamos.
      Saludos.

  1. El plugin existe, lo acabo de cargar. Consulta: pude insertarlo en una página en blanco. ahora no pue insertarlo en una hoja ya hecha con texto. Lo otro, se puede insertar una imagen hecha para boton (hecha por mi)?.
    gracias.

    1. Buen día, gracias por su actualización, si, parece que el plugin estaba despublicado debido a que el desarrollador se encontraba modificándolo.
      Con respecto a sus consultas, debería poder insertar los botónes en cualquier parte de su web en la que pueda utilizar el editor visual, es posible que tenga inconvenientes entre este plugin y otro plugin o su plantilla, si usted tiene una cuenta de hosting con nosotros, por favor envíenos un ticket de soporte desde su área de cliente y con gusto un administrador podrá solucionar este inconveniente para usted.
      Sobre la segunda pregunta, este plugin utiliza CSS para el diseño y Font Icons para los íconos, de modo que no puede utilizar una imágen como botón.

  2. Alejandra Rueda Santos

    Hola! Quiero saber si hay un botón para pasar de un post a otro como atrás y adelante? Trabajo con Visual composer. Gracias! muy bueno el blog!

  3. Hola!
    Me gustaría saber como añadir botones o CTA a imágenes o a imágenes que van en un slide show en wordpress.
    Ejemplo:
    https://yellena.com/

    No encuentro esta información por ningún lado.

    Gracias., tus tutoriales siempre me han resultado de gran utilidad.
    Flor

Deja un comentario

Tu dirección de correo electrónico no será publicada.