Cómo agregar íconos sociales al menú principal div

Es prácticamente imposible ejecutar un sitio web exitoso sin tener una presencia dedicada en las redes sociales. Ya sea que elija como Instagram, Twitter, Tiktok, Facebook o cualquier combinación de ellos y cualquier otra cosa, la gente quiere interactuar directamente con usted y su marca. Asegurarse de que tenga íconos sociales en el menú principal es una excelente manera de canalizar el tráfico. Su sitio web a su red elegida es rápido y fácil y caminaremos por cada paso. ¡Vamos a empezar! Vista previa de escritorio

Móvil

Use el Generador de temas de la Divic para cargar un encabezado global gratuito para este artículo, utilizaremos el club de tenis de diseño y el encabezado / sótano gratuito. Puede descargar el paquete de apariencia dentro del Divi Builder y el paquete de encabezado / sótano en nuestro blog. Cuando lo descargue, los archivos serán un archivo .zip. Asegúrese de extraerlos para que tenga un.

Ahora, ingrese el tablero de WordPress y encuentre el constructor de temas de la división bajo el Builder Div – Temo. Haga clic en el icono de flecha hacia arriba en la esquina superior derecha de la página. Esto abre el método de portabilidad, seleccione la pestaña Importar, busque el archivo .json para el encabezado / sótano que descargó y haga clic en Importar la plantilla de los temas.

Luego, desea acceder a la sección del encabezado de su sitio porque son íconos sociales, los ingresaremos en el encabezado global, porque creemos que deberían estar en todas las páginas de su sitio (a menos que se especifique lo contrario).

Deberías estar dentro del constructor ahora. Si ha seguido las instrucciones anteriores, el nuevo encabezado que cargó ya debe aparecer en su lugar. Es posible notar que ya hay íconos sociales aquí. Esos íconos sociales no están en el menú principal Div, que trabajamos hoy. Así que vamos a entrar en las malas hierbas, ¿no? Agregue iconos sociales a la barra de menú principal. Lo primero es lo primero, para cambiar la estructura de la fila / columna. Queremos encontrar la fila en la sección # 2 (la siguiente con los enlaces en casa / contacto).

Seleccionamos la estructura con dos columnas para este tutorial, pero es lo que funciona mejor para su sitio. Después de haber elegido, vaya a la configuración de la fila y navegue por la pestaña de diseño. Encuentre el menú de tamaño y encienda Use el ancho de canalones personalizado. Establezca el valor del ancho del canal en 1. Puede ingresar el número o usar la diapositiva para hacerlo.

Haga clic en el Bifa verde para guardar la configuración. Luego regrese a la configuración de la fila. Esta vez, seleccione la velocidad establecida para la columna superior / primer / izquierda.

Luego explore la pestaña avanzada. Encuentre el área CSS personalizada y haga clic en el campo Artículo principal. En este campo, querrá agregar el siguiente CS. Ancho: 80%;

o ancho: 80%! Importante;
¡Puede que tenga que agregar la etiqueta! Importante para estilizar este artículo. Está bien. No debe crear problemas de rendimiento o código de espagueti para tratar, porque es un solo elemento.
Luego acceda a la configuración de receptividad y use el mismo código para cambiar el ancho de la columna al 100% para dispositivos móviles.

Luego repita este paso para la segunda columna. Solo esta vez, establezca el valor predeterminado en 20% y aún tenga el valor móvil al 100%. Después de haber terminado, guarde sus cambios y prepárese para agregar y estilizar sus iconos en las redes sociales. Agregue el módulo de seguimiento de las redes sociales, haga clic en el icono Black + en la columna 2 para agregar un nuevo módulo y desplácese hasta que encuentre las redes sociales. Inserte. Incrediente por el encabezado que usa, los iconos predeterminados en las redes sociales no se adaptarán a su estilo. No se colocarán correctamente. El siguiente paso será su estilización y espaciado correctos. Durante las redes sociales, siga la configuración del módulo, vaya al diseño y luego alineado. Elija dónde desee que se coloque el módulo.

Elegimos la justificación correcta para el escritorio y luego ingresamos las opciones de receptividad y el centavo.


El siguiente es el despliegue en el menú del icono. Elija el color del icono deseado. Esto es F para Facebook, el pájaro para Twitter, la cámara de Instagram. Este no es el fondo azul, por ejemplo.
El siguiente es el espacio. De hecho, lo principal a ajustar es el margen superior. Aplicaremos un margen superior de 1.5 VW para que se centre con el texto del menú. Si lo desea más o menos para dispositivos móviles, también puede ajustarlo.

Ahora, haga clic en la pestaña Contenido y acceda al icono de red social individual que desea personalizar. Repetirá estos pasos para cada icono que elija para su sitio.

Desplácese hacia abajo hacia el fondo y seleccione el color deseado que coincida nuevamente con el diseño de su sitio, recuerde que esto solo cambiará el fondo de este icono. También puede cambiar el color de este icono. Puede hacer esto en la sección de diseño e icono, como en el módulo general en sí. Esta configuración anulará la general, por lo que no tiene que preocuparse por la interferencia con los demás si desea colores únicos.

Luego, desplácese hacia abajo hasta la entrada del borde debajo de la pestaña de diseño y dentro de ella, encontrará el ancho del borde. Establezca este valor en 3 PX, luego seleccione un color de borde que salga del fondo del div.

En este momento, volverá a la pestaña de contenido y repetirá estos pasos para cada icono de red social que desea mostrar. Si desea que cada uno de los iconos en este módulo comparta el mismo diseño, puede hacer clic en el que ha diseñado y seleccionar estilos de copia.

Luego, haga clic en las otras redes que desea estilizar y seleccionar estilos de elementos.

¡Y eso es! Asegúrese de hacer clic en el botón de rescate en la esquina inferior derecha para guardar el aspecto general. Luego está a salvo en X en la pantalla de edición en la esquina superior derecha.

Asegúrese de que la página Divin Builder Divin muestre todos los cambios guardados en la parte superior izquierda. Si no, haga clic en Guardar los cambios. ¡Después de haber terminado, su sitio mostrará íconos en vivo en las redes sociales en el menú Primay Divin! Resultados finales y esto debería sembrar sus resultados finales. Escritorio

Móvil

Termine de garantizar que su audiencia siempre pueda encontrarle las principales redes sociales es un pedazo de pastel con Div.En solo unos pocos pasos, puede ajustar uno de nuestros paquetes de encabezado / sótano gratuitos para incluir sus íconos sociales en el menú principal (o en cualquier otro lugar que desee).¡Buena suerte! ¿Qué opinas sobre los íconos en las redes sociales en el menú principal?¿Dónde tiendes a colocarlos?