Création d'une navigation latérale de colonne personnalisée pour les pages d'une page avec Divi

Lorsque vous décidez de créer un one-pager, l'expérience utilisateur de navigation devient totalement différente. Bien que les gens ne soient pas censés quitter la page, vous voulez rendre leur séjour convivial. C'est pourquoi la plupart des one-pagers utilisent des liens d'ancrage dans la page. Vous pouvez placer ces liens d'ancrage dans un menu supérieur traditionnel ou choisir la navigation latérale à la place. Dans ce tutoriel, nous allons vous montrer comment créer un beau design de navigation latérale de colonne pour votre page à l'aide des nouvelles options de colonnes de Divi. Nous allons insérer tous les éléments dans une hauteur de fenêtre de 100 pour créer une expérience en plein écran. Vous pourrez également télécharger le fichier JSON gratuitement !

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

Téléchargez GRATUITEMENT la disposition de navigation latérale de la colonne

Pour mettre la main sur la disposition de navigation côté colonne gratuite, vous devrez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Commençons à recréer !

Abonnez-vous à notre chaîne Youtube

Créer une nouvelle page vierge

La première chose à faire est de créer une nouvelle page vierge. Une fois que vous l'avez fait, passez à Visual Builder.

Ajouter une nouvelle section

Couleur de l'arrière plan

Nous allons intégrer tout le contenu de notre page dans une section, une ligne et deux colonnes. Ajoutez une nouvelle section régulière à votre page avec une couleur d'arrière-plan blanche.

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

Espacement

Supprimez tous les rembourrages supérieur et inférieur par défaut de la section.

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

Ajouter une nouvelle ligne

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 ligne et modifiez les paramètres de dimensionnement en conséquence :

• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %
• Hauteur: 100vh

Espacement

Passez aux paramètres d'espacement et supprimez tous les rembourrages supérieur et inférieur par défaut.

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

Paramètres de la colonne 1

Une fois que vous avez terminé les paramètres généraux de la ligne, ouvrez les paramètres de la colonne 1.

Couleur de l'arrière plan

Ajoutez une couleur de fond blanc.

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

Boîte ombre

Avec une ombre de boîte subtile.

• Position horizontale de l'ombre de la boîte : 80 px
• Force de flou d'ombre de boîte : 75px
• Couleur de l'ombre : rgba(0,0,0,0.07)

Échelle de transformation

Nous réduisons également la taille de la colonne sur le bureau.

• Bas : 75 % (ordinateur de bureau), 100 % (tablette et téléphone)
• À droite : 75 % (ordinateur de bureau), 100 % (tablette et téléphone)

Transformer Traduire

Modifiez ensuite la position de la colonne à l'aide de certains paramètres de traduction de transformation personnalisés.

• Bas : -5vw (ordinateur de bureau), 0px (tablette et téléphone)
• À droite : 0px

Paramètres de la colonne 2

Continuez en ouvrant les paramètres de la colonne 2.

Espacement

Passez à l'onglet Conception et ajoutez les valeurs de remplissage gauche et droite suivantes sur différentes tailles d'écran :

• Rembourrage gauche : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)
• Rembourrage droit : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)

Classe CSS

Plus tard dans la publication, nous ajouterons un défilement fluide et masquerons la barre de défilement. Pour ce faire, nous devrons ajouter une classe CSS personnalisée à la colonne.

• Classe CSS : scroll-column

Visibilité

Les modules que nous ajoutons dans la deuxième colonne représenteront le contenu de notre page. Pour permettre le défilement, nous allons modifier les paramètres de débordement.

• Débordement horizontal : masqué
• Débordement vertical : défilement

Ajouter un module de texte d'élément de menu à la colonne 1

Ajouter une copie

Commençons à ajouter des modules ! Ajoutez un premier élément de menu Module de texte à la colonne 1 avec du contenu de votre choix.

Ajouter un lien

Ajoutez un lien d'ancrage à l'élément de menu.

• URL du lien du module : www.votresite.com/votrepage/#home

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Police du texte : Montserrat
• Alignement du texte : Centre
• Couleur du texte : #383838
• Taille du texte : 3vw
• Espacement des lettres du texte : -3px (ordinateur de bureau), -2px (tablette), -1px (téléphone)

Espacement

Ajoutez ensuite des valeurs de marge supérieure et inférieure personnalisées.

• Marge supérieure : 23vw (ordinateur de bureau), 3vw (tablette et téléphone)
• Marge inférieure : 3vw (ordinateur de bureau), 2vw (tablette), 1vw (téléphone)

Cloner l'élément de menu deux fois

Une fois que vous avez terminé le premier élément de menu, clonez-le deux fois.

Modifier le contenu des deux doublons

Modifiez le contenu de l'élément de menu des deux doublons.

Modifier les liens des deux doublons

Avec les liens d'ancrage.

• Dupliquer 1 : /#à propos
• Duplicata 2 : /#services

Modifier l'espacement des deux doublons

Complétez les doublons en modifiant les valeurs d'espacement en conséquence :

• Marge supérieure : 3vw (ordinateur de bureau), 2vw (tablette), 1vw (téléphone)
• Marge inférieure : 3vw (ordinateur de bureau), 2vw (tablette), 1vw (téléphone)

Ajouter un module diviseur à la colonne 1

Visibilité

Ajoutez un module de séparation juste entre le premier et le deuxième module de texte dans la colonne 1. Assurez-vous que l'option « Afficher le séparateur » est activée.

• Afficher le diviseur : Oui

Ligne

Changez ensuite la couleur de la ligne.

• Couleur de la ligne : #ffebc9

Dimensionnement

Avec les paramètres de dimensionnement.

• Poids du diviseur : 1vw
• Hauteur : 0px

Module diviseur de clone

Clonez le module diviseur et placez le duplicata sous le deuxième module de texte.

Ajouter le module de suivi des médias sociaux à la colonne 1

Ajouter des réseaux sociaux

Le prochain et dernier module dont nous avons besoin dans la colonne 1 est un module de suivi des médias sociaux. Ajoutez les réseaux sociaux de votre choix.

Alignement

Ensuite, allez dans l'onglet conception et modifiez l'alignement du module.

• Alignement du module : Centre

Espacement

Modifiez ensuite les valeurs de marge.

• Marge supérieure : 12vw (ordinateur de bureau), 5vw (tablette et téléphone)
• Marge inférieure : 3vw (tablette et téléphone)

Frontière

Et ajoutez « 50vw » à chacun des coins pour créer une forme circulaire.

Ajouter un module d'image à la colonne 2

Télécharger une image

Passons à la deuxième colonne ! Ajoutez tous les modules que vous souhaitez, mais n'oubliez pas d'ajouter un identifiant CSS à chaque module auquel vous souhaitez qu'un lien d'ancrage se réfère. Si vous souhaitez recréer le design exact qui a été montré dans l'aperçu de cet article, commencez par ajouter un module d'image et téléchargez une image de votre choix.

Alignement

Passez à l'onglet Conception et choisissez l'alignement de l'image à gauche.

• Alignement de l'image : à gauche

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Forcer la pleine largeur : Oui

Espacement

Et ajoutez un bon rembourrage.

• Rembourrage droit : 20vw

Identifiant CSS

Enfin, allez dans l'onglet avancé et ajoutez le premier identifiant CSS. Assurez-vous que cela correspond au lien d'ancrage du premier élément de menu.

• Identifiant CSS : Accueil

Ajouter un module de texte de titre à la colonne 2

Ajouter du contenu H2

Passons au module suivant, qui est un module de texte. Entrez du contenu H2 de votre choix.

Paramètres de texte H2

Passez à l'onglet Conception et modifiez les paramètres de texte H2 en conséquence :

• Police de la rubrique 2 : Montserrat
• En-tête 2 Alignement du texte : à gauche
• Titre 2 Couleur du texte : #383838
• Titre 2 Taille du texte : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)
• Espacement des lettres de l'en-tête 2 : -1px

Espacement

Ajoutez ensuite des valeurs de marge personnalisées.

• Marge supérieure : 6vw (ordinateur de bureau), 10vw (tablette), 12vw (téléphone)
• Marge inférieure : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)

Ajouter le module diviseur à la colonne 2

Visibilité

Le prochain module dont nous avons besoin est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Ligne

Modifiez la couleur de la ligne.

• Couleur de la ligne : #ffebc9

Dimensionnement

Et modifiez les paramètres de dimensionnement en conséquence :

• Poids du diviseur : 15px
• Largeur : 16%
• Alignement du module : à gauche

Ajouter un module de corps de texte à la colonne 2

Ajouter du contenu

Ajoutez un autre module de texte à la deuxième colonne avec du contenu de paragraphe de votre choix.

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Police du texte : Roboto
• Alignement du texte : Justifier
• Couleur du texte : #a8a8a8
• Taille du texte : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Espacement des lettres du texte : 1px
• Hauteur de la ligne de texte : 2 vw (ordinateur de bureau), 3,5 vw (tablette), 4,5 vw (téléphone)

Espacement

Ajoutez ensuite des valeurs d'espacement personnalisées.

• Marge supérieure : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)
• Marge inférieure : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)
• Marge droite : 20vw (ordinateur de bureau et tablette), 5vw (téléphone)

Ajouter un module de bouton à la colonne 2

Ajouter du contenu

Continuez en ajoutant un module de boutons avec une copie de votre choix.

Alignement

Sélectionnez l'alignement du bouton gauche dans l'onglet Conception.

• Alignement des boutons : à gauche

Bouton

Modifiez les paramètres des boutons en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #0072ff
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px
• Police des boutons : Montserrat
• Poids de la police du bouton : semi-gras

Espacement

Et jouez également avec les valeurs d'espacement.

• Marge supérieure : 4vw (ordinateur de bureau), 6vw (tablette), 8vw (téléphone)
• Marge inférieure : 4vw (ordinateur de bureau), 6vw (tablette), 8vw (téléphone)
• Rembourrage supérieur : 1.5vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)
• Rembourrage inférieur : 1.5vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)
• Rembourrage gauche : 3vw (ordinateur de bureau), 6vw (tablette), 8vw (téléphone)
• Rembourrage droit : 3vw (ordinateur de bureau), 6vw (tablette), 8vw (téléphone)

Clonez tous les modules de la colonne 2 deux fois et placez-les dans le même ordre

Une fois que vous avez terminé tous les modules de la colonne 2, vous pouvez les cloner deux fois et les placer dans le bon ordre.

Changer l'ID CSS du module d'image en double #1

Modifiez l'ID CSS du premier module Image en double.

• Identifiant CSS : à propos de

Modifier l'ID CSS du module d'image en double #2

Faites de même pour le deuxième module Image en double.

• Identifiant CSS : services

Masquer la barre de défilement et ajouter un défilement fluide

Ouvrir les paramètres de la page

Maintenant, pour créer un effet de défilement fluide et masquer la barre de défilement de la colonne 2, nous allons ajouter quelques lignes de code CSS. Ouvrez les paramètres de la page.

Ajouter un CSS personnalisé

Ensuite, allez dans l'onglet avancé et ajoutez du code CSS. Une fois que vous avez terminé cette étape, vous avez terminé !

.scroll-column::-webkit-scrollbar {
display: none;
}

.scroll-column {
scroll-behavior: smooth;
}

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

Dans cet article, nous vous avons montré comment créer une belle navigation côté colonne pour votre page d'une page avec les nouvelles options de colonne de Divi. C'est un excellent moyen d'ajouter des liens d'ancrage à votre page qui contribueront à améliorer l'expérience utilisateur de votre site Web. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.