Cómo agregar íconos sociales al menú principal de Divi
Publicado: 2017-06-27En el tutorial de Divi de hoy, le mostraremos cómo agregar íconos sociales al menú principal de su sitio web Divi. Siguiendo este tutorial paso a paso, podrá agregar íconos sociales a cualquier sitio web que cree, ya sea para usted o un cliente.
Ya tenemos la capacidad de agregar íconos sociales directamente en el encabezado y pie de página de un sitio web con el personalizador de temas Divi. Pero si eso no es lo que está buscando, este tutorial podría ayudarlo porque en muchos casos; la gente prefiere tener los íconos sociales en su menú principal en lugar del encabezado o pie de página de su sitio web.
Le mostraremos exactamente cómo puede agregarlos, cómo puede personalizarlos y cómo abrirlos en una nueva pestaña. Estas son todas las cosas que realmente necesita saber para que los íconos sociales en su menú principal puedan aportar valor agregado a todo su sitio web.
¿Por qué agregar íconos sociales al menú principal?
En muchos casos, los sitios web y los canales de redes sociales son complementarios. No todo el contenido que se comparte en un sitio web aparece en los canales de redes sociales y viceversa. Es por eso que la promoción de su sitio web en sus canales de redes sociales y sus canales de redes sociales en su sitio web no es infrecuente y, francamente; muy animado.
Desea que las personas interactúen con su empresa o marca de la forma en que estén más familiarizados. Su sitio web suele ser un " territorio desconocido " para ellos. Por lo tanto, la barrera de contactarlo directamente a través de su sitio web podría ser mayor que para los canales de redes sociales. La mayoría de las personas que visitan tu página de Facebook o Twitter ya están integradas en las plataformas y la sensación de comodidad puede influir positivamente en su comportamiento.
Por eso, en general, poner íconos de redes sociales en tu sitio web es muy recomendable. Pero, ¿por qué compartirlos explícitamente en su menú principal? Hemos enumerado dos de las principales razones.
Fácil de encontrar / menú sigue al visitante durante su visita
Cuando agrega íconos sociales a su sitio web, desea que sean lo más visibles posible. La gente no debería tener que esforzarse para encontrar los íconos sociales en su sitio web. Ahí es donde poner los íconos sociales en el menú principal puede marcar la diferencia. El menú principal sigue a una persona durante toda su estancia en su sitio web. No es necesario ir a buscar los iconos, los iconos se te acercan. Lo único que tiene que hacer la persona es hacer clic y llegará allí.
El menú principal sigue a una persona durante toda su estancia en su sitio web. No es necesario buscar los iconos, los iconos se te acercan. Lo único que tiene que hacer un visitante es hacer clic en ellos y llegarán allí.
Acción desencadenante
Como se mencionó antes; Los canales de redes sociales y los sitios web son complementarios. Trabajan juntos y, por lo general, tienen los mismos objetivos, como informar a los clientes potenciales y atraerlos a los servicios o productos que se ofrecen. Cuanto más se enfrenten a ellos, es más probable que se active su curiosidad.
Para respaldar la conexión entre el sitio web y los canales de redes sociales, es bueno confrontar a los visitantes con los íconos sociales tan a menudo como sea posible. Cuanto más se enfrenten a ellos, es más probable que se active su curiosidad y es más probable que finalmente hagan clic en ellos.
Cómo agregar íconos sociales al menú principal de Divi
Suscríbete a nuestro canal de Youtube
Instalar Font Awesome
En primer lugar, necesitamos instalar Font Awesome en nuestro sitio web de WordPress. Vamos a hacer esto agregando algo de código CSS en las Opciones de tema de Divi.
Abra su sitio web de WordPress, vaya a Divi> Opciones de tema> Integración y pegue el siguiente código en la sección <head>:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
Font awesome ahora debería agregarse a las fuentes que se utilizan en su sitio web. Ahora puede agregar estos íconos a su menú principal siguiendo la siguiente parte de nuestra publicación paso a paso.
Empezar a crear el menú principal
Lo más probable es que ya haya creado su propio menú principal personalizado en el que haya enumerado todas las páginas que desea que aparezcan en el menú principal de su sitio web. Si aún no lo ha hecho, vaya a la página 'Menús' dentro de Apariencia y cree un nuevo menú.
A continuación, asigne un nombre al menú, agregue las páginas que le gustaría que aparezcan en su menú principal y seleccione la opción 'Menú principal' a continuación.
Agregar iconos sociales
Continuando, queremos agregar los íconos sociales. Al crear el menú principal, puede elegir dónde desea que aparezcan sus íconos sociales. En la mayoría de los casos, aparecerán inmediatamente después de las páginas, pero también puede ponerlas primero. Hay iconos de redes sociales disponibles para todos los sitios web importantes y más populares; desde Facebook a Twitter, Instagram, LinkedIn y más.
Comience abriendo el siguiente enlace en el sitio web de Font Awesome. Necesitaremos este sitio web para la siguiente parte de esta publicación, donde agregaremos los íconos manualmente.
Agregar iconos manualmente
La misma forma de trabajo se aplica a cada ícono social que agregue a su menú principal. Como ejemplo, le mostraremos cómo agregar el ícono de Instagram. Para todos los demás íconos que le gustaría agregar también; sepa que es la misma forma de trabajar (solo el icono, el código HTML y la URL difieren en consecuencia).
Abra la opción 'Vínculos personalizados' y verá aparecer dos campos: URL y Etiqueta de navegación. Obviamente, el campo URL es donde escribe la URL que lleva a un visitante a uno de los canales de las redes sociales. En este ejemplo, queremos que el ícono lleve a Instagram, así que simplemente escriba su URL de Instagram.
A continuación, vaya al sitio web de Font Awesome en su navegador y busque el ícono de Instagram a través de la barra de búsqueda. Asimismo, puede buscar Facebook, LinkedIn y cualquier otro ícono.
Una vez que haya hecho clic en el ícono de Instagram, verá que el sitio web proporciona el siguiente código HTML:
<i class="fa fa-instagram" aria-hidden="true"></i>
Este es el código exacto que debemos usar en el campo Etiqueta de navegación, así que continúe y complete el enlace personalizado copiando y pegando el código en el campo.
Repita el mismo proceso para cada uno de los íconos sociales que desea que aparezcan en su menú principal y observe cómo se ve en la parte frontal de su sitio web.
Cambiar la apariencia de los iconos sociales
Cambios colectivos en el menú principal (incluidos los iconos sociales)
El Personalizador de temas le permite realizar todos los cambios de apariencia que le gustaría hacer en su menú principal en un solo lugar.
Los cambios que puede realizar en el menú principal con las opciones de Divi también se aplican a los íconos sociales. Cuando le está dando un cierto color a su menú principal, por ejemplo, los íconos sociales tendrán el mismo color. Eso es porque estamos usando una fuente en lugar de una imagen para que esto funcione.
Puede realizar todos estos cambios que desea realizar en la apariencia en el Personalizador de temas yendo a Encabezado y navegación> Barra de menú principal. Los cambios que realiza se aplican en tiempo real y le brindan una buena perspectiva de cómo desea que se vea su menú principal.
Abrir íconos sociales en una pestaña nueva
Esta parte de la publicación es algo adicional que puedes hacer con los íconos sociales. Probablemente no desee alejar a sus visitantes del sitio web, aunque vayan a sus canales de redes sociales. Desea mantener activas ambas interacciones el mayor tiempo posible abriendo los enlaces de las redes sociales en una nueva pestaña cada vez que alguien hace clic en ellas.
Podemos hacer que la opción 'Abrir en una nueva pestaña' funcione fácilmente en todos los íconos de redes sociales volviendo al menú que hemos creado antes. Necesitamos hacer todos los ajustes de forma manual en cada uno de los iconos. En este ejemplo, haremos los cambios en el ícono de Instagram.
Continúe y elimine la URL que proporcionó en el campo URL y pegue el siguiente código en la URL de navegación en su lugar:
<a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
Haz lo mismo para cada uno de los íconos si quieres que se abran en una nueva pestaña. Cada vez que un visitante haga clic en ellos, se abrirán en una nueva pestaña que le permitirá mantener a sus visitantes el mayor tiempo posible.
Pensamientos finales
Este tutorial seguramente lo ayudará a integrar íconos sociales en su propio sitio web Divi de la manera que desee. Puede personalizarlos y adaptarlos al resto de su menú principal. Si tiene alguna pregunta o sugerencia; asegúrese de dejar un comentario en la sección de comentarios a continuación. Nos mantendremos en contacto e intentaremos responder todas las preguntas o sugerencias que tenga.
¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!
Imagen destacada a través de Oceans / shutterstock.com