Comment créer une page d'accueil de navigation par icônes réactive avec Divi

Lorsque vous créez un site Web avec WordPress, vous pouvez toujours choisir la page qui vient en premier lorsque les gens visitent directement votre site Web. La plupart des créateurs de sites Web renvoient immédiatement les visiteurs vers leur page d'accueil. Mais vous pouvez également choisir une autre approche qui permet aux visiteurs de choisir la page de votre site Web à laquelle ils accèdent en premier en ajoutant une page de navigation par icônes comme page d'accueil. Une fois que les gens auront cliqué sur la page de leur choix, ils auront à nouveau l'expérience normale du site Web avec une barre de menu en haut de la page qui leur permet de naviguer vers d'autres pages. Cela signifie qu'ils n'auront pas à revenir à cette page de navigation par icônes une fois qu'ils l'auront passée après la première interaction.

Dans ce didacticiel, nous allons vous montrer comment créer une page d'accueil de navigation par icônes moderne et 100% réactive qui s'adaptera à toutes les tailles d'écran. Nous vous aiderons également à en faire la page d'accueil de votre site Web et à supprimer la barre de menu principale et le pied de page lors de la première interaction.

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.

Créer une nouvelle page

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle page

Commencez par ajouter une nouvelle page à votre site WordPress.

Donnez un titre à votre page et publiez-la

Donnez un titre à votre page et publiez-la immédiatement.

Définir la page comme page d'accueil

Accédez aux paramètres de lecture du site Web

Ensuite, allez dans les paramètres de lecture de votre site Web.

Définir une nouvelle page comme page d'accueil

Ici, nous allons sélectionner la nouvelle page de navigation par icônes comme page d'accueil de notre site Web.

Masquer la barre de menu principale et le pied de page sur la page de navigation des icônes

Retournez à la page de navigation des icônes et activez le constructeur visuel de Divi

Maintenant que nous avons sélectionné la page d'accueil, nous pouvons commencer à créer notre page de navigation par icônes. Revenez sur la page que vous avez créée et basculez vers le Visual Builder de Divi.

Une fois cela fait, vous aurez trois possibilités. Vous pouvez commencer à créer à partir de zéro, choisir une mise en page prédéfinie ou cloner une page existante. Choisissez la première option.

Ajouter CSS personnalisé pour masquer la barre de menu principale et le pied de page sur cette page uniquement

Comme il s'agit d'une page de navigation, nous souhaitons que l'accent soit mis sur les éléments de menu que nous créons manuellement. C'est pourquoi nous masquerons la barre de menu principale et le pied de page sur cette page. Une fois que les gens continuent sur le site Web, ils récupèrent la barre de menu principale et le pied de page.

#main-header, #main-footer {
display: none;}

Commençons à concevoir !

Ajouter la section #1

Commençons à créer notre responsive design avec Divi ! Ajoutez la première section régulière.

Ajouter une rangée

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 activez l'option « Make This Row Fullwidth » dans les paramètres de dimensionnement.

• Faire cette ligne en pleine largeur : Oui

Ajouter un module d'images

Télécharger le logo de l'entreprise

Le premier module dont nous avons besoin dans cette rangée est un module Image. Téléchargez le logo de votre entreprise pour que les gens sachent qu'ils ont atterri sur le bon site Web.

Alignement

Ensuite, modifiez l'alignement de l'image dans l'onglet Conception. Assurez-vous de désactiver l'option "Toujours centrer l'image sur mobile".

• Alignement de l'image : à gauche

Espacement

Ajoutez ensuite une marge inférieure personnalisée.

• En bas : 10vw (ordinateur de bureau), 20vw (tablette et téléphone)

Ajouter un module de texte

Ajouter du contenu H1

Le prochain module dont nous avons besoin est un module de texte. Ajoutez du contenu H1 de votre choix.

Paramètres de texte H1

Continuez en modifiant les paramètres du texte H1 dans l'onglet conception.

• Police de titre : Didact Gothic
• Poids de la police d'en-tête : gras
• Alignement du texte de l'en-tête : à gauche
• Couleur du texte de l'en-tête : #333333
• Taille du texte du titre : 5vw (ordinateur de bureau), 6vw (tablette), 7vw (téléphone)
• Hauteur de la ligne de cap : 0,8 em

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Largeur : 68 % (ordinateur de bureau), 80 % (tablette), 88 % (téléphone)
• Alignement du module : à gauche

Ajouter un module diviseur

Visibilité

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

• Afficher le diviseur : Oui

Couleur

Ensuite, allez dans l'onglet conception et changez la couleur de l'icône.

• Couleur : #333333

Dimensionnement

Modifiez également les paramètres de dimensionnement du module.

• Poids du diviseur : 10px
• Largeur : 8 % (ordinateur de bureau), 20 % (tablette), 25 % (téléphone)
• Alignement du module : à gauche

Ajouter la section #1

Passons à la section suivante ! Ajoutez une section régulière en dessous de la précédente.

Ajouter une rangée

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section.

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez 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

Ensuite, accédez aux paramètres d'espacement et effectuez quelques modifications sur différentes tailles d'écran.

• Rembourrage inférieur : 0.2vw
• Rembourrage gauche : 4vw (ordinateur de bureau), 2vw (tablette), 1vw (téléphone)
• Rembourrage droit : 25vw (ordinateur de bureau), 2vw (tablette), 1vw (téléphone)
• Remplissage de droite de la colonne 1 : 0.2vw
• Remplissage gauche de la colonne 2 : 0.1vw
• Remplissage droit de la colonne 2 : 0.1vw
• Remplissage gauche de la colonne 3 : 0.2vw

CSS personnalisé

Nous nous assurons que toutes les colonnes apparaissent les unes à côté des autres, même sur tablette et téléphone, en ajoutant une seule ligne de code CSS à l'élément principal de l'onglet avancé.

display: flex;

Ajouter le module Blurb à la colonne 1

Ajouter un titre

Nous pouvons maintenant commencer à ajouter nos modules ! Ajoutez un nouveau module Blurb à la première colonne et entrez un titre.

Sélectionnez l'icône

Ensuite, sélectionnez une icône de votre choix.

Relier

Ajoutez également un lien vers le module. Assurez-vous d'utiliser la bonne URL qui renverra les visiteurs vers la page qu'ils souhaitent visiter.

• URL du lien du module : https://www.yourwebsite.com/homepage

Fond dégradé

Ajoutez ensuite un arrière-plan dégradé.

• Couleur 1 : #4b42ff
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 60 %
• Position finale : 60 %

Image de fond

Avec une image de fond. Enregistrez l'image suivante sur votre bureau :

Et utilisez-le en combinaison avec les paramètres d'arrière-plan suivants :

• Position de l'image d'arrière-plan : Centre
• Répétition de l'image d'arrière-plan : aucune répétition

Paramètres des icônes

Continuez en modifiant les paramètres de l'icône dans l'onglet Conception.

• Couleur de l'icône : #ffffff
• Placement de l'icône : en haut
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police des icônes : 4vw (ordinateur de bureau), 6vw (tablette), 8vw (téléphone)

Paramètres du texte du titre

Modifiez également les paramètres du texte du titre.

• Police du titre : Didact Gothic
• Alignement du texte du titre : Centre
• Couleur du texte du titre : #ffffff
• Taille du texte du titre : 2vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)
• Espacement des lettres du titre : -2px
• Hauteur de la ligne de titre : 0em

Espacement

Et ajoutez des valeurs de remplissage haut et bas personnalisées pour les différentes tailles d'écran.

• Rembourrage supérieur : 9vw (ordinateur de bureau et tablette), 12vw (téléphone)
• Rembourrage inférieur : 9vw (ordinateur de bureau et tablette), 12vw (téléphone)

Cloner le module Blurb deux fois et placer les doublons dans les colonnes restantes

Une fois que vous avez terminé de modifier le module Blurb dans la colonne 1, vous pouvez continuer et cloner le module deux fois. Placez les doublons dans les colonnes restantes de la ligne.

Modifier le contenu de la présentation

Bien sûr, vous devrez changer les titres de chaque doublon.

Changer les icônes de présentation

Avec les icônes.

Modifier les liens de présentation

Associez les nouveaux modules Blurb à une URL unique qui mène à la bonne page.

• URL du lien du module : https://www.yourwebsite.com/about

Modifier les arrière-plans dégradés Blurb

Ensuite, changez les premières couleurs des arrière-plans dégradés des deux doublons.

• Couleur 1 : #f9f9f9

• Couleur 1 : #ff445d

Changer les couleurs des icônes et du texte du module Blurb dans la colonne 2

Et faites correspondre les couleurs de l'icône et du texte du module Blurb avec la nouvelle couleur d'arrière-plan dégradé.

• Couleur de l'icône : #000000
• Couleur du texte du titre : #000000

Cloner la ligne entière

Une fois que vous avez terminé la ligne, vous pouvez la cloner entièrement.

Cloner le module Blurb dans la colonne 2

Clonez le module Blurb dans la colonne 2.

Placez les modules de flou d'arrière-plan clair dans la colonne 1 et la colonne 3

Et placez les modules Blurb à fond clair dans les colonnes 1 et 3.

Placez le module Blurb de couleur d'arrière-plan dans la colonne 2

Déplacez l'un des modules Blurb à fond de couleur vers la deuxième colonne.

Supprimer le module Blurb restant

Et supprimez le module Blurb restant.

Modifier le contenu de la présentation

Encore une fois, vous devrez changer les titres de chaque module Blurb.

Changer les icônes de présentation

Avec les icônes.

Modifier les liens de présentation

Et les liens aussi.

• URL du lien du module : https://www.yourwebsite.com/shop

Modifier l'arrière-plan dégradé du module Blurb dans la colonne 2

Enfin, modifiez la première couleur de l'arrière-plan dégradé du module Blurb dans la colonne 2.

• Couleur 1 : #000000

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.

Dernières pensées

Dans cet article, nous vous avons montré comment créer une page de navigation par icônes et l'utiliser comme page d'accueil. Cette approche permet à vos visiteurs de choisir la page vers laquelle ils naviguent avant de voir le contenu du site Web. Une fois que quelqu'un a cliqué sur un élément de menu, il retrouvera la navigation normale dans la barre de menu principale. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!