Working With Oncord Designs
A design defines the layout, fonts and style rules to be used across website pages, or e-mail marketing messages.
To manage website and e-mail marketing designs, navigate to
Dashboard > Website > Designs.
To create a new design, select the "New Design" button at the top of the screen.
From the top menu, you can also import or export designs between Oncord accounts.
To help differentiate Re-name a design by clicking the pencil icon next to the name of the design, or by clicking the "Settings" button when editing the design.
When creating a new design, you'll be given two options;
Option One: Start From a Template
This approach allows you to generate a website design and some example pages quickly, based on an existing website, or an uploaded logo.
If you define a website url, Oncord will crawl the existing website to retrieve the logo and research the brand.
You'll then be presented with a series of templates to choose from and customize.
After generating a design from a template, you can further customize the design, and have full access to make changes to SRC code.
Option Two: Code From Scratch:
This approach will create a blank document, where you can paste the html source for your new custom design (if you've found a HTML theme
you would like to use).
Nominate The Default Design
You will nominate a "Default Design", and "Default E-mail Design", which are to be used by default when creating new pages or e-mail campaigns.
Each page on the website may be set to use a specific design (via Settings when editing the page), otherwise pages will be set to use the "Default" design.
System pages (such as the unsubscribe page), will also use the default design.
You can change the default design by clicking the menu button on the relevant design, to reveal a drop-down menu with the option "Make Default".
The Content Region
The "content region" defines the location within your design where page content will render, and defines the editable area when editing pages.
Add the following code to your design within the body tag to define the content region:
Only one primary content region may be defined per page. If you would like to setup multiple editable regions within a single 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.
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.
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.
Images, Javascript and Media
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;
Note: You will need to alter the above address with the correct design id ("1" in this example), the media
sidebar lists the correct address towards the top of the sidebar.
Next Steps:
- Learn how to import a custom HTML / CSS template (If you're a web developer / designer).
- Learn how to generate a Design (If you prefer a visual editor).