Muy buenas,
Para el tercer reto del taller WordPress tengo el placer de presentar a este crack, autor invitado especialista en programación web.
José Luis Nieto, de 4 Simple Apps, se va a encargar de este tercer taller wordpress, consistente en la creación de un bloque lateral flotante con los iconos de nuestras redes sociales con la plantilla Divi y WordPress.
Sin más, os dejo con José Luis.
- Reto: febrero 2018
- Dificultad: Fácil **
- Recursos: necesitamos una web wordpress con la plantilla Divi.
Las redes sociales ayudan a las personas a conectarse entre ellas. Actualmente, y debido a su gran auge, son una herramienta esencial que utilizan grandes políticos y compañías, para hacer llegar sus mensajes a gran parte de la población.
DESCUENTOS DIVI
La famosa teoría de los 6 grados de separación, que dice que cualquier individuo del planeta, está conectado con otro con una separación de seis personas, propicio la aparición de SixDegres.com, que puede considerarse pionera en las redes sociales.
Hoy en día Facebook apunta a que esta separación entre individuos, ha descendido a 3.57, prácticamente la mitad que hace veinte años.
Como podéis ver, las redes sociales son, una herramienta fantástica para llegar a gran número de personas de diferentes características, si se utilizan bien.
En este post tratare de explicarte cómo puedes añadir un bloque lateral flotante, sticky o pegajoso con tus redes sociales favoritas.
En este post NO te voy a explicar como añadir más iconos de redes sociales al header o footer de la plantilla Divi. Para eso ya tienes este post que explica perfectamente como hacerlo. A través de la utilización de un plugin o realizando modificaciones de código.
Además, tratare de darte una visión general de la importancia de las redes sociales en tu web.
ÍNDICE DEL POST
Aunque este apartado daría para la creación de un artículo por sí solo, voy a enumerar, sin entrar en detalles, lo que considero más importante, de porque, se debe de tener una presencia en las redes sociales de calidad.
1.1 Conseguir más visibilidad.
Como comentaba al principio del post, el valor más importante de las redes sociales es la capacidad de conectar personas.
Si lanzas tu mensaje en las redes, y este es de calidad, la gente acabara encontrándolo y compartiéndolo, con lo que aumentaras la visibilidad de tu marca o negocio.
1.2 Crear tu propia comunidad.
Puedes y debes, aprovechar la oportunidad que brindan las redes sociales, para mantener una comunicación constante con tus seguidores. De esta forma, ellos se sentirán participes de tu marca, y conseguirás fidelizarlos en el tiempo.
1.3 Conocer lo que dicen sobre ti, o tu marca.
Poseer información de lo que piensan sobre ti o tu marca, es fundamental para poder corregir posibles errores, y reforzar lo que estamos haciendo bien.
Cada vez, más web se apoyan en los comentarios de sus clientes, e incluso los incluyen en su página principal.
1.4 Atraer y fidelizar clientes.
Para conseguir impactar en tus clientes, o potenciales clientes, no basta con compartir publicaciones sobre los productos que vendes. Además, debes de aportar a tus clientes información útil para ellos.
Por ejemplo en este caso en concreto, en el que tratamos sobre la plantilla divi, puedes compartir tus conocimientos, e incluso facilitar la descarga de recursos, para mantenerlos atentos a las novedades de tu web y retenerlos en el tiempo.
La plantilla divi nos ofrece la posibilidad de integrar las redes sociales más importantes a nuestro diseño.
Las redes sociales que puedes integrar son:
- Facebook.
- Twitter.
- Google+.
- Pinterest.
- Linkedin.
- Tumblr.
- Instagram.
- Skype.
- Flickr.
- MySpace.
- Dribbble.
- Youtobe.
- Vimeo.
Además, divi nos ofrece la posibilidad de incluir en nuestra cabecera y pie de página, Facebook, Twitter y Google+.
Puedes utilizar cualquier plugins existente para añadir más redes sociales a la cabecera o el pie de página, o modificar el archivo social.php para incluirlas (existen muchos tutoriales de cómo hacerlo en internet).
Si modificas los archivos php de la plantilla, debes de tener cuidado y hacerlo siempre sobre un tema hijo.
Os voy a explicar, de la forma más detallada posible, cómo conseguir incluir las redes sociales que nos hagan falta (dentro de las que ofrece divi para poder integrar en su plantilla), de tal forma, que no sean molestas para el usuario de nuestra web, pero que a la vez, estén siempre a su disposición, con lo que ganaremos en usabilidad y obtendremos una mejor experiencia de usuario.
Cómo una imagen vale más que mil palabras, en esta imagen podéis ver el resultado final de lo que perseguimos.
En esta imagen puedes ver el restultado final con la barra lateral flotante
Si os fijáis, veréis que los botones que enlazan con las redes sociales se encuentran pegados a la parte derecha de la pantalla, con el fin de evitar que molesten a la hora de leer el contenido de la página.
Estos botones se mantendrán fijos, en la misma posición, aunque nos desplacemos hacia arriba o hacia abajo por la página. De esta forma estarán siempre accesibles al usuario.
¿Cómo conseguimos esto?
Lo primero que haremos será acceder a nuestra instalación de wordpress, ir a la sección de páginas del escritorio wordpress , y una vez dentro, elegir la página en la que queramos añadir las redes sociales, pulsando en el botón editar.
Posteriormente, habilitamos el constructor visual de divi, y añadimos una nueva sección, y dentro de la sección una fila. Da igual donde añadáis la sección, ya que el resultado final será el mismo.
En la sección que hemos creado, abrimos sus ajustes y pulsamos en la pestaña “avanzado”, una vez dentro nos desplazamos hasta “css personalizado” y lo abrimos. Buscamos “Elemento Principal” y pegamos el siguiente código:
position:fixed;
width:auto;
top:90px;
right:10px;
background-color:transparent;
z-index:9999999999;
Añadir código en la sección
Aceptamos los cambios y añadimos un módulo de “Seguir en medios sociales”, dentro de la fila creada.
En los ajustes de la red social, abrimos el desplegable de red social y elegimos la red que queramos añadir a ese módulo, y en enlace ponemos el enlace hacia nuestra red social.
configuración módulo red social
Añadimos tantos módulos de redes sociales que necesitemos y cada uno lo configuráis de la misma forma que el primero.
El resultado sería este:
Estructura en el constructor Divi
Una vez terminemos, guardamos todos los cambios, abrimos nuestra página y ya estarán todos los botones de redes sociales que hemos añadido y en la posición que queríamos que estuvieran.
Si habéis seguido todos los pasos, no tiene que haber ningún problema.
Pero, si tenéis algún problema, o no apetece hacerlo, podéis encontrar un enlace para descargarlo desde aquí.
Si queréis podéis desactivar la opción de mostrar medios de redes sociales en el menú y en el pie para que solo se muestren las nuevas o dejarlo tal cual, eso queda a vuestra elección.
José Luis Nieto González responsable de desarrollo y diseño web de 4simpleApps. Me apasiona, sobre todo, la programación web ya sea en JavaScript puro, JQuery, Asp.net o Angular, este último me tiene enamorado, dedico una parte de mi tiempo libre a investigar y aprender cosas nuevas sobre él.
