How to edit a WordPress using Elementor

These steps will help you understand how to build a successful page using Elementor if you are a new user. 

Creating A New WordPress Page

1. Click Pages > Add New in the WordPress dashboard.
2. Give your page a name.
3. You can set the visibility options for the page if it should be kept private, by clicking the Publish button.
4. Enter the Elementor Web Builder by clicking Edit with Elementor.

Edit Your First Page

The building blocks of Elementor are Sections, Columns, and Widgets. A Section consists of a number of Columns, and within them there are still more Columns. The Widgets are located in Columns inside Sections. These widgets are placed within Columns. Sections, columns, and widgets are controlled by their handles. Hovering over an element’s edit button will display editing handles when you click the Preferences tab. Clicking No will hide them.

Editing

By right clicking the handle of a Section, Column, or Widget, you can edit them.

Sections

1. You can add a Section by clicking the + icon, or choose a pre-designed Page or Block from our library by clicking the folder icon.
2. Configure your Column structure.
3. You can edit, duplicate, copy, delete, etc., by right-clicking.
4. You can add, drag, or delete sections with the Section handle.

Columns

1. Select the Columns Width. If you want to rearrange the columns, either drag a dashed line between the columns or go to Layout.
2. You can add more columns by right clicking and selecting Add New Column.

Widgets

1. Add widgets to your columns.
2. By default, the Widget’s width is determined by the Column’s width. By selecting the Advanced tab > Positioning you can access additional width options.

Copy or Delete all content

Simply right click on the empty section to add a section and the templates icons and select Copy or Delete to remove all content from the page. Additionally, you may paste items onto another page on the same website.

Adding templates

Using a template, you can easily insert a pre-built Page or Block into any page within seconds. 

1. Click the folder icon from the editing screen.
2. You can preview a template by clicking the magnifying glass icon in the library of templates.
3. Choose the template you want to insert by clicking INSERT.
4. Your favorite templates may also be saved to My Favorites by giving them a heart.
5. Have you downloaded a template from somewhere else that you would like to use? The .json or .zip file can be uploaded by clicking the up arrow in the upper right corner.

Mobile responsive editing

There are settings available for Mobile, Tablet, and Desktop. Text size, margins, padding, and margin-padding of elements are the most common uses.

1. You can control an individual element by clicking the Viewport Icon next to it.
2. To edit a device’s settings, click on the device’s icon.

Controlling responsive background images and borders

Several options are available for adjusting the background images for each device in Elementor, which is automatically device-responsive.

1. For each device, you can select a different background image, whether it is a smaller version of a larger image or a completely different image altogether.
2. There are different options for selecting background image size, position, attachment, and repeat for each device.By doing this, you can choose which area of the image will be displayed on different devices.

Visibility

The device will determine which sections are visible / hidden.

1. Select Section Setting > Advanced > Responsive.
2. Depending on your preference, you can choose to hide on desktop, hide on tablet, or hide on mobile. 

Whenever you hide an element and go back to the view it is hidden in, the element is “muted”. As a result, you are clearly aware that this element will not appear on the live site, but you can continue to edit it as needed.

In the responsive mode, that specific area can be edited, even if it is hidden. The element will be editable in the mobile view, even if it is hidden on desktop and tablet.

Change mobile & Tablet breakpoints

Setting breakpoint values for mobiles and tablets is also possible.

1. To set the mobile and tablet breakpoints, click the hamburger menu in the upper left corner of any Elementor page or post editor and choose Site Settings > Layout > Breakpoints.
2. Don’t forget to save.
3. Click the Regenerate CSS button in Elementor > Tools > General Tab > Regenerate CSS.

Columns ordering

By using this feature, you can reverse the order of columns.

In the Section Setting page, go to Advanced > Responsive > Reverse Columns and select Yes.

Device preview

At the bottom of the panel, click the responsive editing icon to switch between devices. Previews for each device appear at the top of the editor.

Publish your page after previewing it

Your page is ready to be published after you have finished designing it. Scroll down to the bottom panel:

1. Click on the preview icon to preview.
2. Go ahead and click the publish button when you’re satisfied with the result.
3. View the published page by clicking ‘Have a Look’.

Please not: There is a difference between the Preview link and the actual page link.

Save as a Draft

Editing a Published page in Elementor allows you to save your work as a Draft. By saving your work as Draft, your published page will not be ruined.

1. Select Update / Publish by clicking the arrow.
2. Select Save Draft.