How to Use Elementor in WordPress
Utilizing Elementor, you have the power to transform your design concepts into tangible creations. The incorporation of live editing streamlines this endeavor, granting you the ability to witness each element taking shape in real-time. Let's delve into the utilization of the Elementor editor and its functionalities.
Elementor offers an intuitive design for users, so you can learn the basics of the editor in a couple of minutes. However, here’s a quick guide to help you build the right foundation.
1. To get started, create a new page or post and click Edit with Elementor.
2. You’ll enter the Elementor page editor. This is what your page will look like.
3. Towards the left, the Elementor sidebar will come into view, offering an array of drag-and-drop functionalities at your disposal for constructing your web page.
Prior to commencing the process of dragging and dropping widgets, it's imperative to grasp the fundamental composition of the Elementor editor, which revolves around three primary elements:
Sections serve as the fundamental building blocks, providing the overarching structure. Within these sections, groups of columns can be introduced, and widgets find their place within these columns.
The editor itself acts as a guide, highlighting viable widget placement areas through the distinct highlighting of sections and columns in a vivid blue frame. Keep in mind that widgets cannot be inserted into the navigation bar or the heading section.
You control the sections, columns, and widgets using the blue handle. Just right-click the handle to edit the blocks.
4. When you’re ready, simply click, hold, and drag a widget to the place where you’d like to add the new module.
For example, when you scroll to the bottom of the page, you’ll have the option to drag a widget into a new, empty area.
5. You can search for specific widgets to customize your pages. Choose from basic elements, like a heading or image gallery, or explore more advanced elements, like animated headlines and testimonial carousels.
6. Select the hamburger icon positioned in the left corner, followed by choosing "Site Settings." Within this menu, you're granted the ability to establish default color schemes and font styles for your pages. Furthermore, you can configure overarching settings that apply to your entire website using Elementor.
7. As a concluding step, locate the History icon situated at the panel's bottom to gain entry to Elementor's integrated Revision History segment. Within the Actions tab, you can meticulously track the sequence of your modifications, enabling seamless navigation between each individual action.
Under the Revisions tab, you're offered the option to transition between different iterations and seamlessly revert to any prior version as needed.