Site Builder - Creating Your First Website

This guide takes you through the common steps required to build a website with SiteBuilder.

Please note that the information in this guide is
provided as a suggestion, and we can't provide detailed support for
modifications to a Content Management System. If you require assistance with
this, we'd recommend speaking to your website developer to ensure relevance and
compatibility with your site.


Step 1 - Log into cPanel and click on the Site Build icon.

79cb9538fdd8eb4e2d85e8ce6f67006880520308?t=76c62a65d9142820ce655b2820b730b0

Then click on your domain to access Site Build Pro.


8af0de5397b9884f70aefd83166659e12b2c8a83?t=31a1acd5fba7f1f71fa7e3f1d8ec6735


Step 2 - Select A Template
You can chose template categories on the left. Move your mouse over the template you like and click Select to use it.

b3215fab53b214c5f1316d5e18663cfbfa4c83a5?t=901d4b5f9363584d3eb503ad2a31cf6f


If you want to change the Template, first hover your mouse over the New/Reset button


b9129477575b4a0bd59cb29eb96e4725749588e7?t=4dd0df23c78edc0c96b63116eec61dae


Then click Change template to go back to the Template section screen

2b90d71db010043f7932a0f73f7590b932cf7c65?t=ae11802c5549f5fed636be6cdd472817

Step 3 - Change The Page Text
Double click on any text to change it. Click Done once you've completed the changes.

573255eff6e22fc0ec566ebdb0118661215c8295?t=9a36f8a14911569d16ed2bcb3b494973

Step 4 - Add A New Page
Click on the Menu in the top left.

763dec313c97c63c97eeb5eac54f6753d5a8ecd5?t=8a62e86c4b1b1e3bf36e4449e520bede


Then click Edit.

643c9b8b37409d38345aedc4073d054287944440?t=0c1e27eaf193be7faea91253ef6a6007


From this menu you can add new pages, delete old pages, rename pages, and perform a number of other actions. Click + New Item to add a new page.

8a61cceb9e78c850fb55e8e1aa02cd557b37a0c9?t=6a62df3fdc7b562b76d4513a00bdd850


(1)Set the Item Name, then (2) select Link, then (3) click Apply.

16b16252c9295feaa2f1997e43d4c5b3b0d5e394?t=42f92ed280319d93faab1516905758c3


You will now see the About Us link added to the menu. Click on it to go to the page.

338cf5cec383b12f56664aba8934e0f5052d0d25?t=7bf25ca1bf2b16de0db4e01284dc0324

Step 5 - Move and Rearrange Elements
Click in the Element you want to move, then hold the left mouse button down on the 4 arrow icon and drag to move that box.

44eaa7bd2532e14553a661e72525bcd23a282ade?t=c9392e54370f74b430001f21b5a9b96e


Alternatively, hold and drag the left mouse button to select multiple boxes. Then hold left click for any of the 4 arrow icons to drag them all together

3ff7e47f99178df8e7ffbc584954303a638bf950?t=ce139994d0cc18efa48153bd0285b312

Step 6 - Resize Elements
Move the mouse to the edge of an element so the mouse cursor turns to either a <-> or a up/down arrow, hold the left mouse button and drag to shrink/extend the border of the element. Alternatively, move the mouse to the bottom right of an element, then hold the left mouse and drag to resize it.

028c6ff69ffd156fd95592ac0e2beab9bb9c1a3e?t=174c1fac30d62e17767bb448ee2cfe24

Step 7 - Add Images
Double click on one of the image placeholders or images to access the media menu.

b2ea2e9ebf76eb2c41a8c78c4af3637a1d994436?t=893fae125f55c3433635db0c0c5ad380


(1) Click Add New, then (2) select the image you want to upload, and (3) click Open.

149a6067083c4d641714ac9b2cc26a37ead8a208?t=7207b07ad34c546f39cc3cb38a06989c

Step 8 - Add a Contact Form
Drag the Form icon onto the part of the web page.

1163b6f05820ef230870d5a80d19163feb5dbd6b?t=f6f4d936c4bcc7ef8d8c98e6f29388e0


Then click on the Edit icon and click Properties.

99028ab19fa21a5b456d904d3953c92cfa32f857?t=35a36513a647f6965e714a90fbebfe62


Fill out the form details. If you want the form to be sent out via email address, tick SMTP Enable and fill the details in (they will be the same as that email account's Outgoing Server / SMTP details). Click Apply once done.

98c81e367982815a54b48c025b6ec1d9f9c8c1d4?t=b721e5870b08f37f678c0d66abaef982

Step 9 - Preview, Backup, and Publish Your New Website
Click Preview to view the website as it would look when live.

71034814ff87c217d4926168b8569b94318b72c9?t=d05462b769f52278f6cda7bb7596d0f6


You can select Desktop/Tablet/Phone and resize each to see how the site will look on different devices. Click Close once done.

c3af938d294facb83f7fc130e300f8e7c966adc0?t=1eee9de7762a702efa415aff16584c05


Click on the Publish icon.

876ec4ca55b4c9aeac1e33ae7d83939751d35f28?t=25197a394b46d4a680a67ccc846aeac5


We recommend clicking the Backup/Restore option and downloading a backup of your website before publishing it.

4fd14036b3171af1882848efd36f3f3a03055aa6?t=40950e647f60029bef0983c03e315ac6


Click Download Backup to download the website backup, and click Close once done.

fd725131c8d6244e80794446602bab06a8d65a65?t=547933c281c0e3afca1a7a9172f639f8


To Publish the website, just click Publish. If your site's DNS is pointing to our servers, the website should appear straight away (you may just have to refresh your browser or hit the f5 key to force refresh).

4976d7f7d8428ef57cd734fbd8d8dad3908696a2?t=815b64bb06f906c30e343b9619202500

For more tutorials on website development and Content Management System troubleshooting, view our List of CMS Guides.


Did you find this article useful?