Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Comment changer le design d'une lightbox Webflow ?

Florian Bodelot
Florian Bodelot
December 11, 2022
Aperçu d'un HTML code embed sur Webflow avec une modification de la classe CSS d'une lightbox

Les lightbox dans Webflow sont très pratiques, mais il est "impossible" nativement de personnaliser leurs designs. Découvrez dans ce tutoriel comment changer le design par défaut d'une lightbox dans Webflow avec un peu de code CSS.

Pour le tutoriel, nous allons modifier l'overlay utilisé en background-color (couleur d'arrière plan) et le passer d'un noir transparent, à un fond blanc avec un effet flouté.

Personnaliser une Lightbox en quelques étapes

1. Trouver la classe que vous souhaitez modifier

Pour identifier facilement la classe CSS que vous souhaitez modifier ;

  1. Ouvrez votre lightbox sur un projet webflow publié (en ligne, même sur une version webflow.io)
  2. Ouvrez l'option "inspecter" de votre navigateur (cmd + option + I sur mac)
  3. Trouver le nom de la classe CSS que vous ciblez
Inspection d'un code CSS d'un site webflow sur google chrome

2. Ajouter un embed code

Ajouter (le plus haut possible) dans votre navigator un élément Embed Code Webflow

Ajout d'un élément Embed Code sur Webflow

3. Définir des nouveaux style CSS à la classe CSS ciblée Lightbox

Puis, intégrez dans cet embed code les nouveaux styles que vous souhaitez définir à votre lightbox Webflow. Pour l'exemple, nous souhaitons changer la couleur de fond de la lightbox, nous changeons donc les valeurs définies à la classe CSS  .w-lightbox-backdrop (créé par défaut par Webflow).

Modification du background-color et ajout d'un effet blur (floue) CSS code
Modification du background-color et ajout d'un effet blur (floue)

⚠️ Pour être certain que la valeur soit bien prioritaire, et prise en compte par les navigateurs, il est important d'ajouter à la fin de vos styles CSS la valeur "!important;". Cela "force" le passage de cette configuration CSS pour votre lightbox webflow.

Envie d'en apprendre plus sur Webflow ?

📚 Découvre plus de 300 tutoriels sur notre blog

🍿 Suis-nous sur notre chaîne Youtube

🎓 Forme toi gratuitement sur la Digidop Académie

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions