Comment créer une page de balayage entièrement horizontale avec Divi

Avez-vous déjà pensé à créer une page entièrement horizontale qui utilise des liens de balayage et d'ancrage pour naviguer ? Eh bien, si vous avez et ne saviez pas exactement comment l'aborder, c'est le poste idéal pour vous. Nous allons vous montrer comment créer une page de balayage entièrement horizontale à l'aide de Divi. Cette technique vous aide vraiment à faire en sorte que votre site Web se démarque des autres et correspond aux tendances de conception Web de 2019. Le résultat que nous créerons aura fière allure sur toutes les tailles d'écran.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Approcher

• Nous allons créer la page entière en utilisant une seule section
• Nous transformons cette section en une grille horizontale en utilisant quelques lignes de code CSS à la fin du didacticiel
• La grille horizontale placera chacune des lignes dans une colonne placée horizontalement
• Vous décidez du nombre de colonnes horizontales qu'une section contient
• Dans ce cas, nous utiliserons 4 colonnes différentes composées chacune de 2 lignes
• Vous pouvez modifier le nombre de colonnes horizontales que vous créez et déterminer le nombre de lignes que chacune des colonnes de section contient
• Nous utilisons également des liens d'ancrage pour aider les gens à naviguer dans les différentes colonnes de section
• En plus de cela, nous ajoutons un défilement fluide et un effet d'accrochage de défilement de section qui facilitera la navigation de vos visiteurs

Commençons à recréer

Ajouter une nouvelle section

Couleur de l'arrière plan

Créez une nouvelle page et ajoutez-y une section régulière. Ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #ffffff

Espacement

Ensuite, accédez aux paramètres d'espacement et ajoutez un rembourrage personnalisé sur différentes tailles d'écran.

• Rembourrage supérieur : 10,5 vw (ordinateur de bureau), 15 vw (tablette), 10 vw (téléphone)
• Rembourrage inférieur : 3vw (ordinateur de bureau et tablette), 10vw (téléphone)

Ajouter la ligne n° 1

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de l'écran.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Accédez ensuite aux paramètres d'espacement et apportez quelques modifications à toutes les tailles d'écran.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Rembourrage gauche : 6vw (tablette et téléphone)
• Rembourrage droit : 6vw (tablette et téléphone)
• Rembourrage inférieur de la colonne 1 : 15vw (tablette et téléphone)
• Remplissage gauche de la colonne 2 : 4vw (ordinateur de bureau), 0vw (tablette et téléphone)

Identifiant CSS

Nous devrons attribuer un identifiant CSS à la première ligne de chacune des colonnes de section que nous créons. Cela nous aidera à créer les flèches d'ancrage plus tard dans cet article.

• Identifiant CSS : swipe-1

CSS personnalisé

Comme mentionné dans la section approche de cet article, nous appliquons également un effet de défilement et d'accrochage fluide au mécanisme. Pour pouvoir le faire, nous devrons ajouter une seule ligne de code CSS à la première ligne de chacune des colonnes horizontales que nous créons.

scroll-snap-align: start;

Ajouter le module Blurb à la colonne 1

Sélectionnez l'icône

Nous pouvons maintenant commencer à ajouter des modules ! Commencez avec un module Blurb dans la colonne 1. Ouvrez les paramètres du module et sélectionnez une icône de flèche vers la gauche.

Paramètres des icônes

Ensuite, allez dans l'onglet conception et apportez quelques modifications à l'apparence de l'icône.

• Couleur de l'icône : rgba(255,255,255,0)
• Placement des images/icônes : en haut
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police des icônes : 5vw (ordinateur de bureau), 13vw (tablette), 21vw (téléphone)

Espacement

Ajoutez ensuite des valeurs de marge personnalisées.

• Marge supérieure : 14vw (ordinateur de bureau), -11vw (tablette), -17vw (téléphone)
• Marge gauche : 60vw (tablette et téléphone)

Visibilité

Nous cachons également le module sur des écrans de plus petite taille.

Ajouter un module de texte à la colonne 2

Ajouter du contenu H2

Le prochain module dont nous avons besoin est un module de texte dans la colonne 2. Ajoutez du contenu H2.

Paramètres de texte H2

Ensuite, allez dans l'onglet conception et modifiez les paramètres de texte H2.

• Police de la rubrique 2 : Source Serif Pro
• En-tête 2 Alignement du texte : à gauche
• Titre 2 Taille du texte : 3vw (ordinateur de bureau), 7vw (tablette et téléphone)

Dimensionnement

Modifiez ensuite la largeur dans les paramètres de dimensionnement.

• Largeur : 77%

Espacement

Et ajoutez une marge inférieure pour les tailles d'écran plus petites.

• Marge inférieure : 15vw (tablette et téléphone)

Ajouter un module de bouton à la colonne 2

Ajouter du contenu

Juste en dessous du module de texte que vous avez ajouté, allez-y et ajoutez un module de bouton. Entrez une copie.

Paramètres des boutons

Ensuite, allez dans l'onglet conception et modifiez les paramètres du bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 0.9vw (ordinateur de bureau), 2vw (tablette), 3.5vw (téléphone)
• Couleur du texte du bouton : #000000
• Largeur de la bordure du bouton : 1px

• Couleur de la bordure du bouton : #000000
• Rayon de la bordure du bouton : 0px
• Police des boutons : Mukta
• Poids de la police : gras
• Style de police : majuscule

Espacement

Ajoutez ensuite une marge personnalisée et un rembourrage.

• Marge supérieure : 6vw (ordinateur de bureau), 4vw (tablette et téléphone)
• Rembourrage supérieur : 15px
• Rembourrage inférieur : 15px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Ajouter le module Blurb à la colonne 3

Sélectionnez l'icône

Le prochain et dernier module dont nous avons besoin dans cette ligne est un autre module Blurb dans la colonne 3. Sélectionnez une icône de votre choix.

Relier

Ensuite, allez dans les paramètres du lien et ajoutez un lien qui dirigera les visiteurs vers la deuxième colonne horizontale de la section.

• URL du lien du module : https://www.yourwebsite.com/page/#swipe-2

Paramètres des icônes

Allez-y et modifiez également les paramètres de l'icône.

• Couleur de l'icône : #333333
• Placement de l'icône de l'image : en haut
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police des icônes : 5vw (ordinateur de bureau), 13vw (tablette), 21vw (téléphone)

Espacement

Continuez en ajoutant des marges haut et gauche personnalisées sur différentes tailles d'écran.

• Marge supérieure : 14vw (ordinateur de bureau), -11vw (tablette), -17vw (téléphone)
• Marge gauche : 60vw (tablette et téléphone)

Ajouter la ligne n° 2

Structure des colonnes

La deuxième ligne dont nous avons besoin utilise la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #f7f7f7

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Avec les valeurs de remplissage et de marge personnalisées dans les paramètres d'espacement.

• Marge supérieure : -3,5vw (ordinateur de bureau), -10vw (tablette), -17vw (téléphone)
• Rembourrage supérieur : 8vw (ordinateur de bureau), 15vw (tablette), 20vw (téléphone)
• Rembourrage inférieur : 8vw (ordinateur de bureau), 15vw (tablette), 20vw (téléphone)
• Rembourrage gauche : 24vw (ordinateur de bureau), 5vw (tablette et téléphone)
• Rembourrage droit : 24vw (ordinateur de bureau), 5vw (tablette et téléphone)
• Remplissage droit de la colonne 1 : 2vw (ordinateur de bureau), 0vw (tablette et téléphone)
• Remplissage gauche de la colonne 2 : 2vw (ordinateur de bureau), 0vw (tablette et téléphone)

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Allez-y et ajoutez un module de texte à la première colonne. Entrez une copie de votre choix (y compris un titre H3).

Paramètres de texte

Accédez à l'onglet Conception et modifiez les paramètres du texte.

• Police de texte : Open Sans
• Taille du texte : 0.65vw (ordinateur de bureau), 1.8vw (tablette), 2.7vw (téléphone)
• Hauteur de la ligne de texte : 1,8 em

Paramètres de texte H3

Avec les paramètres de texte H3.

• Police du titre 3 : Mukta
• Poids de la police de l'en-tête 2 : gras
• Titre 3 Style de police : majuscule
• Titre 3 Taille du texte : 0.8vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)
• Titre 3 Hauteur de ligne : 1,8 em

Espacement

Ajoutez également une marge inférieure pour les tailles d'écran plus petites.

• Marge inférieure : 5vw (tablette et téléphone)

Cloner le module de texte et le placer dans la colonne 2

Une fois que vous avez terminé de modifier le module de texte dans la colonne 1, vous pouvez le cloner et placer le doublon dans la deuxième colonne.

Modifier le contenu

Assurez-vous de modifier le contenu.

Cloner la ligne #1 trois fois

Une fois que vos deux lignes sont terminées, vous pouvez cloner la première ligne 3 fois.

Changer le doublon #1

Modifier l'ID CSS de la ligne

Nous devrons changer l'ID CSS du premier doublon.

• Identifiant CSS : swipe-2

Changer la couleur de l'icône du module Blurb (colonne 1)

Avec la couleur du premier module Blurb.

• Couleur de l'icône : #333333

Modifier les liens des deux modules Blurb

Pour que les liens d'ancrage fonctionnent, vous devrez modifier le lien de chacune des flèches en conséquence :

• URL du lien du module : https://www.yourwebsite.com/page/#swipe-1

• URL du lien du module : https://www.yourwebsite.com/page/#swipe-3

Changer le doublon #2

Modifier l'ID CSS de la ligne

Modifiez l'ID CSS du deuxième doublon.

• Identifiant CSS : swipe-3

Changer la couleur de l'icône du module Blurb (colonne 1)

Avec la couleur de l'icône du premier module Blurb.

• Couleur de l'icône : #333333

Modifier les liens des deux modules Blurb

Et encore une fois, modifiez les liens de chaque module Blurb en conséquence :

• URL du lien du module : https://www.yourwebsite.com/page/#swipe-2

• URL du lien du module : https://www.yourwebsite.com/page/#swipe-4

Changer le doublon #3

Modifier l'identifiant CSS

Modifiez également l'ID CSS du doublon de la troisième ligne.

• Identifiant CSS : swipe-4

Modifier l'icône du module Blurb (colonne 2)

Et sélectionnez une autre icône pour le module Blurb dans la colonne 3.

Modifier le lien du module Blurb (colonne 2)

Assurez-vous qu'au clic, le visiteur sera redirigé vers la première colonne de section en modifiant l'URL du lien du module en conséquence :

• URL du lien du module : https://www.yourwebsite.com/page/#swipe-1

Cloner la ligne #2 trois fois

Passons à la rangée suivante. Clonez également cette ligne trois fois.

Changer la couleur d'arrière-plan de la ligne du doublon #1

Changez la couleur d'arrière-plan du premier doublon.

• Couleur d'arrière-plan : #dcdced

Changer la couleur d'arrière-plan de la ligne du doublon #2

Le deuxième doublon utilise la couleur d'arrière-plan suivante :

• Couleur d'arrière-plan : #ffeed1

Changer la couleur d'arrière-plan de la ligne du doublon #3

Modifiez également la couleur d'arrière-plan du doublon de la troisième ligne.

• Couleur d'arrière-plan : #d6ffe5

Ajouter un identifiant CSS et un code CSS à la section

Maintenant que nous avons toutes les lignes dont nous avons besoin, nous pouvons faire fonctionner la magie. Ajoutez un identifiant CSS à toute la section. Plus tard dans cet article, nous utiliserons cet ID CSS pour masquer la barre de défilement.

• ID CSS : barre de défilement de section

Ensuite, allez dans les options CSS personnalisées et ajoutez quelques lignes de code CSS à l'élément principal.

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

Plus vous souhaitez créer de colonnes de section, plus vous devrez ajouter de colonnes dans le code CSS. Ainsi, disons par exemple que vous souhaitez avoir la même structure mais autoriser 7 balayages au lieu de 4, vous devrez modifier la ligne de code CSS des colonnes du modèle de grille en conséquence :

grid-template-columns: repeat(7, 100%);

Mais gardez à l'esprit que vous devrez ajouter plus de lignes si vous augmentez le nombre de colonnes. Donc, dans ce cas, si vous voulez que deux lignes apparaissent par colonne de section, vous aurez besoin de 14 lignes.

Masquer la barre de défilement

Vous pouvez également choisir de masquer la barre de défilement en utilisant la section CSS ID et en ajoutant les lignes de code CSS suivantes aux paramètres de la page :

#section-scrollbar::-webkit-scrollbar {
display: none;
}

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Lors de la conception de sites Web avec Divi, la chose la plus simple à faire est de construire vers le bas. Mais ce n'est pas parce que c'est la chose la plus simple à faire que vous êtes limité à cette option. Vous pouvez également créer une page de balayage entièrement horizontale. Dans ce didacticiel, nous vous avons montré comment réaliser une superbe conception Web à balayage horizontal à l'aide de Divi. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!