En este tutorial, veremos cómo crear sin plugin un widget flotante y fijo en la barra lateral en GeneratePress. Si quieres saber más sobre GeneratePress y su versión premium, puedes leer mi guía y ver si vale la pena comprarla.
También aprenderás cómo hacer para que solamente el último widget sea flotante como en mi página web, eso sirve si tienes varios elementos. Puedes bajar en esta entrada del blog y comprobar que el último widget se queda pegado.
GeneratePress es un tema gratuito y ligero que puede ser ampliado mediante la instalación de un plugin Premium que permite añadir muchas características y funciones. Es un tema receptivo personalizable y bien codificado construido con un enfoque en la velocidad y la usabilidad.
Así que, si no estás aun usando el tema de GeneratePress, te aconsejo que consigas este tema super rápido y lleves el rendimiento de tu sitio al siguiente nivel.
¿Por qué utilizar un widget flotante en la barra lateral?
La barra lateral es una de las partes esenciales de una página web y especialmente para los blogs. El uso de diferentes widgets en el Sidebar puede hacer que tu sitio web sea atractivo.
Ayuda también la llamada a la acción (Call to Action) y a aumentar la tasa de clics (Click Through Rate) de tu sitio web.
En WordPress, podemos usar un widget flotante o pegajoso de muchas maneras. Si tienes entradas de blog largas, sin un widget fijo tu barra lateral derecha estará en blanco mientras tu usuario se desplaza hacia abajo de la entrada. Por lo tanto, es mejor tener un widget flotante y así no desaparecerá.
Se considera una de las estructuras esenciales de los sitios web modernos por su accesibilidad en todo momento.
1 – Mejora la experiencia del usuario
A través de la barra lateral flotante, estás ofreciendo una oportunidad para que tus visitantes naveguen dentro de tu página web con facilidad.
Puedes colocar widget que muestran las categorías, o las etiquetas o bien los artículos más populares, por ejemplo. Así los usuarios pueden obtener información adicional mediante los widgets y entonces ahorrar su tiempo y esfuerzo en lugar de buscarla.
Funciona bien en sitios que requieren interacción como el eCommerce con tiendas online, ya que tienen la intención de comprar un producto. Orienta a los visitantes y les da más control, lo que finalmente resulta en un aumento de la experiencia del usuario.
2 – Aumenta tu visibilidad
La marca es la tendencia reciente de los negocios en línea. Crea una impresión memorable de tu producto/servicio entre tus clientes.
Mediante la aplicación de una cosa específica como pedirles que se suscriban a tu boletín informativo, estás creando una conciencia de marca para tu sitio web.
Puedes añadir cualquier ventaja valiosa de tu marca para tus visitantes a través de un widget flotante, y así aumentarás tu visibilidad en la web.
3 – Altas conversiones
Cuando tus visitantes tienen un contenido específico permanentemente frente a sus ojos, seguro que reaccionarán. Así que, si tienes un descuento particular u oferta exclusiva relacionada con la página que están leyendo, puede que les interese.
Un widget flotante es el mejor elemento para promover un producto en particular y hacer ventas.
Además, puedes usar el widget pegajoso de tu sitio para los siguientes propósitos.
- Mostrar las entradas populares o recientes.
- Incrustar cuadro de chatear.
- Incrustar Widget de suscripción.
- Mostrar un Banner de afiliados.
- Iconos para compartir en las redes sociales.
Crear un widget flotante y fijo, pegajoso, en la Sidebar de GeneratePress sin plugin
Hacer que el widget sea flotante y fijo es fácil en GeneratePress usando solamente el CSS. Es un enfoque ligero y un pequeño código CSS, funciona de maravilla y no se necesita ningún plugin.
La mayoría de los propietarios de sitios web se preocupan por la velocidad de carga y por lo tanto no quieren instalar varios plugins ya que podrían afectar el rendimiento de la velocidad.
Ten en cuenta que el código es para una página con la barra lateral derecha. Ajusta el código si utilizas la barra lateral izquierda.
Para implementar el código CSS, ve a Apariencia > Personalizar > CSS adicional.
Barra lateral flotante en GeneratePress
Si tienes solamente un widget en tu barra lateral, entonces podemos escribir un código simple que se enfoca en la Sidebar.
Sólo tienes que añadir el siguiente código:
@media (min-width: 769px) {
#right-sidebar {
position: -webkit-sticky;
position: sticky;
top: 10px;
}
}
Cambia el número de píxeles en la propiedad top según cómo aparecerá en tu página web.
Último widget flotante de la barra lateral en GeneratePress
Acá tenemos que enfocar el código solamente en el último widget.
Añade el siguiente código:
@media (min-width: 769px) {
.site-content {
display: flex;
}
.inside-right-sidebar {
height: 100%;
}
.inside-right-sidebar aside:last-child {
position: -webkit-sticky;
position: sticky;
top: 20px;
}
}
Cambia el número de píxeles en la propiedad top según cómo aparecerá en tu página web.
Conclusión
Puedes encontrar otros tutoriales así de simple en la categoría dedicada a GeneratePress.
Espero que hayas encontrado útil este artículo y si te gustó no dudes en compartirlo en las redes sociales. Y si tienes alguna pregunta, pregúntame en los comentarios.
Y cual seria el código para el primer widget flotante de la barra lateral en GeneratePress
Hola,
Es el mismo código, osea si quieres que tu primer widget sea flotante entonces es decir que solo tienes un widget. Porque los demás no se verán.
Por ejemplo, quité los 2 ultimos widget y automaticamente el widget de SEMrush se puso flotante sin cambiar el código.
Y sino de tener un solo widget puedes usar ese código presente en el artículo:
@media (min-width: 769px) {#right-sidebar {
position: -webkit-sticky;
position: sticky;
top: 10px;
}
}
Saludos