# Paramètres globaux de section

Tous les blocs utilisent les mêmes paramètres globaux pour les polices, les arrière-plans et l’affichage, garantissant un style visuel cohérent sur l’ensemble de votre site tout en permettant au contenu des blocs de différer.

Pour configurer les paramètres globaux d’un bloc, placez le curseur dessus et sélectionnez le **Paramètres** bouton qui apparaît.

<figure><img src="/files/ad9727b5089ed6b7aa672d78a60795c8bc6c029f" alt=""><figcaption></figcaption></figure>

Cliquez sur le bouton **Paramètres** bouton pour ouvrir le menu des paramètres globaux de la section à droite.

<figure><img src="/files/1f9b019dcc4dd60b9b648c1146d67054159a6a7c" alt=""><figcaption></figcaption></figure>

## Paramètres de police

Vous pouvez modifier les paramètres suivants :

* Police et style : la famille de polices, le style (Normal ou Italique) et le graissage (épaisseur).
* Espacement : l’espacement des lettres, l’interligne et la taille de police.

<figure><img src="/files/29c30bf7c8946f4c32a0cb88754dec4ba7fd22c1" alt=""><figcaption></figcaption></figure>

Pour les blocs contenant à la fois un champ Titre et un champ Texte, vous avez deux options de style :

1. Appliquer un **style de police unique** à l’ensemble du bloc pour plus d’uniformité.
2. Activez le bouton **Police supplémentaire** option pour définir des styles distincts pour le Titre et le Texte, créant des rôles visuels différents au sein du même bloc.

<figure><img src="/files/a6dfc4c9839565f381cdb89f6a57c183a769abee" alt=""><figcaption></figcaption></figure>

### Comment ajouter une police personnalisée

Pour ajouter une police personnalisée, trouvez le bouton du même nom et cliquez dessus :

<figure><img src="/files/dcf71d40e4ec7042e2db7367d97a5e27f6acb056" alt=""><figcaption></figcaption></figure>

Vous serez redirigé vers une page proposant une grande variété de polices différentes :

<figure><img src="/files/22fdef4dcf716d293883ca9be88542f08bef3024" alt=""><figcaption></figcaption></figure>

Étape 1. Trouvez la police souhaitée

a) Cela peut se faire à l’aide de la barre de recherche :

<figure><img src="/files/8f3a366a6deed51ba052c5cede64496c3149a83f" alt=""><figcaption></figcaption></figure>

Sélectionnez les critères nécessaires pour la police :

* Catégorie de police
* sans-serif (lettres sans empattement)
* serif (lettres avec empattement)
* handwriting (une police qui imite l’écriture manuscrite)
* monospace (police à chasse fixe ou disproportionnée, une police dans laquelle tous les caractères ont la même largeur)
* display (police d’affichage en gras)
* Prise en charge des langues
* Cyrillique
* Latin

b) Pour trouver une police manuellement, faites défiler la liste dans la barre de formatage.

Étape 2. Cliquez sur la police sélectionnée :

Vous verrez une fenêtre modale avec les options de police :

<figure><img src="/files/e48d298899ed624b65172bfbd29ddcb626665c92" alt=""><figcaption></figcaption></figure>

Étape 3. Sélectionnez une option de police en cochant la case à côté de celle dont vous avez besoin :

<figure><img src="/files/8700a39da1dda84c7d6e0a61bb8065869cf5b0df" alt=""><figcaption></figcaption></figure>

Étape 4. Cliquez sur le **"Ajouter"** bouton :

<figure><img src="/files/332c5c142132c91a2f57dc2e4d145ad013422fb3" alt=""><figcaption></figcaption></figure>

Les paramètres de votre police personnalisée s’afficheront ici une fois enregistrés.

<figure><img src="/files/7ea0a775a34580b0692ec83af89ab4e11641f75c" alt=""><figcaption></figcaption></figure>

Étape 6. Cliquez sur **« Enregistrer »**:

<figure><img src="/files/754c4a6c59a4787c2755c2b447728d7f86c49965" alt=""><figcaption></figcaption></figure>

Les polices ajoutées apparaîtront dans la même liste que les polices par défaut.

<figure><img src="/files/4729366b72f2a69431622d3e9de105e2fa7b20c1" alt=""><figcaption></figcaption></figure>

## Paramètres d’arrière-plan

<figure><img src="/files/460de7ee18128fd351a672d54a26db9914853748" alt=""><figcaption></figcaption></figure>

Personnalisez l’arrière-plan de la section avec une couleur unie, un dégradé, une image ou une vidéo.

<figure><img src="/files/53500c3d27351146ebb2f7ba3d5b7b90a960b179" alt=""><figcaption></figcaption></figure>

Vous pouvez superposer une couleur ou un dégradé sur une image d’arrière-plan.

<figure><img src="/files/824e9af19bd791b13628cc5eed3a1b07440e0f56" alt=""><figcaption></figcaption></figure>

L’image peut être ajoutée sous forme de fichier ou de lien vers l’image :

<figure><img src="/files/ea9a2bffb0253fa4e7f5fd754a8c2a804c6fd15b" alt=""><figcaption></figcaption></figure>

Une vidéo peut être ajoutée depuis le stockage

<figure><img src="/files/206abc9aeb0467a2f8c330cfb4205bc0f56d5fb8" alt=""><figcaption></figcaption></figure>

Tout d’abord, téléchargez votre fichier vidéo dans l’espace de stockage des fichiers.

<figure><img src="/files/9c0cda2845fe1e23159d9b9f8c984e6d07883175" alt=""><figcaption></figcaption></figure>

### Paramètres de l’image d’arrière-plan

**Contrôle du positionnement de l’image**

Une image dans une section est positionnée à l’aide de deux paramètres indépendants :

1. **Alignement horizontal** (axe X)
2. **Alignement vertical** (axe Y)

**Spécifiez la position** à l’aide d’un mot-clé ou d’une combinaison :

| Mot-clé                                      | Effet                 |
| -------------------------------------------- | --------------------- |
| `haut`, `bas`, `centre`                      | Alignement vertical   |
| `gauche`, `droite`, `centre`                 | Alignement horizontal |
| `bas gauche`, `haut droite`, `centre centre` | Position combinée     |

**Pour un contrôle précis**, vous pouvez également utiliser des valeurs numériques :

* Pourcentages (par ex.  `30% 75%`)
* Pixels (par ex.  `20px 100px`)
* Ou des unités mixtes

<figure><img src="/files/3b1e193a6afc5231af49519c12909307ee0bac8e" alt=""><figcaption><p>Position 100 % ; taille 100 % ; sans répétition</p></figcaption></figure>

**Options de dimensionnement de l’image**

Vous pouvez contrôler les dimensions d’une image à l’aide des méthodes suivantes :

**1. Définir des dimensions personnalisées**

Définissez à la fois la largeur et la hauteur à l’aide de valeurs flexibles.

* **Format :** `[largeur] [hauteur]`
* **Exemple 1 (pixels) :** `500px 300px`
* **Exemple 2 (pourcentage) :** `15% 10%`

**2. Utiliser un mot-clé prédéfini**

Spécifiez un seul paramètre pour appliquer un comportement de mise à l’échelle spécifique :

* **`contain`** — Met l’image à l’échelle pour qu’elle tienne entièrement dans la hauteur de la section tout en conservant son ratio d’aspect (Exemple 3).
* **`cover`** — Affiche l’image à ses dimensions en pixels d’origine (Exemple 4 : taille d’origine 1268 × 1343 px).

<figure><img src="/files/313b040d1ca7cc263e626dbc3e79c5420be168af" alt=""><figcaption></figcaption></figure>

**Répétition de l’image**

Cette option est désactivée par défaut. Les paramètres disponibles incluent :

<figure><img src="/files/e2d5b5add4cceccac5f00c78cbc3b0b52836de6c" alt=""><figcaption></figcaption></figure>

**Comment épingler une image**

Activez ce commutateur pour définir une image d’arrière-plan fixe. Lorsqu’il est actif, l’image reste immobile pendant le défilement, ce qui permet au contenu de se déplacer par-dessus.

<figure><img src="/files/83d63b71b5565bbcfb036839d88c85eb07c962e4" alt=""><figcaption></figcaption></figure>

### Couleur et dégradé de fond

Vous pouvez personnaliser l’arrière-plan de la section avec une couleur unie ou choisir un dégradé parmi les options disponibles.

<figure><img src="/files/662e0180f458687622dd3bc480e4064734777cbb" alt="" width="563"><figcaption></figcaption></figure>

## Réglages d’affichage

<figure><img src="/files/4ae3e6b8510cbd6fdf5025507687fdc2fda33fb8" alt=""><figcaption></figcaption></figure>

Vous pouvez spécifier où cette section est visible (par exemple, sur quels appareils ou plateformes). Par défaut, elle est affichée sur le site web et sur Facebook. À l’aide du menu déroulant, vous pouvez sélectionner une option d’affichage pour ce bloc, par exemple le rendre visible uniquement sur le site web.

**Rayon de bordure :**

<figure><img src="/files/1049dd2fbb0beb304aa624cc0363cd5b086824b9" alt=""><figcaption></figcaption></figure>

Le rayon de bordure est indiqué en pixels - px.

Hauteur de la section

<figure><img src="/files/ada72d82b97d228a0af13ad2467795261c75de68" alt=""><figcaption></figcaption></figure>

La hauteur de la section peut être définie à l’aide des unités suivantes :

* px : pixels (valeur fixe)
* vh : hauteur de la fenêtre d’affichage (adaptée à la taille de l’écran)

### Largeur de la section

Largeur de 1 colonne = 106 px

Par défaut, la largeur de la section est définie sur plein écran, et le contenu est affiché dans une mise en page à 8 colonnes.

<figure><img src="/files/2cf25ac8753d467f703fc85a053b3643b28b0248" alt=""><figcaption></figcaption></figure>

Exemple 1 : Le contenu est centré dans la section et occupe 5 colonnes de la grille.

<figure><img src="/files/77d5b30e94983690d2e5b5a4055c0a1ab4c660cb" alt=""><figcaption></figcaption></figure>

Exemple 2. Une section occupe 8 colonnes, avec un contenu couvrant toute la largeur de la section :

<figure><img src="/files/f8780f726fb2624d7ba1359e96fb2e849adcf36e" alt=""><figcaption></figcaption></figure>

**Effet d’apparition déclenché par le défilement**

<figure><img src="/files/b98abbdabfb04fa3b79589ff8667e526c97d76cd" alt=""><figcaption></figcaption></figure>

Activez ce commutateur pour permettre les animations déclenchées par le défilement pour votre contenu. Vous pouvez choisir de faire apparaître le contenu par le bas, le haut, la gauche ou la droite.

### Affichage du contenu

Le contenu est affiché horizontalement et centré par défaut. Il peut être décalé vers le bord gauche ou droit de la page.

<figure><img src="/files/0e6e372f894bf5cd81c8998c0b4aa1664505f43d" alt=""><figcaption></figcaption></figure>

Verticalement, le contenu est aligné en haut par défaut. Il peut être déplacé vers le bas ou centré sur la page.

Pour adapter le texte aux écrans étroits selon les styles Mavibot, veuillez activer ce curseur :

<figure><img src="/files/8930867f01017230e5eafdb6c9ccba36b11923d8" alt=""><figcaption></figcaption></figure>

### Marges (pour la section)

#### Marges externes

Vous pouvez utiliser ces champs pour ajuster l’espacement entre les sections. Par défaut, le rembourrage interne (haut/bas/gauche/droite) est défini sur 0 px.

<figure><img src="/files/ebd0f762b7d9fc3e69d72f994e1e0607f6872a75" alt=""><figcaption></figcaption></figure>

Pour appliquer des marges égales sur tous les côtés, saisissez la valeur dans le champ principal. Les marges supérieure, inférieure, gauche et droite seront définies automatiquement.

<figure><img src="/files/f4c226e946bc7fb0e15b55e0ad7265360993167b" alt=""><figcaption></figcaption></figure>

Pour garantir la cohérence visuelle, les marges doivent être configurées individuellement pour chaque section.

#### Marges internes

Utilisez ces champs pour ajuster la marge interne de la section. Par défaut, la marge (haut, bas, gauche, droite) est définie sur 32 px.

<figure><img src="/files/d685b042a7d42bcd64cf91391de52f71bbe51396" alt=""><figcaption></figcaption></figure>

#### Plage de visibilité par appareil

La plage de visibilité détermine sur quels appareils (par exemple, ordinateur, tablette, mobile) ce bloc sera affiché. Ce paramètre est configuré individuellement pour chaque bloc.

<figure><img src="/files/2fc9c40aaadeeeaa2c31a7796b02977e5c65eeef" alt=""><figcaption></figcaption></figure>

**Pourquoi est-ce utile et comment cela fonctionne-t-il ?**

Si un bloc (par exemple, une bannière) s’affiche bien sur ordinateur mais pas sur mobile, vous pouvez le configurer pour qu’il n’apparaisse que sur les appareils dont la largeur d’écran est de 960 pixels ou plus. Cela garantit que le bloc n’est visible que dans les vues ordinateur et masqué sur les appareils mobiles.

Vous devez ensuite copier ce bloc et personnaliser son apparence spécifiquement pour les appareils mobiles (modifier la photo, la taille de police, etc.). Pour ce bloc, définissez la visibilité dans la plage de 0 à 960 pixels. Ce sera la version mobile du bloc.

En conséquence, la version ordinateur sera affichée sur les ordinateurs, tandis que la version mobile sera affichée sur les smartphones et les tablettes.

La plage de visibilité (différentes valeurs de paramètre) est nécessaire pour pouvoir personnaliser l’apparence du bloc pour un appareil spécifique en sélectionnant la résolution. Par exemple, si le bloc ne s’affiche pas bien sur une tablette ou sur un modèle de téléphone particulier, vous pouvez personnaliser son apparence en fonction de la résolution de ces appareils.

{% hint style="info" %}
Par défaut, la section est affichée sur des appareils de toute taille.
{% endhint %}

#### Exemple

Configurez la première section pour les appareils mobiles et les tablettes

* Créez une section
* Définissez sa plage de visibilité de 0 à 640 px
* Téléchargez une image optimisée pour les petits écrans

<figure><img src="/files/37ee95d501d9464e561e8be8dd7c9aba95a9416d" alt=""><figcaption></figcaption></figure>

La deuxième section est destinée aux PC (ordinateurs portables). Définissez la plage de visibilité à partir de 641 pixels et plus.

<figure><img src="/files/aded3acb33148847b8de6c369f8d6c4878aaa3ad" alt=""><figcaption></figcaption></figure>

* Enregistrez vos modifications et passez à la page d’édition. Pour votre commodité, les paramètres de visibilité de la section y seront affichés.

<figure><img src="/files/eb801c4f85034aed4e8aaf7b1863a2ad0fbde14a" alt=""><figcaption></figcaption></figure>

Pour tester l’apparence des sections sur un appareil spécifique, accédez à la page d’aperçu du site. Faites un clic droit et cliquez sur « Afficher le code ».

<figure><img src="/files/f97a26941d80acb9fc235345b74d9a3e11bed255" alt=""><figcaption></figcaption></figure>

Sélectionnez l’appareil sur lequel vous souhaitez voir à quoi ressemblera le site.

#### Timing d’apparition

<figure><img src="/files/5228b0be4903c7753bd7c24a804a5b5723b19016" alt=""><figcaption></figcaption></figure>

Vous pouvez utiliser ce champ pour définir le délai avant l’apparition d’une section, spécifié en secondes (s) ou en minutes (m).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/fr/websites/sites/blocks/settings.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.