page builder – XTRA Tutorials https://xtratheme.com/docs Documentation of XTRA WordPress Theme Wed, 18 Sep 2024 06:31:39 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 What is Difference Between Sections and Containers in Elementor https://xtratheme.com/docs/getting-started/difference-between-sections-and-containers-in-elementor/ https://xtratheme.com/docs/getting-started/difference-between-sections-and-containers-in-elementor/#respond Sun, 08 Sep 2024 11:14:32 +0000 https://xtratheme.com/docs/?p=4105

Description

Step 1
XTRA

Difference Between Sections and Containers

When working with Elementor to build your WordPress site with our theme, it’s essential to understand the distinctions between Sections and Containers. Both are fundamental elements used to structure and design your pages, but they serve different purposes and offer unique functionalities.

Sections:

  • Definition: Sections are the top-level building blocks in Elementor. They act as the primary containers for grouping multiple columns and widgets.
  • Functionality: Sections help in dividing the page into major horizontal areas. Each section can contain multiple columns, which can further hold widgets and other elements.
  • Usage: Use sections to create broad, overarching areas of your page, such as headers, footers, or large content blocks. They are useful for organizing content in a structured manner.

Containers:

  • Definition: Containers, introduced in Elementor’s Flexbox Container system, are more flexible and versatile than traditional sections. They allow for advanced layout designs and responsive controls.
  • Functionality: Containers can be used within sections to create more complex layouts. They offer greater control over the arrangement of columns and widgets, thanks to Flexbox-based alignment and distribution options.
  • Usage: Containers are ideal for creating intricate designs that require precise control over spacing and alignment. They provide enhanced flexibility for responsive design, making them suitable for modern, dynamic layouts.

Tip

It’s helpful to know that …

While both sections and containers are crucial for page layout in Elementor, sections are best for broad organizational purposes, whereas containers offer advanced layout options and flexibility. Understanding how to effectively use both can significantly enhance your WordPress site’s design and functionality.
]]> https://xtratheme.com/docs/getting-started/difference-between-sections-and-containers-in-elementor/feed/ 0 How to Save a Page as a Template in Elementor? https://xtratheme.com/docs/how-to/how-to-save-a-page-as-a-template-in-elementor/ https://xtratheme.com/docs/how-to/how-to-save-a-page-as-a-template-in-elementor/#respond Sun, 01 Sep 2024 13:06:55 +0000 https://xtratheme.com/docs/?p=3908

Description and Screenshot

Step 1
XTRA

Creating a template of a page with Elementor

  1. Once go to Dashboard > Pages > All Pages.
  2. Edit a page that you want.
  3. click on the arrow next to the “Update” button at the bottom of the Elementor panel and Select “Save as Template” from the dropdown menu.
  4. A popup will appear where you can name your template. Give it a descriptive name so you can easily identify it later then Click the “Save” button to store the template.
  5. To use the template on another page, go to the page you want to edit with Elementor.
  6. Click on the folder icon in the Elementor editor to open the “My Templates” library.
  7. Select the template you saved earlier and click “Insert.”
  8. Click On the “Apply” button.
  9. The entire design will be imported into the new page, click on the “Publish” button.
The1 2
The3
The4
The5
The6
The7
The8
The9
Tips

You may want to know …

  • Before adding a template, you can go to Dashboard > Templates > Saved Templates > first, edit the template with Elementor and then add it to the destination page.
The eh4
  • Or create a new saved template (without saving from any other page) and then add it to the destination page.
Add new theme
]]> https://xtratheme.com/docs/how-to/how-to-save-a-page-as-a-template-in-elementor/feed/ 0 How to Create and Add a Particle Section in Elementor? https://xtratheme.com/docs/how-to/how-to-create-and-add-a-particle-section-in-elementor/ https://xtratheme.com/docs/how-to/how-to-create-and-add-a-particle-section-in-elementor/#respond Mon, 26 Aug 2024 07:46:29 +0000 https://xtratheme.com/docs/?p=3621

Description and Screenshot

Step 1
XTRA

Add particle section in Elementor

In a Page/Post/Portfolio, you can create a saved template from a section you are considering and import it into another Page/Post/Portfolio.
We have explained the step-by-step tutorial with the help of screenshots.

  1. Edit Page/Post/Portfolio with Elementor > Save as Template.
  2. Choose a name for Template
  3. Go to destination Page/Post/Portfolio and edit it with Elementor and as in the third screenshot click Add Template
  4. Choose the Template that you have created
  5. Click on the Apply button



Sav the
Them e2
Add the.3
The4
5the th
Tips

You may want to know …

  • Before adding a template, you can go to Dashboard > Templates > Saved Templates > first, edit the template with Elementor and then add it to the destination page.
The eh4
  • Or create a new saved template (without saving from any other page) and then add it to the destination page.
Add new theme
]]> https://xtratheme.com/docs/how-to/how-to-create-and-add-a-particle-section-in-elementor/feed/ 0 How to Create a Custom Contact Page with CF7: A Step-by-Step Guide? https://xtratheme.com/docs/how-to/how-to-create-a-custom-contact-page-with-cf7-a-step-by-step-guide/ https://xtratheme.com/docs/how-to/how-to-create-a-custom-contact-page-with-cf7-a-step-by-step-guide/#respond Tue, 20 Aug 2024 10:59:12 +0000 https://xtratheme.com/docs/?p=3589

Watch the video to learn how to create CF7 page

Step 1
Steps

Add CF7 in a page with Xtra Theme

  1. Add a new page or post
  2. Edit it with Elementor
  3. Search Contact Form 7 in elements list
  4. Add element of Contact From
  5. Customize the form
  6. Save the page or post
]]> https://xtratheme.com/docs/how-to/how-to-create-a-custom-contact-page-with-cf7-a-step-by-step-guide/feed/ 0 How to Enable Page Builder for Custom Post Types: A Step-by-Step Guide? https://xtratheme.com/docs/how-to/how-to-enable-page-builder-for-custom-post-types-a-step-by-step-guide/ https://xtratheme.com/docs/how-to/how-to-enable-page-builder-for-custom-post-types-a-step-by-step-guide/#respond Wed, 12 Jun 2024 09:41:00 +0000 https://xtratheme.com/docs/?p=2457

Description and Steps

Step 1
XTRA

Enable or disable WPBakery post types

To enable or disable the WPBakery Page Builder (formerly known as Visual Composer) for your website custom post types simply go to Dashboard > WPBakery Page Builder > Role Manager and under the user role you want to set the post types, click on Custom from the drop down then check all the post types you want to use the Page Builder on.

Wpbakery_cpt
Tips

You may want to know …

  • Can’t see your post type – Deactivate all plugins and first enable your post type plugin then activate WPBakery plugin and now you should see your post type.
]]> https://xtratheme.com/docs/how-to/how-to-enable-page-builder-for-custom-post-types-a-step-by-step-guide/feed/ 0