Cómo crear botones en WordPress con Gutenberg y HTML
Crear botones en WordPress es muy sencillo, independientemente de la forma con la que lo implementes. Yo te voy a explicar 3 formas y tú eliges la que prefieras.
Cómo poner un boton en Gutenberg
Si está usando Gutenberg, crear un botón es realmente sencillo. Solo tienes que ir al editor Gutenberg, hacer clic en el ícono "+" (más) que se encuentra en la parte superior derecha o en cualquier área que diga "Añadir bloque" dentro del editor.
Tras ello, escribe en el buscador la palabra "botones" y seleccionalo.
Una vez creado el botón, te aparecerá un elemento como el que ves abajo.
Para incluir el texto del botón debes escribir en la sección de "Añade texto...". Tras ello, en la barra de herramientas puedes incluir el enlace hacia la página que quieras enviar al usuario. Para ello, haz clic en el anclaje que ves en la barra.
Una vez seleccionado verás que se despliega un buscador para que busques la página si es propia de tu web o pegues la URL de destino.
Así mismo, en esta barra de herramientas puedes centrar el boton horizontal y verticalmente con las opciones de la derecha.
De igual forma, mediante el menú lateral derecho puedes modificar su estilo. Para ello, haz clic en la opción de botones y selecciona la rueda dentada de los ajustes.
De esta forma accederás a una sección en la que puedes especificar el ancho del botón, un id o anclaje HTML y una clase CSS para asignarle un estilo especificado (lo veremos más adelante).
A modo de ejemplo, yo he configurado un ancho del 75% y le he asignado la clase de myboton.
Además, si seleccionamos el circulo blanco y negro podemos editar el color del texto, el del fondo del botón, el tamaño de la letra y el radio del botón.
A modo de ejemplo, he configurado un botón de fondo amarillo con texto en azul, tamaño de letra grande y una radio de los botones de 50px.
El resultado es el siguiente:
Cómo poner un botón en html
Si lo que quieres es crear un botón en HTML lo único que tienes que hacer es crear un enlace y darle un estilo. Para hacer esto, lo primero de todo es comprender cómo crear un enlace en HTML, lo cual tiene la siguiente forma:
<a href="url-de-destino">Texto ancla</a>Dicho esto, podemo modificarlo para implementar un estilo con forma de botón:
<a href="url-de-destino" style="estilo-definido">Texto ancla</a>A modo de ejemplo, vamos a crear un botón de fondo azul y de 5px con radio de borde. Además cuenta con un texto en blanco y centrado, con tamaño de 16 pixeles, que nos lleva a la URL https://sergiocanales.com/. El código lo ves abajo, y el resultado a la derecha:
<a href="https://sergiocanales.com/" style="display: inline-block; padding: 10px 20px; margin: 10px; background-color: #007BFF; color: white; text-align: center; text-decoration: none; border-radius: 5px; font-size: 16px;">Visita mi sitio</a>En este punto, te comento que también puedes modificar el estilo con una clase CSS, como veremos más abajo. Para ello, debes incluirle la clase antes indicada.
<a href="url-de-destino" class="myboton">Texto ancla</a>Implementar un botón con un plugin
Voy a ser claro: no instales un plugin para crear botones porque no es necesario.
Dicho esto, puede ser que tengas ya instalado un plugin de maquetación que te permita hacer esto, por ejemplo, Ultimate Shortcodes. Mediante este plugin, puedes crear botones sofisticados con funcionalidades interesantes, como por ejemplo la de incluir un icono a la derecha del texto.
Para crear un boton con Shortcode Ultimate tienes que hacer clic en el botón de más (+) en Gutenberg. Tras ello, escribe en el buscador la palabra shortcode y selecciona el bloque.
Tras ello, te aparece un bloque como el que ves abajo, donde debes seleccionar los 2 corchetes.
En este momento, se te abrirá una ventana de opciones donde debes seleccionar la opción de botón.
En este momento se te abrirá un asistente para que puedas crear tu botón personalizado.
Shortcode
[su_button url="https://sergiocanales.com/" background="#3CAE67" color="#18233D" size="5" wide="yes" center="yes" radius="3" icon="icon: external-link-square" icon_color="#18233D"]Medir descargas en GA4[/su_button]Resultado
Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.
¡Comienza mi curso de Screaming Frog gratis hoy!
CSS para botones
Como ya hemos visto anteriormente, podemos incluir una clase en nuestro botón que luego podemos definir en la sección de Apariencia de nuestro WordPress. Si recuerdas, para nuestro primer botón habíamos creado un botón cuya clase se llamaba myboton.
Pues bien ahora vamos a definirle la siguiente clase:
.myboton {
margin-bottom: 20px!important;
border-radius: 3px!important;
box-shadow: 3px 3px 2px #001E40;
font-size: 0.95rem;
background: linear-gradient(to right, #18233D, #3CAE67);
}
.myboton .wp-block-button__link{
padding-top: 15px!important;
padding-bottom: 15px!important;
background: linear-gradient(to right, #18233D, #3CAE67)!important;
}Con la clase anterior estamos indicando que queremos un botón con un margin como el que te muestro abajo:
A modo resumen, te indico que es un botón con un tamaño de letra un 95% más pequeño, las esquinas redondas y un fondo que cambia de azul a verde.
Cómo centrar un boton en CSS
Una de las implementaciones más típicas a realizar con CSS es la de centrar un botón. Si tu también quieres centrar el tuyo, puedes crear una clase llamada centrado con el siguiente estilo.
.wp-block-buttons.is-layout-flex {
justify-content: center !important;
}
.wp-block-button.centrado {
width: 100%;
display: flex;
justify-content: center;
}
.wp-block-button__link {
width: auto;
text-align: center;
}Cómo crear un botón redondo con CSS
Si lo que quieres es un botón totalmente redondo, puedes tocar el border-radius para que sea del 50% y quede redondo.
.wp-block-buttons.is-layout-flex .wp-block-button .wp-block-button__link {
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!