Company registered. Tick.
Domain name(s) registered. Tick.
New logo designed and company stationery printed. Tick.
You’re all set to go with your new business – congratulations!
But you’re on a tight budget and you need a professional website. You’ve had a look around and got a few quotes but you’re not sure whether you can afford that investment right now. After all, you’ve got loads of other bills to pay and you haven’t even started trading yet.
But fortunately, there is a way that you can build your own professional looking website and manage it yourself so that you can add new content and edit it whenever you want!
It’s called Website Builder and it is included free with all of our web hosting plans.
If you haven’t got a hosting plan with us then you can try it now.
The Benefits of using Website Builder for your first Website
Where do we start? It’s super low cost, it looks great, it’s got loads of features, it’s social media friendly, SEO friendly… The list goes on. But here are the highlights:
- Low cost – it’s free with our web hosting plans
- Template based – pick the look you like and you’re up and running
- Easy to use – if you can browse, you can build
- Fully featured – you can add contact forms, maps, music or videos easily
- SEO friendly – creating metatags, headings and links is a breeze
- Social Media ready – easy to link up to your favourite social media sites
- Scalable – no limits to the number of pages
- PayPal ready – want to accept payment? Easily link up to PayPal
So if you’re ready, let’s have a look under the hood and show you how to build your first website.
What’s included in this Guide
In this guide we’re going to show you how to build a website very quickly – even if you have no design knowledge whatsoever. We will show you step by step how to do the following:
- How to choose a ready made template for your website
- How to navigate around Pickaweb’s Website Builder
- How to create pages for your website
- How to add a logo, a heading and bullet points
- How to add images
- How to add a map to your contact us page
- How to add a contact form to your website
- How to create links between pages
- How to optimise your website for better SEO results
- How to add Google Analytics and Google Webmaster Tools
- How to link to your Social Media accounts
- How to add a PayPal button to your website to accept online payments
First Things First – Domain Name and Web Hosting
Before you do anything you’ll need a domain name and a web hosting account. Once you have these set up you will receive a welcome email that includes all of the instructions and passwords that you’ll need.
If you’ve purchased the domain and the hosting from Pickaweb at the same time then everything will be set up and ready to go.
If you’ve got a domain name with another company or maybe you registered it some time ago then you might just need to make some small changes to your domain’s DNS settings.
Don’t worry if that sounds complex – it’s very straightforward really. Your domain needs to point to the physical server where your website files are hosted. The internet looks at your domain and the DNS Settings tell it where the server is located so it sends any traffic there. If you are unsure at all or you are not confident with that type of thing then we can do all of that for you. Just contact our 24 hour support team and they will help.
Login to cPanel to Access Website Builder
When you receive your web hosting welcome email you will see that there is a link to your web hosting control panel called cPanel. First you just need to login to cpanel using the username and password in your welcome email.
Once you are logged in you just need to go down to the section ‘Software’ and you will see an icon for Site Builder. Click the icon to enter.
Choose Your Website Template
Now you are logged in and you will see a screen that looks like this:
This is the selection of templates that you have to choose from and a random selection are shown to you here just to give you some ideas.
Use the navigation on the left to browse through the categories to find one that’s right for you
See one that you like? Have a closer look at it by hovering your mouse over it and pressing the ‘Preview’ option.
Have a good look around to make sure this is the design you would like to use. You will be able to add pages and change the text, etc., so for now just make sure that it is the style you want.
Found the Template you like? Great. Just select that one and you’re ready to start building your new site.
If you want to change the template then that is easy. Just click on ‘New/Reset’ at the top.
Overview of Website Builder Canvas
Now you are taken to the main WYSIWYG (What You See Is What You Get) Canvas area where you can create and manage your website.
On the right is a set of Todo Tasks to help guide you and there is also a help feature at the bottom right.
If you click on the help button you will see an overview of the main navigation items at the top.
Creating New Pages
If you want to create a new page that is really easy. At the top right of the page, click on the settings drop down menu and you will see an option ‘Edit Menu’. Click on this and a box will open up which will allow you to ‘Edit Menu Items’.
At the bottom of the box is an button ‘+ New Item’. Just click on this and give your new page a name. Or you can click on the actual navigation menu in the canvas and click on the ‘+ New Menu Item’ button.
Now you just need to name your new page (e.g. services) and save it.
And you will see that your new page has been created and it appears in the Navigation which appears in all of your pages.
How to Add your Logo
Most templates will come with a default logo. Once you have your logo you can easily add it to the template.
First, hover your mouse over the logo and 2 little icons will appear. One is a padlock and the other is a pencil. Click on the pencil to edit the image and a drop down menu will appear. Select the option ‘Change Picture’.
Now you just need to upload your new image from your hard drive.
Adding a Headline to your Page
Adding A headline is easy too. Again, there is usually a headline text included so you just need to amend this.
First, hover your mouse over the text and the 2 little icons (padlock and pencil) will appear. Click on the pencil to edit the image and a drop down menu will appear. Select the option ‘Edit Text’.
Now you can just edit the text. You will see that you can choose the style of text that you want to use. Because this is a heading, we would recommend that you choose the style ‘heading 1’ from the drop down menu.
When you are finished you can adjust the exact positioning of your text.
Adding Bullet Points
Adding Some Bullet Points underneath your headline is a really effective way to help your visitors understand the benefits that you can offer them. It’s easy to add them, here’s how.
Select ‘Text’ from the Elements navigation (top left). Just click on it with your mouse and drag it down into the general position you want to use. You can move it to the exact position later.
Hover your mouse over the text area and the 2 little icons (a direction cross and pencil) will appear. Click on the pencil to edit the text and a drop down menu will appear. Select the option ‘Edit Text’.
From the drop down menu select the text option ‘Sub Title’ and type your bullet points. Hit enter to space each line out. Then just highlight all of the text you have just written and select the bullet point icon in the text menu. It’s just like using a word processing tool like word or google docs.
Now you can edit the size of the font to make it larger so that it stands out nicely.
Click on the text and the style menu will appear.
IMPORTANT: Now you need to highlight the text so that you can change its style. Only the text that you highlight will change.
Click on the drop down menu and go down to the bottom option ‘Edit Styles’
The first thing you need to do is to select the style you want to edit. In this case select ‘Sub Title’ because we are working with bullet points.
Next you just choose the Font, the Size, whether you want it to be bold, etc. You can even edit the colour. You will see how it looks in the ‘Preview Text’ section. When you are happy with your choice click on ‘Apply’. You can always come back and edit it later.
At first the text may not appear very appealing because the text box that you are using is not wide enough. All you need to do is to edit the properties of the text box.
Hover your mouse over the text area and the 2 little icons (a direction cross and pencil) will appear. Click on the pencil to edit the text and a drop down menu will appear. Select the option ‘Properties’ at the bottom.
Now you can amend the width of the text box. You can play around until you get it exactly right.
A handy tip if you want to use bullet points on every page is to select the option ‘Show in all pages’ so that you don’t have to edit the styles every time. All you would need to do is to update the text. When you are finished select ‘Apply’.
Add an Image
Most templates have images already for you to use. If you want to replace them, just click on the image and the 2 little icons (a direction cross and pencil) will appear. Click on the pencil to edit the text and a drop down menu will appear. Select the option ‘Change Picture’.
Now the image will appear as an option. Just click on it to select it and select ‘Apply’ and the image will appear in the page.
How to Add a Map to your Website
Adding a map is easy. You will probably want to add it to your contact us page, so the first thing to do is to select the ‘Contact Us’ page from the drop down menu at the top in the ‘Navigator’ area.
Most Templates will have a dummy address and map included. You can now change the text add and the map location.
To change the text address, hover your mouse over the text area and the 2 little icons (a direction cross and pencil) will appear. Click on the pencil to edit the text and a drop down menu will appear. Select the option ‘Edit Text’.
Now for the map itself hover over the map and the 2 little icons (a direction cross and pencil) will appear. Click on the pencil and a drop down menu will appear. Select the option ‘Properties’.
Now add your address in the text area. Google Maps will pick up the location and when you see it appear in the drop down, click on it and it will update your map. Now select ‘Apply’ and you map will be updated.
How to Add a Contact Form to Your Website
Adding a Contact Form to your website allows your visitors to enter their contact details and these are then emailed to you.
Many templates will have a Contact Us form installed, but you can customise this or you can just add a new one.
First, select the ‘Form’ button in the Elements navigation at the top. Just drag it down and position it roughly in the position you want your contact form to appear.
It will appear in a default size and with the default form fields: Name, Email, Message. Both the size and the form fields can be customised as we shall see.
Hover your mouse over the form and the 2 little icons (a direction cross and pencil) will appear. Click on the pencil and a drop down menu will appear. Select the option ‘Properties’.
Now you can decide which fields to include. Just click on the tick boxes to include them. Generally the fewer the better, eg: Name, email & phone number. If you want to rename the fields you can do so.
There are also other options you can select, i.e. How did you here about us? You can also change the wording on the button from eg: ‘Submit’ to ‘Send’. When you are ready just click ‘Apply’.
Now you can resize your Contact Form.
Again, hover your mouse over the form and the 2 little icons (a direction cross and pencil) will appear. Click on the pencil and a drop down menu will appear. Select the option ‘Properties’.
Now select the ‘Options’ tab. Here you can adjust the height and the width. In the example we will change to Width 800 and Height 300.
If you only want the form to appear on this page then leave the button set to ‘Show in current page only’.
Once you have got the size right you can move the form to the exact position you want by clicking on the form and selecting the little direction arrow in the top left.
Finally you need to set the email settings for your form. You will need to decide which email to use to send the details to you (e.g. [email protected]) and which email they will be sent to (e.g. [email protected]).
You will need the password for the ‘from’ email, i.e. the email address that you use to send the output from the form.
If you are unsure, just ask us via the online 24 hour chat and our technical staff will be able to assist you to find these details.
When you have these details, just click on the ‘SMTP Enable’ option at the bottom and fill in the details.
You can also customise the ‘With Subject’ so that the email you receive is easy to identify.
You can also customise the ‘Form sent Message’ so that your visitor sees a message when they complete the form.
How to Link Between Your Pages
Linking between your pages is very important for both your visitors and for SEO. Google looks at the links and reads them and the text that you use helps it to understand what each page is about.
For more information on improving your SEO please check out our Definitive Guide to Local SEO.
First, go to the text that you want to link from. For example on your home page if you talk about the services you provide then link from one of these words and link to the services page.
The text that you link from is called ‘anchor text’. The page you link to is called the Target page.
Just select the text you want to use as the anchor text and you will notice that the text editor menu will appear.
Click on the small chain link icon and you will see a new pop-up called ‘Link properties‘. Because we are pointing to another page of your website you should select the option ‘Page on your Website’ and then from the drop down menu select the Target page you want to link to, e.g. ‘Services’.
Of course, if you wish to link to an external website then you should select the first option ‘Web Address’ and you need to enter the web address (URL) of the page you want to link to, e.g. https://www.pickaweb.co.uk If you select this option we would recommend that you choose the option ‘Open in New Window’. This is to prevent your visitors leaving your website when they click on a link.
If you wish to link to an email address then you can select the option ‘E-mail Address’.
Search Engine Optimization (SEO) for your Website
SEO is the practice of setting up your website to make it search engine friendly. This is very important because websites that are well optimised have a better chance of getting more traffic through search engines like google.
The foundations of good SEO are keyword research. This is the process of identifying which keywords or phrases people are searching on and including them in the code of your website.
Pickaweb’s Website Builder allows you to optimise the main elements of each page of your website. These are:
- Title – also known as Page Title Element
- Description – also known as Meta Description
- User friendly URL
To update these elements you first need to select the settings icon at the top right – a little cog icon. A drop down menu will appear and you need to select the option ‘SEO’. You will see two tabs – ‘General’ and ‘Analytics’.
Select the ‘General’ tab. You will see each page of your website listed.
IMPORTANT: For best results it is imperative that you optimise EVERY PAGE of your website. Do not cut and paste the same keywords on each page. Mix them up and use different variations on each page and make them RELEVANT to the page you are on.
Here are the guidelines for each:
- Title. This is very important. Use between 50 to 60 characters max. This helps google understand what you do so it can index you correctly. Use your main keywords hera & make them different on each page.
- Description. Another important Metatag. 150-160 characters max. Include your keywords & write in a natural style like a sentence. Again, make them relevant to every page – do not use the same ones on every page.
- Keywords. Not so important these days as they are open to abuse and keyword stuffing so just include a few keywords separated by commas.
- User friendly URL. Does not apply to your home page – keep that as it is. For internal pages include a different keyword for each page to make them relevant.
It is important to know how many people are visiting your website. The best way to do this is to use Google’s free tools:
- Google Analytics – understand how many people visit your site
- Google Search Console – understand how Google views your website to identify any issues and improve performance
You will first need to sign up for these services.
Once you have an account you can add these services to your website.
First you need to select the settings icon at the top right – a little cog icon. A drop down menu will appear and you need to select the option ‘SEO’. You will see two tabs – ‘General’ and ‘Analytics’.
Select the ‘Analytics’ tab.
Login to your Google Analytics account and copy your Google Analytics Tracking ID and paste it in the space provided.
Next, login to Google Search Console tool and copy and paste the Google Search Console Tools Code. To obtain this, in the Webmaster Tools Verification page, choose ‘Alternative Methods’ > ‘html Tag’ and copy and paste that code into the space provided.
Finally at the bottom you will see a section ‘Sitemap URL’ with a URL from your website in the space. Copy this, then go back to Google Webmaster Tools and submit this URL as a sitemap in the section provided. This is important so that Google can see when your website has new pages added.
Linking up your website to your social media accounts is easy.
Most templates will have Facebook and Twitter icons included and all you need to do is to add the link to your various social media accounts. You can also add one for Google+.
If you template has the Facebook and Twitter icons showing already you can position them to wherever you want just by dragging and dropping. Try to make it easy for people to find them – maybe at the top right of your website.
To point them to your social media profile just click on the image and then select ‘Properties’. The option ‘Link to another place’ should be selected – if not, just select it. Now all you need to do is to click onto the little pencil icon that appears so that you can redirect to your social media profile.
A new popup will appear with the heading ‘Link properties’. Select the option ‘Web Address’ and enter the link for your social media profile, e.g. https://twitter.com/pickaweb Tick the option to ‘Open in New Window’ so that when visitors click on the link they do not leave your website.
Repeat for your other social media profiles.
Accepting Payment via PayPal
Pickaweb’s Website Builder even allows you to accept payments via PayPal and is easy to set up.
First click on the ‘Commerce’ button in the Element navigation at the top and select the option ‘PP Buy Now’ (the PP is the PayPal logo).
Then drag the payment button down onto your website so that you can edit it.
Once in place, hover your mouse over it and select the small pencil icon to edit the button and select ‘Properties’.
Select the ‘General’ tab and enter the following details:
- Item name – a description of the product you are selling which will appear in the PayPal checkout window.
- Price – the item price
- Shipping – if there are shipping costs add them here
- Currency – select your currency
Email address to receive payments – enter your PayPal email address