Para obtener un « pegajoso en el menú de desplazamiento » No necesitarás tema niño o conocimiento especial del código. Usted será capaz de lograr este efecto directamente con la ayuda de Características nativas de Divi o usando un plugin de terceros.
En este artículo, propongo que crear un buen menú / encabezado que cambiará las disposiciones clásicas propuestas por el tema Divi.
Entonces conseguirás un diseño original En unos minutos.
Aquí está el programa de este artículo:
- ¿Qué es un "pantallado en el menú de desplazamiento"?
- ¿Cómo conseguir un menú pegajoso en 3 sencillos pasos sin plugin?
- Obtenga un menú pegatina en el pergamino usando un plugin (iniciador ideal)
- Otra buena idea de menú...
1 – ¿Qué es un "pantallado en el menú de desplazamiento"?
Uno menu pegajoso en rollo es un menú que se fija cuando usted baja abajo dentro de una página web. Esta acción de desplazar la página abajo llama a la "Scroll".
En francés, esto podría traducirse en: un menú que se fija para desplazar la página.
Básica, esta característica ya existe para el Menú clásico de Divi.
Le aconsejo que lea este artículo que trata con características ofrecidas por Divi para modificar el encabezado de su sitio.
Pero ¿y si usamos el Pantalla completa Divi Módulo de menú ?
De hecho, si insertas este módulo en tu diseño, verás que el menú se desliza y desaparece más allá de la ventana cuando se llega al fondo de la página. Como muestra este video:
Esto no es bueno para la "experiencia del usuario" de sus visitantes. Deben tener la posibilidad de navegar dentro de las diferentes páginas de su sitio, no importa dónde estén (así que incluso cuando lleguen al fondo de su página, el menú debe ser visible).
¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"
2 - ¿Cómo conseguir un menú pegajoso en 3 sencillos pasos?
Aquí hay un video de lo que haremos en unos sencillos pasos:
Paso 1: Quitar el menú Divi clásico
Si usas el Pantalla completa Módulo de menú dentro de un diseño, es muy probable que necesite quitar la pantalla del menú principal de su sitioen la misma página.
Esto se hace en un clic: descubrir tuto para eliminar el menú DiviEntonces vuelve aquí para continuar.
Paso 2: Agregar un módulo de menú de pantalla completa
Una vez tu página n, puedes Insertar menú de pantalla completa. Así es como:
- Agregar una nueva sección haciendo clic en el icono « + »En el lugar deseado.
- Usted debe elegir una sección « Pantalla completa » (puro).
- Dentro de esta sección, inserte una Pantalla completa Módulo de menú
- En la configuración del módulo, vaya a la pestaña "Contenido" y seleccione el menú para mostrar. Note que esto el menú ya debe existir. Necesitas crearlo de arriba a la pestaña « Apariencia > Menú » de tu Palabra Sitio de prensa.
- Usted verá este menú aparecer en su sección de pantalla completa.
- Finalmente, usando pestañas Estilo y "Advanced", puede personalizar su menú: cambiar el color, alineación, tamaño de fuente, etc.
No olvides salvar tus cambios.
Paso 3: Establecer el menú en la parte superior de la pantalla al desplazar la página
Por ahora, usted debe estar en posesión de una página cuya menú clásico ha sido oculto y cuyo módulo « Menú de pantalla completa » desplazarse con el contenido de la página.
Ahora añadiremos algunas líneas de código para que el menú se fija en la parte superior de la pantalla cuando usted baja a la parte inferior de la página.
Para esto, necesitarás insertar dos módulos "Código completo de ancho" dentro de su sección de pantalla completa.
Si todavía no sabes cómo utilizar este módulo un poco especial, te invito a leer este artículo dedicado a uso del módulo Divi Code.
- Dentro del « Sección de pantalla completa » donde ha insertado previamente el módulo « Menú de pantalla completa »,
- Haga clic en el icono de la rueda para abrir la configuración de la sección
- Vaya a la pestaña "Advanced"
- En el campo CSS ID, introduzca el identificador "admenu"
- En el campo Clase CSS, entrar en la clase "adheader"
- Insertar 2 módulos Código completo dentro de esta sección de pantalla completa.
- En el primero, inserte Javascript entre dos etiquetas
<script>
y</script>
. - En el segundo, inserte CSS entre dos etiquetas
<style>
y</style>
.
Paso 3 – Opción 1: Código JS y video tutorial CSS
Este código es el utilizado para mi video tutorial. Sin embargo, algunos usuarios encuentran problemas con éste, como se puede ver en los comentarios. Si este es su caso, vaya a la opción 2.
Aquí está el código JavaScript para usar:
window.onscroll=function(){myFunction()};var adheader=document.getElementById("admenu"),sticky=adheader.offsetTop;function myFunction(){window.pageYOffset>sticky?adheader.classList.add("sticky"):adheader.classList.remove("sticky")}
Note que para crear este código, me ayudé con el código original disponible aquí.
Aquí está el código CSS para usar:
.sticky {
position:fixed;
top:0;
width:100%;
z-index:9990;
}
Paso 3 – Opción 2: Código JS y CSS con valor OffSet definido
El código JavaScript anterior no dio un valor (distancia) para La apariencia del menú en el pergamino.
Por eso algunos usuarios dijeron "no vea el menú aparecer en el extremo delantero mientras existe en el back-end".
Como menu sticky se puede insertar en cualquier lugar dentro de su diseño, su ubicación puede hacer que el objetivo final se modifique.
Dependiendo del proyecto, la longitud de su diseño y donde desea insertar el menú, el código anterior JS y CSS debe ser modificado por el siguiente:
var stickyEl=document.querySelector('#admenu')
var stickyPosition=stickyEl.getBoundingClientRect().top;var offset=500
window.addEventListener('scroll',function(){if(window.pageYOffset>=stickyPosition+offset){stickyEl.style.position='fixed';stickyEl.style.top='0px'}else{stickyEl.style.position='static';stickyEl.style.top=''}})
Me inspiré código original aquí.
Recuerde insertar este código en un módulo "full ancho code" y rodearlo con balcones <script>
y </script>
.
Nota también que dependiendo de la longitud del diseño que usas, tendrás que "Jugar" con valor offset. Para este código de ejemplo, el offset es 500. Si encuentra problemas, cambie este valor a un valor positivo o negativo más adecuado. Por ejemplo: 250, 120, 380 o incluso -50, -20, etc.).
El offset permite definir el valor de una distancia de un elemento padre. Más información aquí.
Este código JS debe estar acompañado por el siguiente código CSS (en un módulo de código diferente):
.adheader {
width:100%;
z-index:9990;
}
Este código debe estar rodeado de etiquetas <style>
y </style>
Paso 3 - Opción 3: Código JS y CSS para el diseño en relieve
Si su sitio utiliza un diseño de página (diseño en caja), el código a utilizar tendrá que ser ligeramente cambiado.
Aquí está la JS para utilizar:
var stickyEl=document.querySelector('#admenu')
var stickyPosition=stickyEl.getBoundingClientRect().top;var offset=200
window.addEventListener('scroll',function(){if(window.pageYOffset>=stickyPosition+offset){stickyEl.style.position='fixed';stickyEl.style.top='0px';stickyEl.style.width='90%'}else{stickyEl.style.position='static';stickyEl.style.width='100%';stickyEl.style.top=''}})
Para este código también, usted necesitará "Juega con valores offset" para que esté de acuerdo con tu diseño.
Aquí está el CSS para usar:
.adheader {
width:100%;
z-index:9990;
}
A veces copiar y pegar un código en línea puede no funcionar... Por lo tanto, le sugiero que descargue la sección completa, lista para usar. Simplemente descifrar la carpeta e importar el archivo(s) .json de su elección, dentro de su Biblioteca Divi. Encontrará las diversas opciones dentro de la carpeta. Entonces podrá insertar esta sección donde quiera que desee en su sitio. Simplemente elija su menú para mostrar y personalizar este menú a su gusto. Tenga en cuenta que esta descarga es gratuita y sin consideración.
Descargar sección de pantalla completa con Sticky en Scroll Menu sticky-menu-on-scroll-ok-17092019.zip – Téléchargé 9711 fois – 7,57 Ko3 – Obtenga un menú pegatina en el pergamino utilizando un plugin (iniciador ideal)
Los pasos vistos en el capítulo anterior de este artículo pueden no adaptarse a usted, por razones X o Y.
Además, si usted lee los comentarios, algunos usuarios encuentran problemas con los códigos JS propuestos. Sin embargo, estos códigos funcionan bien: Los he comprobado y optimizado hace unos días en mis sitios de prueba.
Así que, para satisfacer la necesidad de todo tipo de usuarios, probé otra solución para usted: usando un plugin que ofrece esta función.
Buenas noticias, encontré 2 completamente funcional y fácil de usar.
Entonces te sugiero que los descubras:
Si eliges uno u otro, necesitarás:
- Desde eliminar el menú principal de su página como se explicó Paso 1 del Capítulo 2 de este Artículo.
- Añadir a sección de pantalla completa (Sección violeta Divi) en la que colocará un módulo "Pantalla completa" como se explicó Paso 2 del Capítulo 2 de este Artículo.
- Añadir CSS ID en el módulo de menú de pantalla completa desde los parámetros avanzados del módulo. Por mi ejemplo, uso "adheader", como se puede ver en la captura de abajo.
Entonces, dependiendo del plugin que elijas, aquí está lo que puedes hacer:
3.1 – Menú pegajoso (todo dorado!) en rollo
Instala y activa el plugin como siempre. Usted encontrará su configuración en la pestaña Ajustes > Menu pegajoso (todo dorado!)
En la pestaña "Configuración básica", simplemente introduzca la ID CSS de su menú. En mi caso, es #adheader.
Otras opciones también están presentes, no dude en navegar y probarlas según sus necesidades.
Para mi prueba, solo añadí mi ID de CSS.
Entonces ve a la pestaña Ajustes avanzados y simplemente introduzca un valor para Z-Index.
El Z-Index permite que los elementos de su diseño se superpongan. Z-index 1 se colocará todo abajo y el Z-index 9999 será colocado todo arriba. Debes imaginar tu diseño como una capa superpuesta.
Le recomiendo: a z-index of 9990 9999 es utilizado por otros elementos, especialmente cuando el Editor Visual está activo.
¡Ahí! Con estos dos ajustes muy pequeños, usted consigue fácilmente un menú que se fija cuando uno se desliza hacia abajo y luego vuelve a su lugar cuando uno se arrastra hacia arriba!
3.2 – Mi menú pegajoso
Tengo una pequeña preferencia por el plugin anterior (Sticky Menu o cualquier cosa!) que ofrece más opciones disponibles en la versión gratuita.
Pero éste también funciona bien. Una vez activado, vaya a la pestaña Ajustes myStickyMenu.
- Seleccione Menú pegajoso Arriba.
- Clase pegajosa: seleccionar Otras clases o ID entonces ingrese su ID de CSS. Por mi ejemplo, #adheader.
- Ajustes: Ingrese a z-index of 9990
- Guarda tus cambios.
¡Eso es! Tu menú pegajoso con pergamino Debe ser funcional.
En ambos casos, ya sea que esté usando uno o el otro, necesitará añadir este ID de CSS a cualquier elemento de su diseño en el futuro para hacerlo pegajoso al pergamino. Por otro lado, si necesita arreglar varios elementos dentro de una sola página, entonces tendrá que utilizar un CLASS CSS en lugar de d-ID (porque un ID siempre debe ser único dentro de una página).
4 - Otras ideas para menús agradables...
¿Qué tal esto? menú fijo en la parte superior de la pantalla cuando el usuario baja la página?
Este tipo de menú no es nuevo, debe haber visto sitios que lo utilizan.
En el mismo espíritu, propongo que te des cuenta de un « menú fijo de pie » o crear un menú transparente en una sección Hero.
¿Necesita más recursos en Divi? Visita Elegante Themes blog lleno de ideas y tutos!
59