8 techniques pour réaliser des designs propres et abstraits avec Divi

Décider du style que vous voulez donner à votre site Web peut prendre beaucoup de temps. Ce n’est pas une surprise si vous considérez tous les styles de design que vous pouvez suivre. Le style que vous choisissez sera une représentation de tout ce que votre site Web représente et vous voulez très certainement qu’il corresponde aux tendances du design en 2018. Dans cette série de posts, nous allons explorer quelques-uns des plus populaires et des plus beaux qui existent :

Propre et abstrait
Minimal
Plat
Audacieux et coloré

Pour chacun de ces styles de design, nous allons passer en revue quelques techniques Divi qui vous permettront d’atteindre ce type de design beaucoup plus facilement. Nous allons commencer par le style de conception propre et abstrait. Nous allons partager 8 techniques que vous pouvez appliquer à vos éléments de conception en utilisant le constructeur visuel de Divi et ensuite, nous allons créer deux exemples étonnants à partir de zéro !

C’est parti !

1. Évitez les couleurs d’arrière-plan de la section principale

Dans la plupart des cas, le terme » propre » signifie également beaucoup de » blanc « . Cela ne veut pas dire que vous devez éviter les couleurs en général, mais éviter les couleurs dans les principaux éléments structurels de votre site Web (comme les sections) peut contribuer grandement à donner aux visiteurs une impression de propreté.

2. Utilisez plutôt des arrière-plans subtils à motifs de rangées

Pour réduire l’impression de blancheur et de propreté de votre section, vous ne devez pas nécessairement vous concentrer sur les paramètres de votre section. Vous pouvez facilement créer un design subtil et abstrait en utilisant des images d’arrière-plan à motifs de rangées, par exemple. Elles ne couvriront que l’arrière-plan de votre rangée et laisseront suffisamment d’espace blanc pour conserver cette impression générale de propreté et de blancheur. Le fond à motifs que vous utilisez doit contenir une couleur de fond blanche et seule une partie de ce fond blanc doit être couverte de motifs. Veillez à ne pas ajouter de motifs aux bordures ou aux coins. Cela permet à vos arrière-plans de rangées et de sections de se fondre. Plus loin dans cet article, dans la partie où nous recréons les exemples, vous pourrez enregistrer l’image du motif et l’utiliser pour vos propres projets de conception Web !

3. Cassez le motif avec les couleurs d’arrière-plan des modules blancs

La hiérarchie de conception que contient Divi (section → rangée → colonne → module) vous permet de faire la même chose avec l’arrière-plan de votre motif de rangée. En utilisant une couleur d’arrière-plan blanche pour les modules de votre choix, vous pouvez remplacer l’arrière-plan du motif de rangée que votre module occupe. Ceci, en combinaison avec une couleur d’arrière-plan de section blanche, vous permet de faire fusionner les arrière-plans des modules et des sections tout en conservant l’arrière-plan de motif de rangée intact pour les autres modules que vous utilisez.

4. Créez un contraste avec les tailles de police

L’utilisation d’une couleur de fond de section blanche signifie que vous devrez chercher des éléments frappants ailleurs. L’une des choses que vous pouvez faire pour attirer l’attention est de créer un contraste dans la taille des polices. Plus la différence de taille entre votre sous-titre et votre titre principal est importante, par exemple, plus votre titre principal sera mis en valeur.

5. Utilisez l’espacement des lettres pour plus d’élégance

Tout comme vous jouez avec les tailles de police, l’utilisation d’un espacement supplémentaire entre les lettres peut donner des résultats étonnants. Cela permet de renforcer le contraste entre les contenus que vous partagez sans avoir à intégrer une palette de couleurs dans votre conception. Comme les tailles de police, il attire l’attention de votre visiteur, mais d’une manière différente de celle des grandes tailles de police.

6. Utilisez des CTA, des séparateurs et des sections vides en dégradé à des fins abstraites

Une autre façon d’équilibrer le design blanc et épuré de votre site Web est d’utiliser les couleurs de façon abstraite. L’utilisation de couleurs dégradées pour vos appels à l’action, vos séparateurs et vos sections vides en combinaison avec des séparateurs de section sont quelques-unes des choses qui vous permettront de créer des résultats étonnants sans perdre le facteur propre et blanc.

7. Créez de la profondeur avec de subtiles ombres portées

En combinaison avec les éléments de design gradient et abstraits dans votre conception Web, un site Web propre nécessite également une certaine profondeur. Il ne s’agit pas d’une profondeur difficile à voir, mais plutôt d’une profondeur subtile qui vous permet de passer à la vitesse supérieure. Les ombres portées subtiles se caractérisent par une force de flou élevée combinée à une faible force d’étalement et à une couleur d’ombre portée claire qui n’attire pas trop l’attention mais renforce plutôt les autres éléments de conception de votre site Web.

8. Chevauchez les éléments de conception avec une marge négative

Nous avons mentionné l’utilisation d’éléments de design en dégradé tels que les séparateurs et les sections vides en combinaison avec des séparateurs de section. Ces éléments sont déjà magnifiques, mais pour rendre votre design plus complexe (dans le bon sens du terme) et plus abstrait, vous pouvez facilement utiliser une marge supérieure négative pour que les différents éléments de votre section se chevauchent. Vous pouvez également modifier cette marge supérieure négative en fonction de l’aspect que vous souhaitez lui donner sur différentes tailles d’écran, que ce soit sur un ordinateur de bureau, une tablette ou un téléphone.

Prévisualisez

Maintenant que nous avons parcouru toutes les techniques Divi, il est temps de les mettre en pratique. Jetons un coup d’œil au design que nous allons recréer sur différentes tailles d’écran tout en gardant les différentes techniques à l’esprit.

Commençons à créer !

Étapes générales

Ajouter une nouvelle section

Nous allons créer deux exemples différents. Ces exemples sont similaires, mais diffèrent par leurs éléments de conception. Pour faciliter le processus, nous allons d’abord passer en revue les étapes générales, puis nous nous concentrerons sur chacun des exemples individuellement. Commencez par ouvrir une nouvelle page en utilisant le Visual Builder de Divi et ajoutez une nouvelle section standard. Cette section contient, par défaut, une couleur d’arrière-plan blanche et c’est ainsi que nous allons la conserver.

Ajouter une nouvelle ligne

Structure de la colonne

Ensuite, ajoutez une ligne à votre section contenant une colonne.

Image d’arrière-plan

Comme indiqué dans l’une des techniques, vous pouvez facilement améliorer l’arrière-plan blanc de la section en utilisant un arrière-plan à motif pour votre ligne. Enregistrez l’image ci-dessous, téléchargez-la et utilisez-la avec les paramètres d’image de fond suivants :

Taille de l’image d’arrière-plan : Fit
Background Image Position : Centre
Répétition de l’image d’arrière-plan : Pas de répétition

Dimensionnement

Ouvrez les paramètres de dimensionnement et activez l’option « Rendre cette rangée pleine largeur ».

Ajouter le module de texte #1

Couleur de fond

Maintenant, commençons à ajouter des modules ! Nous allons commencer par un sous-titre et, comme mentionné dans la technique numéro 2, nous allons briser le modèle pour ce module en utilisant une couleur de fond blanche.

Paramètres du texte

Ouvrez ensuite vos paramètres de texte et appliquez les changements suivants :

Poids de la police du texte : Gras
Style de la police du texte : Majuscules
Couleur du texte : #000000
Taille du texte : 18px
Espacement des lettres du texte : 29px (tablette), 25px (tablette), 18px (téléphone)
Orientation du texte : Centre

Espacement

Pour créer un espace entre le début du motif et notre module de texte, nous allons ajouter 100px à la marge supérieure de notre module de texte.

Ajouter le module de texte n°2

Paramètres du texte

Juste en dessous du module de texte précédent, allez-y et ajoutez-en un nouveau contenant le titre que vous voulez afficher. Ouvrez les paramètres de texte de votre module et apportez les modifications suivantes :

Poids de la police du texte : Ultra Gras
Couleur du texte : #000000
Taille du texte : 200px (Desktop), 130px (Tablet), 100px (Phone)
Espacement des lettres du texte : -6px
Hauteur de la ligne de texte : 1em

Ajouter un module de bouton

Alignement des boutons

Le troisième et dernier module de notre rangée est un module de bouton. Après l’avoir ajouté, allez dans les paramètres d’alignement et utilisez l’alignement du bouton central.

Paramètres des boutons

Pour modifier l’apparence de votre bouton, ouvrez les paramètres du bouton et appliquez les modifications suivantes :

Utiliser des styles personnalisés pour le bouton : Oui
Taille du texte du bouton : 16px
Couleur du texte du bouton : #FFFFFF
Couleur du dégradé #1 : #fd5056
Dégradé de couleur #2 : #bd3cb5
Direction du dégradé : 153deg
Largeur de la bordure du bouton : 0px
Rayon de la bordure du bouton : 54px
Poids de la police : Ultra gras
Style de la police : Majuscules

Espacement

Pour créer un CTA lisible et attrayant, il est important de donner à votre bouton un espace suffisant. Ouvrez les paramètres d’espacement de votre bouton et appliquez la marge et le remplissage personnalisés suivants :

Marge supérieure et inférieure : 100px
Rembourrage supérieur et inférieur : 15px
Rembourrage gauche et droit : 40px

Ombre de la boîte

Enfin, nous allons créer de la profondeur (comme mentionné dans la technique numéro 7) pour créer un design attrayant :

Intensité du flou de l’ombre portée : 80px
Force d’étalement de l’ombre portée : -7px
Couleur de l’ombre de la boîte : rgba(0,0,0,0,0.34)

Exemple 1 : Étapes supplémentaires

Ajouter une nouvelle rangée

Structure des colonnes

Maintenant que nous avons parcouru les étapes générales, créons individuellement les deux exemples différents. Pour le premier exemple, commencez par ajouter une nouvelle ligne à la même section avec la structure de colonne suivante :

Dimensionnement

Ouvrez les paramètres de votre ligne et permettez à vos modules de ligne d’occuper toute la largeur de votre écran en utilisant les paramètres de dimensionnement suivants :

Rendre cette rangée pleine largeur : Oui
Utiliser une largeur de gouttière personnalisée : Oui
Largeur de la gouttière : 1

Ajouter un module de séparation

Ajouter et masquer le séparateur

Ajoutez un module de séparation à votre rangée et désactivez l’option « Afficher le séparateur » dans les paramètres de visibilité de l’onglet Contenu.

Arrière-plan en dégradé

Nous allons plutôt utiliser un fond dégradé pour notre séparateur :

Couleur dégradée #1 : #fd5056
Couleur dégradée #2 : #bd3cb5
Direction du dégradé : 168deg

Espacement

Pour que le module de séparation chevauche la rangée précédente et ses modules, nous allons utiliser ‘-400px’ pour la marge supérieure.

Opacité

Et pour que le module de texte du titre de notre rangée précédente soit toujours visible, nous allons ajuster l’opacité dans les paramètres des filtres à 43 %.

Ombre portée

Enfin, nous allons appliquer une ombre portée subtile pour renforcer la profondeur de notre conception :

Intensité du flou de l’ombre portée : 80px
Force d’étalement de l’ombre de la boîte : 3px
Couleur de l’ombre de la boîte : rgba(0,0,0,0,0.49)

Exemple n° 2 : Étapes supplémentaires

Modification de l’espacement du module de texte n° 1

Pour le deuxième exemple, nous devrons apporter quelques modifications à nos modules existants, en commençant par le premier module de texte. Ouvrez ses paramètres d’espacement et ajoutez la marge personnalisée suivante :

Marge inférieure : 150px (téléphone)

Modifier l’espacement du module de texte n° 2

Ouvrez ensuite le deuxième module de texte et utilisez les paramètres d’espacement suivants :

Marge inférieure : 150px (Tablet & Phone)

Modifiez la couleur du texte du bouton

Ensuite, ouvrez le module du bouton et changez la couleur du texte en ‘#bd3cb5’.

Supprimez l’arrière-plan dégradé du bouton

Allez-y et supprimez l’arrière-plan dégradé de votre module bouton.

Ajouter la couleur d’arrière-plan du bouton

Ajoutez une couleur d’arrière-plan blanche à la place.