Help Centre

The Design Studio is where you bring your Create website to life using modern design tools to create a unique and professional design. This guide will show you how to access the Design Studio and how to use all its features.

Preview of the Design Studio

Getting Started

Step 1

To access the Design Studio, log in to your Create account and click "Design" on the Top Menu.

Design_Studio_-_Main_Menu.png

 

Step 2

Select the "Design" icon in the Design Studio left-hand menu to open the Design Panel.

Design Studio - Design Panel

 

Step 3

The Design Panel contains all of the design options that are available to start editing your current design. These are grouped together based on different areas of your website that can be updated.

Templates

Templates are the foundation of your design and there is a large variety of different templates available from which to start creating your own unique look. There are no restrictions on trying different templates before settling on the one that suits your design best. Each template comes loaded with a preset group of options which have been carefully selected by our professional designers.

To change your current template, click the "Change Template" button in the Design Panel.

Design Studio - Reset.png

Select a template in the list to preview it. Once you have made your choice, click "OK" to confirm.

Design Studio - Template List 

device_simulation.png Please note - Templates which are mobile-friendly are indicated by an icon next to its title.

 

Colours

Each Create template has a list of colours that can be changed to fit your brand colours. This list of colours is unique to each template and can be found by clicking the preview list in the Design Panel.

Design Studio - List of colours

Each colour has its own colour picker which can be opened by clicking the colour preview next to the title of the area you would like to edit. When you select the colour you want, the template preview will refresh so that you can see your updates straightaway.

Once you have made all of your changes, click "Ok" to be returned to the Design Panel.

Design_Studio_-_Favourite_Colours.png

Top Tip

Found a colour that you really like? Save it to your Favourite colours by clicking "Add Favourite" on the Full Palette tab of the colour picker.

 

Logo Type

Your logo is the most identifiable element of your brand. It sits at the top of your website and is visible on every page.

The Design Studio has two different options for your logo on each template.

Text – Text logos default to your website name as entered in your Site Information. This can be edited in the Design Studio by having "Text" selected as your logo type and updating the available field.

Design Studio - Logo Text

The design of your logo is then based on the current font you have selected as your "Logo Font". There is more information on this in the Fonts section of this HelpCentre Guide.

Image – If you have your own logo which has been designed for you, this can be uploaded to the Design Studio, where it will be automatically added to your website. To upload a logo, you first need to switch your logo type to "Image" and then click the button marked "Upload a logo".

Design Studio - Logo Upload

There are 3 different size of logo available with Create websites. You will need to make sure your image fits one of the sizes below before uploading.

Small – 350 x 70px
Medium – 780 x 120px
Large – 1000 x 200px

Once your logo has been uploaded, it will be available in the your list of current logos. To select it, click the logo in the list and then "Ok" to confirm the changes.

 

Fonts

It is important to choose the right font for your website as a great choice not only adds to a professional and modern design, but also helps to improve the usability and readability of your website.

To assist with this important choice, there are 4 different font types available on most Create websites, all of which have a selection of professional curated font choices.

  • Logo
  • Heading
  • Content
  • Icon

Your current selection for each font that is available on your template can be seen in the Design Panel.

Design Studio - Fonts

To update any of your fonts, click the preview of the one you would like to change. You will be taken to the list of available fonts for this font type. Select the font you would like to use and click "Ok" to confirm.

Design Studio - Font List

 

Wallpapers

Some Create templates allow the use of wallpapers to add an extra graphical element to your website. If a wallpaper is available for selection on your currently selected template, you will be provided the Wallpaper option within the Design Panel.

Design Studio - Wallpaper

To change the current wallpaper that is selected, click the preview of the wallpaper in the Design Panel to be taken to the list of available wallpapers. Default wallpapers are listed under their own categories but you are also able to add a custom wallpaper from either your Site Images or an external image URL. Either select your chosen image from the list of defaults or click the "Add Wallpaper" button to get started with a custom image. Once you have made your choice, click "Ok" to return to the Design Panel.

Design_Studio_-_Wallpaper_List.png

Screen_Shot_2014-10-08_at_12.45.21.png
Please note - Although a wallpaper may be available on a template, this can easily be removed by setting the option to "Off".

 

Buttons

Choose your preferred choice of button style, rounded or square, by using the switch under Button Style. You can also edit the background and text colour of your button in the "Colours" section of the Design Panel.

Design_Studio_-_Button_Styles.png

 

Step 4

This scale allows you to choose the overall size range for your headings, including page titles, side column titles and generally any area that uses the ‘Heading’ font.

You have the option to set headings to Small, Medium, Large or Extra Large. To change the size, simply click on the “Heading Size Scale” and then select the heading size you’d like to use from the list of options and click "Ok" to confirm.

Step 5

Once you have made all of the changes you would like to make, click 'Save" at the top of the Design Panel to confirm and close.

Design Studio - Reset

Top Tip

Don't forget that you can always reset a template back to its original state by clicking the "Reset" link at the top of the Design Panel. Please be aware that this will permanently remove all custom changes you have made.

 

Device Preview

To test how your visitors will view your website on different devices, you can use the device toggles in the main Design Studio menu to change your preview mode to Desktop, Tablet or Mobile. This is a great tool for ensuring that your website visitors are provided with a standardised and professional experience no matter where they access your website from.

Design Studio - Desktop

Design Studio - Tablet

Design Studio - Mobile

Other Tools

The Design Studio also houses some other tools which you can use to update your website. Please read the relevant guide on each one for more information: