En la era digital actual, donde la primera impresión puede ser decisiva, la personalización de nuestro sitio web de WordPress con imágenes en el menú se convierte en una herramienta poderosa para destacar. No se trata solo de un capricho estético; es una estrategia para captar la atención de nuestros visitantes y guiarlos de manera intuitiva a través de nuestro contenido.
Las imágenes en los menús pueden actuar como marcadores visuales, ayudando a los usuarios a navegar por nuestro sitio de manera más eficiente y agradable. Esta técnica de diseño web no solo es beneficiosa para sitios con gran volumen de contenido, sino también para aquellos que buscan una diferenciación visual.
En un mundo donde el contenido es rey, una navegación de forma visual puede ser la reina que lo complementa a la perfección. Al integrar imágenes en los menús, no solo estás mejorando la experiencia del usuario, sino también reforzando la identidad visual de nuestra marca o proyecto.
Esta práctica es útil en sitios web con diferentes idiomas o audiencias con habilidades lingüísticas variadas, ya que las imágenes brindan pistas visuales que todos pueden entender. En esta guía, vamos a explicar cómo hacerlo bien para que nuestro sitio sea atractivo, accesible y fácil de usar para todos nuestros visitantes.
Tabla de contenidos
En el corazón de cualquier sitio web de WordPress, encontramos los menús, esos elementos esenciales que guían a los visitantes a través de nuestro contenido digital. Un menú en WordPress es más que una simple lista de enlaces; es un mapa que dirige a los usuarios hacia las áreas más importantes de nuestro sitio, desde la página de inicio hasta las secciones más específicas. Es la brújula que ayuda a los visitantes a navegar por el vasto océano de nuestro contenido.
Ahora, cuando hablamos de un mega menú, estamos elevando el concepto de navegación a un nivel superior. Imaginemos un menú tradicional, pero con superpoderes. Un mega menú en WordPress no solo ofrece enlaces; es una exhibición expansiva que puede incluir imágenes, videos, columnas de texto, e incluso widgets. Es como abrir una ventana a varias habitaciones de tu casa digital, permitiendo a los visitantes ver y acceder a múltiples áreas de una sola vez.
Mientras que un menú estándar es perfecto para sitios más pequeños o aquellos con una estructura simple, el mega menú brilla en sitios web con una gran cantidad de contenido o categorías. Es ideal para tiendas en línea, portales de noticias, o sitios educativos, donde la cantidad de información puede ser abrumadora. Con un mega menú, podemos organizar esta información de manera que sea de fácil acceso, sin sobrecargar a nuestros visitantes.
Tanto los menús como los mega menús son herramientas fundamentales en WordPress para una navegación efectiva. Mientras que los menús tradicionales mantienen las cosas simples y directas, los mega menús ofrecen una experiencia más rica y detallada, ideal para sitios con contenido extenso y diverso. Ambos son esenciales en el arte de crear un sitio web amigable y atractivo para los visitantes.
La incorporación de imágenes en los menús de WordPress es una estrategia que puede transformar la experiencia de navegación de nuestros visitantes, pero ¿cuándo es el momento adecuado para implementarlas? La respuesta yace en entender el impacto visual y funcional que deseamos lograr en nuestro sitio web.
Sitios web visuales: si nuestro sitio web se centra en contenido visual, como una galería de arte, un portafolio de fotografía, o una tienda en línea WordPress, agregar imágenes a nuestros menús puede ser un acierto total. Las imágenes actúan como un atractivo visual, capturando la atención de los visitantes y guiándolos hacia los productos o trabajos artísticos.
Mejorar la experiencia del usuario: en sitios con una amplia gama de categorías o servicios, las imágenes en los menús ayudan a los usuarios a navegar más fácil. Por ejemplo, en un sitio de comercio electrónico, los íconos de imágenes pueden diferenciar de forma rápida entre categorías como ropa de hombre, mujer, accesorios, etc.
Sitios con audiencia internacional: para sitios que atraen a una audiencia global, las imágenes pueden ser una herramienta poderosa para superar las barreras del idioma. Los íconos visuales y las imágenes pueden comunicar de manera efectiva dónde clickear, más allá del idioma que hable el visitante.
Cuando queremos destacar elementos específicos: Cuando deseamos resaltar secciones específicas, como promociones, eventos o nuevos productos en nuestro sitio web, las imágenes en el menú pueden llamar la atención de los usuarios hacia estas áreas.
Sitios con diseño minimalista: en un sitio con un diseño minimalista, donde cada elemento cuenta, unas pocas imágenes bien seleccionadas en el menú pueden añadir un toque de elegancia y sofisticación, sin abrumar el diseño general.
Añadir imágenes a nuestro menú de WordPress puede parecer una tarea compleja, pero en realidad es un proceso bastante sencillo que puede darle un toque único y atractivo a nuestro sitio web. Aquí veremos algunos pasos para lograrlo, manteniendo la esencia de nuestro sitio y mejorando la experiencia del usuario.
Este ajuste vamos a poder hacerlo por medio de plugins o bien de forma manual agregando código en nuestro sitio, según cuál sea el caso podemos seleccionar una opción u otra, si somos algo quisquillosos con los plugins tendremos una alternativa para hacerlo nosotros mismos.
En este caso tenemos algunos de los plugins más sencillos de utilizar de todo el repositorio de WordPress, este corresponde al plugin de Menu Icons by ThemeIsle. Si bien es el que utilizaremos en esta primera parte de esta guía tendremos alguna que otra opción si este no nos convence del todo.
Este plugin funciona incluso integrándolo con otros aspectos como sería Font Awesone para WordPress, si tenemos este tipo de iconos en nuestros sitios configurados vamos a poder gestionarlos y agregarlos en nuestros menús. Para no adelantarnos en el proceso vamos paso a paso con lo que corresponde.
Lo primero que tenemos que hacer es una instalación de plugin en WordPress, de forma manual o mediante el repositorio de plugins de WordPress.
Siguiendo con la cantidad de imágenes que podemos integrar no solo se puede trabajar con Font Awesome, también podemos trabajar otras plataformas de iconos e incluso imágenes propias para generar ese icono que va a deslumbrar a nuestra audiencia.
Una vez hemos instalado y activado el plugin no vamos a notar ningún cambio a simple vista en nuestro sitio, lo que tendremos que hacer es ingresar a nuestros menús personalizados de WordPress, en este caso para ingresar a este panel debemos hacer clic en nuestro dashboard de WordPress en Apariencias > menú.
Una vez dentro de este panel no vamos a ver nada extraño tampoco, y es aquí donde nos cuestionaremos si este plugin funciona de verdad, al ser una opción integrada a la perfección, no posee paneles extraños ni submenús visibles o molestos. Una vez ingresamos al panel de menús en nuestro sitio vamos a ingresar a cualquiera de los elementos del propio menú.
Una vez seleccionemos el elemento veremos entre sus opciones básicas de etiqueta de navegación o mover elementos hacia arriba o hacia abajo, un botón que indica Icono, junto a un enlace para poder hacer esta selección.
Una vez hacemos clic a esta opción nos va a mostrar una pantalla que hemos visto mucho si trabajamos subiendo imágenes a nuestro sitio, no es más que el desplegable o popup de WordPress, que hace relación a la subida de imágenes en el sitio, solo que en este caso nos permitirá de momento solo seleccionar los iconos que queramos.
Una vez hacemos clic a un icono, vamos a ver como en el lado derecho de este popup, tendremos diversas opciones entre ellas:
Ocultar etiqueta: esta opción nos permite ocultar el nombre del elemento en el menú. Por ejemplo, si asignamos un icono a la página llamada Inicio y activamos esto, solo se mostrará el icono configurado.
Posición: si bien es un poco ambigua la opción, esta nos va a permitir seleccionar donde se mostrara el icono, antes del texto o después del texto que indica el nombre del menú.
Alineación vertical: esta es la opción que tendrá más posibilidades de configurar, va a depender de nuestras necesidades y como nos guste que se vea el icono en nuestro menú.
Tamaño de fuente: muy posible que sea una de las más importantes a configurar, luego de seleccionar si se oculta o no la etiqueta, esta nos permite agrandar o achicar nuestro icono.
Si bien no es una opción, podemos destacar en la parte superior derecha encontramos una Vista previa, en ella vamos a poder ver en tiempo real las opciones que seleccionemos, de tal forma que no nos tome por sorpresa el cómo se va a ver el icono una vez este configurado del todo.
Como es de esperarse al momento de hacer estos pasos no nos encontramos con todos los tipos diferentes de imágenes incluso con la opción que más nos importa, la de poder subir nosotros mismos el icono en nuestro menú.
Para poder activar esta opción no hay que irnos muy lejos, para ello podemos ingresar en los ajustes de este plugin, dentro de Apariencias > menú. Tendremos un panel lateral donde agregamos elementos al menú, uno de estos tendrá la opción de Ajustes de Menú Icons.
En esta opción podremos activar o desactivar las plataformas de iconos, de la misma forma activar o desactivar la subida de imágenes personalizadas o archivos SVG, estos archivos son conocidos por ser exclusivos para iconos con más calidad.
Una vez seleccionamos las opciones que más nos favorecen según nuestras necesidades pasamos a hacer clic de nuevo a la opción de icono dentro de cada elemento del menú, con la diferencia que esta vez nos encontraremos con otros submenús para seleccionar el tipo de archivo que más nos guste. Sin olvidarnos de hacer antes clic en Guardar Ajustes.
Una vez guardados los ajustes vamos a refrescar la página, ya sea mediante el icono respectivo en nuestro navegador, o haciendo clic en la tecla de F5. Esto hará que se refresque nuestra página y podamos ver ya ejecutándose los cambios que hemos configurado.
Al ingresar veremos ahora los elementos en la parte izquierda que corresponderán a los nuevos que hemos activado, entre ellos el de subida de imágenes y SVG. El proceso luego de esto sería igual que el anterior solo que nos encontraremos con la posibilidad de subir imágenes.
Al hacerlo solo tendremos que seleccionarlo y ajustar las mismas configuraciones que hemos visto antes, para que nuestra imagen o icono personalizado se vea como necesitamos.
Si se da el caso y nos encontramos trabajando con un mega menú, es igual de sencillo, solo tenemos que asignarle al menú que tenemos configurado los iconos, es decir si por ejemplo trabajamos con el plugin max mega menu, y configuramos un menú de navegación en este tendremos que agregar los iconos.
Al ser WordPress un ecosistema tan rico en variedades de ajustes, nos encontramos con más plugins que nos podrán ayudar a hacer este ajuste en nuestros menús, este es el caso del plugin Menu Image, Icons made easy. De la misma forma que su nombre lo indica hacer este cambio resulta sencillo de configurar.
Como primer paso para todo caso en el que necesitemos usar un plugin es instalar un plugin en WordPress. Luego de que lo tenemos instalado lo primero que vamos a tener que hacer es saltar el aviso de configuración que nos encontramos.
Como primer paso para todo caso en el que necesitemos usar un plugin es instalar un plugin en WordPress. Luego de que lo tenemos instalado lo primero que vamos a tener que hacer es saltar el aviso de configuración que nos encontramos.
Al saltarlo nos encontraremos en un panel un poco general, donde tendremos que estipular tamaños de los iconos y permitir que estos se mantengan al momento de pasar el mouse sobre los elementos o enlaces del menú. Esto podemos dejarlo a elección, sin embargo, es mejor dejarlo todo activo y como se encuentra a menos que nos encontremos con un problema.
Luego de esto podemos ingresar en Apariencias > menú, en este caso en diferencia al plugin anterior contamos con un menú más marcado, con un panel bastante evidente una vez pasamos el cursor sobre los elementos de este menú.
Una vez hacemos clic en esta opción veremos un panel similar al anterior solo que con otras opciones.
En este menú, ve a la primera pestaña para encontrar todas las opciones gratuitas de configuración del plugin. Estas opciones son sencillas e incluyen ajustes como la posición del icono y la elección entre una imagen o un icono de la lista proporcionada por el plugin.
Si seleccionamos una imagen, tendremos algunas configuraciones adicionales, como cargar la imagen y seleccionar su tamaño de entre las opciones configuradas en los ajustes. Aunque este plugin tiene menos opciones que el anterior, funcionará bien en nuestra instalación.
De la misma forma que el plugin anterior tendremos la posibilidad de realizar esto en un megamenu, para ello solo tenemos que configurar en nuestro menú y luego asignarlo según cuál plugin usemos de megamenu en WordPress
Si somos de los que no queremos muchos plugins en nuestro sitio y nos inclinamos más a hacer estos ajustes por medio de códigos, podemos hacer los siguientes ajustes.
Primero necesitamos ingresar a nuestros menús, podemos hacerlo desde Apariencias > menu. Una vez dentro más allá de seleccionar el elemento del menú a modificar, primero tenemos que centrar nuestra vista en la parte superior derecha de la pantalla, una vez vemos el botón de opciones de pantalla.
Al hacer clic en este desplegaremos algunos ajustes de visibilidad, debemos buscar entre estos el que corresponda a Clase CSS de WordPress, una vez activo podemos cerrar esta solapa que hemos abierto.
Luego de esto, tendremos algunos ajustes adicionales que hacer antes de pasar al icono en sí, ahora es el momento de hacer cambios a nivel del elemento del menú, al seleccionarlo veremos un nuevo elemento que corresponderá a Clase CSS.
Aquí vamos a escribir algo que corresponda al elemento del menú, de tal forma que lo podamos utilizar luego en nuestro código y sea ubicado de forma fácil, por último recordemos hacer clic en el botón de guardar cambios.
Como ultimo paso previo, solo tenemos que subir la imagen a nuestra biblioteca de medios de WordPress, esta imagen que se convertirá en nuestro icono personalizado, una vez la subimos tomamos la URL de esta y la anotamos para usarla en el código que vamos a implementar en el sitio.
Este código es un CSS que nos ayudara con lo que necesitemos, este tipo de código es sencillo de implementar, podemos hacerlo por medio del panel de Apariencias > Personalizar > CSS adicional.
El código en cuestión que tenemos que agregar es el siguiente:
.ejemplomenu {
background-image: url('URL_DE_LA_IMAGEN');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}Una vez aplicamos este código el resultado que vamos a obtener es el que mostremos un icono en la parte izquierda de nuestro elemento del menú.
Conclusiones
La incorporación de imágenes en los menús de WordPress no es solo una cuestión de estética, sino también una estrategia efectiva para mejorar la experiencia del usuario y destacar aspectos clave de nuestro sitio web. A través de los pasos que hemos explorado, podemos ver que este proceso es accesible incluso para aquellos que no son expertos en tecnología, ofreciendo una forma sencilla de personalizar y enriquecer nuestro sitio.
La elección del plugin adecuado es crucial, ya que nos proporciona las herramientas necesarias para integrar imágenes de manera efectiva sin comprometer la velocidad o funcionalidad de tu sitio. La personalización cuidadosa y la previsualización son pasos importantes para asegurarnos de que las imágenes se integren de forma armoniosa con el diseño general de nuestro sitio.
Recordemos, el objetivo es mejorar la navegación y la apariencia del sitio, no sobrecargarlo. Las imágenes deben ser relevantes, de alta calidad y con dimensiones adecuadas para complementar nuestro contenido sin abrumar al usuario.
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y WooCommerce en Webempresa.
