Cómo agregar un botón en el editor de WordPress [tutorial]

Cómo agregar un botón en el editor de WordPress [tutorial]

¿Por qué es tan importante el bloqueo de botones de WordPress?

La navegación en el sitio web es importante para los visitantes y clientes. Queremos enviarlos desde una subpágina más. Guíelos a través de todo el proceso de compra. Por eso es importante insertar correctamente los enlaces importantes dentro del contenido de la página.

Básicamente tenemos 2 opciones. Use un enlace o botón estándar. Las opiniones sobre cuándo usar la primera y la última opción son varias. Es habitual que en una página haya múltiples acciones posibles. Tenemos que asegurarnos de cuál es el principal y cuál es el secundario. Le recomendamos que utilice el botón solo para la acción principal. Así consigues una mayor visibilidad de esta acción principal. Centrará la atención de los visitantes en esta acción. También podemos llamarlo botón de llamada a la acción. No cree demasiados botones en una subpágina.

¿Cuáles son las funciones de los botones principales?

  • Los botones pueden llamar la atención de los visitantes: llamada a la acción
  • Separan la página o el contenido de la publicación y lo hacen más legible
  • Ayuda con la orientación en la página. Muchos visitantes solo escanean visualmente la página con sus ojos
  • Navegar a los visitantes a otras páginas usando hipervínculos

Hay muchos parámetros que determinan el éxito del botón. Importante es, por ejemplo, el tamaño, la ubicación o el color del botón. Es necesario seguir los principios estándar de UI y UX. El color verde se usa para botones con acción positiva, por ejemplo, para comprar algo. El color rojo es negativo, por ejemplo, para darse de baja del boletín. Botones correctamente diseñados que influyen directamente en las acciones de los visitantes.

Agregar botón en cualquier página o publicación en WordPress

Situación antes de WordPress 5

Agregar botones era un proceso bastante complicado antes de que se inventara el editor de bloques de WordPress. Porque esta característica no estaba naturalmente en WordPress. Puede usar el tema con Page Builder o un complemento de terceros. Los códigos cortos crean botones en este caso.

En nuestros temas de WordPress más antiguos, puede agregar un botón usando códigos abreviados en el editor visual. Después de hacer clic en Insertar código abreviado -> Botón, puede establecer varias configuraciones en la ventana modal. Texto, color de texto, color de botón, URL, alineación, etc. Gracias a estas configuraciones avanzadas, puede agregar botones con bastante facilidad y rapidez sin ninguna programación.

Agregar botón a través de códigos cortos
Agregar botón a través de códigos cortos antes del lanzamiento del editor de bloques

¿Cómo usar el bloque de botones en el editor de WordPress?

Gracias a WordPress 5 hay una segunda forma. Más fácil. El editor visual de WordPress trae muchos bloques útiles. Para crear un botón en el sitio web, ahora puede usar el bloque de botones de WordPress en el editor.

Guía paso a paso sobre cómo agregar un botón en el editor de WordPress

1. Al principio, debe decidir dónde desea insertar el botón
2. El bloque de botones se puede agregar de varias maneras:
– haciendo clic en “+” en la barra superior o en cualquier parte del editor de bloques donde seleccione Bloque de botones

Agregar botón haciendo clic en “+”
Agregar bloque de botones haciendo clic en "+"
Agregar botón a través de la barra de búsqueda
Agregar bloque de botones a través de la barra de búsqueda
Agregar bloque de botones a través de una barra
Agregar bloque de botones usando la barra inclinada "/"

- también puede encontrar cualquier bloque usando la barra de búsqueda, simplemente escriba "botón"

– escribiendo "/" que le da acceso a todos los bloques disponibles

3. El bloque de botones creado se puede configurar más

Agregar texto de botón y dirección URL

Tan pronto como se crea el botón Bloquear de WordPress, puede escribir texto dentro de él. Recuerda que para el botón de llamada a la acción es mejor usar un texto corto con un mensaje claro. Puede configurar el texto para que esté en negrita, cursiva o subrayado. Todos estos cambios se pueden realizar haciendo clic en la barra de herramientas. También puede alinear el botón hacia un lado o centrarlo.

Edición de botones
En unos segundos puedes cambiar totalmente el aspecto de tu botón

El botón generalmente apunta a otra página o sitio web externo. Por esa razón, justo debajo hay una entrada para agregar la dirección URL. La ventaja es que agregar URL no requiere seleccionar texto.

Cambiar el color del botón

El nuevo editor le permite modificar el bloque de botones de WordPress en unos segundos. Simplemente use la configuración en la barra lateral en el lado derecho. Puede cambiar el color de fondo del botón o el color del texto dentro del botón. Hay colores básicos predefinidos o puede elegir los suyos propios. Todos los cambios son visibles de inmediato para ver si la combinación de colores está bien.

Cambiar el color del botón
Cambio de color de botón inmediato después de hacer clic en el color elegido

La gran característica es que si selecciona combinaciones incorrectas, por ejemplo, fondo gris y color de texto blanco, el editor de bloques de WordPress le advertirá que el botón no se puede leer en su sitio web.

Encuentra tu propio estilo de botón

Opciones de estilo de botón
Cambie el estilo de su botón directamente desde la barra de herramientas o la configuración del Inspector

Para crear o cambiar el botón ultra rápido y sin ningún esfuerzo, puede usar uno de los estilos preparados. El botón se puede cambiar de esa manera a, por ejemplo, redondeado, bordeado o rectangular. Experimente lo que mejor se adapte al estilo o diseño de su sitio web.

Botón de edición con CSS personalizado

Se puede lograr una personalización aún mayor utilizando clases CSS personalizadas. De esa manera, puede agregar sus propios estilos CSS y el botón de estilo en el editor de WordPress exactamente como lo desee.

Entrada de clase personalizada
Inserta una clase personalizada para darle estilo a tu botón

Como podemos ver, hay una manera mucho más fácil que usar el shortcode de botón. El bloque de botones de WordPress se puede usar en cualquier tema que sea compatible con el editor de bloques de WordPress. Lea más sobre nuestro nuevo tema de WordPress Citadela. Está especialmente diseñado y desarrollado para WordPress Block Editor.

Consejo extra al final

No te olvides de monitorear tu bloque de botones de WordPress y el éxito del botón en sí. Si utiliza Google Analytics, puede crear una URL única. Para realizar un seguimiento de los clics de los visitantes, puede agregar Parámetro UTM de Google. La URL se puede crear usando el constructor de URL. Agregar parámetros le permite identificar la fuente de la visita. Es muy útil si desea saber de dónde vienen los visitantes a su página de compras.

¿Cuál es el mayor problema que tienes actualmente con el bloque de botones de WordPress? Vamos a discutir en los comentarios a continuación. Comparta su experiencia con el uso de botones en el sitio web.

4 comentarios en «How to add button in WordPress editor [tutorial]»

  1. Gracias por compartir este tutorial. ¿Puede también guiarme sobre cómo puedo crear una plantilla de bloque? Estoy haciendo lo mismo usando este recurso https://wpitech.com/create-wordpress-gutenberg-block-templates/ pero está dando un error y tengo algunas líneas de programación en el front-end. este es el codigo
    add_action('inicio', función() {
    $arjetas = matriz(
    'público' => verdadero,
    'etiqueta' => 'Noticias',
    'show_in_rest' => verdadero,
    'template_lock' => 'todos',
    'plantilla' => matriz(
    array( 'núcleo/párrafo', array(
    'marcador de posición' => 'Noticias de última hora',

  2. ¿Sabes si hay alguna forma de colapsar el contenido con un botón sin descargar un complemento? Básicamente, estoy usando wordpress.com premium, no comercial, por lo que descargar complementos no es realmente una opción fácil.

    ¡Gracias!

    1. Hola,

      gracias por preguntar. Debe preguntar directamente al equipo de soporte de wordpress.com si podrían ofrecer alguna solución para resolver su problema. ¡Atentamente!
      Zlatko
      equipo AIT

Los comentarios están cerrados.