Elementor PRO : Ajouter un bouton retour en haut

Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn
Partager sur reddit
Reddit
Partager sur email
Email
Partager sur whatsapp
WhatsApp

Voici un tutoriel pour vous montrer comment ajouter avec le système de popup d’elementor pro, comment ajouter un bouton « retour en haut » sur votre site internet.

1. Ajouter une nouvelle popup avec elementor pro

Rendez-vous dans votre back office et cliquer sur la partie : modèles d’elementor pro, puis : fenêtres modales.

Elementor pro : Modèles
Elementor pro : Modèles

Créer une nouvelle popup intitulée : BackToTop

Elementor pro : création d'une nouvelle popup
Elementor pro : création d’une nouvelle popup

Cliquer sur la molette de réglages de votre popup générale

Réglage générale de la popup elementor
Réglage générale de la popup elementor

Indiquer lui ces paramètres :

  • Largeur : 100px
  • Hauteur : Ajuster au contenu
  • Position : droite et bas
  • Désactiver : superposition et bouton de fermeture
  • Animation d’entrée et sortie : à vous de voir
Paramètre de la popup : retour en haut
Paramètre de la popup : retour en haut

Dans le sous-onglet : style de cette fenêtre de paramètres :

  • Couleur d’arriere plan : n’importe qu’elle couleur en transparence 100%
  • Ombre de boite : cliquer sur la fleche arrondis a coter du bouton de paramètre pour revenir par défaut et la désactiver.
Paramètre de la popup, sous-onglet : style
Paramètre de la popup, sous-onglet : style

Dans le sous-onglet : Avancé de cette fenêtre de paramètres :

  • Activer : empêcher la fermeture en superposition et empêcher la fermeture avec la touche ESC (echap)
Paramètre de la popup, sous-onglet : Avancé
Paramètre de la popup, sous-onglet : Avancé

Maintenant vous avez fini la configuration de votre frame pour votre bouton retour en haut. Il ne vous reste plus qu’a ajouter dedans le widget « icone », puis choisir l’icone de votre choix qui représente le mieux pour vous un retour en haut !

J’ai choisi de mon côté l’icone : angle double up avec un font rempli en forme carré en alignement à droite et avec comme lien : #backtotop.
J’ai également stylisé le tout avec des couleurs de base et de survole, une taille de 20px et des bords arrondis : haut et gauche de 5px. Pour avoir un rendu comme si un onglet sortait de la droite de mon écran !

Dans la partie avancés, c’est ici que nous allons régler le faite que le bouton ne s’affiche ou pas selon : si on est en haut ou en bas de l’écran ! Avec la fonction : Effet de mouvement et effet de défilement, en mettant la transparence sur direction : fade in, Niveau : 10 et viewport de 0% à 55%.
Pour faire simple, nous indiquons à notre icone d’être complètement transparent durant les premier 45% du scroll de la page, puis d’apparaitre petit a petit de 45% à 100% du scroll de la page. Nous avons donc un icone invisible en haut d el page et apparent en bas.

et on n’oublie pas d’appliquer l’effet sur : la page entière.

Nous avons fini pour la création du bouton, donc nous sauvegardons la popup et nous allons maintenant régler les conditions d’affichage de celle-ci !

  • Affichage : dans tous le site (si vous utilisez woocommerce ajouter aussi une condition dans toute la boutique).
  • Déclencheur : au chargement de la page avec 0 secondes
  • Réglage avancés : aucun

2. le lien interne avec une ancre

Maintenant que le bouton retour en haut est créé et fonctionnel avec une popup, il faut maintenant ajouter une ancre dans votre header pour que son lien vous remonte à l’endroit choisi.

Pour ce faire éditer votre header et ajouter au dessus de celui dans une nouvelle frame le widget : ancre avec comme ID : backotop

Header ajout d'une frame et d'une ancre
Header ajout d’une frame et d’une ancre

Il faut également penser à mettre vos marges internes et externes de la nouvelle frame de l’ancre, puis de sa propre colonne, puis du widget à 0 partout, car sinon vous aurez un décalage au dessus de votre header et mettre votre seconde frame qui comporte le contenu votre header en marge externe haut à -2px pour compenser l’ajout de l’ancre.

Voila c’est fini, vous avez maintenant un bouton : retour en haut fonctionnel sur tout votre site, créé avec une popup elementor pro ! Vous pouvez tester le bouton : retour en haut sur ce site internet nous utilisons ce système exactement.

Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn
Partager sur reddit
Reddit
Partager sur email
Email
Partager sur whatsapp
WhatsApp

Besoin d'explication, d'aide ou de support sur un article ?

Virement bancaire

BANQUE : N26 Bank GmbH, Klosterstr. 62, 10179 Berlin Germany
BÉNÉFICIAIRE : Mr GOVIN Mathieu
IBAN : DE23 1001 1001 2624 7230 79
BIC : NTSBDEB1XXX

camel design logo transparent

Nous utilisons des cookies pour améliorer votre expérience sur notre site. En utilisant notre site, vous acceptez les cookies. En savoir plus

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur reddit
Partager sur email