Los botones del sitio web tienen el potencial de ofrecer una mayor sensación de interacción para los visitantes. En lugar de un enlace simple y ordinario a información importante, se debe presionar un botón. Para muchas personas, es casi un instinto necesitar presionar un botón, incluso si ni siquiera está etiquetado.
Aparte de toda la diversión, he encontrado que los botones son muy efectivos cuando se usan de la manera correcta. Aunque los códigos abreviados son un método común para distribuir estos pequeños gráficos, puede ser tedioso recordar los ID de código para algo como un botón de llamada a la acción.
Entonces, ¿qué puede hacer cuando no desea copiar y pegar fragmentos de código solo para colocar un botón? La respuesta es fácil: use un complemento de WordPress.
Hoy, les mostraré cómo agregar un botón de WordPress sin el uso de códigos abreviados.
¿Por qué es importante agregar botones en WordPress?
Los botones tienen potencial para atraer a la audiencia visitante. Aunque no desea abusar de ellos a lo largo del contenido, aún pueden ser muy útiles. Por ejemplo, los botones de llamada a la acción en WordPress son más obvios para que un visitante haga clic que un simple enlace. Por eso ves, «¡Ordena ahora!» y gráficos similares en la mayoría de las páginas de destino.
Debido a que la mayoría de las personas usan tabletas y teléfonos inteligentes hoy en día, es importante asegurarse de que puedan tocar los enlaces fácilmente. Después de todo, puede ser muy doloroso pellizcar para hacer zoom cada vez que desea hacer clic en algo en una página. Si bien es más una adición cosmética, juega en la experiencia general del usuario.
Y eso es lo que estás tratando de entregar. Desea que los visitantes se sientan cómodos y disfruten navegando por el sitio web.
Agregar botones en WordPress con un complemento
Uno de los métodos más fáciles para agregar un buen gráfico para un enlace es usar el complemento Forget About Shortcode Buttons, o FASC. Esta herramienta es un método fácil de usar para crear imágenes visualmente atractivas para promocionar todo, desde descargas hasta listas de correo.
La mejor parte es que te ayuda a crear botones CSS sin necesidad de una sola línea de código.
Para utilizar esta herramienta:
Vaya al área de complementos de WordPress y haga clic en el botón «Agregar nuevo» en la parte superior.
Busque «Olvídese de los botones de código abreviado» en el cuadro de texto.
Instalar y activar el complemento. Una vez que el complemento complete la instalación, se agregará una nueva función al Editor visual de WordPress. Esta herramienta está disponible tanto en publicaciones como en páginas, lo que la hace útil independientemente del tipo de contenido que estés creando.
Crea una nueva publicación. En el Editor visual, busque y haga clic en el icono de FASC. Se verá como un cuadro con una flecha apuntando hacia la derecha.
Cambia tus propiedades. FASC le ofrece algunas formas de personalizar el botón. Puede cambiar el texto, la URL, los colores, el tipo y el tamaño. FASC incluso tiene una opción para abrir el enlace en una nueva ventana. Realice sus cambios, pero no haga clic en «Insertar» todavía.
Haga clic en el enlace Icono. Estos son pequeños gráficos que se pueden agregar al texto dentro del botón. Hay muchos para elegir y cubren una amplia gama de propósitos. Estos no son necesarios, pero agregan más atractivo visual según sus ideas de diseño. Además, facilitan que las personas se identifiquen con el enlace.
Usando el cuadro desplegable, puede seleccionar cuál de estos iconos agregar. También puede elegir si mostrar el gráfico antes o después del texto.
Haga clic en el enlace Plantillas. En esta área, puede almacenar botones creados previamente para uso futuro. Al hacer clic en el ícono del disco pequeño en la imagen, puede agregar el gráfico actual a la lista.
Cambie el nombre de la plantilla haciendo clic en el lápiz y luego haga clic en la pequeña marca de verificación a la derecha. Esto guardará la imagen para uso futuro en otras páginas o publicaciones.
Una vez que haya terminado de crear el gráfico, haga clic en el botón Insertar para colocarlo en su contenido.
Ahora tiene un nuevo botón listo para que alguien toque o haga clic.
En este ejemplo, creé un botón de llamada a la acción en menos de un minuto. Aunque este parece simple, FASC tiene la capacidad de ayudar a crear diseños más atractivos al elegir el tipo de gráfico que crea. Este complemento de botón de WordPress viene con:
- Plano – el gráfico básico que utilicé en este ejemplo.
- plana redondeada – es un diseño plano con esquinas redondeadas.
- Lustroso – agrega una cualidad reflectante a la imagen, muy parecida a una capa metálica.
- redondeado brillante – igual que arriba con esquinas redondeadas.
- Salir – agrega una sombra paralela al gráfico para que parezca que está flotando.
- Salir redondeado – sombra paralela con esquinas redondeadas.
Debido a que FASC usa codificación hexadecimal, tiene miles de colores para elegir. Puede crear virtualmente cualquier color para que coincida perfectamente con el esquema del sitio web.
Una de las cosas que más me llama la atención es la increíble cantidad de íconos que están disponibles. De hecho, también hay gráficos para crear botones personalizados para algunos de los sitios de redes sociales más populares como Facebook y Twitter. Esto puede ser una gran adición a sus estrategias para integrar las redes sociales en el sitio web.
Si algunos de estos íconos te resultan familiares, es porque este complemento usa Dashicons y Font Awesome para agregar las imágenes a los botones CSS. Desafortunadamente, no existe una manera directa y fácil de agregar más de estos micrográficos hasta que los desarrolladores amplíen la lista.
Otros complementos a considerar
Si bien FASC es sin duda uno de los más fáciles de usar, existen muchas formas de agregar botones a su sitio web. Sin embargo, una gran parte de ellos requieren el uso de códigos cortos. Este no es un proceso difícil, pero significa que tendrá que recordar una cosa adicional más al crear contenido.
Aquí hay algunos complementos que encontré que le permiten crear botones CSS sin invertir mucho tiempo en el uso de shortcode.
Generador de botones – Botones X
Button Builder es una gran herramienta para crear estos gráficos para su contenido. Aunque la versión Pro viene con una amplia gama de opciones, como animaciones, sigue siendo una gran herramienta. La mayor diferencia entre este complemento y el que presenté hoy es que no puede crear botones sobre la marcha. Lo que significa que debe crear uno antes de agregarlo al contenido. Sin embargo, viene con una increíble cantidad de opciones de personalización.
Widget de botón de Loomisoft
Para aquellos que buscan un botón simple para agregar a una barra lateral, Button Widget tiene muchas funciones personalizables. Proporciona un método para agregar un enlace a la barra lateral para atraer a los visitantes, ya sea que lo esté creando para las redes sociales o colocando un llamado a la acción para comprar un producto. Viene con efectos de desplazamiento, alteraciones de bordes y control de texto completo. Esto podría ser una gran adición al complemento de botón FASC WordPress que presenté anteriormente.
MaxBotones
Como el que mencioné anteriormente, este es otro complemento que requiere construir el gráfico antes de comenzar a crear contenido. También tiene una increíble cantidad de opciones de personalización disponibles. MaxButtons incluye control de texto, degradados, bordes e incluso contenedores. Este complemento también viene con una variedad de plantillas sociales que incluyen contadores automáticos, así como la importación de sus propias imágenes, y todo esto es de la versión gratuita.
Los botones brindan a los visitantes una interfaz más grande para interactuar con el contenido. Dado que una gran parte de sus visitantes estarán en dispositivos móviles, esto hace que las interacciones sean mucho más fáciles. Recuerde, se trata de brindar una excelente experiencia de usuario que determinará si una persona regresará o no al sitio web.
¿Qué tipo de botones tienes en tu sitio? ¿Tiene buenas estrategias para promover llamados a la acción dentro de su contenido, incluso si es solo para comentar su publicación?
Desarrollador web y SEO, experto en WordPress con más de 10 años de experiencia. Configuración, gestión y diseño para crear webs que funcionan.