Start Here

To change color swatches:

1. Click on the element with the color you want to edit.
2. In the styles tab on the right, find the color option (ex. Text color)
3. Click on the color square.
4. Once the little pop-up opens, click the edit icon and choose a new color.
5. Click save.

See the video below for a short tutorial.

Blanc is using the custom font 'Nippo'. It can be downloaded at Font Share and is 100% free for personal and commercial use.

The custom font is applied to the Body of the website, and because of that, it is automatically applied to all paragraphs and text blocks. You can change it globally by:

1. Selecting "Body"
2. In the styles tab on the right, click selector and select "Body (All pages)"
3. In "Typography" section, change to desired font settings.

The 'Navigation Top Right' and 'Navigation Bottom Right' symbols are hidden on mobile (landscape and portrait) and, instead, those links appear in the 'Left Panel Navigation' symbol which becomes the mobile menu. To show the menu and edit it's contents on mobile sizes, open the symbol and change it's layout to Display: Block

‍
Edit as you wish and make sure to change the layout back to Display: Hidden when finished.

The 'Global Style' symbol has been applied to each page and should be present on each page to ensure style and behavioural consistency across the website. When the symbol is opened, there is an embed element inside containing some simple custom code. To access the editor of the embed element, click "Open Code Editor" from the settings panel.

Here, we break down exactly what the 'Global Styles' block of embedded custom code contains and does.

Please note - There is no need to modify any of this code, but we want to share exactly what it does just so that you know what it is.

Font Smoothing

‍This code is responsible for smoothing out the way the font appears across the website. It is a common custom code snippet to enhance the quality and appearance of fonts across the website.

‍‍

Default Browser Scrollbar Removal

‍This code is responsible for removing the default scrollbars that the browser may add to the scrollable sections within the website's layout.

‍

This symbol appears at the bottom of a few pages where, on the live website, an image slowly reveals itself when it enters the viewport. This animation is made of a div 'Content Motif Wrapper' with two key elements inside.

'Content Image' is the image that is revealed and can be changed to any image.

'Content Motif Cover' is simply a div with the same background colour as the rest of the website. When the motif enters the viewport, the animation slowly moves this div off of the image to reveal it.