[et_pb_section fb_built=\u00bb1″ _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n
En la era digital actual, donde la primera impresi\u00f3n puede ser decisiva, la personalizaci\u00f3n de nuestro sitio web de WordPress<\/a> con im\u00e1genes en el men\u00fa se convierte en una herramienta poderosa para destacar. No se trata solo de un capricho est\u00e9tico; es una estrategia para captar la atenci\u00f3n de nuestros visitantes y guiarlos de manera intuitiva a trav\u00e9s de nuestro contenido.<\/p>\n Las im\u00e1genes en los men\u00fas pueden actuar como marcadores visuales, ayudando a los usuarios a navegar por nuestro sitio de manera m\u00e1s eficiente y agradable. Esta t\u00e9cnica de dise\u00f1o web no solo es beneficiosa para sitios con gran volumen de contenido, sino tambi\u00e9n para aquellos que buscan una diferenciaci\u00f3n visual.<\/p>\n En un mundo donde el contenido es rey, una navegaci\u00f3n de forma visual puede ser la reina que lo complementa a la perfecci\u00f3n. Al integrar im\u00e1genes en los men\u00fas<\/strong>, no solo est\u00e1s mejorando la experiencia del usuario, sino tambi\u00e9n reforzando la identidad visual de nuestra marca o proyecto.<\/p>\n Esta pr\u00e1ctica es \u00fatil en sitios web con diferentes idiomas o audiencias con habilidades ling\u00fc\u00edsticas variadas, ya que las im\u00e1genes brindan pistas visuales que todos pueden entender. En esta gu\u00eda, vamos a explicar c\u00f3mo hacerlo bien para que nuestro sitio sea atractivo, accesible y f\u00e1cil de usar para todos nuestros visitantes.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n En el coraz\u00f3n de cualquier sitio web de WordPress, encontramos los men\u00fas, esos elementos esenciales que gu\u00edan a los visitantes a trav\u00e9s de nuestro contenido digital. Un men\u00fa en WordPress<\/a> es m\u00e1s que una simple lista de enlaces; es un mapa que dirige a los usuarios hacia las \u00e1reas m\u00e1s importantes de nuestro sitio, desde la p\u00e1gina de inicio hasta las secciones m\u00e1s espec\u00edficas. Es la br\u00fajula que ayuda a los visitantes a navegar por el vasto oc\u00e9ano de nuestro contenido.<\/p>\n Ahora, cuando hablamos de un mega men\u00fa, estamos elevando el concepto de navegaci\u00f3n a un nivel superior. Imaginemos un men\u00fa tradicional, pero con superpoderes. Un mega men\u00fa en WordPress<\/a> no solo ofrece enlaces; es una exhibici\u00f3n expansiva que puede incluir im\u00e1genes, 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\u00faltiples \u00e1reas de una sola vez.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbdata:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA4MCIgaGVpZ2h0PSI1NDAiIHZpZXdCb3g9IjAgMCAxMDgwIDU0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZmlsbD0iI0VCRUJFQiIgZD0iTTAgMGgxMDgwdjU0MEgweiIvPgogICAgICAgIDxwYXRoIGQ9Ik00NDUuNjQ5IDU0MGgtOTguOTk1TDE0NC42NDkgMzM3Ljk5NSAwIDQ4Mi42NDR2LTk4Ljk5NWwxMTYuMzY1LTExNi4zNjVjMTUuNjItMTUuNjIgNDAuOTQ3LTE1LjYyIDU2LjU2OCAwTDQ0NS42NSA1NDB6IiBmaWxsLW9wYWNpdHk9Ii4xIiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgICAgICA8Y2lyY2xlIGZpbGwtb3BhY2l0eT0iLjA1IiBmaWxsPSIjMDAwIiBjeD0iMzMxIiBjeT0iMTQ4IiByPSI3MCIvPgogICAgICAgIDxwYXRoIGQ9Ik0xMDgwIDM3OXYxMTMuMTM3TDcyOC4xNjIgMTQwLjMgMzI4LjQ2MiA1NDBIMjE1LjMyNEw2OTkuODc4IDU1LjQ0NmMxNS42Mi0xNS42MiA0MC45NDgtMTUuNjIgNTYuNTY4IDBMMTA4MCAzNzl6IiBmaWxsLW9wYWNpdHk9Ii4yIiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgIDwvZz4KPC9zdmc+Cg==\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Mientras que un men\u00fa est\u00e1ndar es perfecto para sitios m\u00e1s peque\u00f1os o aquellos con una estructura simple, el mega men\u00fa brilla en sitios web con una gran cantidad de contenido<\/strong> o categor\u00edas. Es ideal para tiendas en l\u00ednea, portales de noticias, o sitios educativos, donde la cantidad de informaci\u00f3n puede ser abrumadora. Con un mega men\u00fa, podemos organizar esta informaci\u00f3n de manera que sea de f\u00e1cil acceso<\/strong>, sin sobrecargar a nuestros visitantes.<\/p>\n Tanto los men\u00fas como los mega men\u00fas son herramientas fundamentales en WordPress para una navegaci\u00f3n efectiva. Mientras que los men\u00fas tradicionales mantienen las cosas simples y directas, los mega men\u00fas ofrecen una experiencia m\u00e1s 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.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n La incorporaci\u00f3n de im\u00e1genes en los men\u00fas de WordPress es una estrategia que puede transformar la experiencia de navegaci\u00f3n de nuestros visitantes, pero \u00bfcu\u00e1ndo es el momento adecuado para implementarlas?<\/strong> La respuesta yace en entender el impacto visual y funcional que deseamos lograr en nuestro sitio web.<\/p>\n Sitios web visuales:<\/strong> si nuestro sitio web se centra en contenido visual, como una galer\u00eda de arte<\/strong>, un portafolio de fotograf\u00eda<\/strong>, o una tienda en l\u00ednea WordPress<\/a>, agregar im\u00e1genes a nuestros men\u00fas puede ser un acierto total. Las im\u00e1genes act\u00faan como un atractivo visual, capturando la atenci\u00f3n de los visitantes y gui\u00e1ndolos hacia los productos o trabajos art\u00edsticos.<\/p>\n Mejorar la experiencia del usuario:<\/strong> en sitios con una amplia gama de categor\u00edas o servicios, las im\u00e1genes en los men\u00fas ayudan a los usuarios a navegar m\u00e1s f\u00e1cil. Por ejemplo, en un sitio de comercio electr\u00f3nico, los \u00edconos de im\u00e1genes pueden diferenciar de forma r\u00e1pida entre categor\u00edas como ropa de hombre, mujer, accesorios, etc.<\/p>\n Sitios con audiencia internacional:<\/strong> para sitios que atraen a una audiencia global, las im\u00e1genes pueden ser una herramienta poderosa para superar las barreras del idioma. Los \u00edconos visuales y las im\u00e1genes pueden comunicar de manera efectiva d\u00f3nde clickear, m\u00e1s all\u00e1 del idioma que hable el visitante.<\/p>\n Cuando queremos destacar elementos espec\u00edficos:<\/strong> Cuando deseamos resaltar secciones espec\u00edficas, como promociones, eventos o nuevos productos en nuestro sitio web, las im\u00e1genes en el men\u00fa pueden llamar la atenci\u00f3n de los usuarios hacia estas \u00e1reas.<\/p>\n Sitios con dise\u00f1o minimalista:<\/strong> en un sitio con un dise\u00f1o minimalista, donde cada elemento cuenta, unas pocas im\u00e1genes bien seleccionadas en el men\u00fa pueden a\u00f1adir un toque de elegancia y sofisticaci\u00f3n, sin abrumar el dise\u00f1o general.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n A\u00f1adir im\u00e1genes a nuestro men\u00fa de WordPress<\/strong> puede parecer una tarea compleja, pero en realidad es un proceso bastante sencillo que puede darle un toque \u00fanico y atractivo a nuestro sitio web. Aqu\u00ed veremos algunos pasos para lograrlo, manteniendo la esencia de nuestro sitio y mejorando la experiencia del usuario.<\/p>\n Este ajuste vamos a poder hacerlo por medio de plugins o bien de forma manual agregando c\u00f3digo en nuestro sitio, seg\u00fan cu\u00e1l sea el caso podemos seleccionar una opci\u00f3n u otra, si somos algo quisquillosos con los plugins tendremos una alternativa para hacerlo nosotros mismos.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n En este caso tenemos algunos de los plugins m\u00e1s sencillos de utilizar de todo el repositorio de WordPress, este corresponde al plugin de Menu Icons by ThemeIsle<\/strong>. Si bien es el que utilizaremos en esta primera parte de esta gu\u00eda tendremos alguna que otra opci\u00f3n si este no nos convence del todo.<\/p>\n Este plugin funciona incluso integr\u00e1ndolo con otros aspectos como ser\u00eda Font Awesone para WordPress<\/a>, si tenemos este tipo de iconos en nuestros sitios configurados vamos a poder gestionarlos y agregarlos en nuestros men\u00fas. Para no adelantarnos en el proceso vamos paso a paso con lo que corresponde.<\/p>\n Lo primero que tenemos que hacer es una instalaci\u00f3n de plugin en WordPress<\/a>, de forma manual o mediante el repositorio de plugins de WordPress.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/11\/menu-icons.png\u00bb url=\u00bbhttps:\/\/wordpress.org\/plugins\/menu-image\/\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″ title_text=\u00bbmenu icons\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb text_orientation=\u00bbcenter\u00bb custom_margin=\u00bb||30px||false|false\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]Gratuito<\/a>\u00a0\u00a0\u00a0\u00a0\u00a0Comercial<\/a>\u00a0\u00a0\u00a0\u00a0\u00a0Visitar el plugin <\/i><\/span><\/a>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Siguiendo con la cantidad de im\u00e1genes que podemos integrar no solo se puede trabajar con Font Awesome<\/strong>, tambi\u00e9n podemos trabajar otras plataformas de iconos e incluso im\u00e1genes propias<\/strong> para generar ese icono que va a deslumbrar a nuestra audiencia.<\/p>\n Una vez hemos instalado y activado el plugin no vamos a notar ning\u00fan cambio a simple vista en nuestro sitio, lo que tendremos que hacer es ingresar a nuestros men\u00fas personalizados de WordPress, en este caso para ingresar a este panel debemos hacer clic en nuestro dashboard de WordPress<\/a> en Apariencias > men\u00fa<\/strong>.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/11\/apariencia-menus.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbapariencia menus\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Una vez dentro de este panel no vamos a ver nada extra\u00f1o tampoco, y es aqu\u00ed donde nos cuestionaremos si este plugin funciona de verdad, al ser una opci\u00f3n integrada a la perfecci\u00f3n, no posee paneles extra\u00f1os ni submen\u00fas visibles o molestos. Una vez ingresamos al panel de men\u00fas en nuestro sitio vamos a ingresar a cualquiera de los elementos del propio men\u00fa.<\/p>\n Una vez seleccionemos el elemento veremos entre sus opciones b\u00e1sicas de etiqueta de navegaci\u00f3n o mover elementos hacia arriba o hacia abajo<\/strong>, un bot\u00f3n que indica Icono<\/strong>, junto a un enlace para poder hacer esta selecci\u00f3n.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/11\/icono-en-menus.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbicono en menus\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Una vez hacemos clic a esta opci\u00f3n nos va a mostrar una pantalla que hemos visto mucho si trabajamos subiendo im\u00e1genes a nuestro sitio, no es m\u00e1s que el desplegable o popup de WordPress<\/a>, que hace relaci\u00f3n a la subida de im\u00e1genes en el sitio, solo que en este caso nos permitir\u00e1 de momento solo seleccionar los iconos que queramos.<\/p>\n Una vez hacemos clic a un icono, vamos a ver como en el lado derecho de este popup, tendremos diversas opciones entre ellas:<\/p>\n Ocultar etiqueta:<\/strong> esta opci\u00f3n nos permite ocultar el nombre del elemento en el men\u00fa. Por ejemplo, si asignamos un icono a la p\u00e1gina llamada Inicio<\/strong>\u00a0y activamos esto, solo se mostrar\u00e1 el icono configurado.<\/p>\n Posici\u00f3n:<\/strong> si bien es un poco ambigua la opci\u00f3n, esta nos va a permitir seleccionar donde se mostrara el icono, antes del texto o despu\u00e9s del texto que indica el nombre del men\u00fa.<\/p>\n Alineaci\u00f3n vertical:<\/strong> esta es la opci\u00f3n que tendr\u00e1 m\u00e1s posibilidades de configurar, va a depender de nuestras necesidades y como nos guste que se vea el icono en nuestro men\u00fa.<\/p>\n Tama\u00f1o de fuente:<\/strong> muy posible que sea una de las m\u00e1s importantes a configurar, luego de seleccionar si se oculta o no la etiqueta, esta nos permite agrandar o achicar nuestro icono.<\/p>\n Si bien no es una opci\u00f3n, podemos destacar en la parte superior derecha encontramos una Vista previa<\/strong>, en ella vamos a poder ver en tiempo real las opciones que seleccionemos, de tal forma que no nos tome por sorpresa el c\u00f3mo se va a ver el icono una vez este configurado del todo.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/11\/ajuste-en-el-icono.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbajuste en el icono\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Como es de esperarse al momento de hacer estos pasos no nos encontramos con todos los tipos diferentes de im\u00e1genes incluso con la opci\u00f3n que m\u00e1s nos importa, la de poder subir nosotros mismos el icono en nuestro men\u00fa.<\/p>\n Para poder activar esta opci\u00f3n no hay que irnos muy lejos, para ello podemos ingresar en los ajustes de este plugin, dentro de Apariencias > men\u00fa<\/strong>. Tendremos un panel lateral donde agregamos elementos al men\u00fa, uno de estos tendr\u00e1 la opci\u00f3n de Ajustes de Men\u00fa Icons<\/strong>.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/11\/ajuste-de-menu-icons.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbajuste de menu icons\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n En esta opci\u00f3n podremos activar o desactivar las plataformas de iconos, de la misma forma activar o desactivar la subida de im\u00e1genes personalizadas o archivos SVG<\/a>, estos archivos son conocidos por ser exclusivos para iconos con m\u00e1s calidad.<\/p>\n Una vez seleccionamos las opciones que m\u00e1s nos favorecen seg\u00fan nuestras necesidades pasamos a hacer clic de nuevo a la opci\u00f3n de icono dentro de cada elemento del men\u00fa, con la diferencia que esta vez nos encontraremos con otros submen\u00fas para seleccionar el tipo de archivo que m\u00e1s nos guste. Sin olvidarnos de hacer antes clic en Guardar Ajustes<\/strong>.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/11\/guardado-de-ajustes.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbguardado de ajustes\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Una vez guardados los ajustes vamos a refrescar la p\u00e1gina, ya sea mediante el icono respectivo en nuestro navegador, o haciendo clic en la tecla de F5<\/strong>. Esto har\u00e1 que se refresque nuestra p\u00e1gina y podamos ver ya ejecut\u00e1ndose los cambios que hemos configurado.<\/p>\n Al ingresar veremos ahora los elementos en la parte izquierda que corresponder\u00e1n a los nuevos que hemos activado, entre ellos el de subida de im\u00e1genes y SVG<\/strong>. El proceso luego de esto ser\u00eda igual que el anterior solo que nos encontraremos con la posibilidad de subir im\u00e1genes.<\/p>\n 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.<\/p>\n Si se da el caso y nos encontramos trabajando con un mega men\u00fa, es igual de sencillo, solo tenemos que asignarle al men\u00fa que tenemos configurado los iconos, es decir si por ejemplo trabajamos con el plugin max mega menu<\/strong>, y configuramos un men\u00fa de navegaci\u00f3n en este tendremos que agregar los iconos.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/11\/icono-en-mega-menu-1.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb title_text=\u00bbicono en mega menu 1″ hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Al ser WordPress un ecosistema tan rico en variedades de ajustes, nos encontramos con m\u00e1s plugins que nos podr\u00e1n ayudar a hacer este ajuste en nuestros men\u00fas, este es el caso del plugin Menu Image, Icons made easy<\/strong>. De la misma forma que su nombre lo indica hacer este cambio resulta sencillo de configurar.<\/p>\n 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\u00f3n que nos encontramos.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/11\/menu-image.png\u00bb url=\u00bbhttps:\/\/wordpress.org\/plugins\/menu-image\/\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbmenu image\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb text_orientation=\u00bbcenter\u00bb custom_margin=\u00bb||30px||false|false\u00bb global_colors_info=\u00bb{}\u00bb]Gratuito<\/a>\u00a0\u00a0\u00a0\u00a0\u00a0Comercial<\/a>\u00a0\u00a0\u00a0\u00a0\u00a0Visitar el plugin <\/i><\/span><\/a>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/11\/saltar-menu-imagen.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbsaltar menu imagen\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Como primer paso para todo caso en el que necesitemos usar un plugin es instalar un plugin en WordPress<\/strong>. Luego de que lo tenemos instalado lo primero que vamos a tener que hacer es saltar el aviso de configuraci\u00f3n que nos encontramos.<\/p>\n Al saltarlo nos encontraremos en un panel un poco general, donde tendremos que estipular tama\u00f1os de los iconos y permitir que estos se mantengan al momento de pasar el mouse sobre los elementos o enlaces del men\u00fa. Esto podemos dejarlo a elecci\u00f3n, sin embargo, es mejor dejarlo todo activo y como se encuentra a menos que nos encontremos con un problema.<\/p>\n Luego de esto podemos ingresar en Apariencias > men\u00fa<\/strong>, en este caso en diferencia al plugin anterior contamos con un men\u00fa m\u00e1s marcado, con un panel bastante evidente una vez pasamos el cursor sobre los elementos de este men\u00fa.<\/p>\n Una vez hacemos clic en esta opci\u00f3n veremos un panel similar al anterior solo que con otras opciones.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/11\/menu-imagen.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbmenu imagen\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n En este men\u00fa, ve a la primera pesta\u00f1a para encontrar todas las opciones gratuitas de configuraci\u00f3n del plugin. Estas opciones son sencillas e incluyen ajustes como la posici\u00f3n del icono y la elecci\u00f3n entre una imagen<\/strong> o un icono de la lista<\/strong> proporcionada por el plugin.<\/p>\n Si seleccionamos una imagen, tendremos algunas configuraciones adicionales, como cargar la imagen y seleccionar su tama\u00f1o de entre las opciones configuradas en los ajustes. Aunque este plugin tiene menos opciones que el anterior, funcionar\u00e1 bien en nuestra instalaci\u00f3n.<\/p>\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\u00fa y luego asignarlo seg\u00fan cu\u00e1l plugin usemos de megamenu en WordPress<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Si somos de los que no queremos muchos plugins en nuestro sitio y nos inclinamos m\u00e1s a hacer estos ajustes por medio de c\u00f3digos, podemos hacer los siguientes ajustes.<\/p>\n Primero necesitamos ingresar a nuestros men\u00fas, podemos hacerlo desde Apariencias > menu<\/strong>. Una vez dentro m\u00e1s all\u00e1 de seleccionar el elemento del men\u00fa a modificar, primero tenemos que centrar nuestra vista en la parte superior derecha de la pantalla, una vez vemos el bot\u00f3n de opciones de pantalla.<\/p>\n Al hacer clic en este desplegaremos algunos ajustes de visibilidad<\/strong>, debemos buscar entre estos el que corresponda a Clase CSS de WordPress<\/a>, una vez activo podemos cerrar esta solapa que hemos abierto.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/11\/clase-css.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbclase css\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Luego de esto, tendremos algunos ajustes adicionales que hacer antes de pasar al icono en s\u00ed, ahora es el momento de hacer cambios a nivel del elemento del men\u00fa, al seleccionarlo veremos un nuevo elemento que corresponder\u00e1 a Clase CSS<\/strong>.<\/p>\n Aqu\u00ed vamos a escribir algo que corresponda al elemento del men\u00fa, de tal forma que lo podamos utilizar luego en nuestro c\u00f3digo<\/strong> y sea ubicado de forma f\u00e1cil, por \u00faltimo recordemos hacer clic en el bot\u00f3n de guardar cambios.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/11\/css-aplicado-en-menu.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbcss aplicado en menu\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Como ultimo paso previo, solo tenemos que subir la imagen a nuestra biblioteca de medios de WordPress<\/a>, esta imagen que se convertir\u00e1 en nuestro icono personalizado, una vez la subimos tomamos la URL de esta y la anotamos para usarla en el c\u00f3digo que vamos a implementar en el sitio.<\/p>\n Este c\u00f3digo es un CSS<\/strong> que nos ayudara con lo que necesitemos, este tipo de c\u00f3digo es sencillo de implementar, podemos hacerlo por medio del panel de Apariencias > Personalizar > CSS adicional<\/strong>.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/11\/aplicacion-de-css-.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb title_text=\u00bbaplicacion de css\u00bb sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n El c\u00f3digo en cuesti\u00f3n que tenemos que agregar es el siguiente:<\/p>\n [\/et_pb_text][et_pb_code _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″] <\/code>[\/et_pb_code][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Una vez aplicamos este c\u00f3digo el resultado que vamos a obtener es el que mostremos un icono en la parte izquierda de nuestro elemento del men\u00fa.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n La incorporaci\u00f3n de im\u00e1genes en los men\u00fas de WordPress<\/strong> no es solo una cuesti\u00f3n de est\u00e9tica, sino tambi\u00e9n una estrategia efectiva para mejorar la experiencia del usuario y destacar aspectos clave de nuestro sitio web. A trav\u00e9s de los pasos que hemos explorado, podemos ver que este proceso es accesible incluso para aquellos que no son expertos en tecnolog\u00eda, ofreciendo una forma sencilla de personalizar y enriquecer nuestro sitio.<\/p>\n La elecci\u00f3n del plugin adecuado es crucial, ya que nos proporciona las herramientas necesarias para integrar im\u00e1genes<\/strong> de manera efectiva sin comprometer la velocidad o funcionalidad de tu sitio. La personalizaci\u00f3n cuidadosa y la previsualizaci\u00f3n son pasos importantes para asegurarnos de que las im\u00e1genes se integren de forma armoniosa con el dise\u00f1o general de nuestro sitio.<\/p>\n Recordemos, el objetivo es mejorar la navegaci\u00f3n y la apariencia del sitio, no sobrecargarlo. Las im\u00e1genes deben ser relevantes<\/strong>, de alta calidad<\/strong> y con dimensiones adecuadas<\/strong> para complementar nuestro contenido sin abrumar al usuario.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Tambi\u00e9n te puede interesar:<\/p>\n <\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":" En la era digital actual, donde la primera impresi\u00f3n puede ser decisiva, la personalizaci\u00f3n de nuestro sitio web de WordPress con im\u00e1genes en el men\u00fa se convierte en una herramienta poderosa para destacar. No se trata solo de un capricho est\u00e9tico; es una estrategia para captar la atenci\u00f3n de nuestros visitantes y guiarlos de manera […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/3500"}],"collection":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/comments?post=3500"}],"version-history":[{"count":45,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/3500\/revisions"}],"predecessor-version":[{"id":3626,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/3500\/revisions\/3626"}],"wp:attachment":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/media?parent=3500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/categories?post=3500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/tags?post=3500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\u00bfQu\u00e9 es un men\u00fa y un mega men\u00fa en WordPress?<\/h2>\n
\u00bfCu\u00e1ndo es bueno implementar im\u00e1genes en el men\u00fa de WordPress?<\/h2>\n
\u00bfC\u00f3mo a\u00f1adir im\u00e1genes en el men\u00fa de WordPress?<\/h2>\n
Agregar \u00edconos de im\u00e1genes a los men\u00fas de navegaci\u00f3n usando el plugin Menu Icons by ThemeIsle<\/h3>\n
Agregar \u00edconos de im\u00e1genes a los men\u00fas de navegaci\u00f3n usando el plugin Menu Icons by ThemeIsle<\/h3>\n
Agregar \u00edconos de im\u00e1genes a los men\u00fas de navegaci\u00f3n usando codigo personalizado<\/h3>\n
<\/p>\n.ejemplomenu {background-image: url('URL_DE_LA_IMAGEN');background-repeat: no-repeat;background-position: left;padding-left: 5px;}<\/pre>\nConclusiones<\/h2>\n
\n