Cómo añadir un widget en WordPress fijo de múltiples maneras (incluyendo Elementor)
¿Cómo añadir un widget en WordPress? No te pierdas toda la información detallada para saber cómo hacerlo de modo increíble y eficaz, ¡imperdible!
La barra lateral de tu sitio web es una de las formas más eficaces de captar la atención de los clientes.
Las empresas utilizan estratégicamente ese valioso espacio para promocionar ofertas o colocar anuncios con el fin de aumentar sus ingresos.
Colocar contenido o un widget de imagen en la barra lateral es una estrategia inteligente que puede beneficiar a tu sitio web de forma diferente. Algunas ventajas pueden ser mejorar la tasa de compromiso mientras que otros pueden mantener a tus visitantes más tiempo.
Desplazar la página hacia abajo eliminará el widget de la vista, y como resultado, no utilizará el máximo potencial del widget.
Dado que la optimización de los beneficios es uno de los aspectos más críticos de todo negocio, necesitamos encontrar una forma de mantener la barra lateral del widget a la vista.
Este artículo te mostrará cómo hacer un widget fijo o flotante en WordPress de múltiples maneras.
Los widgets en WordPress son herramientas que permiten agregar contenido y funcionalidades adicionales a tu sitio web en áreas específicas, como las barras laterales, el pie de página o el encabezado. Existen dos tipos de widgets: los fijos y los flotantes. En este artículo, exploraremos las diferencias entre ambos y cómo pueden mejorar la experiencia del usuario en tu sitio web.
¿Qué son los widgets fijos?
Los widgets fijos son aquellos que permanecen en una posición estática en la página mientras el usuario navega por el contenido. Por lo general, se encuentran en las barras laterales, el encabezado o el pie de página del sitio web y no se mueven aunque el usuario haga scroll.
Beneficios de widget en WordPress fijo o flotante
Un widget fijo puede ayudar enormemente a tu sitio web WordPress de varias maneras:
- En primer lugar, atrae la atención de tus clientes hacia la oferta que quieres promocionar.
- Permanece siempre en la pantalla, por lo que es imposible pasarla por alto.
- Coloca un anuncio que siempre esté visible, aumentando las posibilidades de que los usuarios hagan clic en él, lo que te reportará más ingresos.
- Los clics mejorarán el parámetro de compromiso SEO, aumentando tu posición en los motores de búsqueda.
- Un widget fijo que lleve a otra página interna de tu sitio web disminuirá tu tasa de rebote. Cuanto menor sea la tasa de rebote, mejor.
Todas las razones anteriores, y muchas más, son la razón por la que hacemos que el widget flote en nuestras páginas de producto.
Ahora que ya sabes por qué tu sitio web también puede beneficiarse de un widget fijo, vamos a aprender cómo hacerlo.
En las siguientes secciones, te mostraremos cómo crear una barra lateral fija de varias formas: utilizando CSS, instalando un plugin o utilizando el constructor de páginas Elementor.
Cómo añadir un widget en WordPress fijo con CSS
Aunque es relativamente sencillo, utilizar el método CSS sería lo mejor si entendieras el diseño de la estructura de la web.
Los widgets fijos funcionan mejor con temas codificados que admitan el diseño flexbox en lugar de float. Sin embargo, no hay un código que sirva para todas las situaciones porque cada tema se codifica de forma diferente.
Por lo tanto, pegar el código siguiente en la hoja de estilos de tu tema puede no funcionar. En su lugar, intenta comprender e imitar el proceso de visualización de tu sitio.
Nuestro ejemplo demostrará el proceso utilizando el GeneratePress Premium porque es compatible con el contenedor flexbox.
Primero, navega hasta la página Apariencia -> Widgets y añade el widget (que quieras que flote) a la parte inferior de la barra lateral.
Si el widget flotante no es el último, ocultará los demás widgets al desplazarse hacia abajo.
Una vez añadido, visita la página en vivo y comprueba que se ha añadido correctamente.
Aplicar el CSS
Para que el widget se adhiera al desplazarse hacia abajo, tanto el contenido como las secciones de la barra lateral deben tener la misma altura.
Para comprobar si es así, abre la herramienta de inspección haciendo clic con el botón derecho del ratón en cualquier lugar de la pantalla y haciendo clic en inspeccionar.
A continuación, navega por la estructura DOM y comprueba que la altura de la barra lateral coincide con la altura del contenido.
Si ambos tienen la misma altura, estupendo. Te has ahorrado un paso. De lo contrario, el primer código CSS aumentará la altura de la barra lateral al máximo.
Puedes introducir CSS dentro de la hoja de estilos de tu tema child o de la pantalla de personalización CSS adicional tab.
Dirígete al ID o clase de la barra lateral y añade el height: 100% regla CSS.
.sidebar {
height: 100%;
}Guarda los cambios y comprueba que la altura de la barra lateral se ha ampliado para ocupar todo el tamaño de la página.
A continuación, selecciona el widget (por clase o ID) que quieras que se pegue en la parte superior de la página y añade el siguiente código:
.sticky-widget {
position: sticky;
top: 20px;
}El valor superior controla la distancia del widget fijo desde la parte superior de la pantalla. Ajústalo a 0 para colocarlo en la parte superior o aumenta el número para crear algo de espacio.
Una vez aplicado, visita la página y comprueba que el widget flota mientras te desplazas hacia abajo.
El WP Sticky Sidebar hará inicialmente lo mismo que el método CSS anterior.
Sin embargo, la única diferencia es que funcionará con cualquier tema, ya admita el contenedor flexbox o el diseño flotante.
Además, simplifica el proceso CSS y te ahorra tener que escribir las reglas tú mismo. En su lugar, tendrás que introducir un par de ID de elementos, y el plugin hará el resto.
En primer lugar, ve a la pantalla de plugins de WordPress, busca WP Sticky Sidebar e instálalo en tu sitio web.
Una vez activado, navega a la pantalla del plugin en Configuración -> WP Sticky Sidebar.
Tendrás que introducir la clase o ID del elemento específico y el contenedor que contiene tanto la barra lateral como el contenido.
Para este ejemplo, utilizaremos la clase OceanWP porque se creó con un diseño flotante y el primer método CSS no funcionó.
Así que, haz clic con el botón derecho del ratón en cualquier lugar del contenido de la página y abre la herramienta inspector.
En primer lugar, copiaremos el ID del contenedor que contiene tanto el contenido como la barra lateral. En nuestro ejemplo, es content-wrap.
A continuación, copiaremos la clase del widget que queremos fijar. En nuestro ejemplo, es widget_media_image.
Una vez que tengamos ambos IDs, volveremos a la pantalla del plugin WP Sticky Sidebar y los pegaremos en su lugar correspondiente.
También puedes aumentar el valor del margen superior a un número mayor para añadir espacio entre la parte superior de la pantalla y el widget.
Guarda los cambios cuando hayas terminado y actualiza la página para comprobar que el widget es ahora fijo.
Cómo añadir un widget en WordPress con Elementor
Si eres uno de los muchos usuarios de Elementor, estás de suerte porque puedes hacer que el widget sea fijo sin usar otro plugin.
Ésta función forma parte del plugin Elementor Pro, que puedes conseguir en el sitio web oficial por $59 o en PillBanana sólo $4,99.
Después de activar Elementor Pro, abre el editor visual y navega hasta la sección Avanzado del widget que quieras establecer como adhesivo.
A continuación, despliega la pestaña Efectos de movimiento y cambia la opción Sticky lista desplegable a la Arriba.
El widget flotará inmediatamente después de cambiar los ajustes y se pegará a la parte superior de la pantalla en todos los dispositivos.
También, puedes dictar qué dispositivos quieres que activen el widget adhesivo eliminando de la lista los dispositivos no deseados.
Además, puedes establecer un número de Desplazamiento para crear espacio entre la parte superior de la página y el widget.
Una vez hayas terminado, guarda los cambios y visita la página para asegurarte de que funciona como es debido.
A veces, el widget no se mantiene dentro de los límites de la columna y oculta algunas partes del pie de página.
Para solucionarlo, activa la opción Permanecer en columna para mantener la posición del widget respecto a su barra lateral y permanecer dentro de ella.
Por último, guarda los cambios y vuelve a probarlo para comprobar que funciona bien.
Conclusión
Ahora que ya sabes cómo añadir un widget en WordPress, podrás experimentar como pueden mejorar la experiencia de usuario en tu sitio web de WordPress. Al elegir el tipo de widget adecuado según tus objetivos, podrás ofrecer una navegación más fácil y atractiva, fomentar la interacción y aumentar la satisfacción de tus visitantes.
Este artículo te hamos mostrado cómo añadir un widget adhesivo a un sitio web WordPress de tres formas diferentes:
- Con reglas CSS
- Con un plugin
- Constructor de páginas Elementor
Coméntanos cuál de los métodos anteriores has utilizado para lograr esta tarea o si necesitas que te proporcionemos las reglas CSS adecuadas para tu tema.
Preguntas frecuentes
¿Cómo puedo agregar un widget fijo o flotante en WordPress?
Para agregar un widget, ve al panel de administración de WordPress, luego a Apariencia > Widgets. Allí encontrarás una lista de widgets disponibles que puedes arrastrar y soltar en las áreas de widgets de tu tema. Algunos plugins de WordPress permiten añadir widgets flotantes fácilmente.
¿Puedo personalizar el diseño de mis widgets?
Sí, puedes personalizar el diseño de tus widgets utilizando CSS en el personalizador de temas de WordPress, en Apariencia > Personalizar > CSS adicional. También existen plugins que te permiten personalizar la apariencia de los widgets sin necesidad de editar el código.
¿Puedo utilizar widgets fijos y flotantes al mismo tiempo?
Sí, puedes combinar widgets fijos y flotantes en tu sitio web de WordPress según tus necesidades y objetivos. Por ejemplo, podrías tener un widget fijo en la barra lateral para facilitar la navegación y un widget flotante con botones de compartir en redes sociales.
¿Existen plugins para agregar widgets flotantes en WordPress?
Sí, existen varios plugins que te permiten agregar fácilmente widgets flotantes a tu sitio web, como Floating Social Media Icons, WP Floating Menu o WP-Chatbot. Puedes buscar e instalar estos plugins desde el panel de administración de WordPress en Plugins > Añadir nuevo.
¿Los widgets afectan el rendimiento de mi sitio web?
Los widgets pueden afectar el rendimiento de tu sitio web si no están optimizados o si se utilizan en exceso. Es importante elegir widgets que estén bien desarrollados y mantener un equilibrio entre funcionalidad y rendimiento para garantizar una experiencia de usuario óptima.
Si quieres conocer otros artículos parecidos a Cómo añadir un widget en WordPress fijo de múltiples maneras (incluyendo Elementor) puedes visitar la categoría Ayuda y Soporte.
Deja una respuesta