Mostrar un botón deregreso a la cima en su sitio es una práctica bastante común. No está ahí para ser bonito, sino para mejorar la experiencia del usuario durante su visita.
LaUX(experiencia de usuario) es muy importante en el diseño web porque es lo que hace que los usuarios se sientan bien y vuelvan.
¿Y si te dijera que podemos combinar las dos cosas: UX y DISEÑO?
¿Y si te dijera que en unos pocos clics puedes insertar un botón personalizado de vuelta al principio colocado donde quieras? ¡Simplemente con Divi, sin añadir ningún código o plugin!
Esto es lo que propongo en este nuevo tutorial...
- 1 - Crear un botón de vuelta al principio utilizando el módulo de resumen
- 2 - Personalizar el botón "volver al principio"
- 3 - Ajustar la posición "fija"
- 4 - Añadir un identificador CSS a la cabecera del sitio
- 5 - Variación del botón "volver al principio" con una imagen
- 6 - En conclusión: ¡un botón de "back up" en menos de 2 minutos!
Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.
1 - Crear un botón de vuelta al principio utilizando el módulo de resumen
Para crear su botón de vuelta al principio, un módulo de Divi es particularmente adecuado, es el módulo de resumen (Módulo Blurb).
Esto le permite insertar fácilmente un icono o una imagen, pero también una URL (un enlace). ¡Esto es exactamente lo que necesitamos para crear el famoso botón!
1.1 - Editar el pie de página global
Propongo esta solución porque es la más fácil...
Si añade su botón al pie de página global, el botón de volver al principio estará presente en todas las páginas de su sitio. Esto le ahorrará mucho tiempo.
Pero también significa que debe (o va a) utilizar el Constructor de temas Divi para conseguirlo...
Si este no es tu caso, no pasa nada, puedes adaptar esta solución a la tuya Diseños de Divi. La única limitación será que tendrás que añadirlo manualmente en todas las páginas de tu sitio...
Otra solución: personalizar el botón con unas pocas líneas de código o plugins. He incluido una lista de recursos al final de este artículo.
Así que primero, crea o edita el pie de página global desde la pestaña Divi > Theme Builder.
En la captura de pantalla siguiente, el pie de página ya contiene algunos elementos gráficos...
- Añada una nueva sección haciendo clic en el botón "+". No importa dónde se inserte, no tendrá ningún impacto visual.
- Elija una sección normal (azul).
- Inserte una línea 1/1.
- Añada el módulo Blurb.
No se demore. Descubra el tema Divi aquí !
1.2 - Definir el contenido del módulo de resumen
Una vez insertado el módulo de resumen, puede proceder a su configuración y personalización.
- En la pestaña "Contenido", elimine el título y el cuerpo del texto.
- Active la opción "Usar iconos".
- Elige tu icono favorito.
- En la pestaña Enlace, introduzca : #volver-al-top
- Establezca el objetivo del enlace para que se abra en la misma ventana.
2 - Personalizar el botón "volver al principio"
Ahora que se han completado las pocas formalidades de configuración del botón de reserva, puede definir el diseño del botón.
Todavía en la configuración del módulo Resumen, vaya a la pestaña ESTILO.
- Establece el color del icono.
- En la pestaña "Transformar", puede reducir o ampliar el tamaño del icono si es necesario.
- Mueve los controles deslizantes para cambiar el tamaño.
Desde la pestaña Estilo, también puedes (además de definir el color y cambiar el tamaño del icono) añadir una animación, una sombra, etc.
3 - Ajustar la posición "fija"
Esta es la opción obligatoria para que el botón de copia de seguridad tenga éxito: el posición fija.
Es curioso porque esta opción es totalmente nueva en Divi, apareció desde Divi 4.2 y pasó desapercibida... Qué pena, la posición ¡opción tiene mucho que ofrecer! Mira esto:
Descubra más sobre esta característica que aporta un confort adicional, lea el artículo oficial sobre la posición de Divi.
Nota: estas opciones de posición CSS están disponibles en todas las secciones, filas y Módulos Dividesde la pestaña Avanzado.
Siempre en la configuración del módulo Resumen, vaya a la pestaña Avanzado y baje hasta la opción "Posición ":
- En el menú desplegable, elija la opción "Fijo".
- Determine la posición del botón de retroceso. Por regla general, se coloca en la esquina inferior derecha.
- Juega con los márgenes si es necesario.
- Añade un índice Z de 9999.
- No olvides validar...
Ya está, tu botón de "volver al principio " está creado y arreglado. Ahora lo haremos funcionar.
4 - Añadir un identificador CSS a la cabecera del sitio
Cuando creaste tu botón de retorno a la cima, te aconsejé que introdujeras el #volver-al-top (en el capítulo 1.2 de este artículo). Este es un enlace de anclaje.
Para que este enlace sea totalmente funcional y lleve al lector a la parte superior de la página, debe introducir un identificador CSS en la parte superior de su sitio.
Por eso recomiendo editar la cabecera global de su sitio esta vez.
Vuelve a la Divi > Constructor de temas y cree o edite la cabecera global de su sitio.
Sea cual sea el elemento que hayas colocado en tu cabecera, podrás editarlo para insertar un ID CSS.
En la captura de pantalla de arriba, he elegido editar el módulo de Menú Divi pero puedes editar la línea o la sección, el resultado será el mismo.
- Abra la configuración de su elemento a modificar (en este caso, el menú de navegación).
- Vaya a la pestaña "Avanzado" e inserte "retorno a la cima". Esta vez sin el "#".
- Guarde el módulo y luego la Cabecera.
¡Eso es!
Ahora su sitio tiene un botón de vuelta al principio personalizado y funcional.
5 - Variación del botón "volver al principio" con una imagen
Una idea aún más genial: ¿por qué no utilizar una imagen personalizada en lugar de un Icono de Divi ?
5.1 - Creación del diseño del botón
Utiliza tu software vectorial favorito. En la captura de pantalla siguiente, se trata de Affinity Designer.
Rápidamente creé una flecha. No es genial, lo reconozco...
Pero si tienes alma de diseñador, sabrás lo que hay que hacer para crear un botón TOP back to top 😉 .
También puede buscar en Internet elementos gráficos gratuitos.
5.2 - Insertar la imagen en el pie de página
Una vez que tenga su imagen en formato .png (fondo transparente), puede insertarla en lugar del icono del módulo Resumen.
Para ello, vuelva al paso 1.2 de este artículo y desactive el icono para utilizar una imagen en su lugar.
5.3 - Comprobar el resultado
Ahora tienes un botón de reserva totalmente personalizado.
¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales.
6 - En conclusión: ¡un botón de "back up" en menos de 2 minutos!
Con Divi, es muy fácil crear sitios web totalmente personalizados.
Ya no tendrá limitaciones de diseño y podrá satisfacer fácilmente sus necesidades o las de sus clientes.
Para personalizar mejor su sitio de WordPress, consulte lo siguiente Tutoriales de Divi ¡que puede ayudarte!
Más recursos para personalizar el botón de volver al principio sin usar el Theme Builder:
- 5 maneras de estilizar el botón Divi Back to Top
- Cómo estilizar el botón de vuelta al principio
- Cómo crear diseños adhesivos personalizados "Back to Top" con Divi
- Extensión gratuita para Divi: Estilos y animaciones de botones alternativos para volver al principio
Merci Lycia pour l’astuce ! explications claires et précises , ton site et travail m’aident et m’inspirent bcp ^^
Bonne soirée 🙂
Merci Audrey 😉
Superbe astuce à nouveau Lycia, merci !
J’ai tenté l’expérience, mais je suis bloquée.
Après la création du bouton, j’ai ajouté l’ID CSS dans l’en-tête du site, mais j’ai mon menu qui disparait.
De base, je n’ai pas d’en-tête global dans le thème builder. Je suis passée par apparence pour le paramétrer.
Une reco pour gérer ça ?
D’avance merci pour ton aide.
Salut Stéphanie, tu as trouvé finalement ? Tu entends quoi par « j’ai ajouté l’ID CSS dans l’en-tête du site » ?
Nope Lycia !
Pour ta question, je parlais de l’étape 4 de ton tuto – Ajouter un ID CSS dans l’en-tête du site. Retournez à l’onglet Divi > Theme Builder et créez ou éditez l’en-tête globale de votre site.
Chez moi, ce n’est pas comme ça. Mon en-tête n’apparait pas avec mes différents onglets.
Merci bcp Lycia pour ce tuto
Tu es superbe.
Ah mince, tu as un lien à partager ?
Bonjour !
Merci, le tuto est clair, mais je reviens sur la question de stéphanie : quand on utilise le personnalisateur de theme pour faire son entete et qu’apres on met l’id dans le header via le divi builder, tout l’entete disparait….
Est-ce que tu as une solution ?
Je ne vois pas où mettre un id dans le header directement dans le personnalisateur.
Ou alors il faut faire tout son entete avec le divi builder et plus du tout avec le personnalisateur ? mais dans ce cas, je ne suis pas encore capable de faire ça…
j’ai trouvé entre temps…
enfin j’ai fait mon header global et du coup j’ai pu mettre mon id 🙂
Salut Aline, oui, si tu veux faire ça, tu dois utiliser le Thème Builder pour pouvoir mettre un ID dans la section qui affiche ton menu.
Super astuce !
Je me demandais par contre s’il y avait la possibilité de ne faire apparaître cette icône que lorsque la page est plus longue que la hauteur de l’écran ?
Salut Jo, non pas comme ça. Sinon, tu embarques le code seulement dans les pages qui en ont besoin au lieu de pour tout le site 😉
Bonjour Lycia,
Déjà merci pour ce tuto ! Par contre j’ai un souci, le lien est bien effectif sur ma flèche, mais il ne renvoie pas vers mon menu. J’ai créé un Menu pleine page via l’éditeur de thème donc je me dis que ça vient peut-être de là ?
Salut Annabelle, ça vient peut-être de là car je n’ai pas testé avec le menu en pleine page, c’est possible que ça ne marche pas à cause de cela 😉
Bonjour Lycia,
Après plusieurs tentatives, mon icône « maison » s’affiche en réalité avec la lettre v. Je ne comprends pas d’où peut venir ce problème d’affichage, les codes m’ont l’air bons…
Lorsque je suis également dans ma structure de menu sur wordpress, mon titre de navigation est « v » et non pas l’icône choisi au préalable.
Mon menu a été fait directement par le menu plein écran du module divi.
Salut Floriane ton code est bon, c’est un problème récurrent sur Divi en ce moment, peut-être dû au cache. J’ai pas trouvé de solution. Vide ton cache régulièrement. Ça peut aider.
Bonjour,
Je remarque que le bug que j’essaie de résoudre est également visible sur cette page … c’est à dire que par exemple l’icône « retour vers le haut » est un chiffre et non pas une flèche et ainsi que dans le menu du haut, il y à le chiffre 3 à la place de la flèche pour dérouler le menu… alors soit c’est mon navigateur qui à un problème sauf que ce soucis je le retrouve en visitant mon site depuis la tablette d’un ami ou sur mon smartphone… à la place des 3 traits désignant le symbole du menu, j’ai la lettre « a »… Auriez vous une idée pour résoudre mon soucis ??? Merci et voyez vous également le bug ici présent sur le site ??
Bien cordialement
Hello tu n’es pas le seul. C’est un souci de Divi je pense depuis qu’ils ont optimisé le code pour améliorer la performance. Il faut que je cherche mais pour l’instant je n’ai pas trouvé de solution. As-tu contacté le support ?
Ok j’ai trouvé une solution. Je publie un article la semaine prochaine ou celle d’après. Inscris-toi à la newsletter si tu veux en être informé.
Rebonjour, je viens de me déconnecter de mon wordpress et le bug ne s’affiche plus ici mais persiste sur mon site…
Cela fait plusieurs moi que je tourner et retourne sur mon site, impossible à résoudre cette énigme….
Merci de votre aide !
Cordialement
Michel
Ok super merci, je vais m’inscrire alors.
C’est un souci de cache. Ça va être vite réglé. Soyez patient le temps que je tourne la vidéo et que je publie l’article. Tu utilises WPRocket je suppose ? Si oui, le souci vient de là.
Merci Lycia pour tes astuces toujours bienvenues & pertinentes !!
Pour pousser la réflexion, j’aimerai que le bouton n’apparaisse qu’au scroll (et non dés l’affichage de la page). Comment faire ? Un bout de code pour ça ?
Lucie
Coucou tu as des options de scroll proposées par Divi dans les options avancées. Il suffirait que tu les paramètres pour l’élément souhaité
Grand merci pour votre tuto clair et précis, bravo