7 techniques pour créer des sites Web audacieux et colorés avec Divi

L'utilisation d'un style de conception audacieux et coloré pour votre site Web est un excellent moyen de faire ressortir votre site Web. Cela vous aidera à apporter une ambiance positive à votre site Web et bien qu'il ne convienne à aucun type de site Web, il convient certainement à beaucoup d'entre eux.

Dans cet article, nous vous montrerons 7 techniques Divi différentes pour créer une conception Web audacieuse et colorée en utilisant uniquement les options intégrées de Divi. Tout d'abord, nous allons passer en revue les différentes techniques et ensuite nous allons recréer un exemple qui correspond à la description.

Il s'agit du dernier article de la série d'articles où nous avons traité 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 !

Abonnez-vous à notre chaîne Youtube

1. 'Transformer' les lignes en sections avec des colonnes

La première technique que vous pouvez utiliser pour créer une conception Web audacieuse et colorée consiste à transformer les lignes en sections. En supprimant tout le remplissage par défaut entre une section et une ligne, vous ne laisserez aucune différence apparente entre les deux. Ceci, combiné à la suppression de la largeur de la gouttière, vous permet d'avoir deux colonnes pressées l'une contre l'autre.

2. Dégradés + Textures d'arrière-plan

L'utilisation d'arrière-plans dégradés sur votre site Web peut donner des résultats étonnants. Mais ce qui vous aide encore plus à renforcer ces couleurs, c'est de les combiner avec un fond texturé. Pour conserver l'équilibre, utilisez cette combinaison pour une seule colonne. Gardez la deuxième colonne propre et légère pour une touche moderne.

3. Couleurs dégradées semi-transparentes + séparateurs de section inférieurs

Après avoir transformé une ligne en section, vous pouvez également ajouter des séparateurs de section à l'arrière-plan de votre colonne. Pour vous assurer que les séparateurs transparaissent, sans chevaucher le contenu, utilisez des dégradés de couleurs légèrement transparents pour votre colonne.

4. Chevauchement de colonnes horizontales de modules

Vous voyez souvent des sites Web utiliser un chevauchement vertical. Le chevauchement horizontal, en revanche, est moins fréquemment utilisé bien qu'il puisse apporter des résultats absolument époustouflants. Pour obtenir ce genre de résultat, il est important de savoir que les éléments de la colonne de droite ont un avantage hiérarchique sur les éléments de la colonne de gauche. Vous ne pouvez pas obtenir le même résultat si vous placez vos éléments dans la colonne de gauche.

5. Divisez la copie pour un alignement parfait

Il n'y a rien de plus satisfaisant que d'avoir un alignement parfait. C'est l'un des principaux principes de conception qui distingue une bonne conception d'une mauvaise conception. Pour vous assurer que cet alignement est parfait lorsque vous chevauchez deux colonnes, essayez de diviser votre copie en différents modules de texte. Cela vous permettra de créer un alignement parfait en faisant en sorte que la marge gauche négative corresponde à ce mot ou à cette phrase en particulier.

6. Combinez les couleurs de texte noir et semi-transparent

Pour ajouter l'aspect gras à votre site Web, utilisez une grande taille de police pour la copie que vous partagez avec un poids de police de texte ultra gras. Et pour équilibrer l'audace, vous pouvez basculer entre l'utilisation d'une couleur de texte noire et une couleur semi-transparente. Cela vous aidera à créer suffisamment de profondeur et de variation sur votre site Web.

7. Évitez l'ombre de la boîte en haut ou en bas pour unir les sections

Vous pouvez facilement unir deux sections sur votre page en jouant avec les options d'ombre de la boîte. Tout d'abord, utilisez une ombre de boîte très subtile. Cela signifie utiliser une force de flou suffisante, une force de propagation négative et une couleur d'ombre de boîte très claire. Une fois que vous avez créé votre ombre de boîte subtile, jouez avec la position verticale. Pour la première section de votre page, assurez-vous de déplacer la position verticale jusqu'à ce que l'ombre de la boîte n'apparaisse pas au bas de votre section. La même chose s'applique à la dernière section, mais à la place, assurez-vous qu'elle n'apparaît pas en haut.

Aperçu

Maintenant que nous avons passé en revue toutes les différentes techniques, il est temps de mettre les choses en pratique. Nous allons recréer le design suivant :

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

Paramètres de section

Diviseur supérieur

Ajoutez une nouvelle page avec une section standard et ouvrez immédiatement les paramètres de la section. La première chose dont nous aurons besoin est un séparateur supérieur :

• Style de séparation : rechercher dans la liste
• Couleur du diviseur : rgba(0,0,0,0.13)
• Hauteur du diviseur : 900px
• Basculement du diviseur : vertical
• Disposition des diviseurs : sous le contenu de la section

Diviseur inférieur

Continuez en ajoutant également un séparateur inférieur similaire.

• Style de séparation : rechercher dans la liste
• Couleur du diviseur : rgba(0,0,0,0.13)
• Hauteur du diviseur : 900px
• Disposition des diviseurs : sous le contenu de la section

Espacement

Ensuite, donnez une marge à la section et supprimez le remplissage par défaut.

• Marge du haut et du bas : 50px
• Marge gauche et droite : 50px
• Rembourrage haut et bas : 0px
• Remplissage gauche et droite : 0px

Coins arrondis

Ensuite, ouvrez les paramètres de bordure et ajoutez des coins arrondis.

• En haut à gauche : 20 pixels
• En haut à droite : 20 pixels

Boîte ombre

Nous utilisons une ombre de boîte subtile en haut de notre section en effectuant les ajustements suivants :

• Position verticale de l'ombre de la boîte : -23px
• Force du flou d'ombre de la boîte: 37px
• Force de propagation de l'ombre de la boîte : -29px
• Couleur de l'ombre : rgba(0,0,0,0.22)
• Position de l'ombre de la boîte : ombre extérieure

Ajouter une nouvelle ligne

Structure des colonnes

Non pas que nous ayons fini de modifier les paramètres de la section, nous pouvons continuer en ajoutant une ligne avec deux colonnes.

Colonne 1 Fond dégradé

Sans ajouter encore de modules, nous allons ouvrir les paramètres de ligne. La première chose que nous devrons faire ici est d'ajouter un fond dégradé à notre première colonne.

• Couleur 1 : rgba (255,191,0,0.76)
• Couleur 2: rgba (153,0,255,0,87)

Image d'arrière-plan de la texture de la colonne 1

Nous allons combiner ce fond dégradé avec un fond texturé. L'image que j'utilise fait partie du pack de mise en page Meetup de Divi. Enregistrez l'image suivante sur votre bureau en cliquant avec le bouton droit de la souris et en l'enregistrant (c'est un fichier png avec des textures blanches, vous ne pourrez pas voir à quoi il ressemble tant que vous ne l'aurez pas ouvert sur votre ordinateur et/ou utilisé sur votre site Web ):

Après avoir téléchargé l'image dans votre médiathèque, assurez-vous de sélectionner également "Ajuster" comme taille de l'image d'arrière-plan de la colonne 1.

Couleur d'arrière-plan de la colonne 2

Ensuite, donnez à votre deuxième colonne la couleur d'arrière-plan '#F7F7F7'.

Dimensionnement

Nous allons "transformer" notre rangée en une section en lui faisant occuper toute la largeur de la section.

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

Espacement

En plus de faire en sorte que la rangée occupe toute la largeur de la section, nous devrons également supprimer le rembourrage supérieur et inférieur de notre section.

• Rembourrage haut et bas : 0px

Ajouter un module diviseur à la colonne 1

Masquer le diviseur

Commençons à ajouter les modules ! La première chose dont nous aurons besoin est un module diviseur dans la première colonne. Nous n'utilisons ce module que pour créer l'espace dont nous avons besoin dans la première colonne. Nous ne voulons pas vraiment qu'il apparaisse. Une fois le module ajouté, assurez-vous de désactiver l'option « Afficher le diviseur ».

Espacement

Accédez ensuite aux paramètres d'espacement et ajoutez le rembourrage personnalisé suivant au séparateur :

• Rembourrage supérieur : 200 pixels (ordinateur de bureau et tablette), 150 pixels (téléphone)
• Rembourrage inférieur : 200 px (ordinateur de bureau et tablette), 150 px (téléphone)

Ajouter le module de texte n° 1 à la colonne 2

Ajouter une copie

Nous pouvons maintenant passer à la deuxième colonne. Ici, nous allons supprimer nos trois modules de texte différents et les faire chevaucher les deux colonnes. Si vous souhaitez qu'un module chevauche deux colonnes ou plus, vous devrez toujours le placer dans la colonne de droite. C'est ainsi que fonctionne la structure hiérarchique. Ajoutez votre premier module de texte et ajoutez une copie.

Paramètres de texte

Ouvrez ensuite les paramètres de texte et appliquez les modifications suivantes :

• Poids de la police de texte : ultra gras
• Style de police de texte : majuscule
• Couleur du texte : #000000
• Taille du texte : 250 px (ordinateur de bureau), 200 px (tablette), 100 px (téléphone)
• Hauteur de la ligne de texte : 0,75 em

Espacement

Nous aurons également besoin de marge. La marge gauche négative que nous utilisons correspond à la copie que nous avons choisie. Si vous souhaitez que cela fonctionne également avec d'autres textes, vous devrez jouer avec cette valeur. Modifiez-le jusqu'à ce que vous voyiez le début d'un caractère s'aligner sur la transition des colonnes.

• Marge supérieure : 200 pixels (ordinateur de bureau), -250 pixels (tablette), -120 pixels (téléphone)
• Marge de gauche : -279 px (ordinateur de bureau), 5 % (tablette et téléphone)

Cloner le module de texte deux fois

Cloner #1

Modifier le texte

Nous avons créé notre premier module de texte et pour gagner du temps, nous allons le cloner deux fois et apporter quelques modifications. La première chose que vous devrez changer sur le deuxième module de texte est la copie.

Changer l'espacement

La copie que nous utilisons ici est différente, ce qui signifie que nous devrons modifier la marge de gauche. Remarquez comment nous utilisons également des nombres décimaux pour aligner parfaitement le module de texte. Débarrassez-vous également de la marge supérieure.

• Marge de gauche : -360.7px (ordinateur de bureau), 5% (tablette et téléphone)

Cloner #2

Modifier le texte

Modifiez également la copie de votre troisième module de texte.

Changer la couleur du texte

Et pour que le design se démarque encore plus, nous allons changer la couleur du texte de ce module en 'rgba(0,0,0,0.19)'.

Changer l'espacement

Nous supprimons la marge supérieure pour ce module et ajoutons une marge inférieure à la place. La marge gauche négative est également différente.

• Marge inférieure : 200px
• Marge de gauche : -410 px (ordinateur de bureau), 5 % (tablette et téléphone)

Ajouter la section standard #2

Paramètres de section

Espacement

Nous avons terminé avec la première section, il est temps de passer à la suivante ! Une fois que vous avez ajouté une nouvelle section standard, ouvrez les paramètres d'espacement et apportez les modifications suivantes :

• Marge du haut et du bas : 50px
• Marge gauche et droite : 50px
• Rembourrage haut et bas : 0px
• Remplissage gauche et droite : 0px

Coins arrondis

Continuez en ajoutant quelques coins inférieurs arrondis :

• En bas à gauche : 20 pixels
• En bas à droite : 20 pixels

Boîte ombre

Ajoutez également une ombre de boîte au bas de la section.

• Position verticale de l'ombre de la boîte : 47 px
• Force du flou d'ombre de la boîte: 37px
• Force de propagation de l'ombre de la boîte : -29px
• Couleur de l'ombre : rgba(0,0,0,0.22)
• Position de l'ombre de la boîte : ombre extérieure

Ajouter une nouvelle ligne

Structure des colonnes

Ensuite, ajoutez une ligne avec trois colonnes à votre nouvelle section.

Dimensionnement

Nous "transformons" également cette ligne en une section :

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

Espacement

Et nous supprimerons le rembourrage supérieur et inférieur par défaut.

• Rembourrage haut et bas : 0px

Ajouter le module Blurb n° 1 à la colonne 1

Choisissez l'icône

Au total, nous aurons besoin de trois modules Blurb. Un pour chaque colonne. Nous commencerons par en ajouter un dans la première colonne et une fois que nous aurons terminé, nous le clonerons et le placerons dans les colonnes restantes. Cela nous fera gagner du temps. Après avoir ajouté le contenu à votre module Blurb, sélectionnez l'icône de votre choix dans les paramètres Image et icône.

Fond dégradé

Nous allons donner l'impression que l'icône chevauche le haut du module Blurb en utilisant un arrière-plan dégradé :

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2: #A21DF9
• Position de départ : 20 %
• Position finale : 20 %

Image de fond de texture

Nous combinons le fond dégradé avec le même fond texturé que nous avons utilisé dans la section précédente.

Paramètres des icônes

Modifiez ensuite les paramètres de l'icône :

• Couleur de l'icône : #000000
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 85 px

Paramètres de texte

Continuez en modifiant le paramètre de texte.

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

Paramètres du texte du titre

Ensuite, nous utiliserons les paramètres suivants pour styliser notre titre de présentation :

• Poids de la police du titre : ultra gras
• Style de police de texte : majuscule
• Taille du texte du titre : 46 px

Paramètres du corps du texte

Et les paramètres suivants pour le corps du texte :

• Poids de la police de caractères : léger
• Taille du corps du texte : 18px

Espacement

Enfin, nous allons donner à notre module Blurb un peu d'espace pour respirer en ajoutant un rembourrage personnalisé :

• Rembourrage supérieur : 50px
• Rembourrage inférieur : 100px
• Remplissage gauche et droit : 50px

Cloner le module Blurb deux fois et le placer dans les colonnes restantes

Cloner #1

Changer l'icône

Lorsque vous avez terminé de modifier le module Blurb, clonez-le deux fois. Après cela, placez les doublons dans les colonnes restantes. Ensuite, ouvrez le module Blurb dans votre deuxième colonne et modifiez l'icône utilisée.

Changer le fond dégradé

Continuez en changeant la deuxième couleur de fond dégradé en « #D47A9A ».

Cloner #2

Changer l'icône

Faites la même chose pour le module Blurb dans la dernière colonne.

Changer le fond dégradé

Pour ce module, nous utilisons à la place '#F3BF3E' comme deuxième couleur d'arrière-plan du dégradé.

Aperçu

Si vous avez suivi chacune des étapes ci-dessus, vous devriez avoir obtenu le résultat suivant sur différentes tailles d'écran :

Dernières pensées

Dans cet article, nous vous avons montré comment créer des sites Web audacieux et colorés en utilisant uniquement les options intégrées de Divi. Tout d'abord, nous avons passé en revue quelques techniques Divi auxquelles vous pouvez vous attaquer et ensuite, nous avons recréé un exemple correspondant à partir de zéro. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!