Using the Add Panel

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

Drag-and-drop elements

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

Add panel sections

The Add panel is composed of different sections, let's discover their uses.

Elements

This is where you can find the most basic elements. Those are unstyled and a great starting point to build your own design.

Examples are: divs, containers, texts (headings and paragraphs), images, buttons, form inputs etc:

Layout

This is where you can find the elements that are used to build the layout of your app. They are the building blocks of your app's structure, like top navigation, alerts, and side menus.

You can use them to get an page up and running quickly, and then customize it to your needs:

TIP

Learn more about building responsive layouts in WeWeb.

Buttons & Labels

This is where you can find the elements that are used to build call to actions.

They are elements that you use to draw attention to specific parts of your app, for the user to take action on them. Like for example buttons, labels, toolips, links, etc:

Input & Controls

This is where you can find the elements that are used to build forms.

They are elements that you use to let the user interact with your app, like for example text inputs, checkboxes, radio buttons, etc.

To use them, don't forget to add them in a form container if you want data to be validated on submit:

Data display

This is where you can find the elements that are used to display data.

They are elements that you use to display data to the user, like for example tables, lists, etc. You will typically bind them to a collection of data.

Authentication

This is where you can find the elements that are used to authenticate users.

They are elements that you use to let the user log in to your app, like for example login forms, signup forms, etc.

To use them, don't forget to add the proper workflow to the login/signup form:

Landing page

This is where you can find the elements that are used to build landing pages.

They are elements that you use to build the first page of your app, like for example hero sections, pricing sections, footers, etc.

Plugins

You'll find here the elements that are specific to a plugin you installed.

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