Designing and building a full WordPress website isn’t as complicated as you think. These days, creating a design in this powerful CMS (content management system) has become a more modular and time-saving process through the use of powerful page builders. One of the most popular WordPress page builder options is Elementor (aka my bae). Instead of taking days to figure out how to make simple changes on your website, Elementor allows you to make on-page updates on the fly making it easy for you to keep your website’s information and the overall design up-to-date for your target audience.

Quick Disclosure Time: I only recommend products I would use myself. All opinions expressed here are my own. So yeah… this post may contain affiliate links that are at no additional cost to you but I may earn a small commission. Depending on the link, you may even get a cool discount. Win-win folks. 🙂

Best of all, there’s no coding when you’re building your WordPress website with Elementor. This is super cool because after you get comfortable with using your own setup of it, you’ll find that building a website for your small business is easier than you think. From landing pages to lead capture forms (Elementor Pro), to building and designing a full multi-page website, Elementor has got your back! And if you’re hiring a designer, you may end up wanting them to build your website with it after you learn how simple it will be to keep your website updated after your project!

In this post, I’m going to break down WTH a page builder even is, what and how Elementor (my go-to) can make your website life easier, and some other cool details that may push you to take action with it today! This post is GREAT for both of those who are ready to get started with it and for those who are trying to figure out what to do with their new Elementor install.

What is a Page Builder and why is Elementor so special?

You may have heard of page builders for WordPress website design and how easy they make getting one up and running fast. A page builder is a feature (or plugin) installed on a WordPress website that allows you to build a full website from scratch. Page builders are dynamic frameworks that allow you to drag-and-drop elements onto a page then custom designing them to your brand’s visual aesthetic from there. This sounds like it would be a lot of demand on your WordPress website but if you’ve got a reliable host keeping your website online along with a simple plugin setup, a page builder will be a powerful and lightweight addition to your website.

OK but WTH is Elementor?

Elementor is a crazy popular page builder that allows you to get started building your website with a feature-rich free version or by paying just $49 per year with Elementor Pro. For a while, I used the free version to build and maintain my website and it was plenty.

Out of the gate, here’s what Elementor comes with for free:

• A super easy to use drag-and-drop website building system
• Responsive editing. BTW, Google LOVES responsive websites.
• 40+ element widgets. From text elements to displaying videos from YouTube on your website with ease, Elementor’s widgets allow you to take your website to a serious level of greatness.
• 30+ templates to kick off your website’s overall design. This is great for beginners to start their website’s design. After getting your templates installed on your website’s pages, you can tweak them to your brand’s look and feel.

Elementor’s pro version shines bright with some serious additions like:

• 50+ pro element widgets. A true expansion on their already amazing set of design widgets.
• 300+ pro templates. This allows your website design creativity to run wild folks.
• 10+ full website template kits. So… you can build multiple pages on your website in a flash. Easy day.
• Theme builder. This addition to Elementor Pro allows you to create a full theming system on your website. This helps you keep your website’s design cohesive across all pages.
• Woocommerce builder. An easy way to custom design your dream online store using both Woocommerce and Elementors design superpowers.
• Pop-up builder. No need to add pop-up code from email marketing software or installing an extra plugin for this task. Elementor brings pop-up greatness into its pro version.
• Support & updates for a year. As long as you keep Elementor Pro, you’ll be the first to receive majorly cool updates.

How do I install and set up my copy of Elementor?

It’s super easy to install and start using Elementor fast. We’re going to go with the simplest install option; right from your WordPress dashboard.

Quick note: You’ll need a self-hosted WordPress website to get in on Elementor’s awesomeness. You can check out this post to learn why rocking with a self-hosted WordPress website is the way to go.

1. In your WordPress dashboard, click Plugins then Add New.
2. Search for Elementor in the search bar located on the top right side of this screen.
3. Go ahead and click Install, then Activate after it’s installed. You now have Elementor installed; get excited!

Click each image to see a close-up of how each step looks in your WordPress dashboard.

Now let’s get into what Elementor is made of by creating a simple but important website section, the home page hero.

Go ahead and create a new page on your WordPress website. Title it “Elementor Playground” or “Elementor Test”. Something like that. Then click the blue Edit with Elementor button shown at the top of your page editor screen. Elementor will then begin to load.

Let’s start creating a simple home page hero section to get kicked off easily. Now that you are inside the Elementor editor, click the magenta plus sign button to create a section. Choose the very first layout option. This is a section with one column. That’s all we need for now.

We need this section to be full-width. On the left-hand side of your screen, it should show Edit Section at the top. This shows us that we’re currently working with the section that we’ve just created. In this editing panel, click the drop-down area for Content Width and switch it from “Boxed” to “Full Width”.

Check out the video to see Elementor in action! Detailed instructions to finish following along to are below the video.

• Let’s give this section some breathing room. Where it says Height, click the dropdown and choose Min Height. Click VH then adjust your section’s height using the slider. I’m going to go with 60 as my adjustment. Go with a height that’s large and noticeable but doesn’t take up so much of your page.
• Time to make our section less boring, lol! We’re going to make the ever-popular parallax hero section so it can really pop. In your editing panel, click the Style tab. The first thing that you’ll see is Background. Click the paintbrush icon (Classic). You’ll see a few options open up from here.
• Where it says Image, click the plus sign icon. This will open up your website’s Media Library. Pick a nice sized image (preferably taken at a landscape angle) from your library on the next screen then click the blue Insert Media button on the lower right-hand side of the screen.
• In the Position drop-down below the image you’ve just picked, choose Center Center to adjust your background’s placement. This can be adjusted to your liking more after the next step.
• In the Attachment section, pick Fixed. This gives our section’s background that cool parallax effect. As you scroll up and down on your page, the image stays in place within the section. Note: This does not work on mobile devices.
• Where is says Size, choose Cover from the dropdown. This will change the background’s view to show most if not all of the image.
• Next, click the Background Overlay dropdown. Here, you’ll see options similar to the Background section. Click the paintbrush icon and choose a color. I’m going with classic black (aka color hex #000000). Now we’ve got a nice base to add noticeable text on top of our hero section. You can adjust how much of the color you chose is shown by using the Opacity slider.
• Time to add text. Click the icon located at the top right-hand side of the editing panel that looks like a set of boxes. Now we’re in our Elementor widget library.
• From here, drag and drop the Header element from the set of widget options into the middle of our section (inside of the column). We’ve now added header text to the column within our hero section. It’s probably light blue and boring, lol!
• Let’s give it some style! In the editing panel, it should now say Edit Heading. Change what you want your heading to say in the Title text box. Quickly change the size of your text using the Size drop down. Then center align your text using the second Alignment option.
• To change the color of your text, click the Style tab. Pick your desired color from the Text Color color picker. I’m going with white (aka color hex #ffffff).

Done! We’ve just created a simple parallax home page hero using Elementor. It may seem like a lot of steps but after playing around with Elementor in your new test page with widgets and various style options, you’ll feel more comfortable using it!

Quick important note: Be sure to save you work when you’re happy with it. The large button at the bottom of your Elementor editing panel will become green when you have chnages that need to be saved. When the button is grayed out, that means that their are no new changes to save.

There are a lot of widgets to test out and each of them have their own set of Style panel options. I suggest that you keep playing around with each one on your test page to understand what they all have to offer!

---

To recap, Elementor can do a lot for your small business’s website. From seamlessly bringing in your unique brand’s aesthetic to adding dynamic features to your website’s pages through the Elementor widget library, you’ll be able to easily capture your target audience’s attention with a cool design along with keeping your website up to date consistently!

If you have any questions about these tips or any WordPress website stuff, don’t hesitate to follow and DM me on Instagram. If you’re ready to get your own website launched this year, book your complimentary design consult today!