Tener una fuerte presencia en las redes sociales es crucial para el éxito de cualquier sitio web. Tu audiencia quiere conectarse contigo en sus plataformas favoritas. Una forma de hacerlo más fácil para ellos es proporcionar enlaces de redes sociales en su sitio web. Afortunadamente, esto es fácil de hacer con Divi . En este artículo, veremos cómo agregar íconos sociales al pie de página de Divi.
Empecemos.
Aquí hay un vistazo a cómo se verá mi pie de página en el escritorio y en el móvil.
Vista previa de escritorio
Así es como se verá el diseño en el escritorio con los nuevos íconos sociales en el pie de página de Divi.
Vista previa móvil
Así es como se verá el diseño en el móvil con los nuevos íconos sociales en el pie de página de Divi.
Primero, necesitaremos una plantilla de pie de página. Elegant Themes proporciona muchas plantillas de encabezado y pie de página gratuitas que coinciden con las plantillas disponibles en Divi. Estas plantillas están prediseñadas y se pueden descargar gratis. Puede encontrar plantillas de pie de página gratuitas en el blog de Elegant Themes. Busque «pie de página libre».
Muchos de ellos ya incluyen iconos sociales en el pie de página. Para este tutorial, he elegido un pie de página que no los incluye. Estoy usando la plantilla de pie de página gratuita para el paquete de diseño de ONG de Divi .
Descargue su plantilla de pie de página gratuita y descomprímala. Solo necesitará cargar el archivo JSON.
Nota: los íconos sociales se pueden agregar a cualquier plantilla que ya tenga. Para este tutorial, subiré una nueva plantilla. El proceso de agregar los íconos sociales es el mismo.
Utilice el generador de temas Divi
Para este tutorial, estamos usando Divi Theme Builder . Esta es la forma preferida de crear pies de página Divi personalizados. Puede crear múltiples diseños y aplicarlos a cada página o páginas específicas. Para acceder a Divi Theme Builder, vaya a Divi > Theme Builder en el panel de control de WordPress.
Para cargar la plantilla de pie de página, seleccione el icono Portabilidad en la esquina superior derecha. Se abrirá un modal. Elija Importar y haga clic en Elegir archivo . Navegue hasta el archivo JSON en su computadora y selecciónelo. Haga clic en Importar plantillas de Divi Theme Builder en la parte inferior del modal. Espere a que se complete la carga.
Ahora tendrá una plantilla de encabezado y pie de página global. Elimine la plantilla de encabezado si no desea usarla. Haga clic en Guardar cambios . Ahora está listo para agregar íconos sociales a su pie de página de Divi.
A continuación, deberá abrir la plantilla para realizar sus modificaciones. Seleccione el ícono de edición a la izquierda del pie de página global (el ícono de lápiz) o haga clic en los tres puntos a la derecha y haga clic en Editar dentro de las opciones.
A continuación, elija en qué parte del pie de página desea colocar los íconos sociales. Los agregaré al lugar vacío debajo de Campañas. También agregaré un título y un divisor y diseñaré los íconos para que coincidan con el diseño.
Primero, necesitaremos un título que coincida con el resto de los elementos del pie de página. Clone el título en el área superior y arrástrelo al área donde desea colocar los íconos sociales.
A continuación, abra su nuevo módulo de texto y cambie el texto de Campañas a Síganos.
A continuación, clone el módulo Divider debajo del título Campañas y arrástrelo debajo de su nuevo título Síguenos.
Su plantilla de pie de página ahora se verá como la del ejemplo anterior. Ahora todo lo que necesita es agregar un módulo de seguimiento de redes sociales .
Para agregar el módulo, haga clic en el ícono más en la ubicación donde desea agregarlo. Desplácese hacia abajo o busque Social Media Follow y haga clic en el módulo para insertarlo.
Una vez que agregue el módulo desde Divi Builder, se abrirá y le mostrará los íconos predeterminados. Tendrás dos opciones para seguir adelante.
La primera opción : puede hacer clic en Agregar nueva red social para agregar cada ícono. Luego, puede usar su estilo predeterminado o diseñar un ícono y luego reflejar ese estilo en el resto de los íconos.
La segunda opción : puede eliminar el segundo ícono, diseñar el primero, clonarlo para cada ícono que desee agregar y cambiarlos a la red que desee.
El método que elijas no importa. El trabajo es esencialmente el mismo. Me gusta ver todos los íconos en su lugar, así que usaré la primera opción.
Al hacer clic en Agregar nueva red social, se abre la configuración de la red social. Haga clic en el cuadro desplegable debajo de Red y elija la red que desea agregar. Ingrese la URL de su página para la URL del enlace de la cuenta. Haga clic en el icono de verificación verde para cerrar la configuración.
Continúe este proceso hasta que haya agregado todas sus redes sociales. A continuación, debemos diseñarlos para que coincidan con el resto del pie de página.
Este pie de página en mi plantilla tiene mucho verde y naranja. El botón tiene los bordes redondeados y los demás iconos tienen un círculo detrás. El texto sobre los fondos verdes es blanco. Los usaré como colas de diseño al diseñar los íconos de las redes sociales.
Primero, abra la configuración del título. Vaya a la pestaña Diseño y agregue 20px de relleno superior. Ahora tenemos algo de espacio entre Campañas y Síguenos. Cierra el módulo.
- Relleno superior = 20px
A continuación, abra el módulo Seguimiento de redes sociales. Seleccione la pestaña Diseño y seleccione Alinear al centro en Alineación.
- Alineación del módulo = Centro
Seleccione la pestaña Contenido . Elija una red social para diseñar y haga clic en el engranaje para abrir su configuración.
Desplácese hacia abajo hasta las opciones de Fondo e ingrese el número #347362. Esto le da al ícono un fondo verde que coincide con el CTA en el pie de página y se ve muy bien contra el fondo marrón.
- Fondo = #347362
Seleccione la pestaña Diseño . En Icono, habilite Usar tamaño de icono personalizado . Establezca el tamaño de fuente del icono en 24 px
- Tamaño de fuente del icono = 24 px
A continuación, desplácese hacia abajo hasta Borde . Ajusta las esquinas redondeadas a 24px. Haga clic en la marca de verificación verde para cerrar la configuración y volver a la configuración del módulo.
- Esquinas redondeadas = 24px
Haga clic con el botón derecho en la red social que diseñó y seleccione Extender estilos de elementos .
Seleccione hasta dónde desea extender los estilos (esta página, esta columna, etc.) y haga clic en Extender .
El estilo ahora se extiende al resto de los íconos de las redes sociales. Ahora puede guardar la página y salir.
Estos son los resultados tanto para escritorio como para dispositivos móviles.
Resultados de escritorio
Así es como se ve el diseño en el escritorio con los nuevos íconos sociales en el pie de página de Divi.
Resultados móviles
Así es como se ve el diseño en el móvil con los nuevos íconos sociales en el pie de página de Divi.
pensamientos finales
Ese es nuestro vistazo a cómo agregar íconos sociales al pie de página de Divi. El módulo Social Media Follow de Divi es ideal para esto. Las plantillas de pie de página globales de Divi Theme Builder facilitan agregarlas a su pie de página. Con solo unos pocos pasos, puede agregar íconos sociales al pie de página de Divi con facilidad y diseñarlos para que coincidan con su sitio web.
Queremos escuchar de ti. ¿Ha agregado íconos sociales al pie de página de Divi con Theme Builder? Háganos saber en los comentarios a continuación.