Documentation – Création d’un bloc de rupture

Étape 1 : Créer la structure de base

1. Ajouter un conteneur avec une disposition "1 Row x 1 Column" compatible desktop, mobile et tablette.

2. À l’intérieur du conteneur, insérer un composant Full Banner.

3. Définir une background image sur le Full Banner :

    Une image principale pour desktop

    Une image mobile facultative si nécessaire

4. Ajouter un lien cliquable sur le Full Banner si requis.

Si vous créez une rupture double en dehors de la grille produit, ne pas ajouter de lien dans le Full Banner.

Étape 2 : Ajouter le bloc de rupture

1. Au même niveau que le Full Banner, insérer un composant Custom Code.

2. Utiliser l’un des exemples de rupture disponibles dans la documentation.

3. Renseigner l’ID du content asset correspondant à la rupture souhaitée, par exemple : custom_rupture_body_center_wide


Documentation – Creating a rupture block

Step 1: Build the base structure

1. Add a container with layout "1 Row x 1 Column" (desktop, mobile, tablet compatible).

2. Inside the container, insert a Full Banner component.

3. Set a background image on the Full Banner:

    A main image for desktop

    An optional mobile image if needed

4. Add a clickable link to the Full Banner if required.

Note: If you're creating a double rupture outside the product grid, do not add a link to the Full Banner.

Step 2: Add the rupture block

1. At the same level as the Full Banner, insert a Custom Code component.

2. Use one of the rupture examples provided in the documentation.

3. Specify the content asset ID that matches the desired rupture type, for example: custom_rupture_body_center_wide


Exemple 1 – Rupture centrée

Aperçu rupture centrée

Exemple 1.2 – Rupture centrée large

Aperçu rupture centrée large

Exemple 2 – Rupture 1/2

Aperçu rupture 1/2

Exemple 2.1 – Rupture 1/2 avec espace à gauche

Aperçu rupture 1/2 avec espace à gauche

Exemple 2.2 – Rupture 1/2 avec espace à droite

Aperçu rupture 1/2 avec espace à droite

Exemple 3 – Rupture 3/4

Aperçu rupture 3/4

Exemple 4 – Rupture 1/4

Aperçu rupture 1/4