If you’re into web design, then you’ve probably heard of Elementor. It’s a drag and drop page builder (like Wix and Squarespace) that allows you to build full WordPress websites with little to no coding. It’s an incredible frontend tool for professionals looking to spend less time on HTML/CSS and more on the visual side of things. For creative agencies like Solid Digital, Elementor + WordPress gives us enough free reign to create dozens of customized websites a year, each with their own unique identity.
Before I’d joined Solid, I knew a little about Elementor, but it wasn’t until I worked with our Creative Director, Derek, that I learned what this generous page builder could really do.
and more on visual design.
For creative agencies like Solid Digital, Elementor gives us enough free reign to create a vast amount of customized websites, each with their own unique identity. Before I joined Solid, I knew a little about Elementor, but it wasn’t until I worked with our Creative Director that I learned what this generous page builder could really do.
How Elementor changed my mindset
Shortly after onboarding, I had the responsibility of building a few pages in Elementor for a client. Excited to start, I blocked out some focus time on my calendar and paused my Slack notifications. I was ready to show how quickly I could build a webpage, widget by widget.
Many hours later, I was finishing up when Derek checked in, and his first tip absolutely blew my mind. He said instead of building every page one widget at a time, I could copy and paste a similar page and just change the content. Copy and paste.
I was stunned. Not because I hadn’t thought of it, but because I thought it was cheating somehow.
As a rookie designer, I thought copying and pasting was an embarrassing shortcut when really, it was way more efficient for our project’s timeline. At first, I was only thinking of what I could do, but I needed to think more holistically. I needed to work with one question in mind: what’s the smartest way to do this?
Turns out, creating a page familiar to our front-end developers was the best method. In a single day, my mindset changed. Even if I was working in solitude, I kept the expectation that someone would come in after me. I also recognized a unique kind of perfectionism that many young designers deal with.
I thought I’d fulfilled my assignment the best way it could’ve been done, but then someone with more experience showed me a better way.
I was so relieved.
For one, I could streamline the rest of my work, easy. And two, perfectionism has nothing on experience. Lastly, work smarter, not harder. Here are some tips to do just that in Elementor:
Tips to work smarter with Elementor
Copy and paste pages/sections and keep everything labeled
When you’re on a team, it’s important to think of the project as a whole. Your work is part of something much greater, so you’ll want to make it easy for other designers, developers, and even project managers to follow after you.
The best tip I can give is to copy and paste certain pages or sections whenever possible. It cuts down on time, settings remain the same, and troubleshooting becomes a lot easier down the road. Elements like call-to-actions or newsletter signup forms can also be templated [link to Elementor tutorial].
Always check for responsiveness
When working on a desktop, it’s easy to forget about responsiveness. How would your designs look on tablet, mobile, or even a smaller laptop screen? While Elementor allows you to see your designs using different breakpoints, there’s nothing like testing your work on a real-world device.
Remember to check often and iron out the kinks as you go to save yourself time in the future.
Have an established style guide
Here at Solid, we include a style guide within Elementor for our clients. These include text styles, button styles, and colors for easy reference. We also offer a more in-depth style guide as an extended service. Now, we all know having a style guide is essential for any design project, but as a newcomer, I thought our practice of having everything in one place was brilliant.
While these tips may seem straightforward, you’d be surprised at how easy it is to forget the basics when you’re neck-deep in a buildout. But if you’re ready for the fancy stuff, I’ve got a couple of those, too.
More Advanced Elementor Tips
Navigator
One of the most overlooked features of Elementor is the Navigator. According to Elementor Academy, the Navigator is a “navigation tree panel providing easy access to every element on the editor with just one click”. This makes it incredibly simple to label sections, hide or show elements, and reorder sections on the page.
Personally, I find it most useful for long pages with complex, nested sections. The Navigator allows you to make swift updates instead of scrolling and double clicking a million times to activate the element you need to edit.
Pro Tip: You can access the Navigator using the shortcut Cmd (Ctrl on Windows) + I.
Page History
I think all designers building in Elementor have worked on a page only to realize something is broken and they’re not sure how to fix it. Sure, you can Ctrl-Z to undo your last action, but what if that doesn’t solve the problem?
Introducing your saving grace: the revisions tab! Elementor creates a log for every page update, so instead of fretting over errors, you can literally go back in time and give yourself a redo. In my experience, that security blanket gives me reassurance that I can mess up and not ruin the entire project. Takes a lot of weight off your shoulders!
Crocoblocks
WordPress is great. Elementor is amazing. But Crocoblocks makes the entire experience even better. If you’re looking for a way to produce more complex layouts, try these amazing plugins.
I know it’s a lot to review, so I suggest starting with Jet Elements. You can create awesome visual effects, create different image setups, even integrate maps and subscription forms. If you want to get really fancy, give JetTricks and JetEngine a try. Create dynamic content, listing grids, and sticky columns—just to name a few.
Conclusion
It’s weird to say that a drag-and-drop website builder changed my perspective on the importance of teamwork, but it’s true! Sure, there are tangible tips that I learned to make Elementor even more exciting and efficient, but the most crucial lesson I learned was to be proud of my place on the Solid Digital team and own it from start to finish. Individual projects may change, but this new mentality is here to stay.
