How to Make a Website 2020 [EASY – 30 MINS]

How to Make a Website 2020 [EASY – 30 MINS]


Do you want to learn how to make a new website? In this beginners guide, we’ll show you how
to create a website step by step in less than 30 minutes with no coding or web design skills
required. We’ll provide some resources to help you choose
the best website builder platform for you, be it WordPress, Wix, Squarespace, Shopify,
or even Blogger. No one platform is better than the others. It will just depend on your objectives as
to which is the best option for you. In this beginners website tutorial, we’ll
show you how you can easily create a business website like this, portfolio website, a blog
similar to this one, shop or boutique website, or a personal or professional website like
this. So, if that sounds good then let’s get to
it. To help you follow along, we’ve created a
free tutorial guide on the OHKLYN website. In the description below, you’ll find a link
to this page. Here, you’ll be able to follow along with
step by step instructions as well as find any links and resources mentioned in this
video. We’d recommend opening up this page in another
tab for easy access. As part of the OHKLYN community, you’ll also
be entitled to some discounts on hosting, a free domain, and discounts on website themes
and templates by following the links on the OHKLYN site or in the description below. Step One: Choosing the Right Platform for
You The first thing you want to decide on is what
platform is the best for your new website or blog. With about 50 to 60 percent of the market,
WordPress is by far the world’s most popular content management system (or CMS), and for
that reason it’s the platform we’ll use for this tutorial. However, WordPress isn’t ideal for everyone,
and to help with your decision, we’ve created a few short, unbiased comparison videos for
you to be able to make your own decision. On the OHKLYN post here, you’ll find the comparison
videos for the most popular alternatives: Wix, Squarespace, Shopify and Blogger. If you’re unsure of which platform to choose,
we’d recommend pausing this video and taking the time to review your options before getting
started. For this video, we’ll show you how to make
website using WordPress. When it comes to WordPress, there are two
options: wordpress.com, which is the hosted version of WordPress, or wordpress.org, which
is the self-hosted version of WordPress. As this is the industry standard for blogging
and professional business websites, we’ll show you how to set up a self-hosted version
of WordPress for your website. Step Two: Planning Your Website Before you jump into building your website,
you should prepare a few essentials and plan out your website as much as possible to make
the process a lot smoother. First, make sure you have all the branding
elements you need like: A logo with all the necessary variations like
a light and dark version as well as different sizes or dimensions. A favicon: This is the logo your website will
display in the browser tab. It’s usually square, but you can create the
illusion of an irregular shape by using an image with a transparent background. A brand color palette: This usually consists
of a main color as well as a few complementary colors associated with your brand. You can use tools like paletton.com, Adobe
Color, or color-hex.com to pick your color palette. A small budget of $100-150: This will help
fund your hosting, a premium WordPress theme and any stock images you might need. Next, plan out which pages you want in your
website as well as how it will fit into your navigation. You can do this using a sitemap similar to
this one. As you can see, I’ve listed the most important
pages I want here and organized them under the main navigation menu over here so they
can be easily accessed. If you’re going to have a blog with different
categories or a page with subpages like a recipes page with individual recipes, you
can also map them out. Lastly, you can make designing your website
even easier by first sketching out rough examples or wireframes of what your pages will look
like, like this. You can go into as much or as little detail
as you want. However, the most important thing to do is
make sure that the flow of information makes sense and that you take the users through
a process or tell a story. Step Three: Registering for Hosting and a
Free Domain and Setting Up Your WordPress Website In the article on the OHKLYN blog, you can
access a discount for Bluehost by following this button. We recommend using Bluehost because it’s one
of the most affordable and easiest to use options for beginners. That will take you through to the Bluehost
page, and as you can see, you get a free domain, SSL certificate and one-click WordPress install. So, just click Get Started. Then you need to choose a plan. The basic plan is most affordable and the
main difference between it and the others is that you have limited storage space and
that you can create only one website. Choose whichever plan is right for you. We’ll just go along with Basic. Then, you’ll either need to choose your new
free domain or enter a domain if you already have one. You can also choose the extension for your
domain from the available options here. If the domain is available, then Bluehost
will let you know over here. The next step is just to provide some very
basic personal information, then add package information. Just make sure that you choose the right period. And then there are some extras. So, we recommend keeping Domain Privacy Protection
as this will stop your details being published with your domain, but you can uncheck the
others. And then lastly, you need to provide your
payment information to pay for your hosting. And then just accept the terms and conditions
and click submit. You’ll be taken through to this page welcoming
you to Bluehost with a ‘Set password’ button. Click it to go set your password. Just enter any password that you want. Try to keep it secure. As you can see, they provide some guidelines
for that, or you can let Bluehost suggest a secure password for you. Just make sure that you copy this and paste
it somewhere. Agree to the terms and then click Next. And you’ve created your password and can now
log into Bluehost. So, if you click the button, just let it load
a bit. This may take some time because they’re going
to suggest some themes for us. So yeah, we’re already logged into our Bluehost
account, and we won’t pick one for this tutorial because we’ll set this all up later, so we’ll
just click ‘Skip this step’. So, you can go immediately to your WordPress
site by clicking Start Building or first go to your Bluehost account. We’ll just open it in a new tab for now. This is your WordPress dashboard hosted on
Bluehost, and there will be a welcome message from Bluehost as well as a setup wizard. We won’t be using this as we’ll be setting
up our website ourselves. So, we’ll just click ‘I don’t need help’,
which will take us through to our Bluehost dashboard for WordPress. You’ll see the left-hand navigation menu,
and if you go to Dashboard, this is your actual WordPress dashboard. So, there’s a bunch of stuff here mostly related
to the extra plugins that Bluehost installs on your behalf, and you’ll see this orange
Coming Soon Active bar at the top toolbar, which shows users a Coming Soon page when
they go to your website since it’s not set up yet. We can also remove some of this clutter from
our dashboard by going to the top right-hand corner of any of these panels and then clicking
the X to remove it. We’ll keep the ‘Welcome to WordPress!’ panel
as it has some handy links that you’ll probably use later on. In the left-hand menu, we’ll next go to Plugins,
and then Installed Plugins. So, Bluehost installs some plugins on your
behalf, and while you can keep them if you feel you’ll need them, if you don’t, it’s
best practice to remove them or at least deactivate them as they can only lead to outdated plugins
or security vulnerabilities if you just leave them there but don’t use them. They will also impact the performance of your
site as they add some unneeded complexity. So, we’ll just multi-select the WPForms, OptinMonster
and Jetpack plugins as well as the Google Analytics plugin. Then, from the bulk actions drop-down, you
can just select Deactivate and click Apply. Okay, so with unnecessary plugins deactivated
let’s go back to the dashboard. So, let’s take a quick run-through of the
WordPress dashboard. On the left you have the main admin menu,
at the top you have the toolbar, and in the middle, you have the main dashboard area where
you’ll be doing most of your work. And this changes depending on where you’re
on at the backend of your website. So, the toolbar is dynamic, and the options
will change depending on where you are. You can visit your site by clicking this here
and then also come back to the backend. In the main admin area at the top you have
the dashboard section where you can access the dashboard, some of your more important
plugins and also updates. In the middle is the content management section
where you manage and create content for your website in the form of posts, pages, media
and comments. And then below that, you have the site administration
section where you change the design and appearance of your website and other options. So, you have the Themes, the Customizer, Widgets,
Menus, all your plugins. You can manage users and you can also access
your website settings. And Plugins or Themes may add additional options
to this menu as you’ll see throughout the process of building your website. Then also you’ll have the Screen Options here
at the top where you can enable or disable extra options for whichever page you’re on. And the Help menu is also dynamic and changes
the available information based on where you are. This is just a quick run-through but take
a look at our Introduction to WordPress for Beginners tutorial for a complete overview
of the WordPress platform. To make sure your site’s secure, you then
need to activate your free Bluehost SSL certificate, and in the article, we’ve provided a link
to a guide on how to do this and learn why it’s so important. Step Four: Blocking or Unblocking robots.txt
and Changing Your Permalink Structure So, there are a few WordPress settings we
would recommend you use when first building out your website. You can find your WordPress settings under
Settings in the left-hand menu. General is where you change settings like
your site title and date formats, but we want to go to Reading. And here, under Search Engine Visibility,
we recommend that you tick the box ‘Discourage search engines from indexing this site’. This will stop your website from showing up
in search engines so you can hide it from visitors while you’re still working on it. Always save your changes. And remember to come untick this once you’re
ready to launch your website. Then, under Permalinks, WordPress sometimes
by default uses a permalink structure with the date or the month and the name of the
page or post in the URL, but it’s much more logical and better for SEO to use a post name
structure that uses your page or blog post title in the URL. So, just make sure that your website is set
to Post Name and then save the changes. And then we’ll go back to the dashboard. Check out our Introduction to WordPress for
Beginners tutorial for a full overview of all WordPress settings. Step Five: Installing Your WordPress Theme In the accompanying article on the OHKLYN
blog, you can get a discount for the Divi WordPress theme by following this button over
here. We recommend using Divi because it’s one of
the most popular and highly rated WordPress themes. It also has some of the best support and documentation
on the market. So, once you’re here, you can buy Divi by
clicking Join Today. You can then buy it for a yearly access, or
for lifetime access which gives you all Divi’s features plus updates for as long as you want. So, click ‘Sign Up Today!’ then just enter
in your details and your credit card details, agree to the Terms of Service and complete
registration. You should then be able to log into your Elegant
Themes member’s area, and in your account, you can scroll down until you see Divi here
and then download it. This will download the Divi theme as a .zip
file, and just keep track of where you downloaded it so that you can easily upload it later. Okay, so then to upload and install your Divi
theme, just go to Appearance and Themes. This is where you’ll manage all the themes
on your website. Click Upload. Click Upload Theme. Choose file. Then, upload the .zip file that you downloaded
earlier. Click Install Now. This may take some time because the entire
Divi theme will be uploaded including all the demo content. Then, once it’s done, click Activate to activate
the theme on your website. Okay, and now you’ve installed Divi. Step Six: Creating Pages So, unless you have a one-page website, you’ll
probably have multiple pages on your WordPress website. So, to create pages, you can go to Pages in
the left-hand menu and click Add New here or you can go to the All Pages page where
it’ll list all the pages on your website. You can also add new pages here or by clicking
Add New. The first thing you’ll do is add a title,
so in this case Home for our homepage. And then there are a lot of settings here,
but we recommend you watch our Introduction to WordPress for Beginners to get a grip on
all of them. Then, you can save your page as a draft if
you don’t want it live on your website yet. You can publish it if you’re done working
on it. And you can go on and create all your other
pages the same way by referring back to your sitemap. I’ve skipped ahead and created all my pages,
and you should see them all listed here if you’ve done the same. Step Seven: Customizing Your Pages Using the
Page Builder So, a page builder enables anyone to create
pages that look professionally designed for their website without any coding or design
experience by providing an easy to use drag-and-drop interface to add content to the pages, reposition
them and change their styling options. There are plenty of page builders on the market
that are either standalone plugins or come with a professional WordPress theme, but Divi
has one of the best page builders around which is also why we chose it for this tutorial. So, to use a page builder, you just go to
one of your pages (we’ll do Home) and then you click the Edit With the Divi Builder button. Most page builders have something similar. Divi gives you three options: to either build
a blank page from scratch, choose one of their free pre-made layouts and then customize it,
or clone a page you’ve already built. So, we want to show you how to import a layout,
so we’ll click here. That opens up the free Divi layout pack library,
and you can search for one here or filter it by category or search for it over here. So, since this is our home page, we’ll choose
the Home Page layout. And here you’ll see it will group all the
pages from that same layout pack so that you can easily build out your website with a consistent
layout pack. And you can view the live demo here, but we’ll
just click Use It. So, importing the layout pack may take a while
because it’s downloading all the demo content, including images, videos, whatever is in the
design. Okay, so most page builders work using the
same concept. A page is divided into sections, which are
big blocks of related content, like this blue or purple area. And then the sections are divided into rows
and columns. As you can see here, there are different column
structures. And then the actual content consists of elements
that are these gray blocks over here. So, when there is text, you can just click
on it and start typing like that. And you can add new rows by clicking the green
button like this and then choosing a column structure. And then, you can add modules using these
gray buttons. So, for example, we can add, let’s say a Button,
and then we can change the content of the button here. Something like that. And you can change the design options over
here. So, as you can see, it’s very easy to use. And this is just a quick introduction, but
if you want to really get into the Builder, go to the article on the OHKLYN blog and follow
the link to the Divi Documentation. In the Divi Page Builder section, you’ll find
over 20 hours of free tutorials plus an explanation of just about anything that you’ll find in
the Builder. If you’re using a different theme or a different
page builder plug-in, they should also provide similar documentation that will help you get
up to speed. It may look complicated now, but trust me,
it’s actually incredibly simple and it actually becomes really fun to use once you’re used
to using a page builder. So, back in your page builder, if you haven’t
published this page yet there would be a Save and a Publish option, but you can just click
Save like this to save your changes, and you can also exit the visual builder over here
and go back to editing your page in the backend by clicking the Edit Page button over here. Okay, and that’s a quick introduction to using
a page builder. Step Eight: Setting the Homepage for Your
Website So, once you’ve created all your pages, you
need to tell WordPress which page to use as your default homepage so that visitors land
on the right page when first navigating to your website. So, to do that, you go to Settings and then
Reading. Then, under ‘Your homepage displays’ WordPress
usually uses a page that shows all your blog posts in chronological order, but if you want
to use a different page you should select ‘A static page’ and then choose the page from
the drop-down. In our case it will be Home. And then, as always, save your changes. Step Nine: Creating Blog Categories and Posts So, you can also run a blog alongside your
WordPress website, and to do that you’ll need to create posts and categories. Categories are used to organize your blog
posts, and you can create one just by entering a name and clicking Add New Category. You can then add a new post, just like a page. Give it a title
and then choose the category from the right here. And then publish it once you’re done with
your post. If you want to learn more about any of this,
check out our Introduction to WordPress for Beginners tutorial which will cover this in
depth. Step Ten: Creating a Menu Okay. So, now that you have the pages and the blog
for your website, you’ll need to create a menu so that visitors can easily navigate
across your website. So, to create a menu, you go to Appearance
and then Menus, and then you type in the name for your menu over here. I’ll just call it Main Navigation, and then
click Create Menu. Then, here on the left is everything that
you can add to your menu. We’ll just add our pages, so we’ll say Recipes,
Blog, Contact, Shop, About, Home, and then click Add to Menu. You can then rearrange the order of the items
in your menu just by dragging and dropping them. If you want to create a drop-down menu – we’ll
create one using our blog – you can just add another item to your menu and then you can
drag it underneath the top menu item. So, ‘Our Story’ will now be in a drop-down
underneath ‘Blog’. You then need to select where you want your
menu to be displayed. So, the primary navigation menu will be displayed
at the top of your page, and the footer menu will be displayed at the bottom. So, we’ll make this our primary navigation
menu and then save it. And then we look at our website, you’ll see
here’s the menu with everything that we’ve added. And under Blog, there is a drop-down with
the ‘Our Story’ category. Okay, so once again, check out the Introduction
to WordPress for Beginners tutorial to get to grips with how to create menus. Step Eleven: Customizing Your Theme Through
the Theme Options and the Theme Customizer So, most WordPress themes have a Theme Options
panel where you can make changes to your theme settings. You can access Divi’s one under Divi in the
left-hand menu, and then Theme Options. So, here you can do stuff like upload a logo,
change your brand colors, or enable social media or Google Maps on your website. It’s also usually where you update your theme
or access your account. As I said, most themes have something similar,
and you should check out their respective documentations to get to grips with it. You can also change the global styling settings
of your theme using the WordPress Theme Customizer. This looks basically the same regardless of
what theme you use, but every theme will add their own settings to the default WordPress
customizer. So, here you can change typography, background,
your footers, buttons, menus, etc. across your website. Again, we use Divi because of the extensive
documentation that includes over 20 hours of free video tutorials, and you should check
out your respective theme’s documentation to help you learn how to use all of these
settings. Remember that you can find the link to the
Divi Documentation in the accompanying article over here. Step Twelve: Check Out our Other Popular Videos If you’ve gone through and followed each of
these steps, you’ve already created a basic website that you can now build out and customize
as you wish. To help you along the way, check out our other
resources on the OHKLYN website and our YouTube channel. The Introduction for WordPress tutorial will
give you an in-depth look at all the most important aspects of WordPress. You should also watch our How to Add your
Website to Google Search and How to Install Google Analytics videos to get your website
to show up in search engines and view your traffic statistics. WordPress isn’t the best option for everyone,
and you can check out our comparison videos where we compare Squarespace, Shopify, Wix,
Blogger and other CMS’s to WordPress do you see which might be the best option for you. Well, that completes our tutorial on how to
make a website. We hope that you’ve got a solid understanding
of the process and are now well on your way to creating the perfect website for you. If you liked this video, hit the Like button
and subscribe to our YouTube channel to stay up to date on the latest. If you have any questions, comments or feedback,
please leave them below as we’ll endeavor to answer all your questions and create even
more videos on how to create a website.

Comments

  1. Post
    Author

Leave a Reply

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