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 AI design generator guides you through a simple process of generating a design. You can either answer a couple of simple questions or provide your existing website and logo. The AI design generator will then provide you with the tailored base foundations you need to start building your website.

This help article covers:

Generating a Design Using AI Generator.
Editing your Design to change styling, fonts and content within the header and footer.
Setting up Website Favicon.
Managing Multiple Designs.

Generate a Design Using AI Generator

• Navigate to Dashboard > Website > Designs.

• Click 'New Design', and select 'Start Using AI' to initiate the AI generator tool.

• A question "Do you currently have a website?" will come up.

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

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.
  
  

---

Setting up Website Favicon

A favicon (short term for "favorite icon") is a small icon that represents your website in browser tabs and search engine results. You can upload a custom one to improve brand recognition and professionalism.

Oncord's Favicon:

To upload a Favicon:

• Prepare a square 32x32 pixel image in .png or .ico format based on the logo.

• Rename the file to favicon (.ico or .png).

• Go to Dashboard > Website > Designs >  select your website's primary design template

• Click the "Media" option in the left panel, and upload the favicon file.

• Click the "Source" option in the left panel, and add the following HTML code under the <head> tag.

<link rel="icon" type="image/png" href="/media/website_designs/1/favicon.png">

Note: You will likely need to adjust the 'href' attribute to match the url of the uploaded file.

How to find the url of the uploaded favicon:

• Within the design editor, click the "Media" option in the left panel.

• Find the uploaded favicon file in the panel and click the three-dot button underneath it.

• Select the "Copy Shortcut" option from the drop-down menu.

• Replace the value of the 'href' attribute in the code above. In this example, the code would be: 

<link rel="icon" type="image/png" href="https://yourdomain/media/website_designs/5/favicon.png">

• Then remove the part "https://yourdomain".

• The code would end up being:

<link rel="icon" type="image/png" href="/media/website_designs/5/favicon.png">

---

Managing Multiple Designs

While you can have multiple designs for your website to improve organization, consider creating one main design for most generic pages and separate designs specifically for landing pages. This article will instruct you on how to manage these multiple designs and the web pages associated with each one.

Edit Design Title

Each design has a title for reference purposes throughout the system. To change the title of a design:

• Navigate to: Dashboard > Website > Designs.
• Hover over the existing title to reveal a pencil icon.
• Or click the "Settings" button in the left panel when editing a design.

Nominate the Default Design

It's important to nominate the default Design when you have multiple Designs. Newly created pages will use the default design, unless they have been configured to use another specific design.

The Default Design is the one with the "DEFAULT" icon on it next to the title, and you can also check how many pages are using this design by clicking the "" icon.

To nominate a default Design:

• Navigate to: Dashboard > Website > Designs.
• Under the "Web Designs" heading, click the three-dot button on the relevant design to reveal a drop-down menu.
• Click the "Make Default" option.

Assign Pages to a Design

To configure pages to use a specific design:

• Navigate to: Dashboard > Website > Pages.
• Click the three-dot button on the relevant page to reveal a drop-down menu.
• Select the "SEO & Page Settings" option in the drop-down menu.
• Under the SEO tab, in the Design section, click the arrow to reveal a drop-down menu.
• Select the design you'd like the page to use.
• Click the "Save Settings" button.