Découvrez les bons plans & les réductions Alpa14

Divi Supreme : Créez une bannière Pro avec des images flottantes

Alpa14 les tutoriels faciles !

Catégories

Designez votre bannière de site comme un Pro avec le module Floating Multi Images de Divi Supreme !

Dans ce tutoriel WordPress, je vous présente un des nombreux modules de Divi Supreme, le très bon plugin pour le Visual Builder de Divi d’Elegant Themes. Ce module est intitulé Floating Multi Images et permet d’ajouter et d’agencer des images avec un effet très sympa de flottement comme si les images étaient en apesanteur ! Dans ce tuto, j’ utilise cet effet pour créer et mettre en avant la bannière principale d’un site et je vous explique comment paramétrer facilement ce module.
Bon visionnage à toutes et à tous ! ?

Code Promo Divi Supreme
Licence Divi
.

Création de la structure de la bannière

Tout d’abord, créez une nouvelle section et une rangée à 2 colonnes équivalentes. Placez ensuite votre rangée en haut de page.

Dans les paramètres de la section, dans l’onglet « Contenu » puis dans « Fond », ajoutez une image de fond à votre section (3ème onglet). L’image de fond devra être optimisée et avoir une largeur d’au moins 1920 pixels. Toujours dans l’image de fond, descendez et allez sur « Fondu de l’image de Fond  » et choisissez « Multiplié », vous allez pouvoir ajouter un filtre sur votre image afin que votre texte de titre ressorte mieux.
Allez ensuite dans la couleur de fond ou dégradé et définissez la couleur de votre filtre. Vous pourrez jouer sur la tirette de droite pour ajouter de la transparence à votre couleur ou à votre dégradé.

Ajoutez ensuite de la marge interne à votre section dans Style > Espacement afin d’augmenter la hauteur de votre section.
Il est possible d’ajouter également un séparateur à votre section pour en améliorer l’esthétique dans Style > Séparateur.

Insertion des modules de la rangée

Allez ensuite dans les paramètres de votre rangée. Dans la colonne de gauche de votre rangée, insérez un module Texte. Dans l’onglet « Contenu » entrez votre texte pour votre titre, donnez lui le caractère de H1.
Vous pouvez ajouter aussi un sous-titre dans l’espace de texte. Allez ensuite dans l’onglet Style pour styliser votre texte selon vos goûts.

Vous pouvez ensuite si vous le souhaitez ajouter un module bouton sous votre module Texte.

Insérez ensuite dans la colonne de droite de votre rangée le module Divi Supreme « Floating Multi Images ».

Code Promo Divi Supreme
Ajouter un filtre à l'image de fond de la section
Insertion module Divi Supreme Floating Multi Images

Paramétrer le module Floating Multi Images de Divi Supreme

  1. Ajoutez vos images dans l’onglet « Contenu » (Ajouter un nouvel article). Il est possible comme dans notre exemple d’utiliser des images au format PNG à fond transparent, ainsi vous n’aurez pas de contour de l’image, ce qui peut-être intéressant.
    Si vous ne savez pas comment créer une telle image, je vous invite à regarder cet autre tutoriel vidéo où je vous explique comment procéder.
  2. Cliquez sur les paramètres de chaque image (Image Item)
  3. Rendez-vous ensuite à chaque fois dans l’onglet « Style » partie « Dimensionnement ». C’est ici que vous allez pouvoir positionner votre image en jouant sur les tirettes « Horizontal Align » (Alignement horizontal) et « Vertical Align » (Alignement Vertical).
    Avec la tirette « Largeur Maximale » qui est réglée par défaut à 50%, vous allez pouvoir jouer sur l’échelle de l’image en la diminuant ou en l’agrandissant.
  4. Pour terminer, il vous est possible d’ajouter un effet de flou sur les images placées en second plan afin de renforcer (en plus de la taille) cet effet de profondeur. Pour cela, toujours dans l’onglet « Style » du paramétrage de chaque image, allez dans « Filtre » puis au bas de cette partie, utiliser la tirette « Résumé » pour ajouter plus ou moins de flou.

A noter que lorsque vous aurez terminé de paramétrer vos images en vue ordinateur, il faudra vérifier l’aspect de votre bannière sur les 2 autres vues (tablette et téléphone) et au besoin ajuster.

Pour vérifier ces 2 autres vues, cliquez sur le disque violet (avec les 3 points blancs) au bas de votre écran et cliquez à gauche sur les icônes correspondantes pour modifier la vue.

Vues Divi : ordinateur, tablette, téléphones
MailerLite free-trial
Presto Player lecteur vidéo WordPress
Floating Multi Image, Insérer une image
Accéder aux paramètres de l'image
Floating Multi Images - Placer les images
Floating Multi Image, ajoute du flour
Licence Divi

Vous serez peut-être intéressé par les articles suivants :

Divi Supreme : Module Text Path

Divi Supreme : Module Text Path

Divi Supreme possède un excellent nouveau module intitulé Text Path qui vous permet de créer de magnifiques chemins de texte. Avec ce module, vous pouvez facilement créer des motifs et des dessins complexes dans votre texte.

lire plus
Tutoriel Divi Supreme : Module Content Toggle

Tutoriel Divi Supreme : Module Content Toggle

Changer de contenu en activant simplement un interrupteur sur votre site Divi ? C’est possible grâce au module Content Toggle de Divi Supreme Pro l’excellent plugin pour Divi. Cette fonction peut être très utile dans bon nombre de cas.

lire plus