Utilisation des nouveaux paramètres de filtre de colonne de Divi pour créer de superbes effets de mélange

Les nouveaux paramètres de filtre de colonne de Divi peuvent être utilisés de nombreuses manières créatives. Dans cet article, nous allons vous montrer comment mélanger une image d'arrière-plan de la ligne principale avec le contenu de la colonne. Nous ajouterons différents dégradés de couleurs aux modules et un mode de fusion « écran » en colonne pour créer un effet époustouflant. Nous espérons que cette conception vous inspirera à utiliser les modes de fusion de colonnes dans votre prochain projet Divi. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la disposition des modes de fusion des colonnes

Pour mettre la main sur la disposition gratuite des modes de fusion de colonnes, vous devez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Commençons à recréer !

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section avec une ligne à 3 colonnes

Commencez la conception en ajoutant une nouvelle section avec une rangée de trois colonnes.

Espacement des sections

Ouvrez les paramètres de la section et ajustez l'espacement.

• Marge gauche et droite : 3vw
• Rembourrage haut et bas : 84px

Paramètres de ligne

Fond

Avant d'ajouter des modules, nous allons modifier les paramètres de ligne. Commencez par ajouter une couleur de fond.

• Couleur de fond : gris moyen #c4c4c4

Ensuite, téléchargez une image d'arrière-plan et mélangez la couleur d'arrière-plan avec l'image à l'aide d'un mode de fusion.

• Mélange d'images d'arrière-plan : multiplier

Dimensionnement

Ajustez les paramètres de dimensionnement de la ligne suivante.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser la hauteur de la colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Supprimez également le remplissage de ligne par défaut.

• Rembourrage haut et bas : 0px

Boîte ombre

Continuez en ajoutant une simple ombre de boîte à la ligne.

• Box Shadow : première option

Visibilité

Ajustez l'index Z dans l'onglet visibilité.

• Index Z : 1

Colonne de style 1

Entrez les paramètres de la première colonne.

Filtres

Appliquez un mode de fusion d'écran à la colonne dans l'onglet Filtres.

• Mode de fusion : écran

Échelle de transformation de survol

Entrez dans le groupe d'options de transformation et modifiez les paramètres d'échelle de transformation en survol.

• Échelle de transformation : 105 % sur les axes x et y

Visibilité

Entrez dans l'onglet visibilité de la colonne et ajustez les paramètres de débordement.

• Débordement horizontal : Visible
• Débordement vertical : visible

Transitions

Passez à l'onglet transitions et ajustez la durée de la transition pour créer une transition en douceur.

• Durée de transition : 500 ms

Ajouter un module de texte à la colonne 1

Chaque colonne contient trois modules de texte. Ajoutez un premier module de texte à la colonne 1 avec du contenu H2 de votre choix et ajustez les paramètres comme suit.

Fond

Donnez du style à l'arrière-plan avec un dégradé de couleurs.

• Arrière-plan : Dégradé
• Dégradé de couleur un : #5498ff
• Dégradé de couleur deux : #16fff3
• Direction du gradient : 235 degrés
• Position de départ : 37 %

Espacement

Ajoutez ensuite des valeurs d'espacement personnalisées.

• Rembourrage supérieur et inférieur : 6vw
• Rembourrage gauche et droit : 3vw

Texte d'en-tête

Saisissez les paramètres de texte d'en-tête et stylisez les paramètres de texte H2 en conséquence :

• Titre 2 Poids de la police : Ultra gras
• Titre 2 Style de police : TT
• Titre 2 Couleur du texte : Noir #oooooo
• Titre 2 Taille du texte :
  • Ordinateur de bureau : 5vw
  • Tablette : 11vw
  • Téléphone : 13vw
• En-tête 2 Hauteur de ligne :
  • Ordinateur de bureau : 4.3vw
  • Tablette : 9vw
  • Téléphone : 10.5vw

Filtres

Passez aux paramètres des filtres et ajoutez un mode de fusion d'écran.

• Mode de fusion : écran

Ajouter le 2e module de texte à la colonne 1

Continuez en ajoutant le deuxième module de texte à la colonne 1 avec du contenu de paragraphe de votre choix.

Stylisez le module de texte comme suit :

Fond

Ajoutez une couleur de fond blanc.

• Couleur de fond : Blanc #ffffffff

Texte

Entrez dans l'onglet conception et ajustez le texte en conséquence :

• Police du texte : Montserrat
• Alignement du texte : justifié
• Couleur du texte : gris foncé #333333
• Taille du texte:
  • Ordinateur de bureau : 0.8vw
  • Tablette : 2vw
  • Téléphone : 2.5vw
• Espacement des lettres du texte : -0.04vw
• Hauteur de la ligne de texte :
  • Ordinateur de bureau : 2,7 vw
  • Tablette : 5.5vw
  • Téléphone : 6vw

Espacement

Ajustez également les paramètres d'espacement pour créer un espace vide autour du texte.

• Marge supérieure et inférieure : 0.5vw
• Rembourrage supérieur et inférieur :
  • Ordinateur de bureau : 5vw
  • Tablette + Téléphone : 15vw
• Rembourrage gauche : 5vw
• Rembourrage droit :
  • Ordinateur de bureau : 5vw
  • Tablette + Téléphone : 25vw

Filtres

Enfin, appliquez un mode de fusion d'écran dans l'onglet Filtres.

• Mode de fusion : écran

Ajouter le 3e module de texte à la colonne 1

Pour compléter la conception de la colonne, ajoutez un troisième module de texte avec une copie CTA. Nous utilisons tout ce module comme un bouton.

Stylisez le module comme suit :

Ajouter un lien

Ajoutez un lien de votre choix dans les paramètres du lien. Dès que quelqu'un clique n'importe où sur le module, il sera redirigé ailleurs.

Fond

Stylisez le dégradé d'arrière-plan pour qu'il corresponde au premier module de texte.

• Arrière-plan : Dégradé
• Couleur de dégradé de fond un : #5498ff
• Couleur de dégradé de fond deux : #16fff3
• Direction du gradient : 235 degrés

Texte

Entrez dans l'onglet Conception et stylisez le texte comme suit :

• Police du texte : Montserrat
• Poids de la police de texte : lourd
• Style de police de texte : souligné
• Couleur de soulignement du texte : blanc #ffffff
• Couleur du texte : Noir # 000000
• Taille du texte:
  • Ordinateur de bureau : 1.5vw
  • Tablette : 3,3 vw
  • Téléphone : 4vw
• Hauteur de la ligne de texte : 1 em

Espacement

Ajustez les paramètres d'espacement pour que le texte s'intègre mieux dans le module.

• Rembourrage supérieur et inférieur :
  • Ordinateur de bureau : 2vw
  • Tablette : 6vw
  • Téléphone : 9vw
• Rembourrage gauche : 3vw

Dupliquer la 1ère colonne deux fois

Une fois que vous avez terminé la première colonne, ouvrez les paramètres de ligne et supprimez les deuxième et troisième colonnes. Ensuite, dupliquez la première colonne deux fois. Bien sûr, nous devrons apporter quelques modifications aux modules des colonnes 2 et 3.

Colonne 2 / Module de texte 1 Contexte

• Couleur de dégradé de fond un : #c870ff
• Couleur de dégradé de fond deux : #ff355a

Colonne 2 / Module de texte 2 Boîte Ombre

• Box Shadow : sixième option
• Force du flou d'ombre de la boîte: 20px
• Force de propagation de l'ombre de la boîte: 17px
• Couleur de l'ombre de la boîte : rgba (225,33,255,0,06)

Colonne 2 / Module de texte 3 Contexte

Ajustez le dégradé d'arrière-plan du troisième module de texte pour qu'il corresponde au premier module.

• Couleur de dégradé de fond un : #c870ff
• Couleur de dégradé de fond deux : #ff355a

Colonne 3 / Module de texte 1 Contexte

Passons à la troisième colonne ! Modifiez l'arrière-plan dégradé du module de texte 1 en conséquence :

• Couleur de dégradé de fond un : #ff4800
• Couleur de dégradé de fond deux : #fc9a2a

Colonne 2 / Module de texte 3 Contexte

• Couleur de dégradé de fond un : #ff4800
• Couleur de dégradé de fond deux : #fc9a2a

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.

Bureau

Mobile

C'est un Wrap

Dans cet article, nous vous avons montré comment créer un design à trois colonnes avec un effet de mélange époustouflant à l'aide des paramètres de colonne de Divi. Nous avons combiné les paramètres de module, de colonne et de ligne pour obtenir un résultat magnifique que vous pouvez utiliser sur n'importe quel site Web que vous créez. Nous espérons que ce didacticiel vous inspirera également pour créer vos propres conceptions alternatives. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!