Build Digital Space

11 Steps To Build A Website
(Photo Guide)

Share on facebook
Facebook
Share on twitter
Twitter
11 Steps To Build A Website (Photo Guide)

11 Steps To Build A Website (Photo Guide)

Go to the Let’s Get Startedsection to get started straight away:

YOU CAN CLICK ANY OF THE FOLLOWING STEPS TO SKIP TO THAT SECTION TO HELP YOU FIND WHAT YOU’RE LOOKING FOR:

Step 1: Buy A Domain
Step 2: Get Hosting
Step 3: Link Your Domain To Your Website
Step 4: Get SSL
Step 5: Make It Easy With A Page Builder
Step 6: Fast-Track Your Website With A Theme
Step 7: Create A Page
Step 8: Build Your Website With Widgets
Step 9: Let’s Add A Nice Header
Step 10: Content Is King – Add Value And Refine
Step 11: Add A Page And Repeat

line break png

Introduction

I was having a conversation with my friend the other day while we were working on a project together. She is an entrepreneur who has lots of business ideas. She is also a self-proclaimed “non-techie” (this is something I hear a lot, not just from Baby Boomers and Gen X, but also Millenials too). We were talking about online businesses and she asked me, “How do I start a website?”

If you asked me a couple of months ago how to build a website, I would have said “pay a professional to build it for you.” Surely that’s the only way for “non-techies,” right?

Fast-forward a couple of months later and after a bit of research and a whole lot of time spent in lockdown due to the COVID-19 pandemic, I can safely say that building a website today is ENTIRELY POSSIBLE, even if you’re a COMPLETE BEGINNER. I would even go so far as to say it’s EASY. In the year 2020 with fast-developing technology and amazing online businesses helping us to democratize the online space, it’s becoming even easier.

Just like my friend, many people have great business ideas. It might be selling niche fashion, wanting to sell their excellent baked goods, starting a blog, or even promoting their charity organization in order to help people in need. Imagine if you could reach more people online instead of begging friends to like your social media page and hoping a post will go viral? Imagine having your very own storefront or piece of virtual real estate accessible to over 4.54 Billion people? Wouldn’t that be amazing? Now it is entirely possible.

If this article enables a “non-techie” to build a website of value to them, then I’ve done my job.

If you’re a start-up, freelancer or small business and you want to reach a wider audience, get your message out there, reach your marketing goals, or even increase sales with little or no experience in Website development… then this article is for you!

build a website for the absolute beginner
Why build a website?

Before I explain how to build a website for beginners, you should first consider if you even need a website.

If you’re a budding influencer who wants to make vlogs in the hope of going viral, then a website may not be needed. There are many platforms out there for free that can accomplish that. Facebook, Instagram, Twitter, YouTube, and Pinterest are the most popular platforms for getting your content out there and reaching a large audience. Make and post content as much as you want and watch your audience grow!

However, have you ever tried searching Google for a business and a messy, incomplete page from the ’90s comes up, and you wonder if you could trust this company at all or if they’re still in business? Sometimes they don’t appear in the search at all. In this day and age, being offline just won’t cut it if you want to grow your business and reach more people. If this coronavirus pandemic has shown us anything, it is that simple truth: Online businesses thrive while traditional businesses struggle and sadly lay off hundreds if not thousands of workers.

do i even need a website
Why do I need a website? Social media is free!

So, should you or your business get a website? Here’s a simple filter:

Social Media is for entertainment & content to be consumed. It’s where we go when we want our dopamine hit and want to be entertained.

Websites on the other hand are for business & more legitimate content. Now there are many exceptions to this, so take it with a grain of salt. This is just an easy way to filter if you need a website or not.

You just lost a customer…

Put yourself in your customer’s shoes:

Somewhere out there is a potential customer we’ll call Sarah. Now Sarah’s friend told her about this amazing small business that sells local, handmade bags. Sarah goes to search your business name on Google, and low and behold… nothing! ‘Oh well,’ Sarah thinks. ‘I guess they’ve closed down.’ So she searches “local, handmade bags” in Google and your competitor’s business pops up. Sarah visits your competitor’s store, finds something close to what she was looking for, knowing full well that it’s not as good as YOUR product, and she purchases it. Competitor: 1 – Your Business: 0.

Sadly, you lost a potential loyal customer. This happened because your digital presence just doesn’t exist and has nothing to do with the quality of your product. Your competitor was just easier to find.

I should probably get a website if…

You should think about getting a website if you fall into one of the following categories:

  • You have (or are starting) a business and want to STAND OUT from your competition.
  • You want to legitimize your business (people tend to trust your brand more if you have a good looking website. According to a KPMG study, “55% of people will search online for reviews and recommendations before making a purchase, with 47% visiting the company website.” Trust is a major factor in consumer behavior and leads to higher sales.
  • You want to be searched on Google.
  • You want to start a blog.  “Blogging leads to 55% more visitors” and “Websites with blog content have 434% more search engine-indexed webpages.” What a great way to increase your chances of being found.
  • You want to drive more traffic and/or sales.
  • You want people to know your business exists.
  • You have answers to questions that could help people and want to become a valid source of information (people are becoming increasingly more wary of information, especially on social media with the amount of fake news out there).
  • You want to sell online in addition to/aside from other multi-vendor online sales platforms.
  • You want to market yourself as a freelancer.
  • Grow your small business and procure more leads.

Can’t I just get someone else to do it?

Now you might be reading this and thinking “why can’t I pay a professional?” Sure, that’s a completely viable option if you have the money and want to outsource your website needs to someone else. I would encourage you to do this if you have the resources. You will save time and potential stress by enlisting the help of a professional. They could build you an amazing website while you focus on other aspects of your business and in the long-run that initial investment can pay itself off through new clients and sales.

But what if you really don’t have the budget or would like to learn a new skill so you can continue to develop and edit your website when you feel like it? Maybe you want to do it yourself rather than having to call a professional and pay them every time something needs to be changed or be edited.

If this is you then the cheaper option is to build a website yourself. Yes, there’s some work involved, but with the development of online tools and free tutorials, the process has become way easier from start to finish. Building your own website is perfect for those with a limited budget. It is perfect for basic to intermediate websites that won’t be complicated in terms of functionality.

As I am writing this, we are living in a world where the coronavirus has affected jobs, businesses, income, and livelihoods. Many of us have been forced to search for alternatives when so many jobs are being lost. I am a huge advocate of learning digital skills, even just the basics. I urge all kids growing up in today’s world to start learning digital skills (coding, Photoshop, basic Word and Powerpoint skills, etc.) because it will allow for more opportunities in the future. If we can make those skills accessible to anyone, regardless of socioeconomic status or inequality between people, then we can all thrive in this increasingly digital world… and for those who are older, it’s never too late to learn a new skill!

line break png

Build Your Own Website For Php7657 / $153 USD!

How Much Does It Cost To Build My Website?

The price varies but a basic breakdown of cost, based on my last website is as follows (shown in Philippine Peso and U.S Dollars):

-Domain (2-years registration with domain privacy): Php1657 or $33USD (often cheaper though)
-Hosting (1-year registration): Php6000 or $120USD
-Website Builder Basic (1 website, 1-year license): FREE (limited functions)
-Website Builder Pro(1 website, 1-year license: Php2451 or $49USD (many more functions)

Total*: Php7657 or $153USD (basic)
Php10108
or $202USD (pro)
This really isn’t bad at all!

*Please note that price will vary and registration/licenses will have to be renewed when they expire.

So, where to start?

Now we get to the fun part. You’ve decided that a website will be a useful tool to get your brand or message out there. Great! Now “how do I start to build a website?” The following is an outline of only 11 Steps (yes you read that right!) to build your website.

Instead of explaining this in a generic way, I will draw on my own experience of building a website. By no means is this the only way to do it. But for a complete beginner like me, who can’t code, and was never a natural artist or designer (yes, I’m one of those people afraid to write on whiteboards because of my bad handwriting), these particular set of steps worked for me, and you can choose to follow it too.

I had never built a website before. I have no idea how to code… and I still don’t know how!  But guess what? I built a website and you can too. That’s the great thing about web development tools these days.

*Disclaimer: All the following links I will provide for building your website are affiliate links that will get you discounts and I will receive a little commission if you purchase through them. If you don’t want to use them, no problem, just search the websites on Google and pick up where you left off in this tutorial. If you use the links, then thank you so much in advance for supporting me! Let’s see the outline:

line break png

LET’S GET STARTED!

Step 1. Buy A Domain.

Time: 5 minutes | What you need: Credit card or Paypal account | Cost: ₱1657 or $33USD for 2 years registration

Why? (Buy A Domain)

So people can find you. Just like any business, you need an address.

What? (Buy A Domain)

This is your address. For example, if your business was called “Mark’s Boutique Ceramics” then you might want your domain name to be marksboutiqueceramics.com

If you or your business only operates in a certain country then you might want to consider a domain with your counties extension*, like marksboutiqueceramics.com.ph (*extension is the tag at the end i.e., .com or .org). Bear in mind that .com, .org, and .net look more legitimate so consider this before buying .info, .site, or .xyz, as they tend to look out of place and less trustworthy.

If you have a business name that is popular then your domain name might already be taken. If marksboutiqueceramics.com was already taken, then you could either change the extension to marksboutiqueceramics.com.ph or you could get marksboutiqueceramicsph.com or marksceramicsph.com, or even ceramicsbymark.com. The choice is yours.

*REMINDER* when choosing a domain:

  • keep it SHORT,
  • keep it RELATED to your brand or business,
  • keep it SIMPLE… no one wants to write or search for marksboutiqueceramicsmetromanilaphilippines.site… I need not explain why!
  • choose a .commonly used extension such as .com, .org, or .net

How? (Buy A Domain)

  1. Click godaddy.com which will take you to their homepage godaddyhome

  2. In the search bar type in your business name or the domain you would like (i.e. marksboutiqueceramics.com)
    marksboutiqueceramics

  3. Choose the domain you like. Fortunately, my domain is available so I click Add to Cart.
    *If your domain is not available then refine your search until you have a domain you like. You could try changing the domain extension as I mentioned earlier (.com.ph instead of .com)
    marksboutiqueceramicssearch

  4. Best to get domain privacy so people can’t trace your domain and send you spam. Click on Continue to Cart.
    marksboutiqueceramicssearchcart

  5. Create an Account or log-in using your social media.
    marksboutiqueceramicssearchcreateaccount

  6. Once logged in, choose your domain registration period in the drop-down bar. Better to get 2 Years or more as there will be a discount and you won’t have to renew the domain registration until a couple of years down the line.
    marksboutiqueceramicssearchcreatepayemmnt adress

  7. No need for “professional email” you can delete it from your cart. This can be done later.

  8. Once you’ve entered your payment information and billing address, double-check your order is the correct domain (spell check) and that you’re not paying for any unwanted add-ons, then click Complete Purchase.
    marksboutiqueceramicssearchcreatepurchase
  9. Congratulations! You’ve just purchased your domain. The first step is done on your way to building a website.

Step 2. Get Hosting

Time: 5 minutes | What you need: Credit card or Paypal account | Cost: ₱6000 or $120USD

Why? (Get Hosting)

So your website has a place to live online.

What? (Get Hosting)

Think of it as your own little piece of online real estate where your website will be built on and stored.

How? (Get Hosting)

  1. Click SiteGround or search them up on Google. This will take you to their homepage.
  2. Scroll down and click on the GET STARTED button under “WordPress Hosting.”
    siteground

  3. Scroll down and choose the right plan for you. I would recommend the GrowBig plan as it can host unlimited websites. You might want to build another website in the future and will have to end up upgrading anyway. But if you are certain you only want one website, then the StartUp plan is fine. Click GET PLAN on the one that best suits your needs.
    sitegroundmanage wordpress plan

  4. Choose Domain: This is where you type in your recent domain purchase (i.e., marksboutiqueceramics.com) or register a new domain if you didn’t complete step 1. Type your domain in and then click PROCEED
    *The reason I chose GoDaddy to purchase the domain is that it’s generally cheaper.
    siteground choose domain

  5. Review & Complete. Enter your account information in order to create a SiteGround account:
    -Choose a secure password and remember it.
    -Fill in the billing address and purchase information.
    -Double-check your details as usual and the plan that best suits you.
    -Choose the plan period. 12 months should do for now. This saves the hassle of renewing every month and you’ll save around 60-70%.
    -Agree to the terms and conditions and hit PAY NOW.
    siteground review and complete

    siteground review and complete2

  6. Congratulations! You’ve just purchased your own piece of virtual real estate (well, technically rented it). Now a couple of steps to set up your website, then we get to the fun part of designing it. I hope you’re still with me!

Step 3. Link Your Domain To Your Website

Time: 5 minutes | What you need: – | Cost: FREE

Why? (Link Your Domain To Your Website)

So people can find you online.

What? (Link Your Domain To Your Website)

Basically this means that if someone searches for your domain name, it will go to your website and not be blank. So you just need to link those two things together. This may sound daunting but it’s quite an easy process. It just involves going back to your GoDaddy account and editing the nameservers. Here we go:

How? (Link Your Domain To Your Website)

  1.  On the top header click WEBSITES
    siteground choose home

  2. You should see a screen with your domain name come up. Under that click on SITE TOOLS. This will take you to your dashboard.
    siteground choose websites

  3. Scroll down and you should see IP and Name Servers. The name servers will be important so write them down or keep this window open for the next step.
    *Note that there might be a set of numbers in brackets after the name servers. These are I.P addresses. Ignore these. You won’t need to use them unless GoDaddy specifically asks for them.
    sitegroundmanage dashboard

  4. Open a new browser tab and go to your GoDaddy account. Sign in if you aren’t already logged in, click the drop-down bar where your account name appears on the top right corner (next to checkout), then click MANAGE DOMAINS
    godaddy name server 1 1

  5. Your purchased domain names should be listed on this page. Click the 3 dots (…) and a drop-down bar should appear. Click Manage DNS
    godaddy name server 2

  6. Once on the next page, there will be a bunch of server addresses. Ignore these and scroll straight down to where it says Nameservers. Click on Change. We’re almost there!
    godaddy name server 3 godaddy name server 4

  7. On this page, it should say Connect My Domain to a Website. On the bottom left, click on Enter my own nameservers (advanced).
    godaddy name server 5

  8. Now there should be two boxes labeled: Nameserver 1 and Nameserver 2. These correspond to the two nameservers indicated on your SiteGround page you will remember from earlier. Go back to your SiteGround browser tab and copy the first nameserver into the Nameserver 1 box and the second nameserver into the Nameserver 2 box. Then click Save.
    godaddy name server 6

  9. You’re done! Not so bad huh? Now it’s time to protect your website before we start building it.

Step 4. Get SSL https, web page, internet

Time: 2 minutes | What you need: – | Cost: FREE

Why? (Get SSL)

Have you ever been to a website and your web browser notifies you that the site is not secure and advises you not to view this site? Would you still view the website? SSL ensures your website is safe for people to explore your website

What? (Get SSL)

SSL is basically a digital certificate that ensures your website is encrypted and safe for things like online purchases and sensitive information people might be using. “SSL stands for Secure Sockets Layer and, in short, it’s the standard technology for keeping an internet connection secure and safeguarding any sensitive data that is being sent between two systems, preventing criminals from reading and modifying any information transferred, including potential personal details.”

How? (Get SSL)

  1. Alright. This is easy. In your SiteGround’s Dashboard under the security tab click on SSL Manager
    siteground ssl 1

  2. On the Select Domain dropdown select you new website’s domain name.
  3. On the Select SSL dropdown select Let’s Encrypt.
  4. Click the GET Button and wait for a couple of minutes while SiteGround works its magic.
    siteground ssl 3

  5. Once completed, the domain SSL status should be Active, indicated by a green ACTIVE on the lower right, under Status.

    That’s it, you’re done! Your website is secure so you and your audience can safely browse your website.

SETUP FOR EASY USE

Step 5. Make It Easy With A Page Builder

Time: 8 minutes | What you need: – | Cost: FREE

Why? (Make It Easy With A Page Builder)

Can’t code? No problem. A page builder will simplify this process.

What? (Make It Easy With A Page Builder)

What you’ll be using is a visual page builder. Basically this takes the daunting prospect of coding out of web design and provides you with a user-friendly environment to literally drag and drop elements onto your page in order to look and function how you want. Great right?!

There are many page builders out there which work slightly different from one another. The one we’ll be using is Elementor as I’ve found it to be super user-friendly. Not knowing anything about coding or website building, I found it super easy, fast, and even fun to learn. Here’s how to download ELEMENTOR PAGE BUILDER:

How? (Make It Easy With A Page Builder)

First, we have to get into WordPress, which is basically the back-end of your website where you’ll build and make all the changes. Trust me, it’s less scary than it sounds!

  1. From your SiteGround dashboard, click WordPress and select the Install & Manage tab.
    install and manage 1

  2. If you see WordPress is installed with your domain name appearing under Manage Installations then skip down to 6:
  3. If WordPress isn’t installed, select WordPress.
    install and manage 2
  4. Create your Username and Password and your Email. Important to remember this as you will use it to log into WordPress back-end to build and edit your website.
  5. Hit INSTALL
    install and manage 3

  6. Scroll down and you’ll see your domain name in the Manage Installations section. There will be a little arrow in a box (->]) which, if you hover your mouse over, will say log into admin panel. Click this arrow.
    *If you can’t find this then the alternative way to log in, which is easier, is to type your back-end address into the address bar up top. You can do this by typing your domain address then adding “/wp-admin” at the end of it. For example, if your domain is marksboutiqueceramics.com, you’ll type marksboutiqueceramics.com/wp-admin then hit ENTER.
    *If a page pops up saying “Wordpress Starter just click EXIT instead of Start Now.
    install and manage 4

  7. You’ll be redirected to a login page for your WordPress site. Enter your email address and password that you registered earlier in step 5, then click Log In.
    elementor 2

  8. Now you’re in the back-end of your site. Don’t worry about all the tabs just yet. Go straight to Plugins on the left sidebar and hit Add New.
    elementor 3
  9. In the search bar, type in Elementor. The “Elementor Page Builder” should come up.
  10. Click Install and wait for a few seconds while it installs.
  11. Once installed, Click Activate and Elementor Page Builder will be activated on your website.
  12. While we’re installing and activating plugins, let’s also install “Essential Addons for Elementor” and “Elementor – Header, Footer & Blocks Template” and hit Install and Activate. We will use these later!
    elementor 5

  13. On the left sidebar, you will see that Elementor has appeared. If not then hit refresh and you should see it.
    elementor 6

  14. Congratulations. You have installed this awesome easy-to-use page builder. One more step before we start building!

*Note that this is the free version of the Elementor Page Builder . There is a pro version with more functions available to build and even more amazing website, but don’t worry about it just yet.

Step 6. Fast-Track Your Website With A Theme

Time: 2 minutes | What you need: – | Cost: FREE

Why? (Fast-Track Your Website With A Theme)

Why start with a blank slate when someone’s already designed a beautiful website that you can customize to your needs and taste?!

What? (Fast-Track Your Website With A Theme)

There are many templates out there to suite your needs. Whether your website is a blog, an ecommerce store, or your company’s official website, or a mixture of everything, then there is an existing website template for your needs.

How? (Fast-Track Your Website With A Theme)

  1. On the left sidebar, click Appearance and go into the Themes subsection.
  2. Click Add New on the top next to the Themes heading.
    templates 1

  3. There are so many themes to choose from but to keep this as simple as possible, search for “Astra”
  4. Hover your mouse over the Astra theme and an install button will come up. Click Install. Wait a few seconds, then click Activate.
    themes 3
  5. Congratulations. You’ve just installed & activated the Astra theme.

START BUILDING

If you’ve made it this far. Congratulations! I’m super excited for you because this is where the fun begins. Time to
BUILD your DIGITAL SPACE!

Step 7. Create A Page

Time: 2 minutes | What you need: – | Cost: FREE

Why? (Create A Page)

Websites are made up of one or more pages.

What? (Create A Page)

This is your blank canvas for putting your ideas, brand, and message out there in the world.

How? (Create A Page)

Right now your website is up and running, but if you click on visit site in the drop down bar on the top left indicated by a home icon, it will look completely blank. This isn’t the professional looking site I promised right? But it’s not far away. Let me run you through how to turn this blank canvas into a work of art!

  1. Go to Pages on the left sidebar.
  2. Click Add New.
    widgets 1

  3. This will take you to the block editor.
  4. Where it says Add Title, type in “HOME” to indicate this will be your Homepage.
  5. On the right sidebar scroll down to Astra settings and in the dropdown titled Sidebar select No Sidebar.
  6. Under Content Layout dropdown bar select Full Width / Stretched.
  7. Tick ☑ Disable Title in the Disable Sections section.
  8. Click Publish on the top right.
  9. Click Publish again when prompted.
    widget 2


    Congratulations. You’ve created your homepage. Now let’s design it.

Step 8. Build Your Website With Widgets

Time: 25-30 minutes | What you need: Images ready to upload from your computer | Cost: FREE

Why? (Build Your Website With Widgets)

Design for user-friendliness. Functionality. And build a professional looking, modern website.

What? (Build Your Website With Widgets)

The Elementor plugin comes with widgets. Widgets are functional tools you can drag and drop, and customize to your needs, all without having to code. “Each widget in Elementor offers advanced design customization, so you can get the results you need without installing any extra WordPress plugins.”

This process will vary in time depending on how simple or advanced you want your webpage to be. Go at your own pace. Don’t worry if you run out of time, you can always save your work by clicking the update button and return to it at a later date!

How? (Build Your Website With Widgets)

  1. Click Edit with Elementor at the top of your block editor page and this will take you to the Elementor edit page. Your blank canvas, if you will.
    elementor edit 1

  2. Now we have a couple of choices. You can insert an existing template by going to the folder icon and choosing a free page template. Or you can create your own. In this case, I’ll show you how to create your own! I’m going to show you how to create a nice business landing page for a niche clothing company.
  3. First, click the plus button (+) in the pink circle located in the middle.
    widget 3

  4. Click the second block (■■) indicating you will be creating two columns for this section.
    elementor diy 1

  5. Click the 6 dots on top of the section (in blue) so we can edit the background of this section.
    elementor diy 2

  6. On the left Elementor sidebar, click the Style tab.
  7. Under the Background subsection click NORMAL and the paintbrush icon (🖌) indicating a classic background type.
  8. You should see a blank Image box. Click this to choose your image.
    elementor diy 3
    *Hopefully you should have some photos of your business or brand for your site saved on your computer. If not, there are many great free stock photo websites such as pixabay.com or pexels.com for free stock photos. It’s always best to use your own professional looking photos for your unique identity and branding. We’ll use some photos I found on the stock photo websites as examples here.

  9. Upload your photo in the Upload Files tab and click Insert Media.
    elementor diy 4
    *Tip: Picture size is a big factor when it comes to the speed of your site, user experience, and also SEO. You’ll want to make sure, even from the beginning, that your images aren’t too big. Anything more than 1MB file size is too big. I like to keep my files in a JPEG format around 100-500kb and no more than around 1200 pixels for optimal sizing. If you need to resize then there are many online image resizers such as befunky.com or fotor.com

  10. Now, when you upload and insert your photo it won’t look like much as you can see below, so we’ll need to adjust the height of this header section.
    elementor diy 5
  11. Click the 6 dots to select the section for editing. Click Layout tab, and under the height you can select fit to screen. (You can also choose min height and adjust the height manually).

    You can also adjust the position. Go to the Style tab and find Position drop-down bar. Center-center is good but you may want to adjust so your subject is in the middle. Also, click No Repeat in the repeat bar so your image doesn’t have the repeat effect. Select Cover in the size so it covers the whole section. The result should be that you now see the header covering a larger section of the webpage.
    elementor diy 6

  12. Let’s add an overlay so the text will pop – select Style again. Go to Background Overlay. I’ll choose black in the color box by clicking the box and choosing my background overlay color. I’ll then adjust the opacity to 0.6 (again adjust as you see fit)
    elementor diy 7
    *Tip- SAVE YOUR WORK – Make sure throughout this process you are saving your work by hitting the UPDATE button indicated in green in the Elementor sidebar.

  13. Lets add text – click the 9 squares in the Elementor box, search for the Heading widget, drag the heading widget into the first column. Go back to the 9 squares and search for the Text Editor. Drag and drop this underneath the Heading as this will be your sub-heading.
    elementor diy 8

  14. Hover your cursor over the heading box and you should see a blue pencil in a blue box [🖉]. Click on the pencil to indicate you want to edit this element.
    elementor diy 9

  15. In the Content tab, you can edit the text by typing in the text box. I’ll put my website’s business name.
  16. Click the Style tab and change the text color by clicking the color box and choosing a color. I’ll choose white to contrast with the black background.
  17. Click the pencil [🖉] next to the typography section in the text editor to edit things like font, text size, weight (boldness) style (italicize) etc. The line height is for how much space you want between lines and of course letter spacing to suit your taste.
  18. Once you’re happy with the styling of your header text, repeat the same process for the subheading by selecting the pencil icon on the subheading and editing the text and typography just as you did for the main header text.
    *Tip- You can adjust the column width by hovering over the column , clicking down, and adjusting left or right to your needs.
    elementor diy 10

  19. Let’s add a photo carousel –  click the 9 squares, search for Image, then drag and drop into the right column.
    elementor diy 10a

  20. Add photos by selecting multiple images to insert into your carousel. Select the photos and adjust the image size / how many photos you want to display etc.
    elementor diy 11 elementor diy 12

    Now at this point make sure you’ve saved your work by clicking the update button. Let’s have a preview by clicking the eye (👁) icon in the Elementor tab…. and Voila! You now have a stylish header for your website!
    elementor diy 13


    Not bad for a few minutes’ work and no coding in sight. But you may be thinking, “My header looks really dull. I want it to stand out.” Let’s do that now by editing the header and inserting your logo!

Step 9. Let’s Add A Nice Header

Time: 10 minutes | What you need: Logo | Cost: FREE

Why? (Let’s Add A Nice Header)

Make a clean navigational bar for your users to easily find their way around your website.

What? (Let’s Add A Nice Header)

website header is the top section of the web page. “Back in the day, people understood headers as narrow strips in the top parts of the websites that contained a logo, a call to action, and contact information. But in modern design, the whole space above the fold of the homepage is considered a header.”

How? (Let’s Add A Nice Header)

At this point you should have already installed “Elementor – Header, Footer & Blocks Template” plugin earlier. If you don’t have it, no worries, just go back to your WordPress dashboard, go to Plugins -> Add New -> Search for Elementor Header and Install and Activate the “Elementor – Header, Footer & Blocks Template” plugin. Done? Great! Let’s continue to Build your Digital Space.

  1. Go back to your WordPress Dashboard by going to the three lines on the top left of the Elementor bar, clicking it, then clicking EXIT TO DASHBOARD. This will take you back to the block editor page and just click the WordPress (W) logo on the top left. You will now be back on your WordPress Dashboard.
    *Alternatively you can just type your domain into the address bar and add /wp-admin/ (i.e., marksboutiqueceramics.com/wp-admin)
    *Tip- It would be a good idea to bookmark this page so you can go back to it easily in the future.
    dash1 dash2 dash3

  2. In your WordPress Dashboard, click Appearance and Menus then click create new menu at the top.
  3. Type in Header Menu as the Menu name. Click Create Menu.
    menu 1

  4. Tick ☑ HOME on the left and Add to Menu.
    This is to add your HOME page to your navigational header bar. Every time you add a page in the future you’ll want to add that page to the Header Menu in this area so it will appear in your header.
    menu 2
  5. Once HOME has been added to your Header Menu, Click Save Menu.
    menu 3
  6. Click Appearance, then click the Header Footer & Blocks subsection.
  7. Click Add New.
    header 2

  8. Enter Header as the title
  9. Under Type of Template drop-down bar choose Header
  10. Under Display On drop-down bar choose Entire Website so it will appear on all pages you create
  11. Click Publish
  12. Click Edit with Elementor
    header 3

  13. Click plus button (+) in the pink circle and choose the two-column (■■) option again as we did earlier.
  14. Search “nav” in the Elementor search bar, find Navigation Menu and drag and drop into the right column.
    navv

  15. Under Menu when editing the Navigation Menu element, choose Header Menu (the one we just created a moment ago).
    HOME EDIT HEADER

  16. Click the 9 squares and search for the Image widget. Drag and drop into the left column.
    navvv

  17. Click Image box and upload your logo then Insert Media just as you uploaded images on your homepage.
    header 4
  18. Align your logo to the left in the content section of the image widget editor.
  19. Adjust the logo size by going to Style and dragging the Width bar until you’re happy with the size.
    *Tip- If there’s too much space around the logo then click on the column (indicated by the grey and white column icon when hovering over a column), go to Advanced, Unlink the margin, then adjust the top and bottom (for example of there’s too much space underneath the logo then you can click the down arrow to a negative number so it decreases the space at the bottom of the header).
    header 5
  20. Select on the Navigational Menu in the right column.
  21. Select Style and change the typography to suit your taste. Change the size, weight, font colour etc.
    header 1aa

  22. Update to save your work, then go back to your HOME page.
    *Tip- The fast way to go between pages in the Elementor Page Builder is to hold Ctrl + E and a search bar will pop up. Type in HOME and click HOME when it comes up.
    view
  23. There’s your nice looking page with a clean looking functional header, your logo, and a hero section with a nice photo background, a stylish overlay, a catchy header & a subheader, with a photo carousel to show off.

Now instead of running through with you how to design the rest of your page, my suggestion is to play around with the widgets and form the other sections of your home page. We could literally be here for weeks discussing the unlimited possibilities for designing your page, but in the interest of time, I’ll skip forward to a couple of remaining features.

*Tip- If you want to add a certain function on your page and don’t know how, then there are a myriad of YouTube tutorials to help guide you. For example, if you want to add motion effects to elements on the page to make it look cool and dynamic, just search “How to do Elementor Motion Effects”, and follow the guided videos.

 I will make other tutorials on specific features that you might want to create, but for now let’s move on.

 Step 10. Content Is King – Add Value & Refine

Time: Up to you | What you need: Imagination | Cost: FREE

Why? (Content Is King – Add Value & Refine)

Get your message across clearly.

What? (Content Is King – Add Value & Refine)

Using WordPress plugins, Elementor widgets & your imagination, you are now equipped with the basic knowledge of how to design your website… and we haven’t used coding or anything complicated at all. Amazing right?

How? (Content Is King – Add Value & Refine)

Now, this step is really up to you and your needs. You might want to add a small section about your company which will link to your about page. You might want a call to action form or button so your customers can email you a message or query. You might want a portfolio of your designs or products to display. The possibilities are endless and you can find all the widgets and plugins to help meet your goals. Get creative -but keep in mind, always design for the user experience. Be clear and concise.
Here are some great video resources for you to browse through:

3 Great Video Tutorial Resources For Building Your Website Pages (FREE):

Elementor Website Builder for WordPress

This is the Official YouTube Channel for Elementor Page Builder so you know it’s accurate and up-to-date. There are fantastic resources for you do develop your skills and learn how to add certain functions or build a great website.

WPCrafter.com WordPress For Non-Techies

WPCrafter is a great authority and resource on website building. Not limited to building Elementor Page Builder, he has great tutorials on building and pages using many different WordPress plugins, templates, and other things. This guy really knows his stuff and explains it in a easy-to-understand way.

Ferdy Korpershoek

Ferdy Korpershoek has an extensive knowledge of websites building with great Website Building Tutorials and he provides valuable, helpful content for free. Check out his YouTube Channel for great resources.

Step 11. Add A Page And Repeat

Why? (Add A Page And Repeat)

Be seen. Expand your message and content.

What? (Add A Page And Repeat)

So, by now you’re equipped with the basic skills to build your page. You now know how to create a new page, how to build your website with widgets, and how to add images, text, and edit the typography. Now you can easily create an About page, a Contact Us page, or even a Portfolio Page to showcase your work or services. It’s up to you.

How? (Add A Page And Repeat)

Simply go back to Step 7 and Create A Page, Title it how you want, build the page, then add that page to the navigational header menu. You now have a second page to your website. Repeat this process to build your multiple website pages.
*Tip- Keep the number of website pages minimal. Remember, we’re building with the user experience in mind, so we want as little amount of clicks as possible to get to the information they’re looking for!

line break png

Summary

In conclusion, When I said it was easy… I didn’t mean easy like click one button and it’s done. Building a website takes time and creativity on your behalf, but it is also a great investment to help meet your marketing & strategy goals, whether you’re a small business or freelancer. But when you compare it to the kind of traffic or awareness and potential profit you’re losing from not being online, then YES it is easy and well worth it. Here is a list of actions you can now take to continue to Build Digital Space:

  • Build the rest of your website and launch It
  • Watch Tutorials
  • Write Original Content/Blogs
  • Link To Your Existing Social Media and Audience – Spread The Word
  • Learn and Implement Basic SEO Strategy
Share on facebook
Facebook
Share on twitter
Twitter
Laurence Mossman

Laurence Mossman

Hi, I'm Mossie! I have a keen fascination with digital skills and learning. So, I took this passion and created Build Digital Space to help others like me who also want to learn the basics or to be pointed in the right direction of building their own digital spaces.

ABOUT

Digital Skills To Help You Reach Your Goals

Build Digital Space is about SERVICE. We empower beginners and knowledge seekers to learn something new.

We do this through clearly thought out information, tutorials, and courses designed to answer your questions.

Build Digital Space is a platform to provide knowledge for beginners and those looking to upskill with knowledge

Recent Posts

Sign up for our Newsletter

Keep up to date with our lastest news, articles, courses & more