--- 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/digiqole/visual-page-builder-8/" updated: "2022-07-20" category: Digiqole --- # 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/07/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/07/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/07/elements_section-1.png) ## Create Elementor Page ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/elementor-widgets-1-1024x485.png) ## Inserting a widget Click the content 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/07/elements_widget-1.png) ## How to get all the elements of our theme? Just go to Elementor editor & see the elements of the "Elementskit" & "Digiqole" category tab. ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/all-element-1024x487.png) ## Elementor add section ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/add-section-1024x491.png) ## Digiqole Main Slider ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/main-slider-1024x485.png) ## Digiqole Main Slider 2 ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/main-slider2-1024x477.png) ## Digiqole post grid ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/post-grid-1024x465.png) ## Digiqole post tab ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/post-tab-1024x497.png) ## Digiqole post block ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/post-block-1024x415.png) ## Digiqole title ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/title-1-1024x406.png) ## News Ticker ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/news-ticker-1024x504.png) ## Digiqole post list ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/post-list-1024x517.png) ## Digiqole category list ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/post-category-1024x489.png) ## Digiqole Video Post Tab ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/post-video-tab-1024x494.png) ## Digiqole post grid slider ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/post-grid-slider-1024x490.png) ## Digiqole post vertical grid slider ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/post-verticle-grid-1024x490.png) ## Digiqole Footer widget ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/footer-widget-1024x474.png) ## Digiqole Footer Newsletter ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/newsletter-1024x460.png) To change the footer newsletter, go to Appearance > Customize >Theme Setting > **Footer Settings** ![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/07/mailchimp-1024x458.png)