Photo by Igor Miske on Unsplash
Have you at any point needed to make your own personal site without any preparation? Is it true that you are hoping to assemble a strong pleasant looking site for adding greater visibility to your business? All things considered, regardless, you want to begin from a similar spot from figuring out how to construct your very first website. Also, prepare to have your mind blown.
In this instructional tutorial, I’ll give you a nitty gritty rule on the exact thing you need to be familiar with building your absolute first site.
Having quite a while of involvement with web planning, I’ve fabricated numerous sites for clients over few years. The present moment, my plans are utilized by many other website specialists across the globe.
However, not we all have a similar specialized skills. What’s more, truth be told, that doesn’t exactly make any difference with regards to building a site.
Indeed! You’ve understood right! Now, anybody can fabricate a site. You don’t have to have any insight or specialized abilities to do that. With the wide scope of unquestionably effective web planning technologies and stages there will never be been a more straightforward chance to make a site all alone.
Like I previously said, you needn’t bother with any specialized information to begin. You should simply tenaciously adhere to the directions I’m going to give.
In the following area, you will track down a step by step rule on building your absolute first site.
I create websites for a wide range of individuals and companies. You can find me on Fiverr and Upwork:
Contents
Before you even begin with your very own website, you’ll first need to figure out the right platform. This platform is more like a CMS (content management system) or software that’ll be used for running your website. So which is the best platform? As far as I am concerned, there’s many . Today I am discussing only one viable and excellent choice, and that’s none other than WordPress.
But with so many content management systems out there, why am I specifically recommending WordPress? Well, this is because:
- It is free and can be used by anyone.
- Extremely easy to operate, even if you don’t come with any technical expertise.
- Lets you choose from several thousands of themes.
- Can be easily extended with plugins.
- One of the best content management systems.
- SEO friendly.
In addition to the mentioned benefits, WordPress also comes with regular updates. Being an open source content management system, the site is updated by several thousands of developers every time you find a glitch. So if you’re looking to work on a simple, hassle free and easy to operate CMS- WordPress will definitely be your answer.
Choosing the right theme
Your WordPress theme is very critical because this will provide the front-end style of your WP website. Like I already mentioned, you can always make yours or pick from the several thousands of themes in the Theme directory of this software. But then again, if you’re looking to stay an edge ahead of competitors, you’ll also get the option of trying out premium themes like Divi.
Divi is currently one of the leading themes on WordPress. It is widely popular both among newbies and professionals. I personally love this theme for its simplicity and interactive interface. I’ve also used it on several hundreds of my websites. What I really love about Divi is its all-purpose feature which means you can easily build as many number of websites as you’re looking to build with this theme. Its hundreds of modules and customization option make it even more versatile.
As you try out Divi, you’ll be amazed by the number of free layouts you can try. In addition to this, it’ll also operate as a front-end page builder. This means, you can easily edit the website from a live view and customize it according to your preference.
Things to do before next step
- Choose a platform to build your website on. I’m recommending WordPress which is free and easy to use. This guide will continue with this CMS system.
- For now, you don’t need to install or download anything. I’ll show you this in the next steps.
Step 2: Get a domain name and a Web hosting plan
In order to get started with WordPress or any other CMS, you will need two important things-
A domain name (which is the web address of your site, something like (thenameofyoursite.com)
Hosting (the service that’ll connect your online platform to the internet)
Choosing the right web hosting platform is perhaps one of the most essential parts of starting a website. Here, you should make it a point to choose a platform that is not only reliable and is backed by excellent customer support but is also equally affordable.
I would recommend 3 managed hosting service which i use and have been using without any problem . Managed hosting takes care of many things on the server level . Your site and server will be fast and maintained and secured as well . Here are 3 managed hosting service that I recommend :
- Cloudways : An Excellent, Focused Web Host
There’s a lot to like about Cloudways. The service has flexible cloud hosting plans, fast setup times, top-notch web-based customer support, and excellent uptime. It’s a company you can count on to keep your site up and running to services that offer those items. Additionally, some people won’t like the odd way of getting a customer service rep on the phone. If those caveats aren’t dealbreakers, however, give Cloudways a chance. You may find it offers just what you need to get and keep your website online.
2. Kinsta : The Kinsta plans aren’t cheap, though. However, with prices starting at $25 a month, the entry-level plan from Kinsta is priced in line with many other premium managed WordPress hosts.
For this price, Kinsta takes care of many of the aspects involved in managing a fast and secure WordPress website. It also hosts your site in an environment that’s optimized for WordPress websites, yet powered by the industry-leading.
Because of this, tasks such as securing, caching and backing up your WordPress website are taken off your hands. You can also choose to host your website in one of 29 locations around the world to get you closer to your audience.
3. Siteground as a hosting platform because of its simplicity and user-oriented services. Here are some more reasons that’ll convince you why I’m vouching for it.
- Lets you install WordPress in a single click.
- Free Let’s Encrypt SSLs (secures your website).
- Offers 24X7 customer support.
- Loads your website really fast.
- 50% discount
Now that you’re aware of the benefits this platform comes to offers. I am in this article using siteground hosting for discussion .
Step 1
Go to the website of Siteground- In order to get started with this hosting solution, you’ll first have to head to the website of Siteground and click on the choose plan’ option.
Step 2 choose your plan
For this next step; you’ll have to decisively choose a hosting plan for your website. Having said that, don’t stress out about the different packages, because you can always upgrade them as and when you need. If you’re a beginner, you can always try the StartUp package. This is a great choice for new websites and right now it is available at a discount of 50%. Once you’ve chosen this hosting package, click on the option called get started’. This will redirect you to the option of selecting a domain name.
Step 3: choose your domain name
The domain name of your site is going to be the web address via which people are going to identify you and access your website. In other words, your site’s domain name is websitename.com. In case you have a domain name already, check the box called I have a domain name already’. After this, click on proceed to carry on with the remaining process. If, however, you don’t have a domain name of your own; click on the option called Register for a new domain’.
While you might already have some ideas for selecting your very first domain name, here are some additional guidelines for the ones starting out:
- If you are making the website for your company, use a domain name that syncs with your company name. If however, you are making it for yourself, then add your name in the domain name section.
- Do not use any extra characters other than alphabets (including hyphens)
- If available, use .com, because this is the easiest for people to remember.
Step 4: fill in your Details
This is the section where you add your contact details and pay for your web hosting plan. Here, right under the purchase information, click on the option called hosting services’. There, you will find yet another option called data centers’. In this section, choose the location of your nearest data center. If your customer base is primarily from USA, then choose USA in this section.
While you create your first domain name, you will also get the option of adding domain privacy. (This will keep your personal information (including your name and address anonymous). You can also add a SG site scanner for scanning your website for malicious software. Both of these options are optional.
Things to do before next step
Step 3: Set Up your Domain’s SSL
Once you’ve purchased your domain name and have set up a proper hosting plan, you’re one step closer to building your website. In the third step, we will focus on securing your website with SSL (https). Right now you might be wondering what exactly is SSL and how is it going to impact your website. I’ll keep it simple. SSL is the acronym for Secure Socket Layers. As evident from the name, an SSL certificate in your hosting account is going to provide the much needed security for your website. When your website is secure, you will see a green padlock icon in your address bar and instead of starting with HTTP; your web address will now start with HTTPS. Here, the S stands for the security.
If your website starts with HTTP instead of HTTPS’; the Google Chrome browser will automatically flag it as non-secure’ site. Here, even if you’re not accepting payments via your site, seeing the non secure icon is not really going to provide a great user experience.
You’re already aware how difficult it is to garner people’s attention. And having something negative is definitely going to add an adverse impact on this attention. But how exactly does one set up their SSL? Well, with Siteground this is super easy to do.
Visit the Siteground website and click on the login option.
Right after you’ve logged in, head to the My Accounts tab.
On your next screen, click on the option called Go to cPanel. At this point, you’ll get a popup message where you’ll have to click on proceed’.
On the following screen, scroll down to the bottom until you find the option called Install Let’s Encrypt’s Certificate’. Click on it.
Choose your domain name in the field of domain. Similarly, add your email address on the bar asking you to do so.
Finally, click on install. The installation will hardly take a minute and will soon let you access your SSL certificate.
Things to do before next step
Step 4: Install WordPress
Now that you’re done with the SSL certificate, it’s time to finally install WordPress. As you start out, the first thing that you have to do here is install your domain. Fortunately, with Siteground it is way easier to get WordPress installed and running in a couple of minutes.
In order to install your domain, head back to the cPanel by either clicking the cPanel option in the upper right section or by simply accessing your cPanel account by visiting www.yourwebsite.com/cpanel. Here, you will find several autoinstallers, from where you have to click on WordPress.
You will then be redirected to the next screen where you have to click on the install option. As you do this, Siteground will now take you through the entire process of organizing your WordPress account.
It’ll hardly take two minutes to complete the entire process. As you start out, you’ll first be asked about the protocol that you’re willing to use. As we are using the https protocol, you will have to choose https protocol’ option. You will now find two options where your protocol is either with or without the www.
For instance it can either be shown as www.yourwebsite.com, or simply yourwebsite.com. Choose your preferred protocol and then choose the domain where you want to install wordpress. After you do this; head to the site settings, where you will be asked to fill in a title and a description for your website. Fill this section (You can always tweak it later on).
Now, under the Admin account you will have the option of editing your user id, password and email for WordPress.
At this point, in case you’re looking to change the language for your website, simply click the choose language’ option to get started with it. Finally, when you’re done with setting up the basics, click on the install option.
Your WordPress website is now been installed and you can access it by using the information sent to your inbox. This information includes your WordPress username and password, and the admin URL of your website, which should be something like www.yoursite.com/wp-admin
Things to do before next step
Step 5: Setting up the Divi theme and the free layout pack
After you’ve finally installed WordPress on your domain, you will find a pretty basic and clean website.
But having said that, you don’t really want your website to look like your competitors’ websites; isn’t it? And that is exactly why you’ll need a good theme and design template that’ll keep your site an edge ahead of others.
Divi has tons of customization options and you can literally build any type of website with it. And the best part is that it has a live page builder.
Setting up the Divi theme
Head over to Elegant Themes.
You can choose out of 2 packages. The difference between the 2 is lifetime access, updates and support.
If you choose yearly access then it doesn’t mean that your website won’t work anymore after that year. It will just keep working you just don’t have access to new updates and features after that year.
Not only do you get access to the Divi theme but you get 89 of their themes + all of their plugins.
With most of the premium themes out there you can only use it once per website. With Elegant themes you can use the themes as many times as you like on as many clients as you want.
So this is a pretty sweet deal.
Installing Divi
When you finished the sign up process head over to their website en login. In you member area you can download Divi.
Save it somewhere on your computer.
Now head back to the dashboard of your website and go to appearance > Themes.
And click on add new
Then click on Upload Theme.
On the next screen you can upload your theme. Click on Choose file and find your downloaded Divi theme. Then press on install now.
After the upload process has finished you can then activate the Divi theme.
Installing the free Localbiz layout pack
Now that you have successfully installed Divi. You can start building your website.
Create Pages
After you install your plugins, the next step is to set up the basic pages you will need for a successful site.
When you open, you will see that WordPress comes with some existing pages. Delete the existing pages by “Select All > Bulk Actions > Move to Trash.”
Home
By default, WordPress displays blog posts on the home page.
For a business site, you want a dedicated home page separate from your blog.
Go to “Pages > Add New.”
You will see the new Gutenberg Editor layout. You will NOT be using the Gutenberg Editor (you will instead be using the Divi visual builder), so all you need to do is add the titles of the pages to create the URLs.
Create a new page with the title “Home” and then click the “Publish” button.
Repeat this process to create the following pages just like you did the home page:
Blog
About
Services
Gallery
WordPress Settings
After creating your pages, you will adjust some of the settings of your website.
Go to “Settings > General” if you want to update your website title and tagline (optional).
Reading
Under the “Settings > Reading” tab, go to “Your homepage displays” and change to “A static page.”
Then select the “Home” page we just created from the “Homepage” drop-down menu and select the “Blog” page from the “Posts page” drop-down menu.
Permalinks
Under the “Settings > Permalinks” tab change the URL settings to “Post Name” to make your URL structure simple and clean.
Create a Child Theme
After Divi is successfully installed into WordPress, create a Divi child theme in order to keep your customizations safe when you update Divi in the future.
Child Theme Configurator Wizard
Go to the “Tools > Child Themes” page. From here you can create your first child theme using a step-by-step wizard.
For Step #2 “Select a Parent Theme” pick “Divi” from the drop-down menu.
Click the “Analyze” button to make sure everything passes the test.
You can optionally rename the new child theme directory within Step #4 (I went with Divi-landscaping), then leave the remaining options at their default values and click “Create New Child Theme.”
Activate Child Theme
Navigate back to “Appearance > Themes” and click the “Activate” button for your newly created child theme to switch from the Divi parent theme.
Create Main Navigation Menu
Next, set up your basic navigation bar for your website.
Go to “Appearance > Menu”, name your menu “Main Navigation” and click the “Create Menu” button.
Manually select the pages you would like to be on your menu. In “Menu Structure”, you can drag and drop to put the menu in the order you would like, along with indent to create sub-menus.
Create a custom link which will be an on-page link to the contact form. For now, just put a place holder “#” in the URL and “Quote” in the link text.
In menu settings, if you automatically would like to add pages to the menu when you create them, select the checkbox “Automatically add new top-level pages to this menu.”
Then under “Display location”, select “Primary menu” which will attach this menu to your main navigation bar.
When you are done, click the “Save Menu” button.
Update Your Divi Settings
Update your Divi Settings to reflect your website’s brand. Go to the sidebar “Divi > Theme Options” section.
Add Your API Key
Before you change any of your theme options, you want to make sure you are receiving all updates from Elegant Themes.
To do this, you’ll need an API key from your paid account. Go to the “Updates” tab and copy/paste in your API Key from your Elegant Themes members area as shown below.
You’re now ready to start customizing and designing your Divi website!
Change Your Logo
If you have an image logo for your site, upload it within the Divi Theme Options page.
Change Your Color Palette
Divi allows you to set a default color palette, that way when you are customizing any parts of your website you don’t have to enter in hex codes or do it on the fly.
To change your color palette click on the colors and enter in your color hex codes.
Activate the social media icons you would like displayed on your site by “enabling” or “disable” the social media sliders.
Customize Your Divi Theme
To begin customizing your website go to “Divi >Theme Customizer.”
General Settings
To set your default values for color, spacing, and fonts go to “General settings > Layout Settings.”
Layout Settings
Click “General Settings > Layout Settings” and set the Theme Accent Color to tan from our custom color palette.
Typography
In typography, you can change the style of fonts, sizes, boldness, line heights, and link color. We will adjust the line height and link color here.
Click “General Settings > Typography” and adjust your Header Line Height to 1.5 to give your header text plenty of room when it flows to a second line.
Change your Body Link Color to dark red from your custom color palette.
Header & Navigation
In the header and navigation tab, you can adjust the alignment, font, colors, and elements at the top of the website.
Click “Header & Navigation > Header Format”.
The header format can be centered, centered in-line, slide, in or full screen.
Adjust your header format to be “Centered.”
In the primary menu, you can adjust the style of your main menu including text size, height, fonts, and color. We will change the font and color.
Click “Header & Navigation > Primary Menu Bar” and change the Font Style to Uppercase by clicking the block.
Then set the Active Link Color to dark red from our custom color palette.
A second menu will appear above your logo to display contact information. We will adjust the background color of your secondary menu.
Click “Header & Navigation > Secondary Menu Bar” and change the Background Color to black from our custom color palette.
Next, we need to add your business contact info to show on the secondary menu.
Click “Header & Navigation > Header Elements” and add in the phone number and email you would like displayed on your site.
You can also deselect the Show Search Icon option if you don’t have a content-oriented website. I do not provide a search bar for most small business websites since it’s unnecessary.
In the buttons menu, you can set your default style for buttons such as their color, size, shape, hover effects, and text. We are going to change the font type and size, button color, and border.
Go to “Buttons > Buttons Style”.
Adjust the Text Size with the slider at the top to 24px.
In the same menu, you can change the button color to an accent color in your palette. Select Background Color to change. In our case, we will select our dark red.
Button Border & Radius
Change the Border Radius of the buttons. To keep the buttons square slide the slider down to 0.
Just below the border-radius slider, you can change the Button Font Style to uppercase to match the menu and contract regular paragraph text.
When you have completed customizing, click the “Publish” button.
Build Homepage Layout
With our default values now set, we can begin building our page layouts using the Divi visual builder.
Navigate to the WordPress Pages, hover over the “Home — Front Page” and click the “Edit With Divi” link to launch the Divi builder.
For these updates, I’ll share the settings used within the video tutorial.
Call-to-Action (CTA) Image Banner
Add a new Section with 1-row and 1-column, and include a Text Module for the headline, a Text Module for the description, and a Button Module for our “Free Quote” CTA.
NOTE: Be sure to click the green checkmark and “Save” button frequently to ensure you don’t lose your progress!
Section Settings
- Background Color — Black
- Background Image — Grass Closeup
- Background Image Blend — Overlay
- Padding Top — 30px
- Padding Bottom — 50px
- Bottom Divider
Text Module — Headline
- Text Orientation — Center
- Text Color — Light
- Font Weight — Bold
- Font Size — 48px
- Line Height — 1.2em
Text Module — Description
- Font Weight — Normal
- Font Size — 18px
- Line Height — 1.7em
- Enable “Use Custom Styles for Button”
- Font Color — White
- Background Color — Red
- Button Border Width — 0
- Hover Icon — Check Mark
- Link — Contact Form ID
Add a new Section with 1-row and 3-columns (equally spaced), and include three Blurb Modules. Create the first Blurb, customize, and then duplicate for the remaining two columns.
Section Settings
- Three-Columns
- Background — White
Blurb Module — Image
Blurb Module — Title
- Text Orientation — Centered
- Font Weight — Bold
- Font Size — 24px
Add a new Section with 1-row and 2-columns (right column wider), and include three Blurb Modules within the left column and a Contact Form within the second column. Create the first Blurb, customize, and then duplicate for the remaining two.
Section Settings
- Two-Columns — 1/3 first column, 2/3 second column
- Background Color– Green
Blurb Module — Image
- Enable “Use Icon” and Insert Heart Icon
- Icon Placement — Left
- Icon Font Size — 54px
- Icon Color — Light Green
Blurb Module — Text
- Font Color — White
- Font Weight — Bold
- Font Size — 24px
- Padding — 15px
- Add New Field — Phone Number
- Minimum & Maximum Length — 10 Characters
- Remove Captcha
- Title Font Color — White
- Title Font Weight — Bold
- Title Font Size — 36px
- Line Height — 1.5em
- Form Field — Add Box Shadow (5px)
- Button Font Color — Black
- Button Color — Tan
Customer Testimonials
Add a new Global Section with 1-row and 3-columns, and include three Blurb Modules. Include a Text Module for the headline above the blurbs. Create the first Blurb, customize, and then duplicate for the remaining two.
Section Settings
- Three Columns (equally spaced)
- Background — White
- Save Section as Global to Library (show on all pages)
Text Module — Headline
- Text Orientation — Centered
- Font Size — 36px
- Font Weight — Bold
Blurb Module — Image
- Upload Size — Medium
- Background Color — Light Grey
Blurb Module — Text
- Font Size (Title) — 20px
- Font Style — Bold, Italicized
- Text Orientation — Centered
- Padding — 30px
- Font Color — White
- Background Color — Red
- Hover Icon — Arrow
- Link — Contact Form ID
Build Default Layout
The next page layout that we’ll create will be used for all the remaining pages other than the homepage.
Section Settings
- Two Columns — 2/3 Left, 1/3 Right
Post Title Module
- Disable “Show Meta”
- Text Orientation — Centered
- Font Size — 36px
- Font Weight — Bold
Image Module
Text Module — Description
- Button Color — Red
- Button Text Color — White
- Title Font Color — Black
Call to Action
Add a Fullwidth Section with a Fullwidth Slider Module.
Fullwidth Slider Module
- Background Color — Green
- Image Upload Size — Large
- Button Color — Tan
- Button Text Color — Dark
- Button Border Width — 0
- Button Hover Icon — Checkmark
Customer Testimonials
We will finish our design by including the Global Section that we previously built on the Homepage. Select “Add From Library” to find out saved Global Section called “Client Reviews”.
We are done with our final page layout!
Click the “Save to Library” button on the Divi bottom dock, and save as “Default Sidebar Layout”.
You can now apply this pre-made layout to all of the inner pages, and customize the content modules on each of them.
To do this, open a new page and click “Load from Library” on the Divi bottom dock, navigate to the “Your Saved Layouts” tab, and select it.
Additional WordPress Plugins
- SEO by Yoast — Helps your pages rank within Google with good titles & descriptions.
- Pretty Links — Create easy to remember links that forward anywhere, i.e. yourdomain.com/facebook
- Duplicator — Create backups of your website and migrate to new web hosting
- Autoptimize — Combine website files and add lazy-loading for faster speed
- W3 Total Cache — Save versions of your website pages to optimize
Install Google Analytics
Google Analytics is a free software offered by Google to give you all the important data on your website traffic to help you improve and make better marketing decisions.
To install Google Analytics, you must have a Google account.
Select the “Admin” Gears icon and click “Account > Create New Account.”
Fill out the required fields including Account Name, Website Name, Website URL, and Time Zone.
Next, you must inject code into your website so Google can track your data on every page. To do this click “Property > Tracking Info > Tracking Code” and copy/paste the Global Site Tag into your website header.
There is a WordPress plugin to make this easy. Go to “Plugins > Add New” and search for “Insert Headers and Footers” then install the plugin.
Go to “Settings > Insert Headers and Footers” and paste the tracking code into the “Scripts in Header” text box. Check your Google Analytics reports in 1–2 days to confirm your website traffic is being logged.
Verify Google Search Console
Google Search Console is another free service offered by Google to help website owners maintain their website performance.
The Search Console tool shows you how often your website is appearing within Google search results, where it’s ranking, and how many clicks you’re getting. The application also gives you tons of essential data on keywords and search queries that drive traffic to your site.
You can leverage this data by optimizing existing pages/posts or creating new content around these search phrases.
To Install Google Search Console, click the “Start Now” button.
Add your website or property by entering your website URL, then click “Continue.”
NOTE: You’ll want to verify all four variations of your domain including HTTP/HTTPS & WWW/Non-WWW
Verify your website ownership using one of several methods. If you have Google Analytics installed, you should be able to simply use that as verification.
You can also upload an HTML file to your site. To do this click “Download This HTML Verification File” and use your FTP program to transfer to your web server.
After uploading the file, go back to Google Search Console to verify.
Your Website is Complete
This is where the fun really begins! I’m so glad you’ve made it this far, and you will continue to learn how all of these tools work together as you gain experience.
Basics Divi builderFull documentation
Create additional pages https://www.elegantthemes.com/documentation/divi/
https://www.elegantthemes.com/documentation/divi/visual-builder/
Congratulations!
Frequently Asked Questions
The Divi theme comes with 2 pricing options. A yearly fee of $ 89 or a one-time payment of $ 249 for lifetime access. Both options include the plugins Bloom and Monarch.
The Divi theme is a WordPress theme that uses a drag and drop page builder. With this builder, you can create beautiful websites without the need for any coding skills.
The Divi theme has the Divi builder in it. With the Divi theme, you also have options for the header and footer. The Divi builder plugin can be used on any other WordPress theme. You can then create pages with the Divi builder and use the other options of the theme.
In your dashboard go to Appearance > Themes. Click on Add New and on the next screen click on Upload Theme. Locate your download file and start the upload. After the upload has finished click on Activate Theme.
Can I use Divi theme on multiple websites?
Yes, you can use the Divi theme on multiple websites. Is Divi easy to use?
Yes, Divi is very easy to use. The Divi theme comes with a drag and drop visual page builder. With the visual builder, it becomes very easy to build websites
Disclaimer : Bear in mind that some of the links in this post are affiliate links and if you go through them to make a purchase I will earn a commission. Keep in mind that I link these companies and their products because of their quality and not because of the commission I receive from your purchases. The decision is yours, and whether or not you decide to buy something is completely up to you.
