Get Started with Page builder

Elementor is a visual website builder plugin for WordPress enabling the creation of web pages in a live, visual way. 

Create a new page #

1. From the Ecomly store dashboard, click Storefront > Pages > Add new
2. Name your page
3. Click the Publish button (Visibility options may be set if page is to remain private)
4. Click Edit with Elementor to enter the Elementor Website Builder

Elementor Panels Overview #

Build Your First Page #

Please refer to this article https://elementor.com/help/build-your-first-page/

Adding Page Templates #

Templates are pre-designed Pages & Blocks that can be inserted into any page with just one click.

1. From the editing screen, Click the  icon as shown in the screenshot above.
2. When the library of templates pops up, click the magnifying glass icon  to preview a template.
3. Click INSERT to select the template of your choice.
4. You can even give your favorite templates a heart and save them to My Favorites.
5. Have a template you downloaded elsewhere that you want to use? Just click the arrow in the top right corner  to upload its .json or .zip file.

Preview & Publish your page #

After you’re done designing your page, you can Preview it and Publish it.

Go to the bottom panel:

1. To preview click the  icon. 
2. If you are satisfied with the result, go ahead and click the  button. 
3. Click ‘Have a Look‘ to view the published page

Save Draft #

In Elementor you can edit a Published page and save your work as Draft. That means that you will not ruin your published page while saving your work as Draft.

How To Adjust Settings For Mobile, Tablet, and Desktop #

Many editable features have a Mobile, Tablet, and Desktop settings.  The most common uses include: Text size, Margin and Padding of elements etc.

1. Look for the Viewport Icon  next to the individual element you wish to control. 
2. Click the specific device icon for which you want to edit its settings

Controlling Responsive Background Images and Borders #

Background images in Elementor are automatically device-responsive, but you also have control over more options for each device.

1. Background Image: You can choose a different background image for each device if needed, whether it is a size-appropriate version of the same image, or a completely different image altogether.
2. Background Image Display Options: You can select a different image position, attachment, repeat, and size for each device. In this way, you have more control over which area of the image is displayed on different device sizes.

Visibility  #

You can choose to Show / Hide a Section according to the device.

1. Go to Section Setting > Advanced > Responsive
2. Set your visibility preferences, choosing from Hide on Desktop, Hide on Tablet, or Hide on Mobile.

When hiding an element, and switching to the view it’s hidden on, you will see that this element is “muted”. This gives you a clear indication that this element will be hidden on the live site, but still enables you to edit it as needed. 

You can edit that specific area in the responsive mode in which it is not hidden. For example, if the element is visible on mobile but hidden on desktop and tablet, you will be able to edit the element in the mobile view.

Change Mobile & Tablet Breakpoints #

You can set the mobile and tablet breakpoint values.

1. From any Elementor page or post editor, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Layout > Breakpoints, and set the breakpoint value for mobile and tablet
2. Save your changes

Columns Ordering #

This feature reverses the ordering of columns.

To use Columns Ordering go to Section Setting > Advanced > Responsive > Reverse Columns and set it to Yes.

Device Preview #

Switch between device views by clicking on the responsive editing icon on the bottom of the panel. The device previews will be located at the top of the editor.

How to Create, Edit, & Style Sections #

Sections can be manipulated and styled either via the options in the Elementor Panel on the left or by right-clicking the Section handle and choosing from the context menu that pops up. 

Right-Click Options #

If you wish to duplicate a section, right-click a section handle and choose Duplicate from the context menu. You can also copy and paste a section elsewhere using Copy and Paste options here, or you can copy and paste only the style (without the content) from one section to another. Click Save as Template to save the section as a template that can be inserted anywhere later. Clicking Navigator here will open the Navigator already set to that particular section. And of course, clicking Delete here will delete the section.

For more help please visit https://elementor.com/help/section-overview/

How to Create, Edit, & Style Columns #

Columns can be manipulated and styled either via the options in the Elementor Panel on the left or by right-clicking the Column handle and choosing from the context menu that pops up. 

For more help please visit https://elementor.com/help/column-overview/