Comment changer le design d'une lightbox Webflow ?

Tutoriel

December 10, 2022

3 min

H2 Example

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 ;

Ouvrez votre lightbox sur un projet webflow publié (en ligne, même sur une version webflow.io)
Ouvrez l'option "inspecter" de votre navigateur (cmd + option + I sur mac)
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

Co-fondateur

Articles qui devraient vous intéresser

IA agentique vs IA générative : Comprendre les différences fondamentales et leurs applications

Client-First vs Lumos : Quel framework Webflow choisir en 2025 ?

ChatGPT 4o vs Midjourney : quel est le meilleur outil pour générer des images IA ?

Voir tous les articles

Transformez votre site web en un moteur de croissance.

Nous contacter