Generating a Design

Generating a design and some example web pages is usually the first step towards creating an Oncord website. A design is responsible for maintaining consistency throughout the pages of your website - and defines the logo, fonts, colours, header and footer that appear throughout your website. 

Oncord's design generator guides you through the process of generating a design based on your existing website or uploaded logo, and provides the base foundations you need to start building your website.

This help article covers:

Generating a Design.
Editing your Design to change styling, fonts and content within the header and footer.

Step 1: Generate a Design

• Navigate to Dashboard > Website > Designs.

• Click 'New Design', and select 'Start from a Template' to initiate the design generator tool. Enter your website domain, and click next.

• It will take a few moments to research any existing online presence you may have.

• Select your logo from the options shown, or click 'can't see your logo?' to upload a logo image from your computer. Click next to confirm your logo.

• Select the main goal for the website. If you're unsure, select the 'something else' option.

• Select a primary and secondary colour associated with your brand. These colours will be used for accents, button elements etc. If you have a colour palette, you can copy and paste the Hex codes into the colour picker.

• Review the generated designs. Click a design to preview it, and click the tick icon on the right-hand side to confirm your chosen design. 

• Click "Generate My Site" to create the new design, and some example website pages. 

Note: The design and pages are editable, so don't worry if the outcome isn't perfect at this stage.

Note: If you already have a design set for your website, the system will ask if you would like to start fresh, or create new pages under a /new-site/ path. 

We recommend in most cases to select the 'create new pages' option to retain your existing pages, unless you're trialing Oncord and would prefer to wipe all of your existing website pages to start from scratch.

Step 2: Edit the Design

After the design is generated you'll no doubt want to make some changes to styling, fonts and the content located within the header and footer.

To edit the design go to Dashboard > Website > Designs and click on your design.

Header

The header element contains a logo, your website navigation menu, and some other optional "feature" elements. A number of display variants are available to change the overall display of the header.

To configure the header element, click to select it, click the arrow icon to reveal a menu, and select "edit".

In the left panel of the editor window you may:

• Change the "Style" of the header element, choosing between some available variants. 
• Change the width of the header element. 
• Set the logo alt text - which is usually set to the business name. 
• Define primary and secondary "features" to be shown within the header element - such as social media links or text. Alternatively, these can be removed. 
• Set the background colour of the header element, the background colour of the navigation menu, and the font colour of the navigation menu.

Note: When using the primary and secondary elements in the header, by default the secondary element does not appear on mobile devices.

Footer

The website footer is essentially a section element, with a row and columns of content. For more details on how to edit these elements, please refer to our help article on Page Editing.

Fonts

To update the fonts to be used throughout your website, click the "Styles" button in the left panel, followed by Fonts.

• Choose fonts from the integrated Google fonts library. Other web fonts can be used and installed on your website. Some coding is required to achieve this (contact us).
• Choose a font size preset. The higher the font size preset, the greater the size difference will be between text elements. After selecting a formula, you can override individual elements (to make Heading One text slightly larger etc).
• Select the main font size to be used for body text - which is typically set between 15 ~ 19 px. You may also opt to select a mobile root size, to be used specifically for mobile devices.