Es prácticamente imposible ejecutar un sitio web exitoso sin tener una presencia dedicada en las redes sociales. Ya sea que elija que sea Instagram, Twitter, TikTok, Facebook o cualquier combinación de esos y cualquier otra cosa, las personas quieren interactuar con usted y su marca directamente. Asegurarse de tener íconos sociales en Divi y su menú principal es una excelente manera de canalizar el tráfico de su sitio web a la red de su elección. Es rápido y fácil, y lo guiaremos en cada paso.
¡Empecemos!
Escritorio
Móvil
Use Divi Theme Builder para cargar un encabezado global gratuito
Para este artículo, vamos a utilizar el paquete de diseño de Tennis Club y el encabezado/pie de página gratuito. Puede descargar el paquete de diseño desde su constructor Divi y el paquete de encabezado/pie de página desde nuestro blog . Cuando lo descargue, los archivos estarán como un archivo .zip . Asegúrese de extraerlos para tener un archivo .json para cargar en Divi.
Ahora, vaya a su panel de control de WordPress y busque Divi Theme Builder en Divi – Theme Builder . Haga clic en el icono de flecha hacia arriba y hacia abajo en la esquina superior derecha de la página. Esto abre el modal Portabilidad , seleccione la pestaña Importar , busque el archivo .json para el encabezado/pie de página que descargó y haga clic en Importar plantillas de Divi Theme Builder .
A continuación, desea ir a la sección de encabezado de su sitio. Debido a que se trata de íconos sociales, los colocaremos en el encabezado global porque pensamos 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 siguió las instrucciones anteriores, el nuevo encabezado que cargó debería aparecer ya en su lugar.
Puede notar que ya hay íconos sociales aquí. Sin embargo , esos íconos sociales no están en el menú principal de Divi , que es en lo que estamos trabajando hoy. Entonces, entremos en la maleza, ¿de acuerdo?
Lo primero es lo primero, cambiemos la estructura de filas/columnas. Queremos encontrar la fila en la sección #2 (la inferior con los enlaces de Inicio/Contacto ).
Estamos seleccionando la estructura de dos columnas para este tutorial, pero es lo que mejor se adapte a su sitio. Una vez que haya elegido eso, vaya a la configuración de Fila y navegue a la pestaña Diseño . Busque el menú Tamaño y active Usar ancho de medianil personalizado . Establezca el valor de Gutter Width en 1. Puede ingresar el número o usar el control deslizante para hacer esto.
Haga clic en la marca de verificación verde para guardar su configuración. Luego regrese a la configuración de Fila. Esta vez, seleccione el engranaje de configuración para la columna superior/primera/izquierda.
A continuación, navegue a la pestaña Avanzado . Busque el área de CSS personalizado y haga clic en el campo Elemento principal . Dentro de este campo, querrá agregar el siguiente CSS.
|
01
|
width:80%; |
o
|
01
|
width:80%!important; |
Es posible que deba agregar la etiqueta !important para diseñar este elemento. Esta bien. No debería crear problemas de rendimiento o código de espagueti para tratar porque es un solo elemento.
Luego, vaya a la configuración de Capacidad de respuesta y use el mismo código para cambiar el ancho de la columna al 100% para dispositivos móviles.
A continuación, repita este paso para la segunda columna. Solo que esta vez, establezca el valor predeterminado en 20% y aún tenga el valor móvil en 100% .
Una vez hecho esto, guarde sus cambios y prepárese para agregar y diseñar sus íconos de redes sociales.
Haga clic en el ícono negro + en la Columna 2 para agregar un nuevo módulo y desplácese hasta que encuentre Social Media Follow . Insértelo.
Independientemente del encabezado que esté utilizando, lo más probable es que los íconos de redes sociales predeterminados no coincidan con su estilo. Tampoco se colocarán correctamente. El siguiente paso será diseñarlos y espaciarlos correctamente. Dentro de la configuración del módulo Seguimiento de redes sociales , vaya a Diseño y luego a Alineación . Elija dónde desea colocar el módulo.
Estamos eligiendo justificado a la derecha para el escritorio y luego entrando en las opciones de Capacidad de respuesta y centrándolo.
El siguiente paso es desplazarse hacia abajo en el menú Icono . Elige el color del icono que quieras. Esta es la f de Facebook, el pájaro de Twitter, la cámara de Instagram. Este no es el fondo azul, por ejemplo.
El siguiente paso es el espaciado. Realmente lo principal que necesita ajustarse es el margen superior. Vamos a aplicar un margen superior de 1,5 vw para que se centre con el texto del menú. Si lo quieres más o menos para dispositivos móviles, también puedes ajustarlo.
Ahora, haga clic en la pestaña Contenido y vaya al ícono de la red social individual que desea personalizar. Repetirá estos pasos para cada icono que elija para su sitio.
Desplácese hacia abajo hasta Fondo y seleccione el color que desee que coincida con el diseño de su sitio. Nuevamente, recuerde que esto solo cambiará el fondo de este ícono en particular.
También es posible que desee cambiar el color de este icono en particular. Puede hacerlo en la pestaña Diseño y en la sección Icono , al igual que en el módulo general. Esta configuración anulará la general, por lo que no tiene que preocuparse por interferir con otros si desea colores únicos.
Luego, desplácese hacia abajo hasta la entrada Borde en la pestaña Diseño y, dentro de ella, encontrará el Ancho del borde . Establezca este valor en 3 px y luego seleccione un color de borde que se destaque del fondo del menú principal de Divi.
En este punto, volverá a la pestaña Contenido y repetirá estos pasos para cada icono de red social que desee mostrar. Si desea que cada uno de los iconos de este módulo comparta el mismo diseño, simplemente haga clic con el botón derecho en el que diseñó y seleccione Copiar estilos de elementos .
A continuación, haga clic con el botón derecho en las otras redes que desea diseñar y seleccione Pegar estilos de elementos .
¡Y eso es! Asegúrese de hacer clic en el botón Guardar en la esquina inferior derecha de la pantalla para guardar el diseño general. Luego, estarás a salvo con X fuera de la pantalla de edición en la esquina superior derecha.
Asegúrese de que la página Divi Theme Builder muestre Todos los cambios guardados en la parte superior izquierda. De lo contrario, haga clic en Guardar cambios . Una vez hecho esto, su sitio estará en vivo mostrando los íconos de las redes sociales en su menú principal de Divi.
Resultados finales
Y esto es lo que deberían parecerse a sus resultados finales.
Escritorio
Móvil
Terminando
Asegurarse de que su audiencia siempre pueda encontrar sus redes sociales principales es pan comido con Divi. En solo unos pocos pasos, puede ajustar uno de nuestros paquetes gratuitos de encabezado/pie de página para incluir sus íconos de redes sociales en el menú principal (o donde quiera que los desee). ¡Buena suerte!
¿Qué opinas sobre los íconos de redes sociales en el menú principal? ¿Dónde sueles colocarlos?