Part two of our "How to Start Your Own Hosting Company at Home" guide focuses on designing the actual website.

Click here for part 1.

I'll show you how to build a real hosting company website called hectohost.com.

Assuming that you've followed all the steps described in the first part, by now you should have an ICDSoft reseller account with an online store configured in it, a domain name with hosting, and WordPress installed. The WordPress installation should have the OceanWP theme installed and activated along with the plugins ICDSoft Reseller Store, Elementor, and Ocean Extra.

4. Set up the Website Navigation Menu

We start by setting up the website menu. This would require that we create all the necessary pages of our site first.

Let's take a look at the pages we will have:

• Home
• Hosting Plans
• Email
• SSL Certificates
• Advantages
• Data Centers
• Contacts
• Support
• Order

This is the structure we've followed when building hectohost.com - our fictional but fully functional web hosting company.

4.1 Create the Website Pages

To build the website menu, we have to start by creating these pages. We don't have to add any content to them now.

Check out the video below to see how we add our Home page, and proceed with the rest in the same way. You should navigate to the Pages menu on the left side and select Add New. Then, enter the name of the page, change the Content Layout to “100% Full Width”. From the Title menu on the left side, Disable the setting “Display Page Title”.  From the Footer menu, disable "Display Copyright Area".

Setting up the menu

1. Navigate to the Appearance menu and select Menus.
2. Enter the name of the menu (e.g. Main Menu) and press the Create Menu button on the right side.
3. Add all the newly created pages to the menu. Arrange their order with drag-and-drop.
4. Finally, add a Custom Links type of menu called "Company" with the link option disabled, so that it would serve as a drop-down.
5. Arrange the three submenus of the Company menu - Advantages, Data Centers, Contacts.
6. Once you've arranged all the items, press the Save Menu button.

4.2 Styling Up the Menu

We will change the font of that text. Follow these steps:

1. From the Appearance menu -> Customize -> Typography -> Logo change the Font Family to the second one on the list of Google fonts called Abel (of course, you can use something of your liking on your website).
2. Go to the Customize menu -> Main Menu, and change the Font Family to Abel again, and also set "Text Transform" to "Uppercase".
3. We also use an underline effect on our menu items. Under Customize -> Header -> Menu -> find Links Effect and select Underline From Left.
4. Under that same section, scroll down and find the Search Icon Style drop-down menu, and set it to Disabled. This will get rid of the search function that's added by default on the main menu.
5. Make sure to press the Publish button to save all these changes you've applied to the main menu.

With this, we are finished with the design of our menu, and we can start designing our web pages.

5. The Home Page

Let's start by selecting a header image for the home page. I chose a free stock photo from Pixabay.com. I searched for "happy people" and downloaded this image with dimensions 1280×853.

1. Navigate to the Pages menu on the left side of your WordPress dashboard, and press the Edit link next to the Home page.
2. When the page loads up, press the Edit with Elementor button on top.
3. Once Elementor is fully loaded, press the Add Template button.
4. Insert the page template called Product - App.
5. Here is a short walkthrough video on the process thus far.

5.1 Configure the Header Image

To configure the header image, follow these steps, or check the video below:

1. Click the Edit Selection button at the very top
2. Switch to the Style tab, and click on the thumbnail of the default image.
3. At the WordPress Media Library upload the chosen image (I've already done that), select it, and press the Insert Media button.
4. Change the Position to Custom.
5. Under Background Overlay, set Opacity to 0.30.
6. Go back to the Layout tab and change the Minimum Height to 400 px.
7. Delete the entire right column with the video in it with a right-click on the upper-left corner -> Delete.
8. Select the "WORKFLOW OPTIMIZATION MADE EASY​" text and enter "Fast And Reliable Hosting With Outstanding Customer Support" (or your chosen tagline).
9. Set the alignment to center. Switch to the style tab for that text, press the Typography icon, change the font family to Abel, set size to 32 px.
10. Switch Transform field to "Capitalize".
11. Last step here is to right click on the "Get Started" button -> Edit Button. Set the alignment to Center.

On the Style tab, change the Background Color to Purple (#4054b2), and the Text Color to white (#ffffff).

Take a look at the video below for a step-by-step guide on this entire process.

5.2 Edit the Icons Under the Header Image

The next step is to edit the area with the four icons under the header image we just updated.

1. Click on the first icon representing a suitcase and then press the Icon Library button.
2. Search for an icon called "rocket" and Insert it.
3. Edit the texts and the rest of the icons in the same way.

You can see the actual titles and descriptions from the screenshot or at the hectohost.com website.

It's best to use your own text to avoid getting penalized by Google for duplicate content. You can also opt for different icons of your personal liking. In our case, the second icon is labeled "people", third one is "ambulance", and the fourth is "at" (@).

5.3 Why Us - We will move your website for free!

In this next segment, we will have a short description of our free website migration service with a neat image of it.

Note that as a hosting provider, you don't have to do anything - our team at SureSupport.com will perform the actual website migration, free of charge. You or your end customer will just have to request the migration.

Go ahead and follow the video, or use the text instructions below.

Again, we chose an image from Pixabay for this section - I searched for "move" and downloaded this image in its smallest size (623x640). Let's go ahead and make the changes:

1. Insert an Elementor block beneath the previous section with the four icons by clicking on the "plus" sign labeled "Add Section".
2. Click on "Add Template" (the folder icon).
3. Switch to the Blocks tab.
4. Set the category to "Call To Action".
5. There, insert the block with an image of a bicycle and text saying "We help you design the life you want".
6. Click on the bicycle image -> Choose Image (on the left side) and Insert the one we downloaded from Pixabay.
7. Change the image Size to "Medium" and Align it to the "Right".
8. Change the text to something in the lines of:

5.4 Choose the Perfect Plan

This section shows comparison blocks of three hosting plans with their specs. You can copy the text from the hectohost.com website.

The Get Started buttons are links to the order page. Below them, we will drop a ready-made element for Elementor called HTML with one of the shortcodes for the ICDSoft Reseller Plugin - [domaincheck]. This shortcode generates an order form for domain registrations.

Note that you will not see that order form while you are under the Elementor editor, but it should load correctly on the website once you actually publish the page or try to preview it.

Here is the short video of the process:

5.4 Frequently Asked Questions

You can check the actual texts at hectohost.com and of course we recommend that you change the texts to your liking and include other questions. Changing the actual text under Elementor is as simple as clicking on it and then edit the actual Toggle Items on the left side.

At the end, you can remove the text "Workflow Optimization is a cross platform message optimization app for all devices. Contact Us".

Since we don't have any actual testimonials yet, I will also remove the last block labeled "Our Clients Say". To do that, just hover on it, so that it gets selected, and then press the "x" button (Delete Selection) at the top. Don't forget to press the green Update button once you are ready.

5.5 Set the Finished Page as Home

Now that you have finished the index page, it's time to set it as the home page for our website.

1. Exit Elementor, by clicking on the sandwich menu at the upper left corner and select "Exit to Dashboard".
2. Go to the Appearance -> Customize menu -> Homepage Settings -> Your homepage displays -> A static page.
3. Select the "Home" page we just finished -> Publish.

At this point you should be able to access your website and see the home page. Looks nice, right? In the next chapter of this tutorial, we will focus on building the rest of the pages.