|
L'ajout d'un bouton « Faire défiler vers le haut » à votre site Weebly est un moyen pratique d'améliorer l'expérience utilisateur et de permettre aux visiteurs de revenir plus facilement en haut de la page. Voici un guide étape par étape sur la façon d'ajouter un bouton « Faire défiler vers le haut » dans Weebly :
Étape 1 :Créer un lien texte « Faire défiler vers le haut »
1. Dans l'éditeur de votre site Weebly, accédez au panneau « Éléments » sur le côté gauche de l'écran.
2. Faites glisser et déposez l'élément « Texte/HTML » sur votre page à l'endroit où vous souhaitez que le bouton « Faire défiler vers le haut » apparaisse.
3. Dans l'éditeur "Texte/HTML" qui apparaît, saisissez le code HTML suivant :
```html
Retour en haut
```
1. Remplacez "#top" par l'ID de l'élément en haut de votre page. Il peut s'agir de votre en-tête ou d'un élément de logo.
5. Cliquez sur "Mettre à jour" pour enregistrer le lien texte.
Étape 2 : Ajouter du CSS personnalisé pour le style
Pour rendre le bouton « Faire défiler vers le haut » visible et le styliser à votre guise, vous devrez ajouter du CSS personnalisé :
1. Dans l'éditeur Weebly, cliquez sur l'onglet « Conception » en haut de l'écran.
2. Cliquez sur l'onglet "CSS personnalisé" dans le panneau Conception.
3. Collez le code CSS suivant dans le champ CSS personnalisé :
```css
/* Faire défiler vers le haut le style des boutons */
un#haut {
poste :fixe;
en bas :20 px ;
à droite :20 px ;
remplissage :8px 12px;
couleur d'arrière-plan :#555 ;
couleur :#fff ;
taille de police :14 px ;
décoration de texte :aucune ;
rayon de bordure :4 px ;
}
a#top:survoler {
couleur d'arrière-plan :#333 ;
}
```
Dans ce code CSS, vous pouvez ajuster le positionnement, les couleurs et d'autres styles du bouton « Faire défiler vers le haut » pour qu'il corresponde à la conception de votre site.
Étape 3 : Publiez votre site
Après avoir apporté les modifications nécessaires, prévisualisez votre site pour vous assurer que le bouton « Faire défiler vers le haut » fonctionne correctement. Enfin, cliquez sur le bouton « Publier » dans l'éditeur Weebly pour appliquer les modifications en direct sur votre site Web.
Désormais, votre site Weebly devrait disposer d'un bouton fonctionnel « Faire défiler vers le haut », permettant à vos visiteurs de revenir en haut de la page sans effort.
|
