Enterprise Digital Uplift and Systematic Technology Education

Elementor Main Interface

Exploring the Elementor Main Interface

Elementor’s main interface is where the actual page design takes place. It consists of several key areas and elements that allow you to build, customize, and preview your web pages. Here’s a detailed exploration of the main interface in Elementor:

Overview of the Main Interface

  1. Main Canvas

    • The main canvas is the central area where you design your page. It displays the actual content you are working on and allows you to add, edit, and arrange various elements.

  2. Section and Column Handles

    • Section Handle: When you hover over a section, a blue outline and a handle appear at the top. Click this handle to access section settings, including layout, style, and advanced options.
    • Column Handle: When you hover over a column, a blue outline and a handle appear at the top. Click this handle to access column settings, including layout, style, and advanced options.

  3. Add New Section Button

    • Located at the top of the main canvas, the “Add New Section” button lets you create a new section on your page. You can choose from pre-designed section layouts or create a blank section.

Working with Sections, Columns, and Widgets

  1. Adding a Section

    • Click the “Add New Section” button to start.
    • Choose a layout for your section from the available options.
    • After selecting a layout, the section will be added to your page, ready for customization.

  2. Customizing a Section

    • Hover over the section and click on the handle to access the section settings.
    • In the left panel, you’ll see various tabs:
      • Layout: Adjust the width, height, column gap, and other layout settings.
      • Style: Customize the background, border, typography, and more.
      • Advanced: Set margins, padding, Z-index, and other advanced settings.

  3. Adding Columns

    • When you add a new section, you can choose the number of columns within it.
    • Each column can be individually customized by clicking on the column handle.

  4. Customizing Columns

    • Click on the column handle to access the column settings.
    • In the left panel, you’ll see various tabs:
      • Layout: Adjust the column width, vertical alignment, and more.
      • Style: Customize the background, border, typography, and more.
      • Advanced: Set margins, padding, Z-index, and other advanced settings.

  5. Adding Widgets

    • Within each column, you can add widgets to display different types of content.
    • To add a widget, click on the “+” icon within the column or drag and drop a widget from the Elements panel on the left.
    • The widget will appear in the column, and you can then customize it.

  6. Customizing Widgets

    • Click on the widget to access its settings.
    • In the left panel, you’ll see various tabs:
      • Content: Modify the widget’s content, such as text, images, or links.
      • Style: Customize the widget’s appearance, including colors, typography, and spacing.
      • Advanced: Set margins, padding, motion effects, and other advanced settings.
CHAT