> ## 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).

# Section, ligne, colonnes, éléments

# Pour commencer

**Sections, Rangset colonnes** sont les éléments constitutifs d'un site web. Cet article traite des sections, des lignes et des colonnes.

# Section

Les sections sont le principal élément de base de toute construction. Les sections contiennent tous les autres éléments. Une section doit d'abord être ajoutée pour créer un dessin.

Voici comment ajouter une nouvelle section :

## Ajouter une section à une nouvelle page :

Si vous créez une nouvelle page sur votre site, vous verrez l'option d'ajouter automatiquement une nouvelle section,

Voici à quoi il devrait ressembler :


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

## Ajouter une section à une page préconstruite :

Si une page comporte déjà des sections, voici comment ajouter une nouvelle section.

__Voir le GIF ci-dessous :__


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-24-at-60_mt7xt2.gif)

## Sections pré-conçues

Vous pouvez choisir une vaste gamme de sections préconçues pour votre page, des barres de navigation aux formulaires de contact, en passant par les listes de prix et les pieds de page.

__Ajout d'une section "Pre Designed" :__


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-24-at-60_1n6zs5y.gif)

## Ajout d'une section personnalisée :

Vous pouvez ajouter une section vierge sur votre site, y ajouter des éléments et la styliser vous-même.

__Voici comment procéder :__


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-24-at-60_1uk63lv.gif)

---

# Rangs

Les rangées constituent la première couche de conteneurs à l'intérieur d'une section. Les sections contiennent des colonnes et des éléments. Plusieurs rangées peuvent être ajoutées à l'intérieur d'une section et stylisées différemment. Les rangées sont fournies par défaut avec des sections et des colonnes.

__Pour savoir comment ajouter une nouvelle ligne et comment cela fonctionne, reportez-vous à l'image et au GIF ci-dessous.__ ⬇️

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/screen-shot-2022-08-28-at-4115_1s2pnu8.png)

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-28-at-41_12e10u2.gif)


---

# Colonnes

Les colonnes sont des supports d'éléments redimensionnables qui se placent à l'intérieur d'une ligne et permettent de concevoir n'importe quelle mise en page sans la briser. Plusieurs colonnes peuvent être ajoutées à l'intérieur d'une ligne sur plusieurs lignes. Les colonnes s'accompagnent automatiquement d'une nouvelle section.

__Pour savoir comment ajouter une nouvelle ligne et comment cela fonctionne, reportez-vous à l'image et au GIF ci-dessous.__ ⬇️



![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/screen-shot-2022-08-28-at-4201_kisjp1.png)



![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-28-at-42_1vdzzz.gif)


---


# Éléments

Il existe différents types d'éléments que vous pouvez ajouter à une section vide de votre site web. Chaque élément a ses propres cas d'utilisation. Il existe deux types d'éléments :

- **Éléments généraux**
- **Éléments de la CMS** (ne fonctionne qu'avec les lignes et les colonnes du CMS)

Apprendre **comment ajouter un élément à votre site web,** vous pouvez suivre les étapes ci-dessous :

## Ajout d'un élément

- Cliquez sur **Ajouter un élément** sur une section vide de votre site web
- Choisissez n'importe quel élément de la grille sous la rubrique **Éléments généraux** ou **Éléments de la CMS** panneau.
- L'élément sélectionné apparaîtra sur votre site web !

Vous pouvez vous référer à la **GIF ci-dessous** à titre d'exemple :


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-09-08-at-11_19fhbib.gif)


---

**Articles connexes**

[Builder Basics](/en/article/builder-basics-1vmc59h/)