Muchos sitios web utilizan menús que se pegan en la parte superior de la pantalla cuando bajas en el contenido del sitio web. Este tipo de efecto que deja siempre visible un elemento aunque te muevas en el sitio web, puede añadirse a cualquier zona que desees resaltar en tu web.
De modo que podrías pegar en tu web el menú principal, una imagen, una zona de anuncios, un formulario de contacto, o prácticamente cualquier elemento. En este video tutorial te mostraré como puedes crear este efecto en tu sitio web WordPress.
https://vimeo.com/264681543
En este video tutorial utilizamos el plugin Sticky Menu para añadir el efecto a los elementos de nuestro sitio web.
[x_accordion_item title=»Transcripción del video»]
En este tutorial te mostraré como añadir el efecto stick al menú de tu sitio web WordPress, como puedes ver lo que hace este efecto es pegar el menú a la parte superior de la pantalla
De esa forma si bajamos en la página aún podremos ver el menú.
Esto podemos aplicarlo a cualquier parte de nuestra web, no únicamente al menú, así vamos a ver como podemos hacerlo.
Lo primero que necesitamos es ingresar a los plugins.
Ya que vamos a utilizar un pequeño pero poderoso plugin, asi que vamos hacia añadir un nuevo plugin y desde aquí buscamos Sticky Menu (or Anything!) on Scroll
Y lo tenemos por aquí, así que lo instalamos y activamos el plugin.
Muy bien, ahora entraremos en sus opciones.
Vamos hacia ajustes y luego en el nombre del plugin
La primera consulta que nos hace el plugin, es el elemento de nuestra web al que deseamos aplicar este efecto.
Pero eso aún no lo sabemos, así que debemos buscar el identificador de lo que deseamos pegar en nuestra web.
Para esto voy hacia la parte pública de mi web.
Y lo que deseo pegar en la web es el menú, quiero que se quede visible cuando el usuario se mueva por mi sitio web.
Ahora, vamos a tener que inspeccionar el código HTML del sitio web para encontrar su identificador.
Para poder ver el código fuente de nuestra página y lograr encontrar el identificador más fácilmente.
Debes usar las herramientas para desarrolladores de tu navegador
En este caso estoy utilizando Google Chrome
Para entrar en estas herramientas puedo ir al menú principal de Chrome y luego en más herramientas y usamos la que dice Herramientas para desarrolladores.
Esto abre una pequeña ventana en tu navegador, en la que puedes ver una gran parte del código de tu sitio web.
Si nunca utilizaste esta herramienta o no tienes experiencia con código HTML o CSS, no te preocupes, te voy a mostrar paso por paso como hacerlo.
Por cierto, también puedes abrir esta ventana presionando CTRL + MAY + C
Y en Firefox también puedes usar ese atajo para abrir esta ventana.
Bien, una vez nos encontramos aquí puedes ver que, al pasar el mouse por las diferentes partes de mi web, se ven resaltadas y me muestra el código específico para esa área en la parte de abajo.
Si no te resalta las zonas de tu web, entonces da clic aquí para activar esta función.
Lo que debes hacer es resaltar el menú principal.
Ahora, si el área de menú de tu sitio web, también tiene el logo de tu web, entonces te recomiendo intentar seleccionar toda el área.
Y no únicamente el menú, de lo contrario el efecto no se verá bien.
Ahora ya he seleccionado la parte de mi web que deseo pegar.
Como puedes ver aquí en la parte de abajo también te muestra sombreado el código que pertenece a este elemento.
Lo que debes hacer es copiar el ID o la clase del elemento que deseas utilizar.
Si tu elemento tiene un ID te recomiendo usarlo en lugar de su clase.
En este caso mi menú no tiene ID solo tiene una clase, así que vamos a utilizar su clase.
Como puedes ver esta es la clase del elemento, y en realidad tenemos dos, las clases no pueden tener espacios separados, así que si ves un espacio, eso quiere decir que son dos clases distintas.
En este caso utilizaremos la primera, así seleccionamos el texto y copiamos la clase.
Muy bien, ahora que ya tenemos la clase para identificar a nuestro menú, vamos a regresar a las opciones del plugin.
Y presta atención a esto, si has copiado una clase, entonces debes colocar un punto y luego pegar la clase de esta forma.
Pero si lo que copiaste ha sido un ID, entonces en lugar del punto, debes colocar un símbolo de número.
En este caso yo he copiado una clase, así que lo dejaremos con el punto.
Muy bien, en la siguiente opción, podemos dejarle un margen superior a nuestro elemento, en este caso lo dejaremos vacío.
La siguiente opción nos permite añadir un margen si la barra de herramientas de WordPress se muestra, de esa forma podremos ver mejor el efecto estando conectados como administradores.
Luego puedes indicar que el menú no se pegue si la pantalla del visitante tiene menos de cierta cantidad de pixeles.
De esta forma puedes evitar que este efecto se muestre en los teléfonos móviles, por ejemplo.
Luego tenemos la misma opción, pero a la inversa, puedes hacer que el efecto pare si la pantalla tiene más de cierta cantidad de pixeles.
En mi caso le indicaré que elimine el efecto si la pantalla tiene menos de 450px, de esa forma no mostraremos este efecto en los teléfonos móviles.
Y ahora guardamos los cambios.
Muy bien, ahora entremos en el sitio para ver nuestro efecto.
Como puedes ver, si ahora bajamos en nuestra web, nuestro menú seguirá mostrándose en la parte superior.
Hemos logrado añadir el efecto correctamente.
Pero también podemos añadir este efecto a otras zonas de nuestro sitio web.
Por ejemplo, entremos en esta página. Como puedes ver aquí tenemos nuestro side bar con algunos elementos. Quiero colocarle este efecto a mi imagen. Así que entramos en las herramientas para desarrolladores.
Como puedes ver aquí hemos seleccionado la imagen, en este caso el contenedor de la imagen si cuenta con un ID, así que usaremos el ID en lugar de la clase.
Copiamos su ID y regresamos a nuestro plugin.
Ahora colocamos numeral y pegamos el id.
Guardemos los cambios.
Muy bien, regresemos a la página y refrescamos.
Ahora si bajamos en el contenido podrás ver como al llegar a nuestra imagen, quedará pegada a la parte superior de nuestro sitio web.
De esta forma podríamos por ejemplo pegar bloques anuncios, promociones, o cualquier tipo de elemento en nuestro sitio web.
Espero que este video te sea de ayuda.
Si tiene consultas no dudes en colocarlas en los comentarios.
[/x_accordion_item]