Cómo agregar íconos de redes sociales a su menú de WordPress 1

Cómo agregar íconos de redes sociales a su menú de WordPress

Como dice el viejo refrán, una imagen vale más que mil palabras. Podríamos argumentar que en realidad es mucho menos, pero no se puede negar que la web los iconos son potentes e intuitivos, especialmente las de las redes sociales. ¿Ese alegre pájaro azul en vuelo? ¿La cámara cuadrada estilizada? ¿El rectángulo rojo de esquinas redondeadas con el símbolo del juego? Sabes lo que representan sin siquiera pensar. Los logotipos de las redes sociales son algunas de las imágenes más memorables que existen.

Agregar íconos de redes sociales a su menú de WordPress es fácil y no lleva tiempo. Le mostraremos cómo. Pero antes de ponernos manos a la obra, permítanos discutir por qué quiere sus íconos de redes sociales en su menú.

¿Por qué necesito iconos de redes sociales en mi menú de WordPress?

Muchos iconos pueden saturar su interfaz, especialmente en dispositivos móviles. Al ponerlos en un menú, puede evitarlo fácilmente. Los usuarios están acostumbrados a buscarlos en los menús y puedes hacer un menú más elegante e intuitivo añadiéndole iconos.

Del mismo modo, podrías crear un menú social especial con solo sus íconos de redes sociales, e incruste ese menú en cualquier área lista para widgets para que sus visitantes lleguen a su contenido de redes sociales con un simple clic y sin tener que navegar fuera de su sitio web. Los usuarios de dispositivos móviles se lo agradecerán especialmente.

Cómo agregar íconos sociales al menú de encabezado y pie de página usando el tema Bridge de WordPress

Si está utilizando nuestro versátil tema Bridge, agregar íconos sociales a su menú de encabezado o pie de página es tan simple como parece. ¡Incluso tenemos un widget dedicado para eso!

Todo lo que realmente necesita para instalar íconos de redes sociales en su encabezado o pie de página es este útil video-tutorial:

Pero si prefiere sus tutoriales en forma de texto, desplácese hacia abajo. Lo guiaremos paso a paso a través de todo lo que necesita hacer. Le mostraremos cómo hacerlo para su menú de encabezado, pero las áreas de pie de página funcionan igual en principio.

Las áreas de widgets que están disponibles dependerán de la demostración de Bridge que esté utilizando. El encabezado de la demostración que estamos usando no contiene ningún ícono social.

Vista previa de demostración de Bridge

Para solucionarlo, debe navegar a Apariencia / Widgets a través del menú del lado derecho en su panel de WordPress.

Widgets de apariencia

A continuación, debe encontrar el área de widgets correcta. Queremos nuestros íconos sociales al lado del menú y, en esta demostración de Bridge, el área correspondiente es Encabezado Inferior Derecha. Para colocar un icono social en cualquier área de widgets, debe arrastrar un Icono social de Qode widget para él.

Widget de icono social de Qode

A continuación, debe configurar este widget. Seleccionaremos el Circulo tipo de icono (puede elegir un tipo diferente de icono, según el estilo y la apariencia de su sitio web), el Fuente elegante paquete de iconos (también es compatible con Font Awesome), y el Facebook icono del Fuente elegante icono menú desplegable e ingrese al Tamaño personalizado y Tamaño de forma personalizada (10 y 13 píxeles para nosotros, respectivamente, pero puede seleccionar el suyo). A los efectos de esta demostración, proporcionaremos el widget con el hipervínculo de nuestra página de Facebook (por supuesto, utilizará el suyo) y cambiaremos el objetivo a Nueva ventana. El Icono social de Qode El widget también contiene numerosas configuraciones de diseño en las que no entraremos en este momento. Baste decir que la multitud de configuraciones de tamaño, color y borde hace que el widget sea muy versátil y adaptable a cualquier estilo.

Configuración del widget Qode Social Icon

Puede poblar la misma área con algunos íconos más sociales, si lo desea, como lo hemos hecho aquí. El orden en el que clasifica sus íconos sociales es el orden (de izquierda a derecha) en el que aparecerán los íconos en el encabezado. Y ahora su encabezado contendrá avenidas para sus cuentas de redes sociales.

Encabezado de iconos sociales

Cómo agregar íconos de redes sociales a los elementos del menú de WordPress en Bridge

Pero, ¿qué sucede si desea adjuntar íconos sociales a los elementos de su menú? Bridge también puede hacer eso, al igual que otros temas que pueda estar usando, pero demostraremos cómo hacer esto con nuestro tema.

Primero, debes navegar a Apariencia / Menús y busque su menú de navegación superior. En nuestro caso, su nombre es Mega Menú. A continuación, debe agregar un enlace a un perfil de redes sociales, nuestro perfil de Twitter en nuestro caso. Para hacer eso, necesita agregar un Enlace personalizado elemento de menú a su menú. Encuentra el Enlaces personalizados artículo en el Agregar elementos de menú menú y pegue su URL en el URL campo. Para nuestro Twitter, simplemente escribiremos Nuestro Twitter en el Texto del enlace campo y haga clic en el Agregar al menú botón.

Menú de enlaces personalizados

El elemento está ahora en la parte inferior de tu Estructura del menú, lo que significa que aparecerá en el extremo derecho del menú de navegación superior. Nos gusta allí, pero, por supuesto, puedes organizar tus menús como quieras. Expanda el elemento para configurarlo. Para Escribe, necesitas seleccionar ancho con iconos, ya que este es el único tipo de elemento de menú que mostrará un icono en Bridge. También seleccionaremos el Fuente impresionante para nuestro Paquete de iconos, y fa-twitter para nuestro Icono. Por supuesto, puede seleccionar el Fuente elegante paquete de iconos y el icono que le gusta para su perfil social. Desplazándose un poco más hacia abajo, haga clic en el Menú Guardar botón.

Configuración de elementos de menú

Y ahora tu menú contendrá un enlace con su ícono social. Usted puede agregue tantos de estos enlaces sociales como desee, y también asignan iconos a otros elementos del menú, pero eso va más allá del alcance de esta demostración.

Elemento de menú con vista previa del icono

Cómo agregar íconos de redes sociales a su menú de WordPress usando un complemento

Nuestra primera sugerencia es siempre utilizar la funcionalidad incorporada de un tema para cualquier efecto que desee lograr. Si el tema que está utilizando no tiene la funcionalidad que desea, un complemento a menudo ofrece una buena solución. El complemento que usaremos es Imagen del menú. Después de haber instalado y activado el complemento, primero se le pedirá que active las notificaciones para este complemento (que Saltar) y luego a la pantalla Configuración. Aquí puede cambiar el tamaño de los iconos para que se adapten al estilo de su sitio web. Simplemente lo haremos Guardar cambios y seguir adelante.

Configuración de imagen de menú

A continuación, navegue hasta Apariencia / Menús y busque su menú de navegación superior, el Mega Menú. Seleccione Enlaces personalizados desde el Agregar elementos de menú en el lado izquierdo y configúrelo. Para los propósitos de esta demostración, pegaremos la URL de nuestro perfil de Instagram en el URL campo y subtitularlo con Nuestro Instagram en el Texto del enlace campo antes de hacer clic en el Agregar al menú , mientras que puede elegir el perfil social y el icono que desee.

Enlaces personalizados

Esto colocará un Enlaces personalizados elemento en la parte inferior de tu Estructura del menú, lo que significa que aparecerá en el extremo derecho de su menú. Puede organizar sus menús como desee, pero lo dejaremos allí. Necesita expandir el elemento para configurarlo. Estableceremos el Posición del título a Después, lo que significa que el icono aparecerá en la izquierda de El Etiqueta de navegacióny haga clic en Establecer imagen para seleccionar una imagen de su biblioteca de medios o cargar una.

Configuración de elementos de menú

Hemos proporcionado a nuestra biblioteca de medios un icono de Instagram gratuito. Puede cargar cualquier otra imagen que desee para cada elemento del menú, pero lo dejaremos así, porque queremos que nuestro ícono social se destaque realmente y sea reconocible al instante. También puede seleccionar una versión diferente para un icono de desplazamiento al hacer clic en el Establecer imagen al pasar el mouse icono. Finalmente, una vez que esté satisfecho con su configuración, debe hacer clic en el Menú Guardar botón.

Ícono de carga de elemento de menú

¡Y el enlace de su perfil de Instagram ahora será la estrella de nuestro menú de navegación superior!

Vista previa de Instagram de elemento de menú

En conclusión

Como hemos mostrado, agregar íconos a los elementos de su menú es fácil y rápido. Ya sea que use las opciones integradas de su tema o un complemento, puede dar a conocer su presencia en las redes sociales a los visitantes de su sitio web con solo unos pocos clics del mouse. En esta época, ¿puede permitirse el lujo de no hacerlo?

Apoya nuestro trabajo ❤️

Si te ha gustado este artículo, considera dejar una propina para ayudarnos a seguir publicando contenido de calidad.

Pago seguro en PayPal