Comment créer une page d’accueil de navigation en utilisant Divi

Il y a beaucoup de façons de s’appliquer à votre page d’accueil, mais si vous voulez ajouter une touche supplémentaire à votre site, choisir la page de navigation comme page d’accueil peut être un bon choix. Vous ne le verrez pas souvent pour que vos visiteurs voient clairement ce qu’ils peuvent obtenir de votre site. De plus, il aidera vos visiteurs à naviguer visuellement sur différentes pages remplies de ce que vous offrez. Pour vous montrer comment utiliser Divi de manière élégante, nous avons créé un design que nous allons vous montrer dans cet article comment recréer. Il y aura deux versions; Version Bureau et version pour tablettes et téléphones. Avant d’aller plus loin dans ce tutoriel, regardons les résultats finaux.
Les résultats que nous allons recréer sur le Bureau sont les suivants: Résultats sur les appareils mobiles les résultats sur les appareils mobiles sont légèrement différents comme suit: Comment utiliser Divi pour créer une page d’accueil de navigation Abonnez – vous à notre canal YouTube Recréez la version Bureau nous créerons deux versions de la page de navigation; Version Bureau et tablette et téléphone mobile. De cette façon, nous pouvons nous assurer que la page de navigation est bien affichée sur tous les appareils. Comme d’habitude, nous commencerons par créer une version de bureau. Commencez par créer une nouvelle page et y ajouter une section normale. Dans ce tutoriel, nous n’utiliserons qu’une seule section qui contient toutes les lignes (bureau et déplacement) qui contiennent ce que nous voulons. Cependant, vous pouvez également choisir de diviser la version Bureau et la version mobile en deux parties.
Comme vous pouvez le voir dans l’aperçu des résultats ci – dessus, chaque élément de navigation a plus ou moins le même design, mais avec quelques détails différents. La plupart des paramètres que vous avez annulés pour chaque élément de navigation
Elles sont identiques. C’est pourquoi nous détaillerons comment créer la première ligne, puis comment modifier d’autres éléments de navigation à ajouter à la page. Structure des colonnes d’abord, sélectionnez une colonne pleine largeur pour la ligne que vous venez d’ajouter. Avant d’ajouter un formulaire, nous nous assurerons que les paramètres de ligne sont en place, alors Continuez et ouvrez les paramètres de ligne. Image de fond lorsque vous êtes dans l’onglet contenu, la première chose que nous voulons faire est d’ajouter une image de fond à votre ligne. Nous vous recommandons d’utiliser une image avec une largeur de 1400 Px et une hauteur de 934 Px, car cela donne les meilleurs résultats. De plus, assurez – vous que l’image est réglée pour empêcher la répétition. Aligner puis aller à l’onglet conception et ajouter l’alignement correct à la ligne. Cela crée suffisamment d’espace sur le côté gauche de l’écran pour ajouter des descriptions et des liens. Ensuite, ouvrez la Sous – catégorie taille, activez l’option Utiliser la largeur personnalisée et utilisez la largeur en pourcentage de 100%. L’espacement va de l’avant et nous voulons ajouter un peu d’espace entre chaque élément de navigation, c’est pourquoi nous ajoutons les marges supérieure et inférieure de \
Police de texte: andika poids de la police de texte: taille normale du texte: 13px couleur du texte
(%) Et puis un lien vers les paramètres de texte, Allez à l’onglet conception et appliquez les paramètres suivants au texte de la Sous – catégorie de l’onglet liens: caractères liés: poids des caractères liés andika: styles de caractères liés en gras: majuscules et soulignements styles de soulignement liés: taille du texte lié solide: 100 Px couleur du texte lié: # 000000 Hauteur du fil de raccordement: 1 em Espacement cette forme de texte devrait également apparaître sur le côté gauche de l’écran, c’est pourquoi nous ajoutons l’espacement de gauche. Nous voulons également un espace plus petit entre le module séparateur et le module texte, qui est la position d’entrée de la marge supérieure négative. Pour créer l’alignement horizontal du Centre, nous ajouterons également une marge inférieure. Enfin, nous voulons un fond de gradient plus grand, c’est pourquoi nous utilisons le remplissage en haut et en bas. Marge supérieure: – 33 Px marge inférieure: 250 Px marge gauche: – 20 Px marge supérieure: 80 Px marge inférieure: 80 px Cloner souvent les différents éléments de navigation sur la première page de navigation de ligne de navigation au besoin a 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 de modifier les détails plus tard. Il y a trois choses que vous devez changer. La première chose que vous devez faire pour changer l’arrière – plan de la ligne est de changer l’image de fond de la copie de ligne. Encore une fois, assurez – vous d’utiliser une image avec une largeur de 1400 Px et une hauteur de 943 Px pour de meilleurs résultats. Appuyez sur l’élément de menu modifier le lien pour modifier le formulaire de texte, puis ouvrez l’élément de navigation du formulaire de texte et modifiez le texte avec le lien. Changer l’arrière – plan décoloré en fonction de la longueur du texte Enfin, vous devez également changer l’arrière – plan décoloré
Ce module de texte doit être rempli de \