One of the most common questions when it comes to website setup is – how to design a WordPress website? If you’re trying to find an easy and effective way to design new pages on your website, learn how to use Elementor! It’s a free WordPress page builder, accessible for all self-hosted WordPress websites. Here I’ve gathered some tips for designing a website with Elementor!
You’ve followed the advice and started a self-hosted WordPress website… You log into your WordPress panel and see nothing but confusion. How to design a WordPress website?! Where to start? What tools to use?
Or maybe you’re searching an easy way to update your existing design, to get more creative without learning how to code or without much of a time-waste…
With Elementor you can build any website page needed! Hand-craft your website page by page.
Elementor is one of the best WordPress page design plugins and it’s FREE. After working with hundreds of different websites, I always come back to using Elementor.
Elementor is great for starters! Even though you will need to learn a new skill or two to build your website with it, it’s easy to use and very intuitive. + Once you get the hang of it, you can design any page you need.
I’ve been creating Elementor websites, sales and landing pages for several years and here are some of the must-know tricks that can make the whole process a lot easier for you!
How to design a WordPress website? Introduction to Elementor
First, let’s see how Elementor works.
For whoever might be at the very starting phase, let me explain some important differences between the terms used:
- Self-hosted WordPress website means that you’ve set up your website with hosting like Siteground, Bluehost, GoDaddy or similar. If you don’t have a self-hosted website just yet, grab my Blog Creation Simplified guide to start one!
- Elementor IS not a blogging platform OR hosting. It’s a plugin you add on your platform (WordPress).
- Other website platforms, besides WordPress, include names like Squarespace, Wix, Weebly. But Elementor is a plugin created for WordPress.
If you are just planning to start a blog, make sure to read this full guide to starting a blog.
I hope I’ve cleared some air for the most confused readers (I’ve been there!). Now, let’s meet Elementor!
Elementor is a free WordPress page builder plugin. Therefore, anyone with a self-hosted WordPress website can install and use it, no matter your existing theme or builders.
Once you install the plugin, you can create a new page and design it with an Elementor drag & drop page builder.
It WILL NOT delete any of your existing content or builders. You can use several page builders on one website if you please (but it’s definitely not recommended for several reasons).
For example, if you already have a WordPress theme you like and your website has been nicely set up, you can use Elementor if you need a quick Sales page or Landing page for your opt-in or product.
Free Elementor plan is fully functional and will give you a chance to create and publish beautifully built pages. You can consider Elementor Pro if you want more page elements. The good news though – you can easily recreate any of the Pro elements with Free version, it will just take a bit more of your time…
So no money investment necessary!
Tips for designing a website with Elementor
TIP #1: Have a base theme installed
While you can build plenty of pages with Elementor, the free version doesn’t have the support of editing your Header + Footer + Blog section.
Therefore, I suggest installing one of the free WordPress themes or choose a free theme from another provider for Header/Footer & Blog posts.
This means that, for example, on Elementor you’ll be able to design your Homepage, About, Contact and any other pages your website might need. However, the “frame” – the header with menus, logo and maybe social media icons or search field, as well as the footer with any relevant elements – will be taken from the theme.
TIP #2: Arrange the basic setup
To get started with Elementor, after you’ve finished the installation, head to Pages > New Page > Edit With Elementor.
Here’s what I usually do when getting started:
- Click the Setting icon on the top left corner and add the page title + picture (it can be a temporary thing, you can change all of this later).
- Hide Title > Yes (for most designs this will be the best option)
- Page Layout > Elementor Full Width
This will clean any of your existing setup and give you a chance to work on a clean PAGE.
Once again, it DOES NOT delete anything else around your website. We’re talking just about the current page. And since you’ve just created it, nothing important is really deleted.
You’ve just set up the option to work on a full-page layout.
For example, if you have a Sidebar on all of the pages by default, this setting will clean the page and remove the sidebar. Once again – from this page only.
TIP #3: Set up custom colors & fonts
Although you will be able to adjust ANY font and color used on the website, by setting up the custom colors & fonts you’ll save a lot of your time on the details.
Therefore, go to the upper left corner three lines.
That’s where you’ll see Global Settings section which has the following features:
- Default Colors
- Default Fonts
- Theme Style
Add any of your branding colors and fonts or just pick the main colors/fonts that’ll be used on this specific page.
Once again, you can easily change EACH element’s color and font at any time. But the default option will be the first one that’ll be set up.
So if you’re mostly going to use Open Sans font, set it as the default font. Whenever you add the Header or Text element, it will be automatically set to Open Sans.
I used to neglect this option for a long time and just manually add the necessary font for each specific element but gosh, this is a time saver!
TIP #4: Start with a three-column style, set it to full-width
Now, let’s start designing the page. First, you see two icons on your page: plus and a folder.
The folder is where are the templates are hiding. If you want to use a template for this page, click on the folders.
But since we’re working from the ground up, click on the “+” to add a new section.
It’s important to understand that Elementor works with
Rows + Columns + Elements within them.
First, you’ll be offered to choose your first row – how many columns you want to have in it.
So the very basics of your website will be built on ROWS and COLUMNS. One row can have several columns. And one page can hold as many rows as you need.
You DO NOT need to build everything into this one row. You can always add another row and choose a different style.
So it’s actually quite simple:
Rows have columns in them and columns have Elements (text, images, any other element).
And you can adjust & design EACH of these elements:
Margin & Padding;
Background;
Animation;
etc.
However, back to basics.
For getting started, I always choose the last column option on the list – wider middle and smaller sides.
Here’s why. I put all of my content in the middle – I can add in more columns, add header, text, anything else.
And for my website to not be too wide (from one side of the screen to the other), I choose the safest – and most responsive option – this specific column style.
It’s NOT A MUST. But a suggestion. Especially, if you’re getting started. It makes life a lot easier!
TIP #5: Set each row to full-width, unboxed
Once you’ve chosen the row style – whichever columns you might want – you’ll have Layout options on the left panel.
I usually do YES for Stretch Section. this means that the section will take up all the space it has.
And Content Width – Full Width. Once again, it will take all the space. If you leave it Boxed, sides of the website will be left free. If that’s the style you’re going for – do it! But if you prefer full-width backgrounds, avoid Boxed element.
You can use Boxed but then the layout can get confusing.
Remember, you need to use THE SAME setup for each row for your website to be consistent.
If at any point some of the content has empty spaces around it or it’s too wide or too compressed, make sure to go back to these settings and see if it’s set up as the rest.
TIP #6: Be mindful about the backgrounds
For all the parts – rows, columns, and each specific element – you can set up a background.
It’s important to be mindful of what kind of background you want and how to use it.
A classical website would have two colors going through the site that distinguish the difference between the website sections.
For example white + light gray.
Or white + your brand color.
Or maybe three colors like white + light gray + dark tone for accent.
When it comes to Elementor, the easiest way is to set up the background for the whole row.
This means that all columns on the row + all elements will have the same background.
However, you can get more creative by adding a color background to some specific elements only. For example, a headline.
TIP #7: Use some easy element combos for your layout
The more creative you want to get, the more you’ll have to learn how to adjust the details. If you’re just getting started, make sure to use some of the easy Elementor combos:
In the middle – biggest column – you can either use the existing space and place different elements OR add in another 2 columns.
Then you can play around with some classical combos like:
Text + picture;
Headline + text;
Background color or banner + text;
Headline + Icon list.
TIP #8: Simple elements can go a long way
Spacing. ALWAYS USE ENOUGH WHITE SPACE. There’s a separate element called Spacing where you can add the space you want between the elements. Make sure to have enough space from the top of the new section until the headline. Between the text and buttons, etc. [add sample pics]
Divider. There’s an element that adds a simple line. Underline headlines or start paragraphs with this divider. You can choose the thickness, color & style.
Button. Buttons are an important call to action! Especially, if you’re creating a Sales page or opt-in page. Make sure to design and use the same style of buttons through your page.
Icon. Instead of using a button, you can use an icon. For example, an arrow pointing down for reading more.
TIP #9: Keep in mind the mobile responsiveness
One of the reasons why I love using Elementor is its mobile responsiveness. You can control every aspect of your website on the mobile view! It’s also one of the most important tips for designing a website with Elementor!
Check for the icon on the bottom of the control panel and click on Mobile.
It will resize the page’s preview and automatically give you mobile settings.
For example, if the 50px spacing looks too big on the mobile, you can reduce it to 20px. The small icon by each element features indicates which version are you editing.
Having a responsive website is super important since possibly more than half of your website visitors see the site on mobile.
I hope this post solved your mystery on how to design a WordPress website! It’s quite an enjoyable process once you get a hang of it.
Want to learn more tips for designing a website with Elementor? Leave your comment and I’ll see what we can do.
great content 🙂