Read our Blog:
http://123-reg.co.uk/blog/
View our support site:
http://123-reg.co.uk/support/
Follow us on Twitter:
https://twitter.com/123reg
Contents
Logging In
3
Themes & Background
3
Row/Column Editing
6
Row Styles
8
2
Log into your 123-reg control panel
Enter your 123-reg username and password.
Scroll down to the Create your website section of your control panel and click on the Manage link next
to the Website Builder Icon.
Press the Login button next to the domain name of the package you wish to access.
3
The first stage of website design is the basic template/look of the site. Website Builder has a great
selection of themes you can use or you can start from scratch with a blank page.
To select a theme click Themes from the top toolbar and select one from the gallery
Once you’ve selected a theme go back to the Design view and use the options to edit the theme’s colour
scheme and choose a background colour. All these can be changed at any time and you don’t have to use
pre-set colour schemes you can edit them as much or as little as you like allowing you to make a
personalized and unique site.
4
If you don’t like any of the themes and want to create your site from scratch you can set the background or
colour or use an image. Using the drop down you can change the background selection. To use an image
simply upload using the file manager and drag and drop into the image box
Tip: Use the “Preview” tab to view what your site will look like when
published to keep track of the design process.
5
Editing the structure of a page is easy and flexible in Website Builder, Each theme has slight differences –
but changing it to suit your site is a breeze. Each page is made up of columns and rows that you can edit
however you like.
To begin editing you need to make sure you have enabled Row/Column editing. To do this click
Row/Column Editing in the top right hand corner of the screen and you will see a yellow message bar
appear at the top.
The small eye icon in the top right hand corner allows you to choose how many and which rows make up
your page structure. By default you are given 4 but you can have up to 8 but every page must have at least
1 as a minimum.
To change which ones are visible tick the boxes next to each one.
6
To edit a row use the blue toolbar that appears on the left hand side of the row you select. To change the
height of a row use the small grey button in the middle and drag to what size you require.
The first icon is where you edit the row style by selecting one from the list or add your own. There is
more information on row styles further on in this guide.
The second is used for selecting how many columns you want that row to be broken up in.
The third allows you to move a row and all its contents up and down in the order of the rows.
The button in the top right hand corner is where you activate visual guides. It
allows you to display and hide gridlines and display column guides which are
very useful to get the spacing correct and uniform across all pages, which will
help you give your site a professional look.
7
Row styles are used to create your own styles that can be saved and then applied to any row throughout
your site. This tool is good for making your site unique and creative.
Before you can edit/create row styles make sure you have Row/Column Editing enabled.
Hover of the row you wish to edit and click on the settings icon on the toolbar that appears.
This will give you the option to select default row styles that come with the theme you have selected; you
can edit the existing ones by clicking on the
bottom.
icon next to edit or create a new one using the + icon at the
When creating a new row style – give it a distinct name so you can easily identify it from the list. Then click
on Add Row Style.
Row styles are broken up into Inner and Outer and you change this independently from each other in the
toolbar that appear at the base of the screen.
8
Design your row style using the many tools available and switch between inner and outer using the menu
on the left. You can see the changes you are making to the style in the window above. Once you have the
settings you want click on Save Changes.
You can now assign your customized row style to any row on any page and keep your design consistent
throughout your website.
9