DeveloperTutorialsCreating a New Design

Working With Synergy 8 Designs


When working on the Synergy 8 platform, a design defines the overall layout and style rules to be used across a website.

The Designs page of the Dashboard will list your website and e-mail marketing designs.

To create a new design or manage existing website designs, navigate to:
Dashboard > Website > Designs in the left-hand sidebar.

To create a new design, select the "New Design" option, and create a new blank design. Set a meaningful title as the website design title, such as "Initial Website Design 2018". You can rename a design later by editing the design, and you have the ability to import / export design templates between Synergy 8 accounts. 

Clicking the "New Design" option will open an environment similar to the page editor. View the source code of the new design by clicking the "Source" button, located on in the left sidebar.

The Content Region

The "content region" defines the location in your design template where page content will appear, and be editable via Pages. Add the following code to your design within the body tag to define the content region:

Only one content region may be defined per page, however another Synergy 8 tag also exists that will allow you to define additional editable regions. After making changes to your design, click the "Save Design" button located at the top of the page, under the Synergy 8 logo.

You can click the "View Online" button to view the design, if this button does not appear it means that the design is not currently in use on any pages. To fix this, edit a website page and set the design template to use your new design, or set your new design as the default design template. 

Changing The Default Design

The "default design" defines the design which will be used by default when creating a new page on the website. The default design is denoted by a star * next to its title.  You can change the default design by hovering over the relevant design to reveal a clickable drop-down menu. This menu gives the option to "Make Default".

Overriding The Default Design

You can override the default design of any page by taking the following steps:

  1. Click the "Pages" link on the left-hand menu from the dashboard.
  2. Click the relevant page to open the page editor.
  3. Select an alternate design from the drop-down menu located at the top of the page next to the page title field.

Each newly created child page will inherit its parents design.

Test your new design

It's common practise to override the default design to test a new design before changing a live website. Create a "test page", make the page invisible (can be done by editing the page and opening the Attributes and Security tab) and then assign it to the new design.

Keeping Images, Javascript and Other Media Sorted

Each Synergy 8 account features a central media folder. The system will sort media into folders for you such as website_designs, website_pages and website_posts.

When editing a page, or website design, the Insert > From Media section in the sidebar will auto-navigate to the correct location.

You may create your own folder structure, and sub-folders. You may also upload a zip file to media folders, and unzip within the media panel. 

Each design has an attached media folder which should be used to store all design-related elements such as CSS files, JS files and images which appear in the design. Access the attached media of a design by opening the "Insert" section of the left sidebar when editing a design. These files can then be referenced in the design as follows;

Note: You will need to alter the above with the correct design id, the media sidebar lists the correct address towards the top of the sidebar.

What Next?

View our walkthrough tutorial on importing a HTML / CSS template into Synergy 8.

Share This Tutorial: