Using the Add Panel

Add an element on the page

The Add panel is where you can find UI blocks to add to your web application. These can be anything, from simple texts to complex forms.

To add an element to your app, simply drag and drop it where needed in your app:

The Add panel is composed of different sections, let's discover each category.

Basics

This is where you can find commonly used elements with limited style presets that act a great starting point to build your own design.

Basic elements include but are not limited to sections, navigation menus, containers, headings, images, buttons, inputs, etc.

Assets

This is where you will find the UI components and templates from available libraries, i.e. the current project library and libraries that were added to the project.

TIP

Learn more about working with Libraries in WeWeb.

Multi-page sections

This is where you will find the list of existing sections in your app:

• Linked sections: lists all the sections that are linked on multiple pages in your app.
• Pages: lists all the pages in your app with all the sections (linked or not) on each page.

From this panel, you can drag-and-drop a section on a page. When you drop a section on a page, you will be prompted to decide if you want to Create an instance or Create a copy of that section:

THE POWER OF MULTI_PAGE SECTIONS

When you create an instance of a section, it is also called a "Linked section" or a "Multi-page section".

The changes you make on one instance of a linked section will be reflected on all other instances of this section, throughout the app.

Learn more about leveraging multi-page sections to improve page load speed of your WeWeb apps.

Plugin UI kits

Here, you'll find elements that are specific to the plugins you installed.

For example: authentication forms for auth plugins, charts, maps, etc.