Hacer fijo un elemento de la sidebar

Cómo hacer fijo un elemento de la sidebar en WordPress

Cómo hacer fijo un elemento de la sidebar

En más de una ocasión necesitamos que un elemento de la sidebar permanezca fijo en su posición, mientras que el resto de elementos de la página se desplazan cuando hacemos scroll. Este efecto lo podemos utilizar para mantener fijo un contenido que por su importancia, necesitamos que esté siempre visible, por ejemplo un formulario de inscripción o una información relevante.

Como siempre, este efecto podemos hacerlo mediante el uso de un código o mediante un plugin. Vamos a ver las dos formas, pero te aconsejo, como siempre, que lo hagas mediante código y te ahorres un plugin.

Hacer fijo un elemento de la sidebar mediante código

Lo primero que debemos hacer es saber (localizar) el elemento que vamos a mantener fijo en nuestra sidebar. Para ello, nos ponemos sobre ese objeto y con el botón derecho del ratón elegimos la opción Inspeccionar.

Hacer fijo un elemento de la sidebar

A continuación, en el panel que se abre (ya sea en la parte derecha de la ventana o en la parte inferior), buscamos el nombre de dicho elemento. En este caso se llama media_image-2, este identificador se ve en la misma línea seleccionada (id=”media_image-2“).

Saber el nombre del elemento que vamos a dejar fijo

Una vez localizado el nombre del elemento, tenemos que fijarnos que es un id y no una clase. ¡Ojo!, también podemos utilizar la clase para mantener fijo este objeto, el único inconveniente si utilizamos la clase (class=”widget widget_media_image“), es que si vamos a añadir más widgets como este (en mi caso una imagen), al utilizar la clase, aplica el efecto a todos los elementos (a todas las imágenes que yo inserte en la sidebar en mi caso). Sin embargo, si utilizo el id, estoy completamente seguro de que va a ser un nombre único, y que no habrá otro elemento en mi web que se llame igual.

Añadir el código que hará fijo al elemento

Una vez que sabemos que utilizaremos el id del objeto, y sobre qué objeto vamos a trabajar, nos dirigimos al Escritorio y vamos al menú Apariencia, Personalizar. En la ventana que se abre escribimos el siguiente código:

#media_image-2 {
position:fixed;
}

Código para hacer fijo un elemento en la sidebar

En esta misma ventana podemos mover la rueda del ratón y veremos que el objeto permanece fijo mientras se desplaza el resto de la sidebar.

El elemento que hemos mantenido fijo se superpone a otro elemento de la sidebar

Es posible que el elemento que hemos convertido en fijo se superponga al resto de elementos de la sidebar, esto lo podemos solucionar de una forma muy sencilla cambiando el orden de los elementos en el panel de Widgets:

Los elementos de la sidebar se superponen

Mover el elemento fijo a la parte inferior de los widgets

Como norma general, el elemento o elementos que queramos mantener fijos, los colocaremos en la parte inferior del widget que le corresponda, así nos evitamos problemas de superposición de objetos en la sidebar.

Hacer fijo un elemento de la sidebar mediante un plugin

Si prefieres utilizar un plugin para realizar este proceso, te puedo recomendar el plugin llamado Q2W3 Fixed Widget. Este plugin es muy sencillo de utilizar y liviano en su carga. Tan solo añade una casilla de verificación a cada widget, que debes activar para mantener ese elemento concreto en una posición fija.

hacer fijo un elemento de la sidebar mediante un plugin

En realidad, no necesitamos ninguna opción más para realizar este efecto, pero si quieres tener un poco más de control, puedes ir al menú Apariencia, Opciones de Widget Fijo.

Opciones de Widget Fijo


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *