Créer un tableau de bord de navigateur étonnant avec la nouvelle structure de colonne de Divi

Vous cherchez une nouvelle façon unique de construire votre page d’accueil? La création du tableau de bord du navigateur peut être la direction à suivre. Dans ce tutoriel, nous vous montrerons comment obtenir une belle page de tableau de bord qui peut être utilisée à de nombreuses fins. Que vous vouliez changer la façon dont les gens naviguent sur les pages ou mettre en évidence les services offerts par votre entreprise, la création d’un tableau de bord vous aidera à comprendre exactement ce que vous pensez. Nous n’utilisons que les options intégrées de Divi, et en plus de cela, nous vous fournissons des palettes de couleurs claires et foncées que vous pouvez utiliser. Ce tutoriel s’inspire d’une peinture d’Edoardo mercati.
Allons – y! Aperçu avant d’aller plus loin dans ce tutoriel, regardons les résultats finaux sur différents écrans de taille: Avant de commencer, vous pouvez choisir de créer un tableau de bord léger ou foncé. Les couleurs requises pour chaque Palette sont énumérées ci – dessous. Assurez – vous de fermer ces codes de couleur pour les utiliser une fois le tutoriel terminé. Lorsque vous utilisez une couleur spécifique pour la palette, nous nous référons au numéro de couleur. Couleur claire # 1: # f6f6f6 (arrière – plan de la section) couleur # 2: # FFFFFF (arrière – plan de la colonne) couleur # 3: # 333333 (couleur du texte du titre) couleur # 4: # 000000 (couleur du séparateur) couleur # 5: # 6f6b68 (couleur floue du texte du corps) couleur # 6: # e5e5e5 (colonne d’arrière – plan 2) couleur # 7: # ffffffff (couleur de fond) couleur foncée # 1: # 141414 couleur # 2: # 212121 couleur # 3: # FFFFFF Couleur 4: # FFFFFF Color # 5: # dddddddd Color # 6: # 212121 Color # 7: # 333333 Mutual Color # 7: # 0457ff Color # 8: # cc0432 Color # 9: # 839e00 Color number 10: # c68e00 commençons par créer une nouvelle couleur de fond de section standard, en ajoutant d’abord Une nouvelle section à la page. Ensuite, ouvrez les paramètres
Palette) taille du texte du titre: 32 px Directement sous le module texte du titre, ajoutez un module séparateur avec la couleur suivante: Couleur: couleur # 4 (trouvée dans la palette) Modifier la largeur du séparateur suivant: largeur: 9% Espacement Enfin, ajoutez de l’espace en haut de la zone: remplissage en haut: 20px Ajouter une structure de colonne de ligne # 3 pour partager la fonctionnalité surlignée, sélectionnez la structure de colonne suivante pour la nouvelle ligne: Colonne background ouvre les paramètres de ligne et ajoute les couleurs de fond suivantes à chaque colonne: colonne Background color: Color number 6 (trouvé dans la palette) Augmenter la largeur de la ligne suivante: rendre la ligne pleine largeur: Oui utiliser la largeur personnalisée de la gouttière: Oui largeur de la gouttière: 2 hauteur de la colonne équilibrée: Oui Espacement et ajout de remplissage: remplissage supérieur: 100 Px remplissage inférieur: 100 px Ajoutez le module Blurb à l’icône de la colonne 1 maintenant nous pouvons commencer à ajouter différents modules. Nous commencerons par le module Blurb dans la première colonne. Après avoir ajouté du contenu, sélectionnez l’icône que vous avez sélectionnée. La couleur de fond fournit la couleur de fond du module Blurb après: couleur de fond: couleur # 7 (trouvée dans la palette) Paramètres de l’icône passer à l’onglet conception et modifier les paramètres de l’icône: couleur de l’icône: # FFFFFF icône du cercle: est la couleur du cercle: couleur 7 (trouvée dans la palette) Utiliser la taille de la police de l’icône: est la taille de la police de l’icône: 33px Les paramètres de texte modifient également l’orientation du texte du module Blurb: orientation du texte: Centre Paramètres du texte du titre aller aux paramètres du texte du titre et apporter quelques modifications: poids de la police du titre
: style de police de titre surgras: couleur du texte de titre en majuscules: numéro de couleur 3 (trouvé dans la palette) Paramètres du corps du texte le corps du texte du module Blurb nécessite également d’autres couleurs: couleur du corps du texte: numéro de couleur 5 (trouvé dans la palette) Espacement Enfin, ajoutez quelques paramètres d’espacement personnalisés au module Blurb: remplissage en haut: 50 Px remplissage en bas: 50 Px remplissage à gauche: 30 Px remplissage à droite: 30 px Ajoutez le module bouton – poussoir à l’alignement des boutons de la colonne 1 directement sous le module Blurb, puis ajoutez le module bouton – poussoir. Active ses paramètres et modifie l’alignement des boutons: alignement des boutons: Centre Paramètres du bouton Modifier l’apparence du bouton plus tard: utiliser un style personnalisé pour le bouton: Oui taille du texte du bouton: 15 Px couleur du texte du bouton: couleur No 3 largeur de la bordure du bouton: 0px rayon de la bordure du bouton: 0px poids de la police: style de police super gras: Majuscules Espacement ajouter une marge au bas du module bouton: marge inférieure: 30 px Clonez le module Blurb et le bouton trois fois et placez – le dans les colonnes restantes clonez les deux modules de la première colonne trois fois et placez – les dans les colonnes restantes de la ligne. Modifier les nouvelles icônes de changement de module Blurb changez l’icône de chaque module Blurb dupliqué en une nouvelle icône de votre choix. Changer l’icône Couleur change également la couleur de l’icône. Utilisez les nombres # 8, # 9 et # 10 dans la palette à volonté. Cloner les lignes localiser et cloner les lignes pour afficher toutes les fonctionnalités, pas seulement les fonctionnalités surlignées, nous clonerons les lignes qui contiennent des en – têtes. Ensuite, nous l’avons placé directement sous la dernière ligne que nous avons créée. Localiser et cloner les lignes fait de même pour les lignes qui contiennent le module Blurb mis en évidence. Position e ligne
Placez – le sous un nouveau titre. Modifier la structure des colonnes pour afficher plus de fonctions dans cette ligne, nous changerons la structure des colonnes en 5 colonnes au lieu de 4: Ajouter une couleur de fond de colonne 5 colonnes ajoute également une couleur de fond de colonne à une nouvelle colonne: couleur de fond de colonne: numéro de couleur 6 (trouvé dans la palette) Cloner les modules Blurb et button et les placer dans l’un des modules Blurb dans la ligne clone de la colonne 5, et remplir l’espace en plaçant une copie dans la colonne 5. Il change également l’icône et la couleur de l’icône. Enfin, et ce n’est pas le moins important, clonez ces 5 lignes de colonne pour créer deux lignes qui contiennent toutes les fonctionnalités que vous voulez fournir et vous êtes prêt! Aperçu maintenant que nous avons terminé toutes les étapes, jetons un dernier coup d’oeil aux résultats finaux sur les différents écrans de taille. Le tableau de bord est beau et les utilisateurs peuvent parcourir votre site plus facilement. Dans cet article, nous avons partagé une conception de tableau de bord étonnante avec deux palettes que vous pouvez créer à partir de zéro en utilisant seulement les options intégrées de Divi. Si vous avez des questions ou des suggestions, assurez – vous de laisser un commentaire dans la section commentaires ci – dessous!