6 techniques Divi pour créer un design Web plat avec Divi

La conception Web plate est populaire en raison de ses valeurs fondamentales. Il se concentre sur la convivialité et donne la priorité à l'expérience utilisateur en premier. Cela, combiné à un design élégant et moderne, en fait un bon site Web plat. Chaque élément de conception sur un site Web plat doit être bien pensé avant d'être ajouté à une page. Il devrait également se concentrer sur le fait d'être simple mais beau et engageant en même temps. N'oubliez pas que cela devrait attirer l'attention de vos visiteurs et les rendre curieux de savoir en quoi consiste votre entreprise.

Dans cet article, nous allons partager quelques techniques pour créer un design Web plat avec Divi. Il s'agit du troisième article de la série d'articles où nous gérons 4 styles de sites Web différents et comment les réaliser à l'aide de Divi :

1. Propre et abstrait
2. Minimal
3. Appartement
4. Audacieux et coloré

Allons-y !

1. Gardez la section Hero propre et compréhensible

Comme mentionné dans l'introduction de cet article, la convivialité est un aspect très important du style de conception Web plat. Il vous permet d'aller droit au but et de partager des informations pertinentes avec les visiteurs sans les surcharger. Dans le même temps, vous utilisez une mise en page magnifique qui correspond à l'image de marque de votre entreprise.

Il existe de nombreuses façons de créer des conceptions Web plates, mais ce que j'ai remarqué presque partout, c'est la simplicité de la section des héros. Et un design simple ne veut certainement pas dire ennuyeux. Cela signifie que vous n'avez pas besoin de tourner autour du pot. Vous pouvez aller droit au but sans avoir à exagérer le design que vous créez pour essayer d'impressionner les visiteurs.

2. Mettre l'accent sur les structures en boîte

Une autre caractéristique typique des styles de conception de sites Web plats est l'utilisation de structures en forme de boîte. Si vous connaissez Divi, vous savez que vous pouvez trouver des structures de boîte pratiquement partout dans le constructeur. Ils donnent une certaine structure à votre site Web et vous permettent de construire un cadre à l'avance.

Dans les conceptions plates, les structures en boîte sont généralement soulignées. Cela permet aux gens de naviguer facilement et de trouver ce qu'ils recherchent en un rien de temps.

3. Choisissez 3 couleurs vives

Nous avons mentionné l'utilisation de structures de boîtes et d'une simple section de héros jusqu'à présent. En théorie, cela semble ennuyeux, non? Pour équilibrer ce facteur de convivialité sur votre site Web, vous pouvez lui donner vie en utilisant une palette de couleurs vives. Vous pouvez opter pour deux ou trois couleurs vives qui personnaliseront votre site Web et le feront correspondre aux valeurs de votre entreprise.

4. Utilisez des combinaisons de couleurs dégradées très subtiles

Une autre chose qui peut vous aider à briser le cycle consiste à utiliser des combinaisons de couleurs dégradées très subtiles. Utilisez la même couleur mais une nuance différente pour les deux couleurs de dégradé. L'un d'eux doit être plus brillant tandis que l'autre a une sensation plus profonde. Ils n'apparaîtront pas immédiatement comme un dégradé pour les gens, mais cela contribuera à donner à votre site Web un peu plus de profondeur et de détails.

5. Combinez une police standard avec une famille de polices élégante

Habituellement, de nombreux sites Web utilisent une famille de polices plus élégante pour les titres et une famille standard pour le corps du texte. Pourquoi ne pas changer les choses ? Cela va certainement faire un changement. De plus, les gens ont souvent tendance à sauter les descriptions et à ne lire que les titres. Si c'est le cas, vous voulez que vos titres soient aussi faciles à lire que possible, n'est-ce pas ? Une excellente combinaison de familles de polices utilise Arial pour les titres et Georgia pour le corps du texte. La Géorgie est toujours très lisible, juste un peu plus sophistiquée, et cela donne le contraste nécessaire à votre site Web.

6. Jouez avec les hauteurs

Le dernier des conseils est de jouer avec la hauteur des éléments de conception sur vos pages. Vous seriez surpris de voir à quel point cela peut contribuer à l'apparence générale de votre site Web. Vous conservez toujours la structure de boîte recommandée pour les conceptions plates, mais en même temps, vous offrez également une interaction à vos visiteurs.

Aperçu

Nous avons vu plusieurs techniques dans la partie précédente de l'article, il est maintenant temps de mettre les astuces en pratique. Nous allons créer le résultat époustouflant suivant étape par étape :

Commençons à créer : ajoutez la section standard n° 1

Paramètres de section

Fond dégradé

Commencez par créer une nouvelle page et ajoutez une section à cette page. Sans ajouter de lignes pour le moment, ouvrez les paramètres de la section. Nous utilisons un arrière-plan dégradé subtil avec les paramètres suivants :

• Couleur 1: #5214ff
• Couleur 2: #420fc1
• Type de dégradé : Linéaire
• Direction du gradient : 146 degrés
• Position de départ : 30 %

Espacement

Nous ajoutons également des rembourrages en haut et en bas à notre section :

• Rembourrage supérieur : 55 px
• Rembourrage inférieur : 130px

Ajouter la ligne n° 1

Paramètres de ligne

Structure des colonnes

Continuez en ajoutant votre première ligne. Cette section sera, au total, composée de trois rangées différentes. Pour la première ligne, nous utilisons la structure de colonnes suivante :

Dimensionnement

Ouvrez immédiatement les paramètres de la ligne et activez l'option « Make This Row Fullwidth » dans les paramètres de dimensionnement.

Ajouter un module de texte de titre

Paramètres de texte H1

Nous n'aurons besoin d'ajouter qu'un module de texte H1 à cette ligne. Après avoir ajouté votre contenu (et vérifié qu'il s'agit bien de H1), ouvrez vos paramètres de texte H1 et appliquez les modifications suivantes :

• Police de titre : Arial
• Alignement du texte de l'en-tête : à gauche
• Couleur du texte de l'en-tête : #FFFFFF
• Taille du texte de l'en-tête : 86 px (ordinateur de bureau), 65 px (tablette), 45 px (téléphone)
• Hauteur de la ligne de cap : 1,2 em

Ajouter la ligne n° 2

Paramètres de ligne

Structure des colonnes

Passons à la ligne suivante. Nous utilisons, encore une fois, une ligne avec une seule colonne.

Dimensionnement

Avant d'ajouter des modules, ouvrez vos paramètres de ligne et appliquez les paramètres de dimensionnement suivants :

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

Ajouter un module diviseur

Couleur

Continuez en ajoutant un module diviseur à votre colonne. Nous utilisons '#edf000' comme couleur de séparation.

Dimensionnement

Nous allons ensuite ajuster les paramètres de dimensionnement de notre module diviseur :

• Poids du diviseur : 10px
• Largeur : 64%
• Alignement du module : à droite

Ajouter la ligne n° 3

Paramètres de ligne

Structure des colonnes

Enfin, ajoutez une ligne avec deux colonnes.

Dimensionnement

Ouvrez les paramètres de ligne et activez l'option « Make This Row Fullwidth » dans les paramètres de dimensionnement.

Espacement

Supprimez le remplissage personnalisé de la ligne en ajoutant « 0px » au remplissage supérieur et inférieur.

Ajouter un module de texte de description à la colonne 2

Paramètres de texte

Continuez en ajoutant un module de texte de description à la deuxième colonne en utilisant les paramètres de texte suivants :

• Police du texte : Géorgie
• Couleur du texte : #FFFFFF
• Taille du texte : 27px (ordinateur de bureau), 22px (tablette), 18px (téléphone)
• Hauteur de la ligne de texte : 1,9 em
• Alignement du texte : à droite

Ajouter un module de bouton à la colonne 2

Alignement des boutons

Alignez également votre ligne à droite dans les paramètres d'alignement de votre module de texte.

Paramètres des boutons

Le prochain et dernier module que nous devrons ajouter à notre section héros est un module de bouton. Une fois que vous avez ajouté la copie, appliquez-lui les paramètres de bouton suivants :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 27 px
• Couleur du texte du bouton : #303030
• Couleur d'arrière-plan du bouton : #edf000
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px
• Police des boutons : Géorgie

Ajouter la section standard #2

Paramètres de section

Espacement

Nous pouvons passer à notre deuxième section! Ouvrez les paramètres de la section et utilisez le remplissage suivant :

• Rembourrage supérieur : 155 px
• Rembourrage inférieur : 200px

Ajouter la ligne n° 1

Paramètres de ligne

Structure des colonnes

La première ligne que nous ajouterons contiendra notre cercle rouge. Choisissez la structure de colonne suivante pour votre ligne :

Colonne 1 Fond dégradé

Au lieu de télécharger un module d'image, nous allons utiliser un arrière-plan dégradé radial de la colonne 1. Nous utilisons la couleur rouge dans notre palette de couleurs en combinaison avec une couleur entièrement transparente.

• Couleur 1 : #ff3233
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé de la colonne 1 : radial
• Position de départ de la colonne 1 : 45 %
• Position finale de la colonne 1 : 45 %

Dimensionnement

Continuez en modifiant vos 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

Ajouter un module diviseur

Masquer le diviseur

Pour nous assurer que l'arrière-plan de notre colonne s'affiche, nous allons ajouter un module diviseur à la première colonne. Cependant, nous ne voulons pas que le diviseur apparaisse. C'est pourquoi nous allons désactiver l'option « Afficher le diviseur ».

Espacement

Et pour que l'arrière-plan du dégradé de la colonne soit visible, nous ajouterons la marge suivante au module de séparation :

• Haut : 150 px (ordinateur de bureau), 200 px (tablette et téléphone)
• En bas : 150 pixels (ordinateur de bureau), 200 pixels (tablette et téléphone)

Revenir aux paramètres de ligne

Ajouter un espacement

Nous allons faire en sorte que ce cercle rouge chevauche les deux sections de notre page. Pour ce faire, nous allons rouvrir les paramètres de ligne et ajouter une marge négative :

• Marge supérieure : -350px (ordinateur de bureau), -400px (tablette et téléphone)
• Marge de gauche : -250px (ordinateur de bureau et téléphone), -400px (tablette)

Ajouter la ligne n° 2

Paramètres de ligne

Structure des colonnes

Passons à notre deuxième rangée. Cette ligne contiendra un module de texte de titre et un séparateur. Choisissez la structure de colonnes suivante :

Espacement

Réduisez l'espace créé par cette ligne en utilisant « 0px » pour le rembourrage supérieur.

Ajouter un module de texte de titre

Paramètres de texte H2

Nous pouvons maintenant ajouter nos modules. Commencez par ajouter un nouveau module de texte H2 avec les paramètres de texte suivants :

• Police du titre 2 : Arial
• En-tête 2 Alignement du texte : Centre
• Couleur du texte du titre : #303030
• Titre 2 Taille du texte : 50 px (ordinateur de bureau), 45 px (tablette), 32 px (téléphone)
• Titre 2 Hauteur de ligne : 1,3 em

Ajouter un module diviseur

Couleur

Juste en dessous du module de texte, ajoutez un module de séparation. Cette fois, nous voulons que le diviseur apparaisse. Donnez-lui le code couleur '#5214ff'.

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement de votre module de division :

• Poids du diviseur : 10px
• Largeur : 30%
• Alignement du module : Centre

Ajouter la ligne n° 3

Paramètres de ligne

Structure des colonnes

Il est temps de créer notre dernière ligne en utilisant quatre colonnes.

Copier l'arrière-plan du dégradé de la section

Nous allons utiliser le même fond dégradé que pour la section héros. Donc, pour gagner du temps, nous allons simplement copier ces paramètres.

Coller le fond dégradé dans les colonnes 1 et 3

Et collez-les dans les colonnes un et trois.

Dimensionnement

Accédez ensuite aux paramètres de dimensionnement et faites en sorte que votre ligne occupe toute la largeur de l'écran.

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

Espacement

Nous allons également modifier les paramètres d'espacement :

• Marge supérieure : 100 pixels
• Rembourrage haut et bas : 0px

Ajouter un module de présentation

Sélectionnez l'icône

Maintenant que nous avons terminé avec les paramètres de ligne, nous pouvons commencer à ajouter nos modules ! Nous aurons besoin de quatre modules Blurb, un pour chaque colonne. Au lieu de les créer séparément, nous allons en créer un et le dupliquer par la suite. Une fois que vous avez ajouté votre contenu de présentation, allez-y et sélectionnez une icône de votre choix.

Paramètres des icônes

Ouvrez ensuite les paramètres de votre icône et utilisez la couleur de l'icône '#edf000'.

Paramètres de texte

Continuez en utilisant les paramètres de texte suivants :

• Orientation du texte : Centre
• Couleur du texte : clair

Paramètres du texte du titre

Ouvrez ensuite les paramètres du texte du titre et apportez quelques modifications :

• Police du titre : Arial
• Taille du texte du titre : 31px
• Hauteur de la ligne de titre : 2,6 em

Paramètres du corps du texte

De même, nous allons faire en sorte que le corps du texte corresponde à la mise en page que nous créons :

• Police du corps : Géorgie
• Taille du corps du texte : 18px
• Hauteur de la ligne du corps : 2,2 em

Espacement

Et enfin, pour donner à votre module Blurb un peu d'espace pour respirer, ajoutez le rembourrage personnalisé suivant :

• Rembourrage haut et bas : 50px
• Rembourrage gauche et droite : 20px

Cloner et modifier le module de présentation

Cloner le module Blurb et le placer dans la colonne 2

Clonez le module Blurb que vous venez de créer et placez le doublon dans la deuxième colonne.

Changer l'icône

La première chose que vous devrez changer est l'icône.

Changer la couleur de l'icône

Changez également la couleur de l'icône en '#ff3233'.

Changer la couleur du texte

Puisque nous avons affaire à une couleur d'arrière-plan blanche, vous devrez changer la couleur du texte en « foncé » dans les paramètres du texte.

Espacement

Nous jouons avec la hauteur des modules Blurb pour que tout ressorte un peu plus. Pour ce faire, ouvrez les paramètres d'espacement et utilisez les valeurs de marge supérieure suivantes :

• Marge supérieure : 100 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)

Boîte ombre

Pour couronner le tout, nous ajouterons également une ombre très subtile :

• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte: -10px
• Couleur de l'ombre : rgba(0,0,0,0.11)

Cloner les deux modules Blurb et les placer dans les colonnes restantes

Cloner des modules

Nous avons maintenant nos deux modules Blurb que nous allons réutiliser pour les colonnes restantes. Clonez chacun d'eux une fois.

Placer dans les colonnes 3 et 4

Placez les modules Blurb en double dans la colonne correspondante et le tour est joué !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat final sur différentes tailles d'écran.

Dernières pensées

Dans cet article, nous avons partagé quelques conseils et techniques pour créer un design Web plat avec Divi. La conception Web plate est très populaire de nos jours car elle permet aux visiteurs de naviguer facilement dans les pages et de traiter les informations plus rapidement. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!