What is Elementor for WordPress?

Elementor is the ultimate free WordPress page builder, allowing you to create beautiful WordPress websites in the easiest and fastest way possible. It is the first and currently the only front-end page builder that offers unlimited design possibilities. It includes dozens of useful widgets, a library of beautifully designed templates, a unique mobile editing toolset and a visual revision history feature.

Step guiding how to start building a web page with Elementor.

1. Select Pages and add a new page. Give a name for your page.

2. Click “Edit With Elementor” button to start your editing for your page.

3. Click setting icon and select elementor full width for you web page layout.

4a. Click “+” icon and select the type of structure for your page.

4b. Or click folder icon and you may choose what kind of sample templates or pages style you wish to use for your webpage.

5a. You may drag any widget you wish to insert to the section or column.

6. After adding the structure or templates or page sample, you may click burger icon(section) or black square icon(column) to edit your content in the column or section. Furthermore, you may right click on the icon to duplicate, delete….. for the column. Besides, you may drag your column or section by long clicking on the burger icon or black square icon.

7. Each section or column having a same adjust category which is Layout, Style and Advanced. Different column and section having different Layout adjustment and Style adjustment while they have same adjustment in Advanced. Basically, you can adjust content width in Layout tab, add background image, background overlay, adjust typography in Style tab. Last but not least, adjust section or column margin and padding in Advanced tab.

8. If you have insert a image widget, click the image box at the left hand side to upload, select or delete image. You may adjust the image by repeating step 6 and 7.

(Note: When you re-upload an edited image that it’s original image had been uploaded before, don’t set as the same name because it will appear as the original image)

Responsive

Make sure you check every responsive mode which is desktop, tablet and mobile after done design your web page. You may adjust your content in different responsive mode by repeating step 6 and 7. Click “Publish” button once everything is ready.

(Note: Sometime you need to check mobile responsive by using your own phone for viewing the web page)

What kind of widget can I found in Elementor for WordPress?

Basic elementor widgets

Pro Version elementor widgets

Theme elementor widgets

Woocommerce elementor widgets