Cree un botón de copia de seguridad personalizado en unos pocos clics.

Publicado el 30/01/2020 | 12 comentarios

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 con unos pocos clics puedes insertar un botón personalizado de vuelta al principio y colocarlo donde quieras? Simplemente con Divi, sin añadir ningún código o plugin!

Esto es lo que propongo en este nuevo tutorial...

Résultat final du bouton "return to top"
Resultado final del botón "volver al principio".

Anuncio: 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).

Éste 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

Sugiero esta solución porque es la más fácil...

Si añade su botón dentro de su pie de página global, el botón de vuelta 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 no es tu caso, no hay problema, 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. Le propongo una lista de recursos al final del artículo.

Editer le Footer Global
Editar el pie de página global

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...

Module résumé comme bouton retour vers le haut
Insertar un módulo de resumen para crear un botón de "volver al principio".
  1. Añada una nueva sección haciendo clic en el botón "+". No importa dónde se inserte, no tendrá ningún impacto visual.
  2. Elija una sección normal (azul).
  3. Inserte una línea 1/1.
  4. Añada el módulo Blurb.

No esperes más. Descubra el tema Divi aquí !

1.2 - Definir el contenido del módulo de resumen

Una vez insertado el módulo de resumen, se puede proceder a su configuración y personalización.

Modifier le contenu du Résumé
Modificar el contenido del Resumen
  1. En la pestaña "Contenido", elimine el título y el cuerpo del texto.
  2. Active la opción "Usar iconos".
  3. Elige tu icono favorito.
  4. En la pestaña Enlace, introduzca : #volver-al-top
  5. Establezca el objetivo del enlace para que se abra en la misma ventana.

2 - Personalizar el botón de "volver al principio"

Ahora que se han completado las pocas formalidades de configuración del botón de retro ceso, puede definir el diseño del botón.

Todavía en la configuración del módulo Resumen, vaya a la pestaña ESTILO.

Styliser le bouton retour vers le haut
Estilizar el botón de retroceso
  1. Establece el color del icono.
  2. En la pestaña "Transformar", puede reducir o ampliar el tamaño del icono si es necesario.
  3. 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"

Aquí está la opción obligatoria para un botón de respaldo exitoso: 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:

Conozca más sobre esta característica que aporta un confort extra, 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.

Définir la position Fixed pour le bouton retour vers le haut
Establecer la posición fija para el botón de retroceso

Todavía en la configuración del módulo de resumen, vaya a la pestaña Avanzado y desplácese hasta la opción "Posición ":

  1. En el menú desplegable, elija la opción "Fijo".
  2. Determine la posición del botón de retroceso. Por regla general, se coloca en la esquina inferior derecha.
  3. Juega con los márgenes si es necesario.
  4. Añade un índice Z de 9999.
  5. No olvide validar...

Ya está, tu botón de "volver al principio " está creado y arreglado. Ahora lo haremos funcionar.

4 - Añadir un identificador CSS en la cabecera del sitio

Cuando creaste tu botón de vuelta al principio, 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 te recomiendo que esta vez edites la Cabecera Global de tu sitio.

Editer le header global
Edición de la cabecera global

Vuelve a la Divi > Constructor de temas y cree o edite la cabecera global de su sitio.

Ajouter un ID CSS de retour vers le haut
Añadir un identificador CSS para volver a la parte superior

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, elegí editar el módulo de Menú de Divi pero puedes editar la línea o la sección, el resultado será el mismo.

  1. Abra la configuración de su elemento a modificar (aquí es el menú de navegación).
  2. Vaya a la pestaña "Avanzado" e inserte "retorno a la cima". Esta vez sin el "#".
  3. Guarde el módulo y luego la Cabecera.
Résultat final du bouton "return to top"
Resultado final del botón "volver al principio".

¡Eso es!

Ahora su sitio tiene un botón personalizado y funcional para volver al principio.

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 de vectores favorito. En la captura de pantalla siguiente, se trata de Affinity Designer.

Créez le visuel de votre bouton
Crea el visual de tu botón con tu software favorito

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 😉 .

Si no, puede buscar en la web 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.

insérer l'image du bouton
Insertar la imagen del botón en lugar del icono

Para ello, vuelva al paso 1.2 de este artículo y desactive el icono para utilizar una imagen en su lugar.

5.3 - Comprobación del resultado

Ahora tienes un botón de respaldo completamente personalizado!

Bouton retour avec image
Botón de vuelta al principio con una imagen personalizada

¿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 en cuanto al 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 sobre cómo personalizar el botón de vuelta al principio sin usar el Theme Builder :

Bouton "Retour vers le haut" personnalisé avec Divi
"Return to top" button
"Return to top" button

1.319 palabras

5

A ti también te debería gustar:

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

12 Commentaires

  1. AUDREY GODEREAUX

    Merci Lycia pour l’astuce ! explications claires et précises , ton site et travail m’aident et m’inspirent bcp ^^

    Bonne soirée 🙂

  2. Lycia Diaz

    Merci Audrey 😉

  3. Stéphanie Arlt

    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.

  4. Lycia Diaz

    Salut Stéphanie, tu as trouvé finalement ? Tu entends quoi par « j’ai ajouté l’ID CSS dans l’en-tête du site » ?

  5. Stéphanie

    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.

  6. naby.freeman

    Merci bcp Lycia pour ce tuto
    Tu es superbe.

  7. Lycia Diaz

    Ah mince, tu as un lien à partager ?

  8. Aline

    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…

  9. Aline

    j’ai trouvé entre temps…
    enfin j’ai fait mon header global et du coup j’ai pu mettre mon id 🙂

  10. Lycia Diaz

    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.

  11. Jo

    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 ?

  12. Lycia Diaz

    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 😉

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto