WordPress: Cómo dejar un elemento de la web fijo en la pantalla
¡Buenos días! En este artículo vamos a aprender un poco de CSS y vamos a ver cómo dejar un elemento de la web fijo en la pantalla, para que acompañe al usuario cuando este haga scroll. ¡Vamos allá!
Vamos a dividir este proceso en dos pasos.
Paso 1: identificar el elemento por su class o ID
Para aplicar estilos CSS a un elemento debemos conocer su identificador al cual luego podremos apuntar en el código. Para hacerlo podemos usar el inspector de Chrome o del navegador que estemos utilizando (yo lo haré con Chrome).
Dándole al botón derecho sobre el elemento que queremos fijar y eligiendo la opción Inspeccionar veremos el código fuente nuestra página web. Si ahora apretamos Ctrl + Shift + C o le damos al icono que esta en la esquina superior izquierda del inspector, podremos elegir el elemento que nos interesa exactamente.
Identificando un elemento de la web con el inspector de Chrome
Ahora empieza lo “complicado”. Si no sabes mucho de CSS al principio puede costar identificar a qué elemento tienes que apuntar exactamente. Lo que hay que hacer es elegir el elemento (div o lo que sea) que sea el que englobe todo o todos los elementos que nos interesen pero que no toque otros.
En el ejemplo del widget del vídeo podéis ver como elijo el elemento más génerico que pilla el widget que me interesa, pero no afecta ni otros widgets ni otros elementos de la página.
Una vez marcado este elemento, en la parte de HTML debemos buscar las etiquetas class=”” o id=””. Si el elemento en cuestión tiene un ID, mejor, porque así nos aseguramos que lo que hagamos por CSS sólo afectará este elemento y no otros. Ahora simplemente copiamos ese class o id y procedemos al segundo paso.
Paso 1.5 (opcional): probar los cambios directamente en el inspector
El inspector del navegador nos permite probar los cambios CSS en tiempo real, para tener una vista previa de cómo se verán los cambios una vez que los apliquemos de verdad.
Así que para asegurarse de que hemos identificado bien el elemento, podemos marcarlo en el inspector y aplicarle el position:fixed del segundo paso directamente ahí, en la pestaña styles. Si nos convence cómo se comporta el elemento que nos interesa, pasamos al segundo paso.
Paso 2: añadir estilos CSS
Se trata de añadir unas líneas de código CSS para que este elemento tenga el comportamiento que deseemos. Hace poco escribí un post sobre cómo añadir y modificar el CSS en WordPress así que puedes consultarlo si te hace falta.
Así que accedemos a CSS de la manera que prefiramos y escribimos lo siguiente:
#id-del-elemento {
position:fixed;
}
Obviamente deberemos cambiar el id-del-elemento por el id que hemos identificado en el primer paso. En caso que se trate de una class, en lugar del hashtag (#) la clase deberá llevar un punto delante, así que quedaría así: .clase-del elemento {…
De esta manera los cambios de CSS ya serán permanentes y si hemos hecho bien todos los pasos anteriores, el elemento que nos interesa ya se quedará fijo en la pantalla y acompañará al usuario cuando este haga scroll por nuestra página web.
También te puede interesar
WordPress: Cómo añadir Google Fonts
WordPress: Mover el campo de comentario al final del formulario
WordPress: Cómo justificar el texto de las entradas
WordPress: Cómo personalizar la página del error 404
