> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Onglet Avancé dans l'éditeur

# Pour commencer

Les **Onglet Avancé** dans l'éditeur vous permet d'apporter des modifications à n'importe quel **rangée**, **colonne**, **section**et presque tout ce qui se trouve dans votre **constructeur de site web**. Cet article couvre **tout** dans l'onglet Avancé.

Voici les **principales options** à l'intérieur d'un **Avancé** tabulation :

* Polices de caractères et typographie
* Animation sur le défilement
* Sélecteurs HTML
* Transition au survol
* Visibilité et position
* Style personnalisé

# Polices de caractères et typographie

À partir de là, vous pouvez modifier le type de police et définir son poids.

⬇️ Le GIF ci-dessous montre ce que font toutes les options

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-25at32436p_1aej4o1.gif)

# Animation sur le rouleau

Vous pouvez utiliser différents types d'animation sur n'importe quel élément, ligne ou colonne. Vous avez le choix entre plusieurs types d'animation, dont la définition d'un délai, d'une durée, d'un décalage et de bien d'autres paramètres.

⬇️ Le GIFs ci-dessous montre ce que font toutes les options

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-25at34519p_157y9uv.gif)

![](https://cdn.cmsfly.com/63969cb64dabfc00be8d85e0/gif_recording_2022-08-25_at_3.49.04_pm-7MQByV.gif)

# Sélecteur HTML

Les **Sélecteur HTML** vous permet d'ajouter un identifiant HTML et un attribut de données à n'importe quelle ligne, colonne, section ou élément. Voyons la décomposition ci-dessous.

## ID HTML

Cette option vous permet d'attribuer un **ID HTML** à n'importe quel **section**, **colonne**, **rangée**ou **élément**. Cette fonction est pratique lorsque vous souhaitez qu'un lien ou un bouton conduise votre visiteur à une section de votre site web.

Les étapes suivantes montrent comment utiliser un identifiant HTML pour **lier un bouton à une section.**

* Supposons que nous voulions lier ce bouton…

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1f9e9r5.png)

* ...à cette section sur notre site web ⬇️

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_xtuy2y.png)

* Inscrivez l'ID HTML ⬇️

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-25at40716p_7pncrm.gif)

* Revenez au bouton et changez le type de lien du bouton en section, puis notez l'ID HTML. ⬇️

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-25at40916p_1b0wzkc.gif)

* Publiez votre site et visitez-le pour voir comment il fonctionne ⬇️

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-25at41056p_1omscpk.gif)

⚠️ Un seul identifiant HTML peut être utilisé pour un élément, une section, une ligne ou une colonne.


## Attribut des données

L'attribut Data est utilisé pour ajouter des feuilles de style CSS personnalisées, et un attribut Data peut être utilisé pour plusieurs éléments, sections, lignes et colonnes.

Voici les étapes à suivre pour ajouter des attributs de données à un élément ⬇️

* Ajoutez un attribut de données comme indiqué dans l'image ci-dessous

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1o5x4yk.png)

* Copier l'attribut de données

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_b42qes.png)

* Aller à 🔧 Paramètres de la page

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_13jd9xq.png)

* Allez dans l'en-tête Code et écrivez votre code

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1d7j84z.png)

* Visualisez les modifications après avoir publié votre site.

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_9h0cu2.png)


# Transition au survol

Lorsque vous activez un effet de survol sur un élément, une ligne, une colonne ou une section, l'option Transition de survol vous permet de définir la durée de l'effet de survol.

Voici à quoi ressemble la configuration :

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1cyju6n.png)

# Visibilité et position

Cette option vous permet de modifier la visibilité d'une section, d'une ligne, d'une colonne ou d'un élément sur n'importe quel appareil. Vous pouvez également modifier la position de ces objets à l'aide des options Overflow X et Overflow Y. Voyons ce qu'il en est :

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_ho7uy6.png)

## Cacher un élément sur différents appareils :

Se référer à la **GIF** en testant comment **cacher un élément** sur **différents dispositifs** ⬇️

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-25at54152p_1ybdijb.gif)

# Style personnalisé

Vous pouvez ajouter un code personnalisé à votre site pour l'adapter à vos préférences. Vous pouvez ajouter :

* CSS général
* CSS "avant
* CSS "after

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-25at54819p_damprm.gif)

---

**Articles connexes**

[Sidebar and Modal Editor](/en/article/sidebar-and-modal-editor-19ng1vz/)

[Styles tab in Editor](/en/article/styles-tab-in-editor-42a53c/)