Comment créer des designs personnalisés « Back to Top » avec Divi

Publié: 2019-06-19

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment créer des conceptions personnalisées et collantes avec Divi et le Green Energy Layout Pack. Cette technique vous aidera à améliorer l'expérience utilisateur sur vos pages tout en profitant des options intégrées de Divi du côté de la conception. Nous espérons que ce tutoriel vous inspirera pour créer vos propres designs alternatifs et les utiliser sur votre prochain site Web !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat de ce didacticiel.

GIF

retour au sommet

Exemple 1

retour au sommet

Exemple #2

retour au sommet

Exemple #3

retour au sommet

1. Ajouter un défilement fluide à la page HTML

Télécharger la page de destination de l'énergie verte sur une nouvelle page

La première chose que vous devrez faire est de créer une nouvelle page et de télécharger la page de destination du Green Energy Layout Pack.

retour au sommet

Ouvrir les paramètres de la page

Ouvrez les paramètres de la page en cliquant sur l'icône marquée dans l'écran d'impression ci-dessous :

retour au sommet

Ajouter un défilement fluide à la boîte CSS personnalisée

Passez à l'onglet avancé et ajoutez un comportement de défilement fluide à l'ensemble de la page en ajoutant le code CSS suivant à la zone CSS personnalisée :

html {
scroll-behavior: smooth;
}

retour au sommet

2. Ajouter un identifiant CSS à la section Hero

Ouvrir la section des héros

La conception de retour en haut redirigera les visiteurs vers la section des héros. Pour le retirer, vous devez d'abord ouvrir les paramètres de la section des héros.

retour au sommet

Ajouter un identifiant CSS

Ensuite, allez dans l'onglet avancé et ajoutez un identifiant CSS à la section. Plus tard dans cet article, nous ajouterons un lien d'ancrage qui dirigera les visiteurs vers cette section.

Identifiant CSS : section-1

retour au sommet

3. Ajouter une nouvelle section au bas de la page avec un design « Retour en haut »

Étapes générales

Ajouter une nouvelle section régulière au bas de la page

Comme vous avez pu le remarquer dans l'aperçu de cet article, nous allons recréer trois exemples de conception différents. Pour rationaliser le processus, nous commencerons par quelques étapes générales et nous nous concentrerons sur chaque exemple de conception individuellement plus tard dans la publication. Ajoutez une nouvelle section régulière au bas de votre page.

retour au sommet

Espacement

Ouvrez les paramètres de la section et supprimez tous les rembourrages supérieur et inférieur par défaut.

Rembourrage supérieur : 0px
Rembourrage inférieur : 0px

retour au sommet

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

retour au sommet

Ajouter un lien d'ancrage

Dès que quelqu'un clique sur toute la ligne, nous voulons qu'il soit redirigé vers le haut de la page. Pour ce faire, nous ajouterons un lien qui redirige vers la section héros de la page.

URL du lien de ligne : votresiteweb.com/page/#section-1

retour au sommet

Alignement des lignes

Nous plaçons également la ligne sur le côté droit du conteneur de section.

Alignement des lignes : à droite

retour au sommet

Emploi stable

Ensuite, nous corrigeons toute la ligne en accédant à l'onglet avancé de la ligne et en mettant à jour les options de position suivantes :

Poste : fixe
Décalage vertical : 30px
Décalage horizontal : 30px
Indice Z : 99

En plus de rendre la ligne fixe, nous nous assurons que la ligne chevauche tout le contenu de la page en augmentant l'index z.

retour au sommet

Recréer l'exemple de conception #1

retour au sommet

Paramètres de ligne

Modifier la structure des colonnes

Maintenant que nous avons parcouru toutes les étapes générales, nous allons recréer les trois exemples différents que vous avez pu voir au début de cet article. Commençons par le premier ! Modifiez la structure des colonnes de ligne :

retour au sommet

Couleur de l'arrière plan

Continuez en ouvrant les paramètres de ligne et ajoutez une couleur de fond blanc.

Couleur d'arrière-plan : #ffffff

retour au sommet

Dimensionnement

Passez à l'onglet Conception et modifiez les paramètres de dimensionnement.

Utiliser une largeur de gouttière personnalisée : 1
Largeur : 9vw (ordinateur de bureau), 23vw (tablette), 35vw (téléphone)

retour au sommet