Website development can be tough. Many people have built their entire careers on their panache for website design and development. With so many websites out there, it can be intimidating to someone who is building their first site. WordPress has made that task a little simpler, by offering a free, widely accessible website development platform. But for new designers who are a little code-shy, a plugin like Elementor could make the design of a new site even easier.
Elementor is the #1 free WordPress Page Builder. Elementor allows you to drag and drop live page designs, so there’s no need for pesky two screen viewers to see your adjustments. You can watch your front end designs grow in real time and have precise control over all page elements.
With the rise of tech-literacy, people want Graphical User Interfaces (GUIs). Lines of code can be overwhelming and difficult for newcomers to understand. With the Elementor plugin, anyone, from the coding ninja to the newbie, can design beautiful and free websites.
Installing Elementor
In order to begin with Elementor, you need to download the plugin and install it in your instance of WordPress. Then, when you open your WordPress Dashboard or Editor, you will have the option to “Edit with Elementor.”
Page Structure
Each page on Elementor has an anatomy. The anatomy of pages in Elementor features “Sections” “Columns” and “Widgets”.
- Sections feature blue borers on hover with a “three dot” edit function on click. You can also drag and drop them into the order you like.
- Columns are inside Sections, and feature black dotted lines to demarcate their borders. You can also right click these to edit, or drag and drop for design purposes.
- Widgets are inside Columns, Widgets can be text boxes, image boxes, buttons, etc. You can edit these with a right click, or drag and drop for design.
All of these elements feature precise control through drag, drop, and click. You can right click to copy, paste, duplicate, or delete any of them. You can also drag any section to your desired location. Once you have the layout and design elements in place, you can tweak them all to your liking using layouts. You can adjust the form further through here, for height and width (or you can drag the edges or the top/bottom) and you can change the colors. Much like CSS, this is where you adjust your colors and style for your site.
Using Sections, Blocks, and Pages
When you’re ready to begin designing, click “Pages” and “Add new,” then select “Edit with Elementor” Once you have clicked this option, you will be able to see the raw structure of your page. You can then select the “Elementor Full width” option, to see your page in full width. From here you will have Add/Edit Elements on the right side, and on the left you will have widgets. If you already feel comfortable designing from scratch, you can begin selecting your elements via the widgets and drag and drop them into place.
If you select the library Icon to the right of the plus sign (above “Drag Widgets here”) you will be shown a selection of hundreds of free blocks and pages. Blocks are pre-designed sections like “Call to Actions,” “Testimonials,” or “Contact Us”.
If you select any of these, you will propagate the page with the elements and widgets that are pre-filled and then edit them with the information for your site.
The “Pages” are pre-designed pages which arrange elements and widgets for you to fill in with the information and content of your site.
Publishing Your Changes
Once you have played with your page development and design to your liking, you can click the middle arrow icon to see your page in full view. You can also click the green “Publish” button to see your site live. Elementor also saves your edits as you go automatically, so like a cloud based service, you do not have to worry about whether or not you saved. There is also a hamburger icon, which allows you to adjust the global settings for your entire site.
This is just a basic breakdown of Elementor’s features, but the plugin also provides easy to understand step-by-step breakdowns as you use it.
Do not forget though, after all your hard work designing and developing your website, you will still need a reliable host and a domain registrar to have it perform at its best. At CanSpace Solutions, we are here to help. We aim to respond to all inquiries within 20 minutes, but our average is 5 minutes. Contact us today to learn more about what we can do for you and your new WordPress website designed with Elementor!
