Frnato
  • PERSONAL GROWTH
    Finding the balance between work and life when working from home

    Finding the balance between work and life when working from home

    Effective steps to reduce decision fatigue

    Effective steps to reduce decision fatigue

    How to Love Yourself: 8 Self-love Practices that Will Change Your Life for the Better

    How to Love Yourself: 8 Self-love Practices that Will Change Your Life for the Better

    Is Self Love Selfish? 10 Ways Self Love Benefits Everyone

    Is Self Love Selfish? 10 Ways Self Love Benefits Everyone

    How to Believe in Yourself When It Feels Like Nobody Else Does

    How to Believe in Yourself When It Feels Like Nobody Else Does

    25 Small Ways to Improve Your Life and Feel Happier

    25 Small Ways to Improve Your Life and Feel Happier

    How to Be Productive When You Really Don’t Feel Like It

    How to Be Productive When You Really Don’t Feel Like It

    10 Self-Love Instagram Accounts You Should Follow Right Now

    10 Self-Love Instagram Accounts You Should Follow Right Now

    10 Easy Self-Care Practices for Stress Relief

    10 Easy Self-Care Practices for Stress Relief

  • MAKE MONEY ONLINE
    40 Best Jobs For Stay At Home Moms With No Experience

    40 Best Jobs For Stay At Home Moms With No Experience

    Best Gig Economy Apps To Use Right Now To Make $1,000’s

    Best Gig Economy Apps To Use Right Now To Make $1,000’s

    Make $1,000’s Selling Candles From Home

    Make $1,000’s Selling Candles From Home

    The Best Locksmith Course Online: Learn To Make $1,000’s

    The Best Locksmith Course Online: Learn To Make $1,000’s

    12 Proactive Things to Do Now to Set Your Business Up for Success During COVID-19

    12 Proactive Things to Do Now to Set Your Business Up for Success During COVID-19

    Timebucks Review: Learn How To Make Money Online

    Timebucks Review: Learn How To Make Money Online

    22 Best Paid Surveys For Teens To Make Some Extra Cash

    22 Best Paid Surveys For Teens To Make Some Extra Cash

    10 Milestones of Successfully Starting Your Business

    10 Milestones of Successfully Starting Your Business

    How to make money on Pinterest ( Affiliate Marketing Guide for Beginners)

    How to make money on Pinterest ( Affiliate Marketing Guide for Beginners)

  • START YOUR BUSINESS
    The 5 Elements of a Personal Brand

    The 5 Elements of a Personal Brand

    How to Find Your Passion and Pursue a Career You Love

    How to Find Your Passion and Pursue a Career You Love

    Top 15 Millennial Money Blogs Actually Worth Your Time

    Top 15 Millennial Money Blogs Actually Worth Your Time

    5 Important Financial Goals To Absolutely Crush In 2019

    5 Important Financial Goals To Absolutely Crush In 2019

    15 Best Early Retirement Blogs To Read Right Now

    15 Best Early Retirement Blogs To Read Right Now

  • PERSONAL GROWTH
    Finding the balance between work and life when working from home

    Finding the balance between work and life when working from home

    Effective steps to reduce decision fatigue

    Effective steps to reduce decision fatigue

    How to Love Yourself: 8 Self-love Practices that Will Change Your Life for the Better

    How to Love Yourself: 8 Self-love Practices that Will Change Your Life for the Better

    Is Self Love Selfish? 10 Ways Self Love Benefits Everyone

    Is Self Love Selfish? 10 Ways Self Love Benefits Everyone

    How to Believe in Yourself When It Feels Like Nobody Else Does

    How to Believe in Yourself When It Feels Like Nobody Else Does

    25 Small Ways to Improve Your Life and Feel Happier

    25 Small Ways to Improve Your Life and Feel Happier

    How to Be Productive When You Really Don’t Feel Like It

    How to Be Productive When You Really Don’t Feel Like It

    10 Self-Love Instagram Accounts You Should Follow Right Now

    10 Self-Love Instagram Accounts You Should Follow Right Now

    10 Easy Self-Care Practices for Stress Relief

    10 Easy Self-Care Practices for Stress Relief

  • MAKE MONEY ONLINE
    40 Best Jobs For Stay At Home Moms With No Experience

    40 Best Jobs For Stay At Home Moms With No Experience

    Best Gig Economy Apps To Use Right Now To Make $1,000’s

    Best Gig Economy Apps To Use Right Now To Make $1,000’s

    Make $1,000’s Selling Candles From Home

    Make $1,000’s Selling Candles From Home

    The Best Locksmith Course Online: Learn To Make $1,000’s

    The Best Locksmith Course Online: Learn To Make $1,000’s

    12 Proactive Things to Do Now to Set Your Business Up for Success During COVID-19

    12 Proactive Things to Do Now to Set Your Business Up for Success During COVID-19

    Timebucks Review: Learn How To Make Money Online

    Timebucks Review: Learn How To Make Money Online

    22 Best Paid Surveys For Teens To Make Some Extra Cash

    22 Best Paid Surveys For Teens To Make Some Extra Cash

    10 Milestones of Successfully Starting Your Business

    10 Milestones of Successfully Starting Your Business

    How to make money on Pinterest ( Affiliate Marketing Guide for Beginners)

    How to make money on Pinterest ( Affiliate Marketing Guide for Beginners)

  • START YOUR BUSINESS
    The 5 Elements of a Personal Brand

    The 5 Elements of a Personal Brand

    How to Find Your Passion and Pursue a Career You Love

    How to Find Your Passion and Pursue a Career You Love

    Top 15 Millennial Money Blogs Actually Worth Your Time

    Top 15 Millennial Money Blogs Actually Worth Your Time

    5 Important Financial Goals To Absolutely Crush In 2019

    5 Important Financial Goals To Absolutely Crush In 2019

    15 Best Early Retirement Blogs To Read Right Now

    15 Best Early Retirement Blogs To Read Right Now

No Result
View All Result
Frnato
No Result
View All Result
Home Life Hack

How to design a WordPress website? 9 tips for designing a website with Elementor!

Team Frnato by Team Frnato
May 18, 2020
in Life Hack, START YOUR BUSINESS
1
528
SHARES
1.6k
VIEWS
Share on FacebookShare on Twitter


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?

banner

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? Tips for designing a website with Elementor!

 

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!

 

Blog Creation Simplified: simple, no bs guide to self-hosted WordPress website setup and design

 

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.

banner

Here’s what I usually do when getting started:

  1. 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).
  2. Hide Title > Yes (for most designs this will be the best option)
  3. 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!

banner

 

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.

banner

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.



banner
Previous Post

Dealing with motivation in times of Corona

Next Post

TubeBuddy Review 2020 – Grow YouTube Channel Like a Boss

Next Post
TubeBuddy Review 2020 – Grow YouTube Channel Like a Boss

TubeBuddy Review 2020 – Grow YouTube Channel Like a Boss

Comments 1

  1. Eric Jones says:
    8 months ago

    great content 🙂

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

banner

Categories

  • Life Hack
  • MAKE MONEY ONLINE
  • PERSONAL GROWTH
  • START YOUR BUSINESS

This is a place for doers – lean entrepreneurs – who don’t stop til they’ve outwitted and outworked everyone else. Whether you’re scaling up your small business or building a brand from scratch, we’ve got the resources you need to keep you informed and at the top of your game.

  • Privacy & Policy
  • Contact Us

© 2020 - All Right Reserve Frnato.com.

No Result
View All Result
  • Become a Seller
  • Cashback
  • Contact Us
  • domain search
  • Home
  • Home 1
  • Home 2
  • Home 3
  • Home 4
  • Home 5
  • Privacy Policy

© 2020 - All Right Reserve Frnato.com.

Subscribe Now

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

Frnato will use the information you provide on this form to be in touch with you and to provide updates and marketing.