---
title: Visual Page Builder
description: "### Accessing the editor To start working with Elementor, go to the WordPress dashboard. Then, add a new page by clicking on Pages > Add New. Then, create a new page and save it with the 'full width' template and…"
url: "https://themewinter.com/docs/themes/theme-docs/buildbench/visual-page-builder-11/"
updated: "2022-11-13"
category: BuildBench
---

# Visual Page Builder

### Accessing the editor

To start working with Elementor, go to the WordPress dashboard. Then, add a new page by clicking on Pages > Add New. Then, create a new page and save it with the 'full width' template and then click on the 'Edit with Elementor' button.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/page-creation-1-1024x505.png)

### Elementor UI: Getting to know the interface

The Elementor page builder includes these main areas:
1. **Panel (Top)**: Use the search field to find a widget.
2. **Widgets / Widget Settings: **Choose a widget and configure it.
3. **Preview Button: **Enables you to preview the page. Once clicked it hides/shows the panel.
4. **Panel (Bottom)**: View page, Go back to Dashboard or Save page.
5. **Content Area:** Drag & drop widgets and design your page.
6. **Add New Section / Add Template:** Choose between creating a new section or inserting an existing template.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/elements-1.png)

### Creating your section

A section is the most basic element that you can work with. It's the building block of every page. A section can be set as full width and spread all over the screen, or receive the content area width (by default).

[Build Your Page Layout on Elementor](https://www.youtube.com/embed/joWTUN77hnA?feature=oembed)

After you create a section you can drag and drop a widget inside. You can also divide each section to few columns. Every page you create can contain as many sections as you want. You can drag a section above or under another one to relocate it.

1. Add New Section: Click this button to create a new section or simply drag a widget from the panel and drop it in the content area.
2. Select Yout Structure: Choose a structure for your section (Later, you can edit the exact width of every column).

You can edit, duplicate or delete a section. You can also save it as a template or add a new section above.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/elements_section-1.png)

### Project and services(shortcode)

Those are custom post types. You can add, change, or delete from here :

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/custom-shortcode-1024x473.png)

### Inserting a widget

Click the content Install Theme to edit, duplicate or delete a widget. You can also save it as a Global Widget. Add Widget: Drag a widget from the left panel and drop it into a column.

1. To edit a widget, click the pencil icon.
2. On the Panel header, you can choose to edit the widget's content and style.
3. Every widget has a different setting. 
4. You can save your current changes at any stage.
5. When you have finished designing, click the 'X' button at the bottom panel and view the page.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/elements_widget-1.png)

#### Buildbench slider

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/main-slider-1-1024x472.png)

#### Buildbench services

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/services-1024x466.png)

#### Buildbench team

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/team-1024x470.png)

#### Buildbench project

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/project-1024x467.png)

#### Buildbench Funfact

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/funfact-1024x466.png)

#### Buildbench working procedure

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/procedure-1024x468.png)

#### Buildbench Latest News

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/latest-news-1024x470.png)

#### Buildbench Contact Form

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/form.png)

#### Buildbench Footer widget

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/footer-widget-1-1024x487.png)

#### Buildbench Footer newsletter widet

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/11/newsletter-1024x487.png)