En este videotutorial verás un recurso de diseño muy útil, añadir iconos personalizados a los botones de WordPress. Verás cómo hacerlo desde el editor de bloques nativo de WordPress, de manera práctica, fácil y gratis, simplemente añadiendo una pequeña línea de código en el lugar correcto.
Presentar en tu página web iconos personalizados en tus botones de llamada a la acción, es un buen punto para captar la atención de tus usuarios y crear el relato visual que buscas transmitir, personalizado y único.
Antes recuerda que puedes suscribirte gratis al blog.
Si te suscribes puedes proponer temas para el blog y también te envío un email semanal con todas las novedades.
Añadiendo una simple línea de código en el lugar correcto, puedes añadir iconos personalizados a los botones de tu página web. Este es un recurso gráfico muy potente para alinear tu imagen con la que quieres que perciba tu audiencia al visitar tu web.
En este artículo que acompaño al vídeo, la parte técnica no será una excusa para que lo hagas tú mismo, porque te comparto el código que necesitas para añadir esos iconos que te interesan en tus botones y la explicación para que veas lo fácil que es en realidad.
Empecemos por el código que utilizo en la práctica para conseguir ver en pantalla tus iconos, lo analizamos y luego vemos cómo añadirlo exactamente en un botón nativo del editor de bloques de WordPress.
Este es el código que tienes que añadir al botón de WordPress, como muestro en el video.
<span style="padding-right: 0.5em;"><img src="http://sitelab.local/wp-content/uploads/2023/10/ICONO-GIRA.svg" width="40px" height="40px"></span>Ahora vamos a analizar el pequeño fragmento de código que te comparto.
Si analizas el código, verás que añadimos dos etiquetas HTML, la etiqueta <span> de apertura con su etiqueta de cierre </span>, y entre ellas la etiqueta html <img> en la cual le indicas la ruta de la biblioteca de medios de tu imagen.
La etiqueta <span>, la añado para poder dar una clase CSS y separar el icono del texto del botón gracias a la declaración style=»padding-right: 0.5em;».
Si te fijas, en el vídeo añado el fragmento de código a la izquierda del texto, por eso la declaración CSS es padding-right. Si tú quieres el icono a la derecha del texto, tendrás que añadir el código a la derecha y cambiar la declaración CSS por padding-left:, de esta manera el icono se desplazará dejando espacio hacia la izquierda.
Entre la etiqueta de apertura <span> y de cierre </span>, está la etiqueta <img> con el atributo src=»» y en su interior la ruta de la imagen que puedes copiar directamente en tu biblioteca de medios de WordPress. En el ejemplo queda así, src=»http://sitelab.local/wp-content/uploads/2023/10/ICONO-GIRA.svg».
Dentro de la etiqueta <img>, también añadimos las dimensiones de la imagen con los atributos width=»40px» y height=»40px». Tú puedes modificar los valores en píxeles que hay entre las comillas y dar el tamaño al icono que necesitas.
Como ves, se trata de sólo dos etiquetas HTML con atributos muy sencillos, ahora veamos dónde lo añadimos exactamente.
La manera más fácil de añadir este código es directamente al botón nativo que tiene el editor de bloques de WordPress y editarlo como te muestro en el vídeo que tienes en el inicio de este artículo.
Una vez pulsas la opción de editar como HTML, tienes que pegar el fragmento de código justo antes del texto que has añadido al botón o justo después, dependiendo si quieres tu icono a la izquierda o a la derecha del texto.
Simplemente añadiendo este pedacito de código serás capaz de presentar a tu audiencia el aspecto de diseño en tus botones que realmente te interesa.
Este tutorial para añadir iconos personalizados a los botones de WordPress, complementa al videotutorial en el cual presentaba un diseño de página web con un vídeo de fondo, el cual te recomiendo ver.
También puede ser muy útil este tutorial para completar el artículo sobre una mejor alternativa a Linktree para presentar todos tus enlaces a tu audiencia.
Fácil, práctico y útil, ¿a que sí? Utilizar pequeños fragmentos de código como el de este artículo te permiten ir un paso más allá en el diseño de tu web. Te recomiendo muchísimo perder el respeto a tocar código y poco a poco entender el código HTML y CSS que hay detrás de toda página web.
Albert Gimeno, diseñador y consultor web.
Y recibe un email semanal con todas las actualizaciones que publico en el blog, además, si te suscribes, puedes proponer temas para futuros artículos o vídeos.