8 techniques pour créer des sites Web minimaux avec Divi

Les sites Web minimaux sont devenus très populaires au cours des dernières années. Ils vous permettent de vous concentrer sur le fait de donner à vos visiteurs une sensation de fraîcheur et de propreté lors de la navigation. Le style de conception Web minimal est influencé par le style de design d'intérieur scandinave. Vous avez sûrement vu des photos de salons scandinaves partout sur Internet. En réduisant le mobilier et en utilisant des couleurs majoritairement blanches ou grises, la lumière et la sérénité sont libres d'entrer dans la pièce. C'est exactement ce que font également les sites Web minimaux. Ils s'efforcent de donner à vos visiteurs un sentiment de calme afin qu'ils puissent se concentrer sur le contenu que vous apportez sans être submergés.

Il s'agit d'un deuxième article de la série d'articles où nous traiterons 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. Moins c'est plus

La première chose que vous devez garder à l'esprit lors de la création d'un site Web minimal est d'essayer de réduire les éléments de conception que vous utilisez sur votre site Web. Plutôt que d'en utiliser plus, essayez de tirer le meilleur parti des quelques éléments que vous utilisez.

Vous seriez surpris de tout ce que vous pouvez retirer de votre conception en ajustant vos éléments de conception de manière à ce qu'ils deviennent complémentaires. L'utilisation de moins d'éléments sur votre site Web vous permet également de garder une vue d'ensemble et de transmettre votre message de manière plus cohérente et plus claire.

2. La marge et le rembourrage sont vos meilleurs amis

Les sites Web minimaux ont généralement beaucoup d'espaces blancs. Les espaces blancs sur vos pages et vos publications permettent aux visiteurs de respirer tout au long de leur visite sur votre site Web. Ils procurent un sentiment de sérénité et vous permettent de vous concentrer sur le contenu que vous souhaitez partager.

La meilleure façon d'ajouter des espaces à votre site Web est d'utiliser des couleurs d'arrière-plan blanches et/ou gris clair en combinaison avec un rembourrage et/ou une marge supplémentaires. N'ayez pas peur de jouer avec les différentes valeurs pour voir quel résultat en découle.

3. Utilisez une couleur d'accent

Si vous souhaitez que votre site Web soit aussi minimal que possible, vous devez également éviter d'utiliser trop de couleurs différentes. Soyez aussi neutre que possible en utilisant beaucoup de blanc et de gris. Utilisez des couleurs plus foncées pour votre contenu écrit. Et pour rendre votre design un peu plus audacieux, choisissez une couleur d'accent. Cette couleur sera généralement la même que celle que vous utilisez dans votre logo.

4. Soit des images, soit des illustrations – pas les deux

En général, il est recommandé de choisir entre des images ou des illustrations réelles lorsque vous créez votre site Web. Utiliser les deux en même temps peut vraiment compliquer votre site Web et mélanger différents styles de site Web, ce que vous voulez absolument éviter.

Il y a une exception cependant. N'hésitez pas à utiliser des images en combinaison avec des illustrations d'icônes dans vos modules Blurb par exemple. S'ils sont minimes et prennent en charge le contenu de votre page, vous êtes prêt à partir.

5. Envisagez d'utiliser des modules de texte au lieu de modules de boutons pour les CTA

Avez-vous déjà essayé d'utiliser un module de texte au lieu d'un module de bouton ? Vous devriez certainement. Bien que les modules de boutons vous fournissent la plupart des options auxquelles vous êtes habitué dans Visual Builder, ils ont tendance à ajouter des bordures de tous les côtés de votre bouton. Avec un module de texte, vous pouvez éviter cela. Vous pouvez simplement rendre votre copie cliquable et ajouter une bordure inférieure comme vous pouvez le voir dans l'écran d'impression ci-dessous.

6. Les séparateurs peuvent aider à équilibrer les espaces blancs

Si vous souhaitez ajouter une touche moderne à votre site Web, vous devez absolument essayer d'utiliser plusieurs séparateurs sur votre site Web et les styliser pour qu'ils correspondent au reste de votre mise en page.

Ils ont tendance à connecter différents éléments de conception les uns aux autres et à créer un résultat cohérent.

7. Utilisez des formes simples et subtiles

C'est l'un de mes préférés. Parfois, nous avons tendance à négliger les fonctionnalités auxquelles nous sommes le plus habitués, comme les arrière-plans dégradés. Bien sûr, utiliser une image d'arrière-plan a son charme, mais avez-vous déjà essayé d'utiliser un arrière-plan dégradé radial de manière subtile ? Il permet à vos visiteurs de se concentrer sur vos titres et vous aide à déclencher des actions.

8. Utilisez des animations subtiles (si elles sont nécessaires)

Enfin, un site Web minimal s'améliore généralement encore lorsqu'il utilise des animations subtiles. Et quand nous disons subtil, nous voulons dire vraiment subtil. Vous seriez surpris de la fluidité d'un effet en réduisant simplement l'intensité de l'animation de manière drastique. Tant que l'animation est subtile, vous pouvez l'ajouter à n'importe quel élément et cela n'affectera pas la lisibilité et l'expérience utilisateur de votre site Web.

Aperçu

Maintenant que nous avons passé en revue toutes les techniques, commençons à les mettre en pratique. Nous allons recréer l'exemple suivant étape par étape :

Commençons à créer : ajoutez une nouvelle section standard

Paramètres de section

Espacement

Pour créer l'exemple ci-dessus, nous aurons besoin de deux sections au total. Commençons par ajouter le premier à une page nouvelle ou existante et y ajouter l'espacement suivant :

• Rembourrage haut et bas : 50px

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne contenant une colonne.

Fond dégradé de colonne

Ouvrez les paramètres de cette ligne et ajoutez-y l'arrière-plan dégradé de la colonne suivante :

• Couleur n°1 : #ffffff
• Couleur #2 : #efefef
• Type de dégradé de colonne : radial
• Direction radiale du poteau : centre
• Position de départ de la colonne : 40 %
• Position de fin de colonne : 40 %

Dimensionnement

Ensuite, augmentez la largeur de la ligne en apportant les modifications suivantes aux paramètres de dimensionnement :

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

Espacement

Enfin, ajoutez également l'espacement suivant à votre ligne :

• Rembourrage haut et bas : 0px
• Remplissage du haut et du bas des colonnes : 250 px
• Remplissage de la colonne à gauche : 150 px (ordinateur de bureau), 20 px (tablette), 0 px (téléphone)

Premier module de texte

Paramètres de texte

Une fois que vous avez modifié vos paramètres de ligne, vous pouvez commencer à ajouter les modules dont vous avez besoin. Nous commencerons par une brève description du module de texte en utilisant les paramètres de texte suivants :

• Poids de la police de texte : demi-gras
• Style de police de texte : majuscule
• Espacement des lettres du texte : 8px

Animation

Nous ajoutons également des animations très subtiles à cette mise en page, en commençant par ce module de texte. Ouvrez les paramètres d'animation et ajoutez l'animation suivante :

• Style d'animation : diapositive
• Direction de l'animation : à droite
• Intensité de l'animation : 5%

Deuxième module de texte

Paramètres de texte H1

Juste en dessous du module de texte précédent, continuez et ajoutez un module de texte H1 contenant les paramètres de texte H2 suivants :

• Police de titre : Géorgie
• Couleur du texte du titre : #666666
• Taille du texte de l'en-tête : 78 px (ordinateur de bureau), 50 px (tablette), 40 px (téléphone)
• Espacement des lettres d'en-tête : 3px

Espacement

Nous allons créer l'espace autour de ce module en utilisant les paramètres d'espacement suivants :

• Marge supérieure et inférieure : 100px
• Marge de gauche : 100 pixels (ordinateur de bureau et tablette), 20 pixels (téléphone)
• Rembourrage gauche : 40 px

Frontière

Nous aurons également besoin d'une bordure gauche, alors allez-y et ajoutez une bordure gauche avec les paramètres suivants :

• Largeur de la bordure gauche : 6 px
• Couleur de la bordure gauche : #d67787

Module de texte de bouton

Ajouter un lien

Au lieu d'utiliser un module de bouton, nous utilisons un module de texte auquel nous ajouterons un lien. Ajoutez votre CTA et un lien dans la zone Contenu.

Paramètres de texte de lien

Ensuite, appliquez les paramètres de texte de lien suivants à votre module de texte :

• Poids de la police du lien : semi-gras
• Style de police du lien : italique et majuscule
• Alignement du texte du lien : à gauche
• Couleur du texte du lien : #666666
• Espacement des lettres des liens : 8px

Dimensionnement

Puisque nous utiliserons une bordure inférieure, plus tard, nous réduirons également la largeur de ce module de texte :

• Largeur : 46%
• Alignement du module : à gauche

Espacement

Et pour nous assurer que la bordure inférieure n'est pas trop proche de notre texte, nous ajouterons également un rembourrage inférieur « 10px ».

• Rembourrage inférieur : 10px

Frontière

Nous pouvons maintenant procéder à l'ajout d'une bordure inférieure en utilisant les paramètres suivants :

• Largeur de la bordure inférieure : 1px
• Couleur de la bordure inférieure : #666666

Animation

Nous ajoutons également une animation subtile :

• Style d'animation : diapositive
• Direction de l'animation : à droite
• Délai d'animation : 100 ms
• Intensité de l'animation : 5%

Ajouter un module diviseur

Visibilité

Le dernier module dont nous aurons besoin dans cette rangée est un module diviseur. Assurez-vous de laisser l'option « Afficher le diviseur » activée.

Couleur

Nous utilisons la même couleur pour ce séparateur que pour la bordure gauche du module de texte du titre : '#d67787'.

Dimensionnement

Ouvrez ensuite les paramètres de dimensionnement et modifiez le poids du diviseur en « 2px ».

Espacement

Nous allons pousser le module diviseur vers la droite en utilisant les paramètres d'espacement suivants :

• Marge de gauche : 200px
• Marge droite : -100px

Animation

Enfin, nous inclurons l'animation suivante :

• Style d'animation : diapositive
• Direction de l'animation : Gauche
• Délai d'animation : 150 ms
• Intensité de l'animation : 5%

Ajouter une deuxième section standard

Paramètres de section

Espacement

Nous avons terminé avec la première section, nous pouvons donc maintenant aller de l'avant et ajouter une nouvelle section juste en dessous de la précédente. Ouvrez les paramètres de la section et ajoutez-y la marge suivante :

• Marge du haut et du bas : 80px

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une ligne avec la structure de colonnes suivante :

Dimensionnement

Ensuite, ouvrez les paramètres de ligne et augmentez la largeur de votre ligne à l'aide des paramètres suivants :

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

Espacement

Nous devrons également ajouter du remplissage de la colonne 2 :

• Remplissage gauche de la colonne 2 : 100 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)

Ajouter un module d'image à la colonne 1

Télécharger une image

Nous pouvons maintenant commencer à ajouter des modules à nos deux colonnes. Commencez par ajouter un module d'image à votre première colonne et téléchargez une image de votre choix.

Espacement

Nous allons augmenter la largeur du module Image en ajoutant une marge de droite négative :

• Marge droite : -100px

Boîte ombre

Nous utiliserons également l'ombre de boîte suivante pour créer un élément de conception supplémentaire sur la page :

• Position horizontale de l'ombre de la boîte : 100px
• Position verticale de l'ombre de la boîte : 100px
• Force de propagation de l'ombre de la boîte : -14px
• Couleur de l'ombre : #efefef

Cloner le module de texte du bouton et placer sous le module d'image

Localiser et cloner le module de texte du bouton

Nous allons réutiliser les trois modules de texte de la première section en commençant par le bouton Module de texte. Allez-y et clonez-le.

Placer sous l'image

Ensuite, placez-le juste en dessous du module image dans la première colonne.

Cloner le premier module de texte dans la première section et le placer dans la colonne 2

Localiser et cloner le module de texte

Le prochain module de texte dont nous aurons besoin est le premier de notre section. Allez-y et clonez celui-ci également.

Placer dans la colonne 2

Au lieu de le placer dans la première colonne, déposez-le dans la seconde.

Cloner le module de texte du titre et le placer dans la colonne 2

Localiser et cloner le module de texte

Enfin, nous allons également réutiliser le titre Text Module.

Placer dans la colonne 2

Après l'avoir cloné, placez-le dans la deuxième colonne de votre nouvelle ligne.

Changer le contenu en H2

Changez le contenu de votre zone de contenu en H2.

Paramètres de texte H2

Ensuite, ajoutez les paramètres suivants à vos paramètres de texte H2 :

• Police de la rubrique 2 : Géorgie
• Titre 2 Couleur du texte : #666666
• Titre 2 Taille du texte : 58px
• Espacement des lettres de l'en-tête 2 : 3px

Ajouter un module de texte de description

Paramètres de texte

Sous le titre Text Module, nous allons ajouter une description Text Module avec les paramètres de texte suivants :

• Poids de la police de texte : léger
• Espacement des lettres du texte : 1px

Dimensionnement

Allez-y et modifiez la taille de ce module de texte :

• Largeur: 70%
• Alignement du module : à droite

Ajouter le module diviseur #1

Visibilité

Le prochain module dont nous aurons besoin est un module diviseur. Assurez-vous que l'option Afficher le diviseur est activée.

Couleur

Changez la couleur de votre intercalaire en '#666666'.

Espacement

Ajoutez de l'espacement ensuite :

• Marge supérieure : 100 pixels
• Marge de gauche : 400 pixels (ordinateur de bureau), 300 pixels (tablette), 200 pixels (téléphone)
• Marge droite : -100px

Animation

Et bien sûr, nous allons également utiliser une animation subtile :

• Style d'animation : diapositive
• Direction de l'animation : Gauche
• Intensité de l'animation : 5%

Ajouter le module diviseur #2

Visibilité

Enfin, nous allons ajouter un autre module diviseur. Encore une fois, assurez-vous que l'option Afficher le diviseur est activée.

Couleur

Changez la couleur de votre séparateur en '#d67787'.

Dimensionnement

Utilisez « 2px » pour le poids du diviseur.

Espacement

Et ajoutez les paramètres d'espacement suivants :

• Marge de gauche : 200 px (ordinateur de bureau et tablette), 150 px (téléphone)
• Marge droite : -100px

Animation

Pour finir, ajoutez une subtile animation à votre intercalaire :

• Style d'animation : diapositive
• Direction de l'animation : Gauche
• Délai d'animation : 100 ms
• Intensité de l'animation : 5%

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é quelques excellentes techniques Divi pour créer des sites Web minimaux. Ceci est le deuxième article de la série sur la façon de créer de beaux styles de design en utilisant votre créativité et certaines des meilleures options intégrées de Divi. Dans les prochains articles, nous partagerons des techniques pour obtenir des styles de conception plus époustouflants. Si vous avez des questions ou des suggestions, assurez-vous de laisser une section de commentaires ci-dessous!