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.

To create a new design in Synergy 8, log in to the admin dashboard panel at yourdomain.com/admin and locate the "Designs" link located under the "Content" heading in the left-hand sidebar. Clicking this link will display all the website and e-mail marketing designs on the website.

Select the "New Design" option to create a new blank design. Set a meaningful title as the website design title, such as "Initial Website Design 2014". You can rename a design later by editing the design. 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 the bottom left of the screen.

The Content Region

The content region is the editable area in the design, defining the location where the page content will appear. Add the following code to your design to define the content region;

Only one content region may be defined per page. 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.

Changing The Default Design

The default design defines the design which will be used by default when creating a new page. 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.

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 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 "Attached Media" sidebar located on the right-hand side of the screen 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 attached media sidebar lists the correct address towards the top of the sidebar.

Changes Version Control

All changes made to each design can be tracked and reverted through the "Changes" tab, which is accessible at the top of the screen when editing a design. The changes version control system cannot recover deleted attached media.

What Next?

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