---
title: "Add an element to your page"
description: "Open the Add an element panel from the top bar to insert text, images, buttons and every block available on the current page."
url: https://docs.vivlab.com/en/editor/menu/add-element
---

# Add an element

The **Add an element** panel opens from the **Element** button of the [top bar](https://docs.vivlab.com/en/editor/toolbar.md). It lists the blocks you can insert on the current page.

<DocsScreenshot name="editor-element-library" alt="The Text and Media element library with descriptions." :width="342" :height="598" />

## Drag an element onto the canvas

Drag an element from the list to the desired place on the [canvas](https://docs.vivlab.com/en/editor/canvas.md). A visual marker shows where it will be positioned. Release to confirm: the element is inserted with a default style adapted to your [theme](https://docs.vivlab.com/en/sections/themes-brands.md), which you can then customize from the side panel.

You can also click an element: it is then inserted at the center of the visible area (or into the selected section). Elements available in several variants show a counter: click it to expand a grid of previews, then drag or click the variant you want.

## Available categories

Elements are grouped by category to help you find them quickly.

In a current **section**, you have:

- **Text**: [Text](https://docs.vivlab.com/en/editor/menu/text.md), [Animated text](https://docs.vivlab.com/en/editor/menu/text-animated.md), [Countdown](https://docs.vivlab.com/en/editor/menu/countdown.md).
- **Media**: [Image](https://docs.vivlab.com/en/editor/menu/image.md), [Video](https://docs.vivlab.com/en/editor/menu/video.md), [Site logo](https://docs.vivlab.com/en/editor/menu/image-logo.md), [Parallax image](https://docs.vivlab.com/en/editor/menu/image-parallax.md), [Before/after image](https://docs.vivlab.com/en/editor/menu/image-before-after.md), [Gallery](https://docs.vivlab.com/en/editor/menu/gallery.md).
- **Elements**: [Button](https://docs.vivlab.com/en/editor/menu/button.md), [Shape](https://docs.vivlab.com/en/editor/menu/block.md), [Social media](https://docs.vivlab.com/en/editor/menu/icon-group.md), [Announcement bar](https://docs.vivlab.com/en/editor/menu/banner.md), FAQ.
- **Carousel**: [Carousel](https://docs.vivlab.com/en/editor/menu/swiper.md).
- **Contact**: [Form](https://docs.vivlab.com/en/editor/menu/form.md).
- **Navigation**: [Navigation](https://docs.vivlab.com/en/editor/menu/navigation.md), [Dropdown menu](https://docs.vivlab.com/en/editor/menu/menu.md), [Mobile menu](https://docs.vivlab.com/en/editor/menu/button-action.md), [Language menu](https://docs.vivlab.com/en/editor/menu/button-intl.md).
- **E-commerce**: [Product for sale](https://docs.vivlab.com/en/editor/menu/product.md), Product catalog, [Search bar](https://docs.vivlab.com/en/editor/menu/searchbar.md), and the [Search icon, E-commerce cart and Customer account](https://docs.vivlab.com/en/editor/menu/button-action.md) buttons.
- **Code**: [Iframe embed](https://docs.vivlab.com/en/editor/menu/iframe.md), [HTML code](https://docs.vivlab.com/en/editor/menu/html.md).

In the **navigation bar**, only the elements suitable for a header are offered: navigation, dropdown menu, mobile menu, language menu, image, site logo, button, shape, social media, announcement bar, search bar, search icon, e-commerce cart, customer account and text.

## Quick search

A search field at the top of the panel filters the list by element name. Type for example "button" or "image" to keep only the relevant variants.