<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic%7CBevan:regular%7CMerriweather%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CBevan%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic">Cómo crear un Sticky menú con Elementor - TodoWP

Cómo crear un Sticky menú con Elementor

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Sticky menú con Elementor

Los sticky menú son un recurso muy interesante en el diseño de nuestra página. Vamos a ver cómo crear un stiky menú con Elementor.

¿Qué es un sticky menú?

Un menú sticky o pegajoso es un menú (u otro elemento de la página) que permanece fijo en una parte de la página, aunque nos desplacemos hacía abajo (o hacía arriba). Es como si esa zona permaneciera pegada, aunque el resto se muevo, de ahí su nombre.

¿Cuándo tenemos que usarlo?

Usaremos este recurso cuando queramos que un elemento de nuestra página siempre este visible para nuestro usuario, independientemente de la zona de la página en la que se encuentre.

Normalmente vamos a querer mostrar nuestro menú principal, botones para compartir en las redes sociales a algún tipo de Call to Action. Nosotros no solemos crear menús pegajosos. Preferimos usarlo sólo para los botones de redes sociales o CtA.

En nuestra página lo usamos para mantener fijos los botones para compartir en redes sociales.

Ejemplo de Sticky menú

Es muy importante donde fijamos el menú. Tenemos que buscar una zona que no interfiera con la lectura de la página cuando el usuario se mueve por ella.

¿Cómo creamos un menú pegajoso?

Para implementar un sticky menú en nuestra página necesitamos código, bien JavaScript o CSS. Pero tenemos otra forma de implementarlo sin necesidad de escribir ni una línea de código y de una forma muy sencilla: Elementor Pro.

La mala noticia: esta característica sólo esta disponible en la versión de pago de Elementor.

Implementando un Sticky menú con Elementor

Seleccionamos el objeto de Elementor que queremos dejar fijo, por ejemplo, un Nav Menu.

Nos vamos a la sección de Avanzado, desplegamos las opciones de Efectos de Movimiento y en el desplegable Sticky seleccionamos si queremos que el elemento se quede fijo arriba o abajo en la página.

Configura un menú pegajoso con Elementor

Ya lo tenemos. Si nos desplazamos por la página, el menú queda fijo.

Si tienes alguna pregunta o algún punto no te ha quedado claro, no dudes de preguntarlo en la sección de comentarios o en nuestras redes sociales.

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…

Deja un comentario

Síguenos en las redes:

Últimas entradas

Qué es Gutenberg

¿Qué es Gutenberg?

Leer Más »
Vincula tu página en Google Search Console

Vincular una página a Google Search Console

Leer Más »
Sticky menú con Elementor

Cómo crear un Sticky menú con Elementor

Leer Más »