If you want to create a website but don’t want to use a CMS like WordPress or don’t know any coding, you can easily set one up with the free site builder that comes with our free and paid web hosting plans. With it, you’ll be able to create a website for any of your added domains or subdomains via cPanel under Software and Services > Site Builder . You can read about setting up your domains and start using the site builder here in our Knowledge base.
First look at the site builder, you may be a bit intimidated by all the options available to you. So we’ll go over some of the basics with you, so that you can be a pro at the end and set up the perfect website!
When setting up your website, the first thing you will need to do is either choose one of the many free themes that are available with the site builder that would be most fitting for your website. Before getting started with your website, make sure you have an idea of what you would like to have done and how you would like it to appear. Once you have a good idea of what you’d like your website to look like, you can get started with editing some basics settings in the site builder to get a good foundation for your website.
First, you may want to change the background of your website. To do this, you can right click on the background, and select “Properties” in the menu. Here you will see that you can change the background for one specific page, or set up a default universal background. With the default background, you won’t have to worry about setting up the background image for each new page you create – the site builder will use the default settings automatically each time you create a new page. This will help create uniformity within your website, and make it look more professional.
The next step you may want to take is setting up all of the pages you plan to create for your website. You can always add more pages in the future with the site builder, in case you forget to create some in the beginning. To set up the menus for your website, at the top of the page you will see a drop down menu that will say the page you are currently on. If you click the arrow, a drop down menu will appear and at the bottom there will be the option to “Edit Menu“. This is where you will see a list of all of your pages, be able choose the default page to load (such as “home” or “index“), and add external links as menu items.
After you have set up all of the pages you would like to have for
your website, you should work on setting up your website’s styles with the site builder. Setting up styles for your page will make formatting and unity throughout your website easier. To start editing your website’s styles, at the top of the site builder you will see a gear icon next to the language setting. If you click the down arrow, you will see “Styles” in the drop down menu. Now you will be able to edit how each heading in your website will look like, as well as how the paragraph text and any links will appear on your site. You will also be able to change how the links appear when hovered, and modify more advance settings such as padding, scale, and list items.
Adding Content with Site Builder
One thing that creates a large amount of interest in a website are images. They’re always great content to add, and use to direct people through the website. Not all images are photographs; they could also be drawings or icons that have been created to use as a descriptor for your information. While images are amazing when used, they should be used sparingly on most websites as they can be overwhelming or may take some time to load (and thus slow down your website) for some visitors. Make sure the images you use on your website are the proper format of either .png or .jpg.
You can add an image to your website by dragging the “Picture” icon on the site builder’s menu bar. Once you’ve dragged the icon to a usable spot on your website, a popup will appear where you will be able to select which image you would like to use. If you already have an image in mind, you will be able to upload an image from your computer to the web site builder. You are also given the option to look through some free images to use on your website, or link an image from an external source. After you have selected which image you would like to use, click on the “Select” button at the bottom of the popup.
The site builder will automatically add the image to your website at full size. You will be able to resize the image by either dragging the sides of the image while it is selected and dragging them inwards or via the properties menu of image. To get to an image’s properties, select it and at the top right corner you will see a pencil icon. When you click this icon, a menu will appear and at the bottom you will see “Properties“. Selecting this will bring up another popup menu. Under the “General” tab, you will be able to change the image if you needed to, add alternative text to the image, and change what the image does when clicked.
Alternative text is what will appear when a visitor hovers their cursor over the image, or if the image fails to load on when a visitor comes to your website. This is a very useful option, and should be used as a descriptor of the image. If you would like the image to link to a different page, you will be able to set up a URL for when it is clicked. You may also set up the image so that when clicked, it enlarges the picture to its full size. This is useful when you are creating a gallery, or using thumbnails in place of large images.
Under the “Options” tab, you will be able to change the image’s size. When changing the size here, you’ll be able to “link” the width and height so that the size is always a perfect ratio. This will prevent your image from looking stretched and disoriented. You will also be able to reset the image size to its full size, set up its position on the web page, set up an anchor name, and choose whether or not the image is on all pages or only the current page.
If you’re setting up a website, it is likely that you will have an “About” page, or a “Contact Us” page. With each of these pages, you will probably want a form set up so that people can send a quick email to you via your website. To get started setting up a forum, you will need to drag and drop the “Form” option that is on the site builder’s menu bar. Once you’ve dragged it to your page, you will be able to increase its size, and edit the settings for it. In the options, you will be able to change each field’s name, create questions to ask them such as “How did you find us” or “Do you want us to contact you back?“, and give them a larger field for their message to you. You may also change the submit button to “send” or something else.
After you have set up each field for the forum, you will be able to choose its appearance from the list of styles you created earlier, and set up the email settings. When setting up the email settings, you will be able to choose which email the forum will submit to and what the title of the email will be. This way you’ll be able to easily tell when an email comes in is from your website. You will also be able to set up the sent confirmation for the form, so that visitors will know that their message was sent to you.
When creating your website, you may find yourself needing buttons to encourage people to read more, go to new pages, or “try now“. With the site builder, you can easily add a button to your website and modify its settings to make it look just as you’ve envisioned it. To add a button to your page, just drag and drop the “Button” option that is located on the menu bar. Once you’ve added the button to your page, you will be able to place it where you need it and change the size of the button. After you’ve got it in place, you’ll want to modify the way the button looks and says. To do this click on the pencil icon that is in the upper right corner, and choose the “properties” option at the bottom of the menu.
Under the “General” tab, you will be able to type in what you would like the button to say, such as “read more” or “try me“. You will also be able to set up a URL so that, when the button is clicked, it will send the visitor to a new page or a new site. With the “States” tab, you will have a myriad of options to set for the button. The top part will be dedicated to the static parts of the button: the font face, size, alignment and the border for the button. The bottom section will set up the button for each state it may be in:
- Default: this will be how the button looks on the page without any interactions.
- Hover: this will be how the button looks when a visitor moves the mouse cursor over the button.
- Active: this will be how the button looks when it has been clicked on.
In each section, you will be able to set up the font color and style (bold, italic, underlined) as well as the background color or image for the button. Once you are happy with each section, you go into the “Options” tab and make sure the size of the button is what you would like it to be, as well as some other minor options: if the button will appear on every page, the anchor name and the button’s position.
Now you know the basics of the free Site Builder that comes with x10Hosting, and you’ll be able to set up a great, professional looking website in no time. So get started today, because it’s never a better time than now. Be sure you are following our Facebook and Twitter pages to stay up to date with the latest in webmaster tips, updates for web software, and more!