Comment créer une page d'accueil de navigation avec Divi

Il existe une tonne d'approches que vous pouvez appliquer sur votre page d'accueil, mais si vous souhaitez ajouter cette petite touche supplémentaire à votre site Web, opter pour une page de navigation comme page d'accueil pourrait être la voie à suivre. Vous ne le verrez pas souvent et cela donne à vos visiteurs une vue claire de ce qu'ils peuvent attendre de votre site Web. En outre, cela aidera également vos visiteurs à naviguer visuellement à travers les différentes pages remplies du contenu impressionnant que vous fournissez.

Pour vous montrer comment vous pouvez le faire avec Divi, de manière élégante et élégante, nous avons créé un design que nous vous montrerons comment recréer dans cet article. Il y aura deux versions ; la version de bureau et celle qui convient à la tablette et au téléphone. Avant de plonger dans le didacticiel, jetons un coup d'œil au résultat final.

Résultat sur le bureau

Le résultat que nous allons recréer ressemble à ceci sur le bureau :

Résultat sur mobile

Le résultat sur mobile est légèrement différent et ressemble à ceci :

Comment créer une page d'accueil de navigation avec Divi

Abonnez-vous à notre chaîne Youtube

Recréer la version de bureau

Nous allons créer deux versions de la page de navigation ; une version de bureau et une version pour tablette et téléphone. De cette façon, nous serons sûrs que la page de navigation s'affiche bien sur tous les appareils. Comme d'habitude, nous allons commencer par créer la version de bureau.

Ajouter une nouvelle section

Commencez par créer une nouvelle page et ajoutez-y une section régulière. Pour ce didacticiel, nous n'allons utiliser qu'une seule section qui inclura toutes les lignes avec le contenu dont nous aurons besoin (à la fois pour la version de bureau et la version mobile). Cependant, vous pouvez également choisir de séparer la version de bureau et la version mobile en deux sections.

Recréer la première ligne de navigation

Comme vous pouvez le remarquer dans l'aperçu des résultats ci-dessus, chacun des éléments de navigation a plus ou moins le même design avec des détails différents. La plupart des paramètres de chacun des éléments de navigation que vous souhaitez créer sont les mêmes. C'est pourquoi nous allons vous montrer comment créer la première ligne en détail, puis comment vous pouvez également apporter les modifications aux autres éléments de navigation que vous souhaitez ajouter à la page.

Structure des colonnes

Tout d'abord, choisissez une colonne pleine largeur pour la ligne que vous venez d'ajouter. Avant d'y ajouter des modules, nous allons nous assurer que les paramètres de ligne sont en place, alors allez-y et ouvrez les paramètres de ligne.

Image de fond

Tout en étant dans l'onglet Contenu, la première chose que nous allons faire est d'ajouter une image d'arrière-plan à votre ligne. Nous vous recommandons d'utiliser une image d'une largeur de '1400px' et d'une hauteur de '934px' car cela conduira au meilleur résultat. Assurez-vous également de mettre l'image sur « pas de répétition ».

Alignement

Ensuite, passez à l'onglet Conception et ajoutez un alignement à droite à votre ligne. En faisant cela, vous créerez suffisamment d'espace sur le côté gauche de votre écran pour ajouter la description et le lien.

Dimensionnement

Ensuite, ouvrez la sous-catégorie Dimensionnement, activez l'option « Utiliser la largeur personnalisée » et utilisez un pourcentage de largeur de « 100 % ».

Espacement

Pour continuer, nous voulons ajouter un peu d'espace blanc entre chaque élément de navigation, c'est pourquoi nous allons ajouter une marge supérieure et inférieure de « 5px » à la ligne.

Visibilité

Enfin, nous souhaitons désactiver cette ligne sur le téléphone et la tablette, car nous allons créer une autre ligne qui correspondra à la tablette et au téléphone plus tard dans cet article.

Module de texte pour la description de la page

Paramètres de texte

Une fois les paramètres de ligne définis, vous pouvez ajouter un premier module de texte à la colonne de la ligne et utiliser les paramètres suivants pour la sous-catégorie Texte dans l'onglet Conception :

• Police du texte : Andika
• Poids de la police de texte : régulier
• Taille du texte : 13 pixels
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1,1 em
• Orientation du texte : à gauche

Dimensionnement

Faites défiler vers le bas, ouvrez la sous-catégorie Dimensionnement et ajoutez une largeur de « 18% ». Cette largeur garantira que notre module de texte ne traversera pas l'image d'arrière-plan de notre ligne une fois que nous y ajouterons la marge gauche négative.

Espacement

Comme mentionné à l'étape précédente, nous voulons que le module de texte vienne sur le côté gauche de notre ligne sans chevaucher l'arrière-plan de la ligne. Nous voulons également avoir un peu d'espace entre le haut de l'image de la ligne et le début du module de texte, c'est pourquoi nous utilisons également une marge supérieure.

• Marge supérieure : 150 px
• Marge de gauche : -20px
• Rembourrage supérieur : 10px
• Rembourrage inférieur : 10px

Module diviseur

Visibilité

Ensuite, allez-y et ajoutez un module de séparation juste en dessous du module de texte. Dans la sous-catégorie Visibilité, activez l'option « Afficher le diviseur ».

Couleur

Ensuite, passez à l'onglet Conception et ajoutez « #FFFFFF » comme couleur de séparation.

modes

Pour continuer, choisissez « Solide » comme style de séparation et « Top » comme position de séparation.

Dimensionnement

Enfin, assurez-vous que les paramètres suivants s'appliquent à la sous-catégorie Dimensionnement :

• Poids du diviseur : 5px
• Hauteur : 23px
• Largeur : 47%
• Alignement du module : à gauche

Module de texte pour l'élément de menu

Lier le texte dans la zone de contenu

Une fois que vous avez terminé avec le module diviseur, allez-y et ajoutez un autre module de texte juste en dessous. Ce module de texte sera notre élément de navigation. Ouvrez les paramètres, saisissez le texte et ajoutez-y un lien.

Couleur d'arrière-plan dégradé

Tout en étant toujours dans l'onglet Contenu, utilisez les paramètres d'arrière-plan dégradé suivants :

• Première couleur : #FFFFFF
• Deuxième couleur : rgba (12 113 195 0,62)
• Type de dégradé : Linéaire
• Direction du gradient : 108 deg
• Position de départ : 31 %
• Position finale : 21 %

Paramètres de texte de lien

Ensuite, accédez à l'onglet Conception et appliquez les paramètres suivants à l'onglet Lien de la sous-catégorie Texte :

• Police du lien : Andika
• Poids de la police du lien : gras
• Style de police du lien : majuscule et soulignement
• Style de soulignement du lien : solide
• Taille du texte du lien : 100 pixels
• Couleur du texte du lien : #000000
• Hauteur de la ligne de liaison : 1 em

Espacement

Ce module de texte devra également apparaître sur le côté gauche de l'écran, c'est pourquoi nous ajoutons la marge de gauche. Nous voulons également que l'espace entre le module de séparation et ce module de texte soit plus petit, c'est là que la marge supérieure négative entre. Pour créer cet alignement horizontal central, nous allons également ajouter une marge inférieure. Et enfin, nous voulons que l'arrière-plan dégradé soit plus grand, c'est pourquoi nous utilisons les rembourrages supérieur et inférieur.

• Marge supérieure : -33px
• Marge inférieure : 250px
• Marge de gauche : -20px
• Rembourrage supérieur : 80px
• Rembourrage inférieur : 80px

Cloner la première ligne de navigation autant de fois que nécessaire

Les différents éléments de navigation de votre page de navigation auront plus ou moins les mêmes paramètres. C'est pourquoi nous vous recommandons de cloner la ligne autant de fois que nécessaire et d'apporter les modifications de détail par la suite. Il y a trois choses que vous devrez changer, jetons un coup d'œil.

Changer l'arrière-plan de la ligne

La première chose à faire est de modifier les images d'arrière-plan des doublons de votre ligne. Encore une fois, assurez-vous d'utiliser une image d'une largeur de '1400px' et d'une hauteur de '943px' pour obtenir le meilleur résultat.

Modifier le module de texte pour l'élément de menu

Modifier le lien

Ensuite, ouvrez l'élément de navigation Module de texte et modifiez le texte avec le lien.

Modifier l'arrière-plan du dégradé en fonction de la longueur du texte

Enfin, vous devrez également modifier l'arrière-plan dégradé de ce module de texte. Remplacez la deuxième couleur du dégradé par "rgba (224,43,32,0.62)" et modifiez la valeur de la position de départ en fonction de la longueur de votre nouvel élément de navigation. Si vous avez un élément de navigation assez long, vous souhaiterez modifier le pourcentage de position de départ sur une valeur plus élevée jusqu'à ce qu'il se mette en place.

Recréer la version mobile

Maintenant que nous avons créé la version Desktop, nous allons également créer la version tablette et mobile. Le style des différents modules est à peu près le même que la version de bureau mais en coulisse, la structure de nos lignes est complètement différente. En raison des nombreuses modifications que vous auriez à apporter à chaque module si vous deviez les cloner, je vais simplement vous montrer comment le créer à partir de zéro sans cloner aucun module de la version Desktop.

Recréer la première ligne de navigation

Commencez par ajouter une autre ligne à la section que nous avons créée au début de cet article.

Structure des colonnes

Cette colonne, comme la version de bureau, n'aura également besoin que d'une seule colonne.

Dimensionnement

Le dimensionnement de cette ligne est le suivant :

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

Ces paramètres garantiront que notre ligne occupe toute la largeur de l'écran.

Visibilité

Et enfin, désactivez cette ligne sur le bureau car nous avons d'autres lignes qui seront affichées sur le bureau à la place.

Module de texte pour la description de la page

Paramètres de texte

Allez-y et ajoutez le premier module de texte à la ligne. Faites en sorte que les paramètres suivants s'appliquent à la sous-catégorie Texte :

• Police du texte : Andika
• Poids de la police de texte : régulier
• Taille du texte : 13 pixels
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1,1 em
• Orientation du texte : Centre

Dimensionnement

Ensuite, ouvrez la sous-catégorie Dimensionnement et utilisez une largeur de « 71 % » et un alignement de module central.

Espacement

Enfin, ce module de texte aura besoin d'un rembourrage supérieur et inférieur de « 10px ». Comme vous pouvez le remarquer, il n'y a pas besoin de valeurs de marge dans la version tablette et mobile car nous optons plutôt pour un alignement central.

Module de texte pour l'élément de menu

Lier le texte dans la zone de contenu

Pour la version mobile, nous n'avons pas besoin d'un module diviseur, nous allons donc sauter cette étape. Au lieu de cela, nous allons immédiatement ajouter l'élément de navigation Module de texte juste en dessous du module de texte précédent que nous avons créé. Une fois cela fait, ajoutez le texte avec le lien vers la zone de contenu dans l'onglet Contenu.

Couleur d'arrière-plan dégradé

L'arrière-plan dégradé que nous allons utiliser pour ce module de texte est le même que celui de la version Desktop :

• Première couleur : #FFFFFF
• Deuxième couleur : rgba (12 113 195 0,62)
• Type de dégradé : Linéaire
• Direction du gradient : 108 deg
• Position de départ : 31 %
• Position finale : 21 %

Paramètres de texte de lien

Utilisez les paramètres suivants pour la sous-catégorie de texte :

• Police du lien : Andika
• Poids de la police du lien : gras
• Taille du texte : 65 px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : à gauche

Espacement

Comme la version de bureau, ce module de texte d'élément de navigation aura besoin d'un rembourrage supérieur et inférieur de '80px' pour agrandir l'arrière-plan dégradé.

Module d'images

Télécharger une image

Enfin, ajoutez un module d'image comme dernier module de votre ligne et téléchargez une image de votre choix.

Cloner la première ligne de navigation autant de fois que nécessaire

La même chose compte pour la version mobile ; vous pouvez cloner la ligne que vous venez de créer autant de fois que nécessaire pour ajouter également les autres éléments de navigation. Il y a trois choses que vous devrez modifier chaque fois que vous ajoutez un nouvel élément de navigation, jetons un coup d'œil.

Modifier le module de texte pour l'élément de menu

Modifier le lien

La première chose que vous devrez changer est le texte et le lien dans la zone de contenu de l'onglet Contenu de votre module de texte d'élément de navigation.

Modifier l'arrière-plan du dégradé en fonction de la longueur du texte

Ensuite, vous pouvez également changer la deuxième couleur du dégradé en 'rgba (224,43,32,0.62)' et modifier la valeur de la position de départ en fonction de la longueur de votre texte.

Changer le module d'image

Enfin, vous pouvez également modifier l'image du module Image dans cette ligne.

Résultat

Une fois que vous avez créé à la fois la version de bureau et la version mobile, vous aurez une page de navigation époustouflante qui s'affichera bien sur le bureau, la tablette et le téléphone. Jetons un dernier coup d'oeil au résultat.

Résultat sur le bureau

Résultat sur mobile

Dernières pensées

Créer une page de navigation comme page d'accueil laissera certainement une marque sur vos visiteurs. Non seulement cela aide vos visiteurs à naviguer plus visuellement, mais cela leur permet également de voir un aperçu plus élaboré de ce que votre site Web a à offrir. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image en vedette par LanKogal / shutterstock.com