Tuto Divi n°62

¿Cómo conseguir un menú "pegado en pergamino" con Divi?

Actualizado en 19/06/24

2158 palabras

8 minutos de lectura
59 comentarios

Este artículo contiene enlaces de afiliados reconocibles por el icono porcentaje (%) → Soy un enlace de afiliado

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:

  1. ¿Qué es un "pantallado en el menú de desplazamiento"?
  2. ¿Cómo conseguir un menú pegajoso en 3 sencillos pasos sin plugin?
  3. Obtenga un menú pegatina en el pergamino usando un plugin (iniciador ideal)
  4. Otra buena idea de menú...

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:

Este menú es "no pegajoso"

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"

Aquí hay un video de lo que haremos en unos sencillos pasos:

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.

Reemplazar el clásico Menú Divi por menú de pantalla completa
El módulo Full Screen Menu reemplaza el menú Divi clásico

Esto se hace en un clic: descubrir tuto para eliminar el menú DiviEntonces vuelve aquí para continuar.

Una vez tu página n, puedes Insertar menú de pantalla completa. Así es como:

Módulo de pantalla completa en Divi
Agregue un módulo de menú de pantalla completa dentro de un diseño Divi
  1. Agregar una nueva sección haciendo clic en el icono « + »En el lugar deseado.
  2. Usted debe elegir una sección « Pantalla completa » (puro).
  3. Dentro de esta sección, inserte una Pantalla completa Módulo de menú
  4. 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.
  5. Usted verá este menú aparecer en su sección de pantalla completa.
  6. 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.

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.

Menú pegajoso con Divi
Obtener un menú pegajoso con Divi con el módulo de código
  1. Dentro del « Sección de pantalla completa » donde ha insertado previamente el módulo « Menú de pantalla completa »,
  2. Haga clic en el icono de la rueda para abrir la configuración de la sección
  3. Vaya a la pestaña "Advanced"
  4. En el campo CSS ID, introduzca el identificador "admenu"
  5. En el campo Clase CSS, entrar en la clase "adheader"
  6. Insertar 2 módulos Código completo dentro de esta sección de pantalla completa.
  7. En el primero, inserte Javascript entre dos etiquetas <script> y </script>.
  8. En el segundo, inserte CSS entre dos etiquetas <style> y </style>.

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;
}

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>

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 Ko

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:

  1. Desde eliminar el menú principal de su página como se explicó Paso 1 del Capítulo 2 de este Artículo.
  2. 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.
  3. 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.
CSS ID para obtener un menú pegajoso
Añadir un ID de CSS para obtener un menú de desplazamiento pegajoso

Entonces, dependiendo del plugin que elijas, aquí está lo que puedes hacer:

3.1 – Menú pegajoso (todo dorado!) en rollo

Menú pegajoso o cualquier cosa

Instala y activa el plugin como siempre. Usted encontrará su configuración en la pestaña Ajustes > Menu pegajoso (todo dorado!)

Menú pegajoso - Ajustes básicos
Menú pegajoso – pestaña Configuración básica

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.

Menú pegajoso - configuración avanzada
Menú pegajoso – pestaña Ajustes avanzados

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

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.

Mi menú pegajoso - configuración
Mi menú pegajoso – ajustes
  1. Seleccione Menú pegajoso Arriba.
  2. Clase pegajosa: seleccionar Otras clases o ID entonces ingrese su ID de CSS. Por mi ejemplo, #adheader.
  3. Ajustes: Ingrese a z-index of 9990
  4. 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).

¿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!

menú fijo Divi

Obtener Divi

Entrenamiento Divi

Libro electrónico Divi

Consejos gratis

Cuestionario Divi

Entrenamiento en vivo

icono 256x256

Proudly translated by wpLingua, la extensión de traducción para WordPress ¡Que me desarrolle! SEO-Friendly / Automático / Editable

59

  1. leslie
  2. kaellyana
  3. Lycia Diaz
  4. Lycia Diaz
  5. Hervé
  6. Lycia Diaz
  7. Lycia Diaz
  8. Hervé
  9. Lycia Diaz
  10. Nathan Houtain
  11. Lycia Diaz
  12. kaellyana
  13. Hervé
  14. kaellyana
  15. Lycia Diaz
  16. Hervé
  17. Lycia Diaz
  18. Hervé
  19. Lycia Diaz
  20. Picron
  21. Lycia Diaz
  22. Picron Antoine
  23. Antoine
  24. Lycia Diaz
  25. Lycia Diaz
  26. mssiote
  27. Lycia Diaz
  28. Lionel
  29. Lycia Diaz
  30. Lionel
  31. Lionel
  32. Lycia Diaz
  33. Nicolas
  34. Lycia Diaz
  35. Annabelle
  36. Lycia Diaz
  37. Annabelle
  38. Astrid BASTIEN-BIZOUARD
  39. Lycia Diaz
  40. alchimachine
  41. Lycia Diaz
  42. Boromiz
  43. Lycia Diaz
  44. Bout
  45. Lycia Diaz
  46. guibert
  47. Lycia Diaz
  48. Traoré
  49. Lycia Diaz
  50. Traoré
  51. Lycia Diaz
  52. Ludo
  53. Traoré
  54. Lycia Diaz
  55. laureline Graphillu
  56. Lycia Diaz
  57. laureline Graphillu
  58. BOURLY Georges Alain
  59. Lycia Diaz

Presentar un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios se indican con *

Este sitio utiliza Akismet para reducir indeseables. Más información sobre cómo se utilizan sus datos de retroalimentación.