Brandguide Tutorial: Building and Styling

Creating Sections within Brandguide

To create a new section, scroll to the bottom of the page and select "Add Section"

Screen_Shot_2021-04-27_at_10.45.27_AM.png

This will open up a modal that allows you to select the type of content that the section will contain. 

Screen_Shot_2021-04-02_at_3.21.51_PM.png

The first three section types come with a default structure that allows you to type in your chosen text and upload media from Brandfolder, your device, or an external link. 

Screen_Shot_2021-04-02_at_3.23.10_PM.png

The code block section allows you to build the section structure from scratch using HTML. This can be customized using CSS in the Advanced Styles, or by adding inline CSS directly into the code block.

Screen_Shot_2021-04-27_at_10.55.59_AM.png

 

Basic Styles

The Basic Styles is where you can change the font settings such as the font family, font size, and colors. Brandguide comes with a selection of default fonts, and colors can be selected by inputting a hex code or using the color picker tool.

Screen_Shot_2021-04-02_at_3.14.56_PM.png

Screen_Shot_2021-04-02_at_3.15.46_PM.png

The favicon setting allows you to upload a favicon image from brandfolder or your device.

Screen_Shot_2021-04-27_at_12.22.18_PM.png

 

Advanced Styles

The Advanced Styles is where you will import third party fonts and apply custom CSS to the elements on the page. This setting can be found at the bottom of the Styles tab below the favicon setting.

Screen_Shot_2021-04-27_at_12.24.28_PM.png

You can import third party fonts using an external stylesheet, script tag, or typekit Id. Our recommended method for importing fonts is by adding the @font-face property in the Custom CSS section.

Screen_Shot_2021-04-27_at_12.26.13_PM.png

The Custom Styles section is where you will input your CSS to further customize the brandguide. You may utilize this CSS section to import third party fonts, customize your code box HTML, or change the existing styling on any element on the page.

Screen_Shot_2021-04-27_at_12.29.01_PM.png

Below the Custom CSS is the option to show or hide the section navigation. You can also set a fixed navigation which will allow it to stay locked in place as you scroll down the page.

 

Importing Third-Party Fonts

@font-face is a CSS rule that gives you the ability to import and utilize third party fonts on your Brandguide. In this example, we are going to import the "Satisfy" font from Google Fonts, which is a library of free open-source fonts for use on the web.

Syntax

You may copy the syntax below and add it to the Custom CSS section of your brandguide. This is the only CSS you will need to import the font. To import a different font, simply change the font-family, source URL, and format to that of your chosen font.

@font-face {
font-family: 'Satisfy';
src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2');
}

Finding the font URL and format:

1. Navigate to your font library of choice and select the font that you want to add to your Brandguide. In our case, we are going to select "Satisfy" from Google Fonts.

2. Once selected, you will need to copy and paste the @import url into a new browser tab. 

Screen_Shot_2021-03-16_at_12.18.49_PM.png

3. This will take you to a page containing the url and format needed to import the font to your brandguide.

Screen_Shot_2021-01-13_at_10.05.49_AM.png

4. Copy the src url and paste it into the @fontface code along with the font-family.

Select Update CSS to save your changes. 

Screen_Shot_2021-01-13_at_10.34.57_AM.png

The newly imported font will populate in the font dropdown on the Basic Styles section. You have to option to change the font of your content through this interface or by using CSS in the advanced styles.

Screen_Shot_2021-01-13_at_10.16.17_AM.png

If you have any questions about this feature please contact support@brandfolder.com.

Was this article helpful?
1 out of 1 found this helpful