Comment changer le design d'une lightbox Webflow ?

Tutoriel
December 10, 2022
3 min
Aperçu d'un HTML code embed sur Webflow avec une modification de la classe CSS d'une lightbox
Points clés de l'article

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).

Exemple de code :

<style>
.w-lightbox-backdrop {
  background: rgba(0,0,0,0.1) !important;
  backdrop-filter: blur(10px);
}
</style>
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.

Florian Bodelot
Florian Bodelot
Co-fondateur

Articles qui devraient vous intéresser

A woman speaks on stage at a conference, wearing a headset microphone. Behind her, a large black screen displays the question “What then?” in bold white text.
Evénements
Webflow

Digidop participe à la FLOWconf 2025, le plus grand événement Webflow & marketing d’Europe.

Digidop participe à la FLOWconf 2025, le plus grand événement Webflow & marketing d’Europe.
Aperçu visuel de plusieurs typographies modernes utilisées sur le web en 2025, chacune présentée sur une image de fond inspirante : Editorial New, DM Serif Display, Aeonik, SF Pro Rounded, Rader, Champ, Monument, Canicule, Clash Display, Supply, Agrandir, et d’autres — une composition graphique mettant en avant la diversité typographique.
Documentation
Design

Les 20 meilleures typographies pour un site web moderne et impactant en 2025

Les 20 meilleures typographies pour un site web moderne et impactant en 2025
Mosaic of homepage designs from several Webflow agencies (Digidop, N4, Refokus, Flow Ninja, Tonik, Finsweet, Edgar Allan), showcasing diverse creative approaches and visual identities centered around the Webflow logo.
Storytelling
Webflow

Mon top 7 des meilleures agences Webflow en 2025 (avis d’un fondateur d’agence)

Mon top 7 des meilleures agences Webflow en 2025 (avis d’un fondateur d’agence)

Transformez votre site web en un moteur de croissance.

Nous contacter