DeveloperTutorialsCreating a New Design

Working With Oncord Designs

A website design defines the overall layout, fonts and style rules to be used across a website.

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

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

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; "Oncord Project Team - 2018 Website Design". You can rename a design later by clicking the "Settings" button when editing the design.

You also have the ability to import / export design templates between Oncord accounts.

You can 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 document where page content will appear, and defines the editable area when editing pages.

Add the following code to your design within the body tag to define the content region:

<ss:regions:content />

Only one primary content region may be defined per page (a different control is used to define additional editable regions).

After making changes to your design, click the "Save Design" button located at the top of the page.

You can click the "View Online" button to view the design. If the view online button does not appear, it means that the design is not currently in use with any website pages. To fix this, edit a website page, click "Settings" and set the page to use your design. Alternatively you can set your design as the default design template to be used throughout pages on the site (more below). 

Changing The Default Design

The "default design" defines the design which will be used by default when creating a new page on the website. Each page on the website may be set to use a specific design, otherwise it will be set to use "Default" - which will be the design you have nominated as the default.

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 parent's design.

Test Your New Design

If you need to test your design before applying it as the default, create a new "test page", and set the page to be offline so that only administrators can view it (can be done by editing the page and opening the Attributes and Security tab).

Edit your test page, and click "Settings". Set the test page to use your new design in order to test. When you're ready for the new design to be applied to other website pages, just set your new design as the default. 

Keeping Images, Javascript and Other Media Sorted

Each Oncord 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 media folder  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;

<img src="/media/website_designs/1/logo.png" />

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 Oncord.

Share This Tutorial: