The home page is now ready and published. The next part of our guide on building your very own hosting business walks you through the process of designing the rest of the website pages - Hosting Plans, Email, Free SSL, Advantages, Data Centers, Contact, Support, and Order. So we have eight pages in total to cover here, but they are not as complex as the home page. Of course, you can follow your own site structure and skip some pages listed here, but it's still useful to go through the process as you will learn interesting design techniques with Elementor.
6. Hosting Plans Page
We will start working on the Hosting Plans page. Follow these steps:
- Under the WordPress dashboard -> Pages menu -> All Pages, locate the Hosting Plans page and press Edit.
- Press the Edit with Elementor button. Note that we will use the same Elementor page template for all of our pages, so we can have a uniform design layout across the website.
- 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”.
6.1 Configure the Header Image
To select a header image for this page, go to Pixabay, search for "server", and download this image in size 1280×853 pixels. Again, whenever you are downloading images from Pixabay, make sure that the license is listed as "Free for commercial use".
Follow the exact same steps outlined in point 5.1 from Part Two. The title text we will use is "Shared Hosting And Managed VPS Plans". Under the Background Overlay, set the color to #4054b2.
You can set the opacity on the header image to 0.30 to make the Title more visible. The weight of the text can be changed to Bold so that it stands out.
6.2 Add Text Section
We will place descriptive text of the different types of hosting plans we offer - Shared Web Hosting, Single Site VPS Hosting, Managed VPS Hosting. There, we will provide more details on each plan. Again, you can copy the text from the live website and just rephrase it. Here are the exact steps to follow:
- Press the plus sign labeled Add New Section and select the third structure with three columns.
- Drag and drop a Text Editor (Basic) element into each column.
- Enter the actual text in each Text Editor element. Here is the exact HTML code of our first column:
<p style="font-family: abel; font-size: 20px;"><strong>Shared Web Hosting</strong>
<br><br>
The <strong>Economy</strong> and <strong>Business</strong> are our shared web hosting plans designed for small personal to medium business websites, offering performance and stability at a reasonable price.</p>
- Press the Edit Section button for the newly added structure. Go to the Style tab.
- Apply the following changes at the Background menu: Background Type - Gradient; First Color - #ffffff; Location - 20; Second Color - #a5b768; Angle - 20.
6.3 Hosting Plans Comparison Table
Now let's place a comparison table with all five of our hosting plans. To do it, we will use the shortcodes supported by our WordPress plugin. The shortcode in question is [compare_plans location="Data Center"]. The location variable can take one of the following values – eu, us, hk. The number of plans displayed per row is configured from the Settings menu of the plugin. The default value is 3, but we changed it to 5 during the setup.
- Drag and drop a Tabs element.
- Edit the first Tabs item - change its Title to USA and enter [compare_plans location="us"] in the Description field.
- Edit the second Tabs item - change its Title to Hong Kong and enter [compare_plans location="hk"] in the Description field.
- Press the Add Item button to add a new tab. Set its Title to Europe and enter [compare_plans location="eu"] in the Description field.
6.4 Hosting Service Features
Under the comparison table, let's add descriptive text of some of the notable features of our hosting service. It's similar to point 6.2, but we will just leave the regular white background. You can get some inspiration for the text from the HectoHost website.
- Press the plus sign labeled Add New Section and select the third structure with three columns.
- Drag and drop a Text Editor (Basic) element into each column.
- Enter the actual text in each Text Editor element.
7. Email
Next on the list is creating the page that would outline the advantages of our Email service. See, not all hosting providers include email service as part of the hosting package. Some consider it a separate feature that customers must pay extra for. This is not the case here as all of our hosting plans come with a high quality email service with all the features you could ask for - unlimited mailboxes, anti-spam utilities, IMAP(S)/POP3(S) support, Webmail, and more. That's why we've decided to devote an entire page on our website strictly to the Email service.
- Again, we start by going to the Pages menu in the WordPress dashboard -> All Pages -> Email (page) -> Edit. Under the Ocean WP Settings section, make sure that the Content Layout has been set to "100% Full Width", from the Title menu on the left side Disable the "Display Page Title", and from the Footer menu, Disable "Display Copyright Area". Press the Edit with Elementor button. This first step is applicable for all the pages we will cover here, so we will not repeat them each time (but you should).
- 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".
- Switch to the Style tab -> Background menu -> Choose Image -> Upload this image from Pixabay in size 1280 x 960 px and Insert it. Open the Background Overlay menu -> Change the Background Type to Gradient; change the Second Color = #B3BC00; set the Opacity = 0.30.
- Change the text of the main title to "Top Tier Email Service Included" and set the Text Color to white (#FFFFFFF). Change the secondary text to "with every plan".
- At the section below, press the Add Template button, change the Category to "Call to Action, and Insert the second element called "Finding Something Interesting" (with a plain white background). Set the Title text to "Why Pay Extra For Email?". Change the text of the subtitle to the following HTML code (paste it as is):
<span style="background-color:black">ALL OF OUR HOSTING PLANS COME WITH A PROFESSIONAL EMAIL SERVICE<span>
; at the Style tab (for the subtitle), set the Text Color to white (#FFFFFF). - Press Add New Section button (the plus sign), and select the 4-column structure. Drag and Drop a Text Editor Element in each column. You can get some inspiration for the actual texts from our page at the HectoHost website. Press the Edit Section button (for the entire section we just added), go to the Style tab, open the Background menu and set the following values: Background Type=Gradient; First Color=White (#FFFFFF); Second Color=#B3BC00; Location=0. At the Shape Divider menu, set the Type to "Arrow".
- Press the Add Template button, change the Category to "Call to Action", Insert the one with the title "Here anyone can read, write & share short stories.". Change the title to "Our email service is great, but don't take our word for it!". Change the text of the subtitle to "TEST IT YOURSELF. WE OFFER AN UNCONDITIONAL 100-DAY MONEYBACK GUARANTEE." Change the text of the button to "ORDER NOW" and set the Link to "/hostingorder".
8. Free SSL
Now we move to the "Free SSL" page that would focus on our free SSL certificates. Your end customers can get free SSL certificates from Let's Encrypt (you have the option to disable them altogether), so that's another strong suit of our offering that we would like to help you highlight. Here are the steps involved in creating that page.
- 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".
- Switch to the Style tab -> Background menu -> Choose Image -> Upload this image from Pixabay (search for "vault") in size 1280 x 1112 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.60. Our Title text is "Free SSL Certificates", and the subtitle is "WITH EVERY HOSTING PLAN".
- Press the Add New Section button and select the 2-column structure. Drag and drop a Text Editor Element in the left column and an Image Element in the second. You can see our actual text at the HectoHost website. The image you can insert is a screenshot of the Let's Encrypt Certificate Manager in the Control Panel. Make sure to set its Caption to "Custom Caption" and you can enter "A screenshot of the Let's Encrypt certificates section in the Control Panel." in the actual Caption field. Lastly, press the Edit Section button on top of this 2-column section we just added, go to the Advanced tab, set the Padding to 60, disable the option "Link values together" (the chain at the right side), and set the bottom padding to 0 (zero).
- Click Add New Section and select the 1-column structure. Drag and drop a Text Editor Element and place the actual text in it.
- Click the Add Template button, and at the Blocks tab change the Category to Faq and Insert the third item on the list. Enter the text in the actual FAQ items. Make sure to start the actual text with
<p style="color: black">
, so that the text becomes more visible on the white background. You should close the tag with</p>
at the end.
Continue to part 4 of this tutorial series.
That's it for this part. In the next and final part, we will complete the final pages of this site.