# Configurer les points de rupture du widget

{% hint style="success" %}
**Type d'accès**: Widgets - Éditeur
{% endhint %}

Un point de rupture responsive est une largeur d'écran spécifique où la mise en page du widget changera afin de mieux s'adapter à l'appareil sur lequel il est affiché. Dans cet article, nous expliquerons comment modifier un widget existant afin que sa mise en page s'ajuste en fonction de la taille de l'écran.

Cliquez **Widgets** dans le panneau de gauche et sélectionnez l' **Modifier** icône en ligne avec le nom d'un widget.

<figure><img src="https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FVl9fnpSzpTNYbK0LRSRW%2FScreenshot%202026-02-18%20at%2010.08.07%E2%80%AFAM.png?alt=media&#x26;token=29ebf0d6-3354-46e7-a1d8-057d9db45da0" alt="" width="563"><figcaption></figcaption></figure>

Accédez à la barre d'outils d'aperçu du widget pour sélectionner le [appareil](https://docs.didomi.io/moIvfcA7NSpjmwGZ7dzv/fr/widgets/apercu-du-widget#device-preview) pour lequel vous ajustez la mise en page du widget. Le point de rupture pour chaque taille d'écran est hérité de la [prévisualisation de la marque](https://docs.didomi.io/moIvfcA7NSpjmwGZ7dzv/fr/widgets/apercu-du-widget#brand-preview) dans l'éditeur de widget.

{% hint style="warning" %}
**Remarque**: Bien que cette étape ne soit pas requise pour configurer correctement un point de rupture de widget, elle permettra à votre organisation de visualiser comment votre configuration affecte le design de votre widget pour cette taille d'écran.&#x20;
{% endhint %}

<figure><img src="https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FlgrEXLgXeDKinIq7e6vl%2FScreenshot%202026-02-24%20at%2010.36.42%E2%80%AFAM.png?alt=media&#x26;token=2a956ef6-0a6d-4a64-8fd7-473fce2dde02" alt="" width="563"><figcaption></figcaption></figure>

Sélectionnez un composant dans la fenêtre d'aperçu du widget. Une fois le composant sélectionné, accédez au panneau de droite et cliquez sur l'onglet **Style** .&#x20;

<figure><img src="https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FRbACBYXFEZYUcHdKQfwR%2FScreenshot%202026-02-24%20at%2011.00.50%E2%80%AFAM.png?alt=media&#x26;token=67a0aca6-618c-4c71-aeb7-a879bb99aba6" alt="" width="563"><figcaption></figcaption></figure>

Utilisez le **Points de rupture** menu déroulant pour sélectionner un point de rupture spécifique que vous souhaitez configurer.&#x20;

<figure><img src="https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FMbaHVdUA4lrC6ilSQRRW%2FScreenshot%202026-02-24%20at%2011.04.11%E2%80%AFAM.png?alt=media&#x26;token=cae0d40d-ca34-4d48-bdbc-e3ff0931ea99" alt="" width="337"><figcaption></figcaption></figure>

Avec le point de rupture sélectionné, développez l'accordéon **Global** et utilisez les champs fournis pour modifier le style du widget pour le point de rupture.

<figure><img src="https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FKbX3G8dE2dmW6dRwhTXE%2FScreenshot%202026-02-24%20at%201.35.53%E2%80%AFPM.png?alt=media&#x26;token=2deee28d-1eae-4973-b5bf-e8f63a05dc86" alt="" width="328"><figcaption></figcaption></figure>

Répétez autant que nécessaire pour d'autres composants dans chaque couche du widget.