En el tutorial de hoy, le mostraremos cómo hacer que el Módulo de seguimiento de redes sociales se ajuste a ciertas necesidades. Social Media Follow es un módulo que rara vez falta en cualquier página de cualquier sitio web. Es una de las principales formas de conectar los canales de redes sociales con el sitio web. Para ayudarlo a lograr la conexión deseada entre su sitio web y los canales de redes sociales, tenemos Monarch . Un complemento que lo ayuda fácilmente a mostrar los botones de seguimiento de las redes sociales en su sitio web. Pero si prefiere lograr algunos de los resultados de Monarch a través del constructor Divi , entonces esta publicación puede ser útil.
Le mostraremos cómo crear un Módulo de seguimiento de redes sociales fijo para su sitio web, que es una de las cosas que proporciona el complemento Monarch. Además de ubicarlo en el lado izquierdo o derecho (configuración estándar dentro de Monarch), también le mostraremos cómo hacer que se adhiera a la parte superior e inferior de su página. Además de hacer que se mantenga en la parte superior de la página, también incluiremos una parte en la que le mostraremos cómo hacer que el Módulo de seguimiento de redes sociales aparezca debajo del menú principal de su sitio web (ya sea que su menú principal esté fijo o no). .
Echemos un vistazo a los resultados finales a continuación.
Ejemplo del lado izquierdo
Ejemplo del lado derecho
Ejemplo superior (estándar)
Sin navegación fija
Con navegación fija
Ejemplo inferior
Suscríbete a nuestro canal de Youtube
Pasos generales
Dado que los pasos básicos para agregar un módulo de seguimiento de redes sociales a una página son los mismos en todos los ejemplos, solo lo mostraremos una vez. Si desea lograr el mismo resultado para el lado derecho, la ubicación superior o inferior, primero deberá agregar el módulo de seguimiento de redes sociales como se explica en la siguiente parte de esta publicación.
Para hacerlo más fácil, agregaremos el Módulo de seguimiento de redes sociales a la primera sección de nuestra página. Al hacerlo, inmediatamente sabrá dónde encontrarlo cuando desee realizar cambios en el futuro. Realmente no necesitamos una fila separada para este módulo ya que le vamos a asignar una posición fija.
Lo siguiente que debemos hacer es agregar los canales de redes sociales necesarios al Módulo de seguimiento de redes sociales. Abra la configuración del módulo y haga clic en ‘Agregar nueva red social’. Una vez que haya hecho eso, puede elegir la red social que desea agregar y asignarle una URL.
Para cada una de las redes sociales, automáticamente se asigna un color de icono que coincide con la red social. Sin embargo, si prefiere usar colores con el estilo de su propio sitio web, puede elegir un color diferente en la pestaña Diseño. Para el ejemplo que le mostraremos cómo hacer, incluiremos cuatro redes sociales; Facebook, Twitter, Google+ y LinkedIn. En lugar de usar los colores estándar, vamos a darle a cada una de las redes sociales el mismo color pero con una opacidad diferente. También ordenaremos los canales de las redes sociales según su importancia.
Configuración de Facebook
Haga clic en ‘Agregar nueva red social’. En las opciones de redes sociales, elige Facebook. Mientras aún está en la pestaña Contenido, agregue la URL vinculada al canal de redes sociales de Facebook.
Luego, pase a la pestaña Diseño. En este caso, Facebook es la red social más importante. Por eso le vamos a dar la tonalidad de color que más llame la atención. El color que hemos usado es ‘rgba(59,89,152,0.94)’.
Configuración de Twitter
A continuación, agregue una nueva red social. En lugar de elegir Facebook, elige Twitter esta vez. Agregue la URL en esa misma pestaña Contenido y pase a la pestaña Diseño. En la pestaña Diseño, elija ‘rgba(59,89,152,0.76)’ como color de fondo. En este caso, Twitter es un canal de redes sociales importante pero no tan importante como Facebook. Por eso viene segundo en la fila y con un color un poco más transparente y menos notable.
Configuración de LinkedIn
Repita el mismo proceso para la red social LinkedIn en la pestaña Contenido y vaya a la pestaña Diseño. Dentro de la pestaña Diseño, asigne el color ‘rgba(59,89,152,0.6)’ al icono.
Configuración de Google+
Y por último pero no menos importante; agregue un ícono social de Google+. Complete la URL y vaya a la pestaña Diseño. Esta es la red social ‘menos’ importante que queremos agregar a la lista en este ejemplo y tendrá el color de icono ‘rgba(59,89,152,0.42)’.
El primer módulo fijo de seguimiento de redes sociales que le mostraremos cómo crear se encuentra en el lado izquierdo de su página. Este es el que se usa con más frecuencia y puede ser el que inmediatamente te haga pensar más en Monarch. Siga primero los pasos generales y continúe agregando el código CSS que encontrará en la siguiente parte de esta publicación. Le mostraremos dos formas de agregar el código CSS; a las Opciones de tema ya una página en particular. Después de este ejemplo, también puede elegir entre las dos opciones para los otros ejemplos.
Agregar líneas de código CSS a las opciones del tema
Uno de los métodos para agregar el código CSS adicional es a través de las Opciones de tema. Este método se usa con mayor frecuencia cuando desea crear el efecto en todo el sitio web. Pero recuerda; si está utilizando este efecto, deberá incluir el Módulo de seguimiento de redes sociales en cada página de su sitio web (o en las páginas en las que desea que aparezca).
Para agregar el código CSS a sus Opciones de tema, vaya a su Tablero de WordPress> Divi> Opciones de tema> General> Desplácese hacia abajo en la pestaña General y agregue las siguientes líneas de código CSS al campo CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
ul.et_pb_social_media_follow { position: fixed; left: 0; top: 35%;padding: 0 !important; z-index: 999 !important;} .et_pb_social_media_follow li { margin: 0 !important; padding: 0 !important; } .et_pb_social_media_follow li a.icon.rounded_rectangle { border-radius: 1px; margin: 0 !important; } |
Agregue líneas de código CSS a una página en particular
Otro método que lo ayuda a aplicar el código CSS es agregarlo a una página en particular. Este método se usa más comúnmente cuando decide agregar el Módulo de seguimiento de redes sociales a una sola página en particular. Al utilizar este método, su sitio web no cargará las líneas de código CSS en todas las demás páginas de su sitio web que no contengan el Módulo de seguimiento de redes sociales. O, si desea que el Módulo de seguimiento de redes sociales en otras páginas se comporte como de costumbre, este método también lo ayudará.
Haga clic en el siguiente botón en su constructor Divi:
A continuación, copie y pegue el código CSS en el campo CSS personalizado.
El siguiente código que compartiremos lo ayudará a colocar el módulo de seguimiento de redes sociales en el lado derecho de su sitio web.
Las líneas de código CSS necesarias
Agregue las siguientes líneas de código CSS a las Opciones de tema o a una página en particular, como se explica en el ejemplo anterior.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
|
ul.et_pb_social_media_follow {position: fixed;top: 40%; padding: 0 !important; right: 0; width: 30px;z-index: 999 !important;}.et_pb_social_media_follow li {margin: 0 !important; padding: 0 !important;}.et_pb_social_media_follow li a.icon.rounded_rectangle {border-radius: 1px; margin: 0 !important;} |
Continuando, también puede ubicar su Módulo de seguimiento de redes sociales en la parte superior de su sitio web. En realidad, esta es una forma muy interesante de permitir que los íconos de las redes sociales sigan a sus visitantes a través del sitio web. No se usa con tanta frecuencia, por lo que llama la atención de la gente.
Las líneas de código CSS necesarias
Copie y pegue las siguientes líneas de código CSS en las Opciones de tema o agréguelas a una página en particular.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
ul.et_pb_social_media_follow {position: fixed;left: 45%; top: 0;z-index: 999 !important;}.et_pb_social_media_follow li {margin: 0 !important; padding: 0 !important;}.et_pb_social_media_follow li a.icon.rounded_rectangle {border-radius: 1px; margin: 0 !important;} |
El método mostrado anteriormente para agregar el módulo de seguimiento de redes sociales a su sitio web no tiene en cuenta el menú principal. Sin embargo, si desea que Social Media Follow aparezca debajo del menú principal y vuelva a la parte superior al desplazarse, esta parte de la publicación podría ayudarlo.
Agrega el código CSS
Tanto en los casos en que la navegación fija está activada como en la que no lo está, debe agregar las siguientes líneas de código CSS en las Opciones del tema o agregarlas a una página en particular:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
ul.et_pb_social_media_follow {position: fixed;left: 45%; top: 0;z-index: 999 !important;}.et_pb_social_media_follow li {margin: 0 !important; padding: 0 !important;}.et_pb_social_media_follow li a.icon.rounded_rectangle {border-radius: 1px; margin: 0 !important;} |
Después de eso, también deberá agregar algo de código jQuery. El código jQuery depende de si tienes activada la navegación fija o no.
Si tiene activada la navegación fija, deberá agregar las siguientes líneas de código jQuery al encabezado de su sitio web o a un Módulo de código dentro de la página donde desea que funcione:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<script text= "text/javascript">jQuery(function($) {$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());$(window).bind('scroll', function() {var navi = $("#main-header");var naviHeight= navi.outerHeight();if ($(window).scrollTop() <= naviHeight){$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);}});});</script> |
No olvides usar también las líneas de código CSS. El código jQuery es adicional. Además, asegúrese de que cuando se desplace, la altura de su principal permanezca igual. Puede hacerlo yendo a su Tablero de WordPress> Apariencia> Personalizar> Encabezado y navegación> Configuración de navegación fija> Seleccione el mínimo para la altura del menú fijo.
Si desea lograr el mismo resultado, pero no tiene una navegación fija, el código será ligeramente diferente:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<script text= "text/javascript">jQuery(function($) {$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());$(window).bind('scroll', function() {var navi = $("#main-header");var naviHeight= navi.outerHeight();if ($(window).scrollTop() <= naviHeight){$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);}else {$("ul.et_pb_social_media_follow").css("margin-top", 0);}});});</script> |
El último de la fila es el Módulo de seguimiento de redes sociales inferior.
Las líneas de código CSS necesarias
Agregue las siguientes líneas de código CSS al campo CSS personalizado de sus Opciones de tema o a una página en particular:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
ul.et_pb_social_media_follow { position: fixed; left: 45%; bottom: 0; padding: 0 !important; z-index: 999 !important;} .et_pb_social_media_follow li { margin: 0 !important; padding: 0 !important; } .et_pb_social_media_follow li a.icon.rounded_rectangle { border-radius: 1px; margin: 0 !important; } |
Pensamientos finales
En este tutorial, le mostramos cómo crear el Módulo de seguimiento de redes sociales con el mismo estilo que el complemento Monarch. Al usar este método, no necesitará descargar el complemento Monarch si solo lo está usando para compartir sus canales de redes sociales. Para compartir en las redes sociales, aún tendría que usar el complemento Monarch. Si tiene alguna pregunta o sugerencia; ¡Siéntase libre de dejar un comentario en la sección de comentarios a continuación para que podamos ponernos en contacto!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!
Imagen destacada de Snopek Nadia / shutterstock.com