No matter what kind of products or services you would like to provide to your audience or how big or small your business is, you are missing a big part of your target market if you still have not owed a website. However, there is no need to assume that you have to invest big to build a website or need adequate expertise if you want to build it yourself. Making a website using CMS like WordPress can be an easy task if you know the steps to follow and know how to make a WordPress website.
Here, we have come with a step by step tutorial that will make the process of building a WordPress website easy for you. We will show you how one can build an attractive, highly functional and mobile-friendly website fit for 2018 without even knowing complex technicalities like coding or programming. Before I go further, I want to make it clear why you should prefer WordPress as your Content Management System.
If you are a beginner and want to build a website with new domain name, it is better to start with WordPress. It is free and featured with countless themes and plugins. Excellent customizability and low cost of hosting make the CMS a perfect choice for the beginners. So, get ready to create and own a beautiful and professional WordPress website with some easy but effective steps.
Get Domain and Hosting
This is the first thing, you have to get your domain name, or you can say the URL. Here, I will recommend you to visit Siteground.com, and you will get up to 60% off if you go through my link.
Sign In to Siteground.com and Choose GrowBig
Visit the site and sign in to access it in a better way. Let us choose some plans now. I will recommend you to choose GrowBig, as this option will help you to make multiple websites rather than a single website. This option is going to make a big difference if you are planning to make more than one websites for different purposes.
Once you have chosen your plan, click on the “Get Started”. You are now on another page, where you have to choose a unique domain name for your business.
Create Domain Name
Type the domain name after www. And then choose the later part from multiple options like .com, .net, .org or other. It can be like www.mynewbusiness2018.com or www.iloveavengers.net. Your domain name should represent your purpose.
Once you have chosen your domain name or URL, click on the “Proceed” and land in another page. Now fill all four sections naming Account Information, Client Information, Payment Information and Purchase Information with accurate data.
Purchase Your Service
In Purchase Information section, you will have the option to choose your preferred period for hosting service. I would prefer the 12 months option because Siteground offers a 30-day money back guarantee and you may get a discount for with 12 months option.
Register Your Domain Name
The part of extra services comes next, where you can three steps. The first one is Domain Registration, where you will have to agree that you are ready to pay a certain amount for domain registration.
Choose Domain Privacy Option
Come down to the bottom and here you are going to click on the Pay Now. Click and pay the amount shown in the Total. Again, I am telling you Siteground provides a 30-day money back guarantee so that it can be a free hosting service for you.
Land on Portal
So, what we have learnt till now is how to get a domain and hosting through Siteground.com. Now it is time to Login area and Sign In as a user at Siteground and land on your portal.
Check Billing, Support and Your Account
At your portal, you can check your billing, support, your account. You can ask questions to the support staff of Siteground, and they are readily available to help you with relevant information. You can call them any time of the day.
Manage Your Account
You are going to see your hosting plan right now. You can manage your account by visiting my account option and then Manage Account through which you can see your website. So, right here in this page, you are going to click on cPanel to see your website. But, this will take a few more steps, as you have not installed your WordPress yet.
Install the WordPress
Click on the WordPress to simply install WordPress on your domain. Scroll down the page and click on the “Install Now”.
Find Your Domain Name
Proceed further from here and find your domain. Once you have found it, now move ahead and scroll down to type a unique username and your personal email address.
Now select language and click on the Install. Wait for a while till it is completed. Click on WP admin, and you are on the WordPress now. Click on Install.
Visit Your Website
Your Website is live on the internet right now, and here you have to click on visit your website option. Your website is active now, and anyone using the internet can see it. It is filled with some demo contents that tell nothing about your purpose. Thus, it is time to design your website, but before you move ahead, you can make some changes and make some pages, so that you can learn more about settings and everything else.
Change Some Settings
Let us make some changes in settings so that you can be a little bit familiar with the process. Go to the settings and click on Permalinks.
Now come to the Permalink settings page. Here you can post the name of your website, and it is very simple to do. This is also very good for SEO. Click on the Save Changes option at the end.
Go to Your Profile
This is the place, where you can decorate stuff and get a little customizable option to change the color and some personal information like email and password. Never forget to click on Update Profile option at the end.
The best part in the setting option is to install your theme. You can choose your theme from numerous options, as WordPress gives you plenty of options. Every theme is different in a manner, and you can see the samples by scrolling down the page. You can also download new theme if you find it difficult to choose from given options.
Once you have chosen a theme, you may see a notification asking you to install plugins. Now I am going to tell you what are plugins. Plugins are like apps on our mobile phones. Basically, it is an added feature to your website. If you are on the “Installing Plugin” page, click on Install and scroll down to find out if your theme is activated.
See the Plugins
Come to the Dashboard and let us go to see those installed plugins.
Here, you can see the Elementor as a newly added plugin in your website.
Make Some Pages
Let us make some pages. You have all your pages like home page, about us, contact etc. You have to write these pages with relevant information. So, go to the Pages and click on Add New.
Assign Your Pages to the Menu
Once you have written the pages, you have to assign it to a menu. Click on the Appearance option on the left-side bar and go to Menus and give it a name. Assign the menu and save the changes. Now, have a look at your website.
Give your menu a name. To get all the most recent pages on menu click on view all and add those pages, you have created and added them to the Menu. You can also change the structure and create drop-down menu here.
Customize Your Theme
You can see all the menus in the direction you assigned them. Before you go to the design part, let us work with theme customizer. Click on the Customize and enjoy theme customizing option. You can change a lot of options by customizing your theme. Once you have done it, let us move to the task of website building.
Select what page you want to work with.
Let us work with the Home Page and change the Header.
Here, you can change the style, background color, border bottom color, padding and many more things.
Let us click on the Purge SG Cache. This will purge all your cash and make your website faster.
Now click on Edit Page.
Before clicking on the Edit with Elementor, let us make some changes below the page. In content layout section choose the option of 100% full width. This will help you to stretch your content across the site.
Keep the sidebar in default position and disabled the margin if you do not want it. Now come to the header. Disable the Display Top Bar and enable the Display Header in this section. Keep the Header Style in default status. Themes like OceanWP will allow you to make such changes, while other themes may not respond in a similar way.
Now, come to the Title. Keep it in disabled status, because it will not be a good idea to keep it in Home Page.
Click on the Edit with Elementor option and land on a different page.
Edit with Elementor
Here, I will tell you how to use the element or page builder, and I am really not going use any templates here. This is simply because you are not going to learn anything if I use them. Now go ahead and keep it very simple.
Create Landing Page
We are going to add a new section and create a landing page. There is also a link in the description to images, and you can use these images, as they are free to use. Make sure that these images are copyright free.
Click on this little edit section.
Make it Big
Now click on the edit section and let us make it a big website just like Apple. Make the page fit to screen and enjoy a full page here. Remember, you are doing this just for landing pages, and you are not going to do same for other pages. Here, under the Style, you can add a gradient color, image or a video.
Here, you can add any content. Click on the Content and then get little nine buttons. Click on these buttons and drag this header right there. You can also put it in the centre if you want. To do this, click on the centre. You can also change the font and typography in this section.
Here you get a lot of options to play with your content. You can change the size of your texts, the style, background color and many other things. So, play with it to get your desired result.
Go to the Upload File tab and select files.
You can select all your files and upload them to your library. Select an image you like and click on Insert Media and get the image on the screen. If you find that texts are hard to read, use a background overlay. This will allow you to add some color and make the texts readable.
Now, it is time to add video. You might like to have a video background. Click on the background option and paste the link on the bar below. You can go to YouTube.com and copy the link of any video you like and paste it here. But make sure the quality of the video is high.
Add a Divider
Click on the menu in Elementor.
Drag a Divider
You can change the size and color of the divider, and it will look like this.
Add a New Section
Adding a new section is quite easy. Go to the icon box on your left side panel. Drag the image box from the menu panel and put it below the page. You can use these images with little description.
It will look like this.
You can also duplicate the entire row by clicking on the little duplicate button. It can save a lot of work. Now click on one box and go to the image library. You can bring any image you want. You can even use the image as a profile.
Now, add a little description below the image. You can also add a web link. You can add anything you want right there. You can change the image size by clicking on the Image Size option in the side panel.
Now, click on the Advance setting option at the top of the side panel. Here you can change margin and padding. The margin is basically where and when do you want this to start. For example, if you say 50 pixels, it is going to push this to 50 pixels. So, click on the little icons under the margin and see the difference in the status of your image.
Come to the padding. Padding is space. They might look same, but you will find some difference between them.
Add a Template
In the next step on How to make your wordpress website, Go to the Add a Template and visit the library of templates. From here, you can simply upload any of them you want and use it. So, click on Add New Template.
Now, you are in the library of templates.
You can upload and use any of them. Click blocks to get more.
Go ahead and grab one of these. Now, come to the Elementor and find Design, Marketing, Dev System and Support tables on the screen.
These sections are designed by Elementor. Here, you can simply change this to something else you want. For example, write PayPal in place of Design and customize its size, padding and many more.
Add a New Section
Click on add a new section and go to 3. Add an icon box below the page and you can duplicate the box two more times before clicking on the X option.
Add a Heading
Now, add a heading for words. Go to add a new section 1 and click on a heading. Make these centered and put words like Our Services. You can make the little word bit bigger with style. You can change the color of your texts by going to this Style option.
Again, Add New Section, and here you can add in whatever you want. It can be 3 or something else. Go to the panel and choose an icon box, gallery or a counter.
The counter option will give you a number in the box.
Add More Content
Click on Add a Template and go through all your template options. Elementor provides you with these blocks and templates that altogether make the process of building a website easy. Choose a template and bring it to your page. You can change the text and color of the template if you want. So, add bit more content and then work on the Footer.
Choose a template and bring it on the Our Service Page.
Here you can decide what kind of background you want. So, go to the Edit Section and click on style. Under the Background, you can add gradient, color, image, video whatever you want.
Save changes and come to the Dashboard. Here, click on the View Page and visit your website.
Optimize Your Website for Mobile Devices
This is extremely important step in How to make wordpress website, because search engine Google had a new algorithm and if your site is not optimized for mobile devices, it will de-rank you.
Here, you are going to click on purge SG cache and then click on the edit with Elementor. So, see on says responsive mode click on tablet and see how your website will look on tablets. You can make changes here if you want. Follow the same for mobiles.
Now, see the tablet version of your webpage. Here, you can change anything you want with the help of the Elementor panel on the left side.
With the help of control panel, you can make changes on the Tablet webpage. Never forget to click on the Update once you have completed your work.
Now come to the mobile phones. You can also make some changes in your web design. Like if you think, the header looks too big, you can minimize it with the help of Elementor control panel.
Go Back to Theme Customizer
Go to customizing option and scroll down to get the widgets. Now, you have four widgets, and they are for the theme.
Right here, footer 1 adds a widget.
You can choose options like About Us, About Me or Company anything you want.
Take About Me for example.
You can select an image from the library and click on publish. You can also add a little description about yourself or your business whatever you want. Never forget to click on publish.
Go Back to Footer Section
Click on Footer 2 and find the Facebook like box among other social media options.
Visit your Facebook page and copy the link and paste it on Facebook Page URL bar and type Follow Me just over it. Click on the Publish and come to the footer area again.
Add Social Icons
Go to Footer 3 and then click on Add a Widget. Here you can add social icons with text like “Follow us Here”.
This is the website that comes with tons of demons and some amazing features. Visit the website and get some ideas that can help you to make your website perfect.
Best Place to Find a Logo
I use and suggest other to visit fiverr.com to find a suitable logo for their website. This place is great, and here you can get.
These guys are probably are the best for designing logos. And you can buy a beautiful logo in just five bucks. Go to the search bar and type the keyword “logo” and dive into the ocean of logos. You can also set us your preferred price range if you have come here with a limited budget.
Set up your price range and get a suitable logo within your budget.
Purchase and Install Logo
Purchase a logo that can suit your purpose best. Now, click on the Visit Your Page and then choose the Customize Option. Click on the Header and find the Logo option. Choose the Select Logo option and upload it. You got your logo top of your webpage. To do that, click on the “Exit to Dashboard” option.
Now, visit the site.
And then click on Customize.
Click on the header and then Select Logo.
Take the logo.
Crop Image and put it on the web page.
Decorate Contact Page
Click on the Edit Page option.
Go to All Pages.
And then click on Add New and Type the Contact Page on the bar below.
Come to the OceanWP Settings section in the same page. Keep Contact Layout in 100% full-width position.
Click on the Header and disable that top bar and enable the Header.
Now, click on the Update option and then Edit with Elementor.
Go ahead with the process and click on the Add template” option and visit the library. Type the keyword “contact” in the search bar to make the process easy.
Below the template on your web page, you got three icon boxes.
Change the Header Text
Below every icon box, you see a header text. You can put your contact details like email, phone number or physical address. You can also make some changes in their appearance with the help of border and padding.
Find You in Google Map
Just scroll down the page and see the Google Maps widget there. You can change your address. You can change anything you want by simply clicking on it in Edit Google Map section.
The pro version has the contact, but if you just get a free plugin, then you don’t have to get the pro version if you don’t want it. Come back to the Edit Page and click on the Plugins on the left-side panel. Click on the Add New.
Now choose a plugin from a list of many, as there will be plugins for virtually everything. You can choose the Contact Form 7 Plugin and click on the Activate option.
Provide Your Information
Click on the Contact from the left-side panel and choose Contact form. You are on Contact Form page now.
Come to the middle of the page and find Contact form 1 and an edit option below it. From here you can add more information in your contact details.
Make a Blog Page
Go to the Dashboard and choose Pages and then click on Add New.
Type Blog and click on Publish as you did in Contact Page.
Click on the Posts from the left-side panel and go to Add New.
Now type a title like “Top 10 Best Things to Do for Summer” in the bar and click on the Publish icon.
You can also edit this with Elementor or you can also use a default editor and write whatever you want. So, click on Edit with Elementor and go to the templates library to make your blog visually appealing. You can also add images around your blog post.
Add Blog to the Menu
Go to the Menu and then Edit Menu and assign your blog pages. Now click on the Save Blog to finish the process.
Customize Your Blogs
- Come to the Customizing Homepage Settings.
- Go to the Homepage Settings.
- See the Post Page option below the white panel and select Blog and then click on the Publish icon.
Set Featured Images to Your Blog
- Come to your webpage and click on the “Blog”.
- Now click on your recent blog.
- Click on Edit Post and land in this page.
- Scroll down and click on Set the Featured Image.
- Choose a suitable image and click on Update.
Widgets and Plugins are virtually the same things. Thus, go to the Plugins option and click on Add New.
Now you are on the Plugin page. Type social icons for example on Keyword bar. Get the social icon and click on Install Now option and then click on Activate.
Now go to the Appearance option and click on the Widgets.
Now you are on a page of plenty of white bars. From here, you can add in your Instagram or Facebook Like Box by posting your social media page link there and type Follow Me in the Title Bar before clicking on the Save option.
Remember, whenever you install a plugin, it will have widgets for you. In this page, here we have Instagram to add, you can add About Me. You can add many things if you want. Just like you add widgets for the footer, follow the same steps.
So, this is how you can make a fundamental website. I hope this tutorial on how to make your wordpress website will help you and I wish you the best for your effort.