---
title: "Ajouter un élément à votre page"
description: "Ouvrez le panneau Ajouter un élément depuis la barre du haut pour insérer texte, image, bouton et tous les blocs disponibles sur la page en cours."
url: https://docs.vivlab.com/editor/menu/add-element
---

# Ajouter un élément

Le panneau **Ajouter un élément** s'ouvre depuis le bouton **Élément** de la [barre du haut](https://docs.vivlab.com/editor/toolbar.md). Il liste les blocs que vous pouvez insérer sur la page en cours.

<DocsScreenshot name="editor-element-library" alt="La bibliothèque des éléments Texte et Média avec leurs descriptions." :width="342" :height="598" />

## Faire glisser un élément sur la canvas

Faites glisser un élément depuis la liste vers l'endroit voulu sur la [canvas](https://docs.vivlab.com/editor/canvas.md). Un repère visuel vous indique où il sera positionné. Relâchez pour confirmer : l'élément est inséré avec un style par défaut adapté à votre [thème](https://docs.vivlab.com/sections/themes-brands.md), que vous pouvez ensuite personnaliser depuis le panneau latéral.

Vous pouvez aussi cliquer sur un élément : il est alors inséré au centre de la zone visible (ou dans la section sélectionnée). Les éléments disponibles en plusieurs variantes affichent un compteur : cliquez dessus pour déplier une grille d'aperçus, puis glissez ou cliquez la variante voulue.

## Catégories disponibles

Les éléments sont regroupés par catégorie pour vous aider à les retrouver rapidement.

Dans une **section** courante, vous disposez :

- **Texte** : [Texte](https://docs.vivlab.com/editor/menu/text.md), [Texte animé](https://docs.vivlab.com/editor/menu/text-animated.md), [Compte à rebours](https://docs.vivlab.com/editor/menu/countdown.md).
- **Média** : [Image](https://docs.vivlab.com/editor/menu/image.md), [Vidéo](https://docs.vivlab.com/editor/menu/video.md), [Logo du site](https://docs.vivlab.com/editor/menu/image-logo.md), [Image parallaxe](https://docs.vivlab.com/editor/menu/image-parallax.md), [Image avant/après](https://docs.vivlab.com/editor/menu/image-before-after.md), [Galerie](https://docs.vivlab.com/editor/menu/gallery.md).
- **Éléments** : [Bouton](https://docs.vivlab.com/editor/menu/button.md), [Forme](https://docs.vivlab.com/editor/menu/block.md), [Réseaux sociaux](https://docs.vivlab.com/editor/menu/icon-group.md), [Barre d'annonce](https://docs.vivlab.com/editor/menu/banner.md), Questions fréquentes.
- **Carrousel** : [Carrousel](https://docs.vivlab.com/editor/menu/swiper.md).
- **Contact** : [Formulaire](https://docs.vivlab.com/editor/menu/form.md).
- **Navigation** : [Navigation](https://docs.vivlab.com/editor/menu/navigation.md), [Menu déroulant](https://docs.vivlab.com/editor/menu/menu.md), [Menu mobile](https://docs.vivlab.com/editor/menu/button-action.md), [Menu langue](https://docs.vivlab.com/editor/menu/button-intl.md).
- **E-commerce** : [Produit en vente](https://docs.vivlab.com/editor/menu/product.md), Catalogue de produits, [Barre de recherche](https://docs.vivlab.com/editor/menu/searchbar.md), et les boutons [Icône de recherche, Panier e-commerce et Espace client](https://docs.vivlab.com/editor/menu/button-action.md).
- **Code** : [Iframe](https://docs.vivlab.com/editor/menu/iframe.md), [Code HTML](https://docs.vivlab.com/editor/menu/html.md).

Dans la **barre de navigation**, seuls les éléments adaptés à un en-tête sont proposés : navigation, menu déroulant, menu mobile, menu langue, image, logo du site, bouton, forme, réseaux sociaux, barre d'annonce, barre de recherche, icône de recherche, panier e-commerce, espace client et texte.

## Recherche rapide

Un champ de recherche en haut du panneau filtre la liste sur le nom de l'élément. Tapez par exemple « bouton » ou « image » pour ne garder que les variantes pertinentes.