This is the last part of this tutorial. We will build the final pages and complete this project.

8. Advantages

This page will highlight the advantages of our hosting service. It's similar to the standard "Why Us?" type of page that's used by a lot of web hosts out there.

1. Press the Add Template button with the folder icon. Under the Blocks tab -> switch the category to "Call to Action" -> Insert the one called "Finding something interesting".
2. Switch to the Style tab -> Background menu -> Choose Image -> Upload this image from Pixabay (search for "server") in size 1280 x 448 px and Insert it. At the Background Overlay menu, leave the Background Type set to Classic, change the Color to #4054B2, and set the Opacity to 0.30. Our Title text is "Advantages of Our Hosting Service". Delete the subtitle.
3. Click the Add Template button, switch the Category to Features and Insert the block with an image of a smartphone (you will see the exact one in the video below).
4. Click on the actual smartphone image in order to select it, switch to the Style tab, then Choose Image. This will load up the WordPress media library where you should switch to the Upload Files tab and upload this image from Pixabay (search for "server") in format 551 x 640 px.
5. At the left column, select the first item on top labeled "Design", right-click on it and select "Duplicate".
6. At the right column, select the first item on top labeled "Dev System", right-click on it and select "Duplicate".
7. At the left column, select the first item, open the Icon Box menu under the Content tab, hover over the star image and click on Icon Library. When the library loads, search for "shipping" and Insert the image of a truck. Change the title to "free website migration" and enter <p style="color:black">We will move over your existing website from your previous host at no extra cost.</p> . It's really important to use the <p> tag as having the text in black color allows it to stand out better.
8. Repeat step 7 for the rest of the items. You can see the actual text at the HectoHost website. For icons, search for "lock" (for the Free SSL certificates), "mail bulk" (Email Included), "credit" (100-Day Money-back"), "save" (Free Daily Backups), "carry" (Outstanding Support). Of course, you can opt to use other icons of your liking. When entering the text, make sure to place it within the <p style="color:black"></p> tags.

9. Data Centers

Moving on to the next page on the list - Data Centers. It will provide details about the three available data centers - Neterra (Europe), Cyxtera (USA), CenturyLink (Hong Kong).

1. Press the Add Template button with the folder icon. Under the Blocks tab -> switch the category to "Call to Action" -> Insert the one called "Finding something interesting".
2. Switch to the Style tab -> Background menu -> Choose Image -> Upload this image from Pixabay (search for "world map") in size 1280 x 401 px and Insert it. At the Background Overlay menu, leave the Background Type set to Classic, change the Color to #4054B2, and set the Opacity to 0.30. Our Title text is "Data Centers" (white color) with subtitle "With servers in USA (Cyxtera), Europe (Neterra), and Hong Kong (Centurylink), we provide our clients with a wide range of options to ensure their requirements for connectivity and performance are met with excellence."
3. Press the Add Template button, go to the Blocks tab, change the Category to Contacts and Insert the one with the "Welcome" title as shown in the walkthrough video below.
4. Press Add New Selection and select the 1-column structure. Drag and drop a Heading type of Elementor element. Set the Title of the header to "Cyxtera / USA" and change its size to XXL.
5. Click on the Edit Google Maps menu and enter the data center address.
6. Enter the data center specs and features.
7. Repeat steps 3, 4, 5 and 6 for the other two data centers - CenturyLink / Hong Kong, and Neterra / Europe. You can get the actual details from the HectoHost website.

10. Contacts

The last item on the Company menu is Contacts. This page will contain a contact form along with a couple of information sections that would outline how potential buyers and existing customers can find more information about our hosting services.

One of the great things about WordPress is that there are ready-made plugins for just about anything you can think of. We will install a new plugin that will set up the contact form automatically. Navigate to the Plugins menu at the WordPress dashboard, select Add New, and search for "contact form 7". Install it and Activate it.

Add that point, you should have a new Contact menu item on the left side of your dashboard. Hover over it and click on the Contact Forms. Good news is that it comes with a default form, which is actually OK for most websites, so we will use it directly on our Contacts page. Click on Edit under the “Contact form 1” title (that’s the ready-to-use form that comes with the plugin). The most important part is to make sure you have a valid “To” (recipient) email address under the Mail tab as that's where the contact form entries would be sent. The other important thing is to Copy the shortcode highlighted in blue on top. Paste it in a text editor in order to have it ready for the Contacts page that we will build, or just keep in your clipboard.

Now that we have the contact form ready, let's go ahead and build the actual Contacts page with Elementor.

1. Press the Add Template button with the folder icon. Under the Blocks tab -> switch the category to "Call to Action" -> Insert the one called "Finding something interesting".
2. Switch to the Style tab -> Background menu -> Choose Image -> Upload this image from Pixabay (search for "contact") in size 1128 × 785 px and Insert it. At the Background Overlay menu, leave the Background Type set to Classic, change the Color to #4054B2, and set the Opacity to 0.30. Our Title text is "Contact Us".
3. Click the Add Template button, change the Category to Contacts and Insert the one titled "For any inquiries please email". You will see it in the step-by-step video below. Once you've inserted it, update the contact email to yours.
4. Click the Add New Section button and select the 2-column structure.
5. Drag and drop an HTML type of Elementor element in the left column. In the actual HTML Code field of that element, paste the shortcode from the Contact Form plugin. It should be similar to [contact-form-7 id="169" title="Contact form 1"]. Disregard the fact that you are not seeing the actual form just yet. The form will be generated correctly when you try to Preview the page and once you publish it.
6. Drag and drop an Alert type of Elementor element in the right column. Change its Title to "Knowledge Base" and place a link to the KB hosted at SureSupport.com.
7. Drag-and-drop another Alert type of element in the right column just below the first one. Change its Title to "SureSupport.com" and place a link to the ticketing system at SureSupport informing your end customers that they can get help by submitting a ticket there.

11. Support

The support team is one of the most important characteristics of a good web hosting service. The great thing about our reseller program is that you won't have to spend a dime on technical support. Your customers can register (for free) and contact the support team at any time. And our support service is not only free, it's great. That's why we've decided to devote an entire page on the website for it. Let's start.

1. Click the Add Template button, switch to the Pages tab and Import the one we used for the Home page. Again, you will see it in the video below.
2. Change the Title text to "Need Help? Just Contact Our Support Team". Switch to the Style tab, click on the Typography button and change the size of the text to 30.
3. Right-click on Pencil icon (at upper-right corner) in the video at the Header and Delete it.
4. Drag-and-drop the "Get Started" button to the right column where the video was originally placed. Change its Title to "Submit Ticket". Set its Alignment to Right. Set it to Link to https://suresupport.com and enable the option "Open in new window". At the Advanced tab, change the Top Padding from 50 to 0.
5. Select the entire Header section. At the Layout menu, set the Minimum Height to 400. At the Style tab -> Background menu -> Choose Image -> Upload this image from Pixabay (search for "help") in size 1128 × 785 px and Insert it. At the Background Overlay menu, make sure the Background Type is set to Classic, the Color should be #4054B2, and set the Opacity to 0.30. At the Background menu, change the Position of the Image to Bottom Center.
6. Scroll down to the section below and change the Title of the first item from "minimize your documents" to "have a problem?". The description can be "Something's wrong with your website or you need help setting up your email app? Ask us anything you want, and our support team will do their best to assist you." Click on the Icon Library button and Insert "arrow alt circle right".
7. Change the Title of the second item from "automate repeating tasks" to "submit a ticket". The description can be "You can submit us a ticket at suresupport.com. If you do not have a support account yet, please kindly sign up for your free account through http://www.suresupport.com/new." Click on the Icon Library button and Insert "arrow alt circle down".
8. Change the Title of the second (right) item on the second row from "saved to the cloud" to "industry leading ticket system". The description can be "Our ticketing system is designed, so that we can process customer requests securely and quickly. It has features that email does not have, such as history, logs, and statistics allowing us to resolve customer issues more efficiently. " Click on the Icon Library button and Insert "arrow circle left".
9. Change the Title of the first (left) item on the second row from "follow client payments" to "Get a response in 15 minutes". The description can be "Submit your inquiry via live chat, email or ticket, and you will get a response within 15 minutes. Our support team have processed over a million tickets with an average response time of 7 minutes!" Click on the Icon Library button and Insert "clock".
10. Delete the entire section below with a Title of "Choose the perfect plan".
11. Update the FAQ Items to your liking. You can get ideas from the HectoHost website.
12. Delete the Text Editor element below saying "Workflow Optimization is a cross platform message optimization app for all devices. Contact Us".
13. Delete the entire section below with a title "Our clients say".

12. Order

The last page on our website, but perhaps the most important one, contains the actual order form allowing visitors to purchase a hosting account with or without a domain name registration. The list of available plans depends on the plans you have enabled in the configuration of your Online Store. Of course, this implies that you have connected the plugin to your actual store as we covered in the first part of this tutorial.

The page itself would be quite basic with the header image on top and an order form below. The way the order form is created is similar to the contact form we placed on the Contacts page. Our ICDSoft Reseller Store plugin allows you to generate the entire form by using a simple HTML shortcode - [hostingorder].

The page we will use is actually created automatically upon activating our ICDSoft Reseller Store plugin. It's called Hosting Order. If you remember, we created an Order page in part two of our tutorial, but we will go ahead and directly use the one created by the plugin. To do that, we will have to remove the old "Order" page from the Menu and add the one created by the plugin called "Hosting Order".

1. Navigate to the Appearance menu under the dashboard and select Menus.
2. Under the Menu Structure, click on the Order item, which is the last on the list, and click Remove. On the left side, you will see the Add menu items list, select the one called "Hosting Order" and press the Add to Menu button. Expand the newly added menu item and change its Navigation Label from "Hosting Order" to just "Order".
3. Press the Save Menu button on top.
4. Now, go to the Pages menu, All Pages, click Edit under Hosting Order. Change the Content Layout to "100% Full Width" and disable the "Display Page Title". Press Update.
5. Click the Edit with Elementor button on top.
6. Once the page loads, you will see the actual order form. It's ready-made as that page contains the [hostingorder] shortcode by default. Click on the Add Section button designated by the plus sign on top of the existing section with the order form.
7. Press the Add Template button with the folder icon. Under the Blocks tab -> switch the category to "Call to Action" -> Insert the one called "Finding something interesting".
8. Switch to the Style tab -> Background menu -> Choose Image -> Insert this image from Pixabay (you should already have it in your Media Library) in size 1280 × 960 px. At the Background Overlay menu, leave the Background Type set to Classic, change the Color to #4054B2, and set the Opacity to 0.30. Our Title text is "Get Your Hosting Account Now" with Subtitle "Fast and Reliable Hosting With Outstanding Customer Support". The color of the Title text should be set to white via the Style tab.

Final

With that last page completed, our fictional but fully working HectoHost.com website is ready. Hopefully, this will inspire some of you out there to give it a try. Remember, you've got nothing to lose. There is zero financial investment needed and it's absolutely risk and obligation free.

You have all the information and tools freely available at your disposal, so go ahead and start your own online business in the web hosting industry from the comfort of your home. We wish you good luck!

If you have any questions about this entire process, don't hesitate to reach out to us via the Live Chat on our website or via email at [email protected]. Of course, if you are an existing customer, you can post us a ticket.