How to use Elementor in WordPress
With Elementor, you can create your design and make it a reality. Live editing on the page makes this process easy by allowing you to view each element as you design it. Discover how to use the Elementor editor.
Instructions on how to use Elementor
Elementor brings an intuitive design to the user. So you can learn the basics in just a few minutes.
- Step 1: To get started, create a new page or post and click Edit with Elementor.
- Step 2: You will need to go to the Elementor Page Editor.
Step 3: On the left side, you will see the Elementor bar with all the drag-and-drop features that you can use to build your WordPress website.
Before you start using it, you must understand that Elementor consists of three main blocks: Sections, Columns and Widgets.
Sections are the biggest block, in Sections you can add Columns and Widgets placed in Columns.
Elementor will show you where to use the widget by highlighting Sections and Columns in the blue box. Note that you cannot drag widgets to the navigation bar or the title.
Elementor with a section highlighted in blue, you can edit Sections, Columns and Widgets using this blue section. Just right click on it to edit blocks.
- Step 4: Now just click, hold and drag the widget to the location where you want to add the new module.
- Step 5: You can search for specific widgets to customize your page. Choose basic elements like heading, image gallery or more advanced elements like animated headlines and testimonial carousels.
- Step 6: Click the hamburger button in the left corner, then click Site Settings. In this menu, you can customize and reset the default colors and fonts for your pages. You can also configure general settings for your entire website on Elementor.
- Step 7: Finally, you can click on the . icon History at the bottom of the table to access the section Revision History Elementor's built-in.
In the Actions tab, you can track your changes, moving back and forth between each action. In the Revision tab, you can switch between your revisions and undo any previous version.
How to create the first page in Elementor
Elementor often stands out from its competitors because of its ease of use. You can refer to some of the simplest ways below and can apply immediately to your website.
- Step 1: Access Dashboard of WordPress.
- Step 2: Click Page, then select Add New.
- Step 3: Click Edit with Elementor.
- Step 4: Elementor will load like this:
- Step 5: Next, add the Heading, Text Editor and Image widgets.
- Step 6: After dragging it to the desired position, you can edit each widget to suit your content. Click the button Publish to complete.
- Step 7: Once you've finished setting up your page, you can preview it before publishing it. To get started, go to the panel on the left side of Elementor.
- Step 8: To Preview the page, click the eye icon.
- Step 9: Click on the word Publish below to Publish the page to the website.
Templates are the Page and Block pre-designed to help you design your WordPress website. Pages are layouts with full content, while Blocks are sections with pre-made widgets.
Elementor gives you a full license to use any of the templates for business. There is a separate section to search for specific templates. Plus, all templates are mobile responsive. You can insert them into any page with just one click.
- Step 1: Inside Elementor, navigate to the bottom of the page, where the Add widget here. Click on the white folder.
- Step 2: A library of templates will appear. To preview a template, click the magnifying glass icon or on the image. Or just hover over one of those templates.
- Step 3: Click the Insert button to import the demo template to your site.
- Step 4: If you haven't already connected to Elementor's template library, it will prompt you to do so. Elementor will automatically redirect you to its website where you can register or login.
- Step 5: After you register or log in, your connection will be confirmed.
- Step 6: Go back to the page you want to edit and Insert the template you want.
How to use advanced features in Elementor
The pro version of Elementor offers advanced features that make your website more professional. You get access to more features than the free version of Elementor.
How to Create Popup in Elementor
Popup forms help you capture email addresses from potential customers. Elementor makes creating these forms easier with the pop-up builder. Follow these instructions to create your own popup.
- Step 1: In the WordPress Dashboard, go to Templates>Popups>Add New.
- Step 2: Name your template and click Create Template.
- Step 3: Choose a template from Thư viện or create a design of your own.
- Step 4: Click Publish, Later Save and Close.
- Step 5: Open a new page in Elementor (Ctrl + E for PC users, Command + E for Mac users).
- Step 6: Drag in a widget.
- Step 7: In Layout, select LOOKink > Dynamic > Actions > Popup.
- Step 8: Enter Popup > and select the popup you created.
- Step 9: Go to the live page.
- Step 10: Then click on the button and the popup will appear
How to Edit WooCommerce Product Pages in Elementor
WooCommerce is a popular e-commerce platform that helps you build an online store for your business. With Elementor, you will create product pages to increase your sales.
Before you can customize your product page, you need to install and activate the WooCommerce and Elementor plugins to your WordPress Dashboard.
Once set up, you can design your product page. Follow these steps:
- Step 1: In the WordPress Dashboard, go to Elementor>My Templates.
- Step 2: Click the button Add New.
- Step 3: Select Single Product make a template and click Create Template.
- Step 4: Elementor Library will be loaded.
- Step 5: Next, choose a pre-designed template or create one from scratch.
- Step 6: In the template, add various product widgets to customize your page.
- Step 7: When you're ready to Preview your page, click the eye icon on the bottom left panel.
- Step 8: Press Settings, then select the product you want to display. It might look like this:
Step 9: To Publish your page, click the . button Publish green in the bottom left panel.