{"id":6231,"date":"2019-12-07T22:15:00","date_gmt":"2019-12-07T22:15:00","guid":{"rendered":"https:\/\/www.icdsoft.com\/blog\/?p=6231"},"modified":"2026-03-19T08:15:09","modified_gmt":"2026-03-19T08:15:09","slug":"how-to-start-your-own-hosting-company-at-home-the-complete-guide-part-3-building-the-rest-of-the-website","status":"publish","type":"post","link":"https:\/\/www.icdsoft.com\/blog\/how-to-start-your-own-hosting-company-at-home-the-complete-guide-part-3-building-the-rest-of-the-website\/","title":{"rendered":"How to Start Your Own Hosting Company at Home \u2013 the Complete Guide. Part 3 – Building the Rest of the Website"},"content":{"rendered":"\n

The home page is now ready and published. The next part of our guide on building your very own hosting business<\/em> 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. <\/p>\n\n\n\n

6. Hosting Plans Page<\/h2>\n\n\n\n

We will start working on the Hosting Plans page. Follow these steps:<\/p>\n\n\n\n

  1. Under the WordPress dashboard -> Pages menu<\/strong> -> All Pages<\/strong>, locate the Hosting Plans<\/em> page and press Edit<\/strong>.<\/li>
  2. Press the Edit with Elementor<\/strong> 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. <\/li>
  3. Press the Add Template<\/strong> button with the folder icon. Under the Blocks<\/strong> tab -> switch the category to \u201cCall to Action<\/em>\u201d -> Insert<\/strong> the one called \u201cFinding something interesting\u201d.<\/li><\/ol>\n\n\n\n

    6.1 Configure the Header Image<\/h2>\n\n\n\n

    To select a header image for this page, go to Pixabay, search for \"server\", and download this image<\/a> in size 1280\u00d7853 pixels. Again, whenever you are downloading images from Pixabay, make sure that the license is listed as \"Free for commercial use<\/em>\". <\/p>\n\n\n\n

    \n
    \n
    \"icdsoft<\/a>
    Configure the Header Image using the same settings as on the Home page. <\/em><\/figcaption><\/figure>\n\n\n\n

    <\/p>\n<\/div><\/div>\n\n\n\n

    \n

    <\/p>\n\n\n\n

    Follow the exact same steps outlined in point 5.1 from Part Two<\/a>. The title text we will use is \"Shared Hosting And Managed VPS Plans<\/em>\u200b\". Under the Background Overlay, set the color to #4054b2.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

    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. <\/p>\n\n\n\n

    6.2 Add Text Section<\/h2>\n\n\n\n

    We will place descriptive text of the different types of hosting plans we offer - Shared Web Hosting<\/strong>, Single Site VPS Hosting<\/strong>, Managed VPS Hosting. <\/em><\/strong>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:<\/p>\n\n\n\n

    1. Press the plus sign labeled Add New Section<\/strong> and select the third structure with three columns.<\/li>
    2. Drag and drop a Text Editor (Basic) element into each column.<\/li>
    3. Enter the actual text in each Text Editor element. Here is the exact HTML code of our first column: <\/li><\/ol>\n\n\n\n
      \n
      <p style=\"font-family: abel; font-size: 20px;\"><strong>Shared Web Hosting<\/strong>\n<br><br>\nThe <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><\/code><\/pre>\n<\/div><\/div><\/div>\n\n\n\n
      1. Press the Edit Section button for the newly added structure. Go to the Style tab.<\/li>
      2. Apply the following changes at the Background menu: Background Type - Gradient; First Color - #ffffff; Location - 20; Second Color - #a5b768; Angle - 20.<\/li><\/ol>\n\n\n\n
        \n