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

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é aussi par…

Hébergements web, quels sont les différents types ?

Hébergements web, quels sont les différents types ?

Quels sont les différents types d’hébergements proposés pour un site Internet ?  Mon hébergement est-il adapté à mon trafic web ? Ce sont des questions de ce type que l’on se pose lorsque l’on veut créer un site Internet et le mettre en ligne.

read more
Installer WordPress : Où et Comment ?

Installer WordPress : Où et Comment ?

Ce tutoriel WordPress est destiné aux débutants qui veulent créer un site web WordPress mais qui ne savent pas vraiment par où commencer.
Si c’est votre cas, ce tutoriel est pour vous ! Je vous explique ici où et comment installer facilement WordPress. Je vous présente o2switch  l’hébergeur français de qualité.

read more

Les bons plans Alpa14 😉

👉 Divi : Le meilleur Thème et Page Builder WordPress, -10% sur votre licence ! 💗
👉 Divi Supreme : Décuplez la puissance de Divi, 49 nouveaux modules de qualité, -10% avec le code promo « Alpa14 » 💗
👉 o2switch : L’hébergement français mutualisé de qualité (5€HT/mois en illimité + nom de domaine compris)
👉 Hostinger : Les hébergements mutualisés, VPS et Cloud de qualité. Tarifs compétitifs. -7% avec le code « ALPA14 » 💗
👉 Amelia : Le plugin de bookink (Prise de rendez-vous et réservations) avec modules Divi ! -10% avec le code Promo « E96DB94C » ! 💗
👉 Presto Player
: Le meilleur lecteur vidéo pour votre site WordPress !
👉 Wondershare Filmora X : Le montage vidéo facile, faites jouer votre imagination !
👉 ThriveCArt : Offre spéciale, paiement en 1X. Placez des paniers où vous voulez et déployez des tunnels de vente en quelques clics !
👉 Bunny.net : Hébergez vos vidéos sur une plateforme performante aux tarifs hyper compétitifs !
👉 LearnDash : Le meilleur plugin LMS, commencez dès aujourd’hui à créer et à vendre vos cours sur votre site WordPress !
👉 Canva : Collaborez et créez d’incroyables designs Gratuitement
👉 Thinkific : Créez & vendez vos formations, 1 mois gratuit en formule Pro
👉 Inleed : L’hébergeur suédois performant et de qualité 

👉 Semrush : la meilleure boîte à outils SEO, 14 jours gratuits
👉 MailerLite : L’email marketing simple et efficace, formule gratuite + 30 jours gratuits toutes options
👉 duoLogo : Réalisez un logo pro, formule gratuite
👉 Invideo : Créez des vidéos marketing, -25% sur toutes les offres
👉 Private Internet Access
: Un VPN de qualité, protégez votre connexion Internet

 

👁️ Pour une totale transparence, les liens de ce site sont des liens affiliés, en les utilisant, vous m’offrez une commission sur la vente et votre geste sympa compensera les nombreuses heures de travail à concevoir ces tutoriels. Merci ! 🙂🙏.
Veuillez noter que jamais vous ne paierez plus cher que directement sur le site de l’éditeur. Voire parfois moins cher 👍.

0 Comments

Submit a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *