Cómo añadir imágenes a nuestro menú WordPress sin plugins

Presentación del tutorial

Parece claro que al usuario de WordPress le encanta jugar con los Menús Divi. Personalmente, me gusta experimentar añadiendo más opciones de menú buscando aumentar las opciones de cabecera / menú que ya proporciona WordPress. Por lo tanto, en este post te vamos a ofrecer un pequeño truco que se puede aplicar a nuestro menu WordPress tanto si estás usando el tema Divi u otro.

Existen muchos y excelentes plugins que permiten aumentar las posibilidades de configuración de los menús. Sin embargo en esta ocasión vamos a prescindir de ellos. En futuros post veremos cómo podemos personalizar nuestros menús con algunos de estos plugins.

Veamos entonces cuáles son los pasos necesarios para conseguir añadir imágenes a nuestro menú.

Cómo agregar iconos al menu WordPress

Agregar un icono a un menú Divi puede ser más fácil de lo que piensas.

Lo primero que debemos hacer es diseñar o descargar de algún sitio web un icono con un fondo transparente. Para este tutorial hemos descargado un icono de una pluma para nuestro enlace a nuestro blog. Si quieres usar el mismo, lo hemos encontrado en freepik. Si lo creas tú mismo, asegúrate de guardarlo como png transparente. Así evitaremos tener problemas con el color de fondo de nuestro menú.

A continuación, crea una nueva página en tu sitio web (guárdala como borrador, no es necesario que se publique). Carga el icono que acabas de crear en esa página y en el panel de texto, pulsa la pestaña HTML y copia el código incrustado.

Una vez has copiado el código, elimina la página y navega a Apariencia> Menús. Así abrirás el personalizador de menús de WordPress donde incluiremos el código para poner la imagen que hemos creado o descargado.

Añade un enlace personalizado a tu menú. Pon el enlace de destino que quieras en el área de enlace (URL). En el área de texto (Texto del enlace), pega el código de imagen que copiaste cuando creaste la página para importar el icono.

Por último, añade el nuevo enlace personalizado a tu menú y haz clic en Guardar Menú.

Y ya deberías tenerlo. Pulsa ver tu sitio para comprobar que tu imagen se ha incluido correctamente en tu menú.

Puedes ver el videotutorial si quieres repasar lo expuesto en este post:

¿Te ha sido útil? Comártelo, por favor.