Los botones pueden parecer poca cosa, pero pueden hacer mucho trabajo en su sitio web. Los botones son una de las formas más sencillas de guiar a los visitantes hacia la acción que quieres que realicen.
Desde dirigir a los usuarios a la página del producto hasta incitarles a leer más o a registrarse, un botón atractivo puede marcar la diferencia. La buena noticia es que no necesitas conocimientos de programación para diseñarlos.
WordPress tiene opciones integradas y, con un poco de ayuda de un plugin de bloque, puedes controlar aún más el aspecto de tus botones.
En este post, te guiaré a través de tres métodos sencillos para crear botones con estilo en WordPress.
Empezaremos con el editor por defecto, pasaremos a un plugin que ofrece más flexibilidad y terminaremos con un método extra para añadir botones dentro de tablas. Empecemos.
Cree bonitas mesas
Con el editor de bloques
Método 1: Utilizar el bloque de botones por defecto
WordPress tiene un bloque de botones incorporado que funciona bien en la mayoría de los casos. Lo encontrarás dentro del editor de bloques cuando hagas clic en el pequeño icono (+) y busques "Botones".
Cuando se inserte el bloque de botones, le indicará que añada texto dentro del botón.
Una vez insertado el bloque, puede añadir uno o varios botones uno al lado del otro. Cada botón se puede personalizar directamente desde la barra lateral derecha. Encontrarás opciones para:
- Ancho del botón (completo o automático)
- Texto y color de fondo
- Acolchado y alineación
- Radio del borde (para esquinas redondeadas)
Es un buen punto de partida, sobre todo si te ciñes a un diseño minimalista.⚠️Pero si necesita más opciones de estilo, como efectos hover, degradados o espaciado responsivo, llegará rápidamente a un límite.
🛠️ Consejo profesional: ¿Quieres un botón perfectamente redondeado? Ajuste el radio del borde a 100 para un botón tipo pastilla.
✅Método 2: Utilizar el bloque de botones de Ultimate Blocks
Si quieres más control sin escribir CSS, Bloques definitivos es un fantástico plugin Gutenberg para probar. Añade un mejorado Bloque de botones que se ha creado pensando en la personalización.
Instalar Ultimate Blocks es una tarea fácil.
-
Vaya a Plugins
-
Haga clic en Añadir Plugins
-
Buscar "Tableberg"
-
Haga clic en Instaleentonces Activar
En instalación y activación de Ultimate Blocks, añada el bloque "Botones (Ultimate Blocks)".
Para insertar los Botones de los Bloques Ultimate, haga clic en el pequeño icono (+) y busque "Botón (Mejorado)".
Notará inmediatamente la diferencia cuando añada el botón Ultimate Blocks. Esto es lo que puede modificar en la configuración de bloques:
-
Justificación y orientación de los botones
-
Tamaño del botón
-
Ancho del botón
-
Soporte para iconos (antes o después del texto) con otras opciones.
-
Soporte de animación
En la sección Estilos de botones, obtendrá las siguientes personalizaciones:
-
Opción de color para los estados Normal y Hover
-
Borde del botón
-
Estilo de los botones
-
Relleno, espaciado entre bloques y margen ajustables en la configuración de dimensiones.
-
Opción de CSS personalizado
Todas las funcionalidades predeterminadas del bloque de botones están incluidas con el bloque Button de Ultimate Blocks. A continuación se muestra un botón de diseño personalizado diseñado por Ultimate Blocks, aunque funcional.
Este bloque es ideal para vendedores, blogueros y cualquiera que desee que sus botones de llamada a la acción destaquen. Obtendrás flexibilidad a nivel de diseño sin escribir una sola línea de código.
🎯 Consejo profesional: Utilice colores que contrasten para crear una respuesta visual satisfactoria cuando los usuarios interactúen con sus botones.
🧩 Bonificación: Añadir botones dentro de una tabla
A veces necesitas botones dentro de un diseñocomo una tabla de precios o una comparación de características. Ahí es donde un plugin de tablas basado en bloques como Tableberg brilla.
La mejor oferta |
||
 |
 |
 |
Apple AirPods Pro 2nd Gen |
SAMSUNG Galaxy Buds 2 Pro |
Google Pixel Buds Pro |
|
|
|
Con Tableberg, cada celda de la tabla actúa como un mini lienzo. Eso significa que puede soltar el bloque Button dedicado justo dentro de una celda. Ya no tiene que limitarse a texto sin formato: puede añadir botones CTA como "Comprar ahora", "Ver detalles" o "Probar gratis" directamente en las filas de precios.
Las características del botón del Tableberg son las mismas que las del botón de los bloques Ultimate.
¿Quieres personalizar el aspecto del botón dentro de la tabla? No hay problema. Puedes cambiar el radio del borde, el relleno e incluso añadir iconos, todo desde el editor de bloques.
🛠️ Consejo profesional: Combine su botón con una clasificación por estrellas o un lazo dentro de la misma fila para conseguir un mayor impacto visual y mejores conversiones.
Reflexiones finales
Diseñar botones bonitos en WordPress no requiere CSS personalizado ni la ayuda de un desarrollador. Con el bloque Buttons nativo, la versión mejorada de Ultimate Blocks y la flexibilidad de herramientas como Tableberg, puedes crear diseños totalmente interactivos que se ven muy bien y funcionan en todos los dispositivos.
Se acabaron los enlaces simples y los códigos cortos obsoletos. Ahora usted tiene el control total, justo dentro del editor.
Más información
