Build and style a Brandguide

Pages

The highest organizational level of a Brandguide. Pages add up to make Brandguides.

Add pages

1. Navigate to the Pages option in the sidebar.
2. Select the Add page button.
3. Name the page, and set the Slug. 
4. Select, Save, and create page. 

Delete pages

Select the trash icon next to the page you want to delete in the Pages and Sections window. 

You can't undo deleting a page, and you can't recover any of the blocks and section that belonged within the page. 

Sections

Sections are an organizational level of a Brandguide that are nested within pages and consist of blocks. 

The Sticky Navigation bar and Collapse Page Sections options are automatically toggled on for your Brandguide. You can adjust these inside the Pages & Sections settings towards the bottom. 

Blocks

Blocks are nested within sections. You can locate blocks in the block panel on the left-hand side. Blocks are Brandguide components like images, text, color, and code that live in the canvas area as content.

Add blocks

Brandfolder Image

1. Navigate to the left-hand sidebar and select the block option.
2. This opens a panel with images, text, code, and color block options. 
3. Select the block and drag it into the canvas area.  

Content that you can add has a dotted line around it. Purple lines on the canvas indicate an approved drop zone.

4. Release the click to drop the block into the canvas. 

Delete blocks

Select the trash icon on the block. You can't recover a deleted block.  

Rearrange blocks 

You have two options:

Brandfolder Image

1. Drag and drop the block to another spot on the page.
2. Use the arrow to the right of the block content to move the block up and down the page.  

Image blocks

Image blocks allow you to add Brandfolder content to your Brandguide seamlessly. This means that if an asset is updated in Brandfolder, it's automatically updated in the Brandguide as well. CDN powers this experience. 

To promote brand consistency, you can't upload outside images directly to Brandguide. 

Supported image types

• APNG
• AVIF
• GIF
• JPEG
• PNG
• SVG
• WebP
• PDF
• MP4
• Microsoft Word Documents
• Microsoft PowerPoints
• Microsoft Excel Files

Add images

Brandfolder Image

1. Select the image icon in the panel on the left.
2. Another window appears with a Brandfolder experience. The Brandfolder or Collection associated with your Brandguide appears as a default. 
3. To choose another Brandfolder or Collection, select the black arrow at the top of the window.
4. Locate the image you want to use and add it in one of the following ways:
   • Drag and drop the image onto the canvas. 
   • Hover over the image, select the ellipses menu, and choose [+] Place.
   • Hover over the image, select the ellipsis, choose View Details, and then choose [+] Place.
   • Hover over the image, select the ellipsis, choose View Details, and then drag and drop the image. 

Change image size

1. Hover over the image and select the ellipsis.
2. Choose view details.
3. Open up the placement options.
4. Alter the image's width and height.
5. Select Place. 

This is currently the only way to manipulate the image size. 

Text blocks 

You can add text to your Brandguide by dragging and dropping a text block onto the canvas.

Alter text styles

When you modify text styles at the global settings level, they affect everything at the Brandguide level. When modified at the block level, they only affect that specific block.

Default text

1. Navigate to settings.
2. Input your hex code into the text color box.

This affects any text on the page, including text blocks.

Block-level text 

1. Hover over the text block.
2. A WYSIWYG editor appears to alter fonts, sizes, text colors, and formatting, such as adding bullets or links to the text.
3. Changes made here only affect the selected block.

Typography

Currently, users can't upload or sync fonts with a Brandfolder to Brandguide. The fonts in the dropdown are sourced from Google Web Fonts. 

Advanced users can add third-party fonts using CSS. For more information, visit our help article on how to Use CSS to customize Brandguides. 

The Brandfolder support team can't help you with building your code.

Code blocks

The code block works with standard HTML / CSS. Using this block is only recommended if you have advanced knowledge of CSS. Customer support can't help you when implementing your code into Brandguide. Any code is sanitized to prevent XSS attacks. 

Our developers may make changes to our Brandguide code at any time. Those changes have the potential to impact your CSS and HTML.

Brandfolder Image

Edit code blocks

When an HTML/CSS block is added to the page, you can add custom code to the Brandguide. HTML is added to a specific location on the page, and CSS applies to the areas of the canvas it is specified to affect. Once finished with the code, select the eye icon to view changes. 

Go to Settings to globally edit CSS. It's best practice to set those styles at the top level and have them cascade down. 

Add video using HTML

The image block panel doesn't support adding video content blocks. However, you can add video using the Video embed code, via custom HTML, or video assets from Brandfolder. 

Customer support can't help you when implementing your code into Brandguide. 

1. Open the asset modal for the video.
2. Navigate to the Embed tab. 
3. Locate the video embed code and select Copy Link. 
4. Paste the code into the HTML block. 

Sanitize code blocks

Some code and elements within it are sanitized for security purposes against XSS attacks.

Javascript is not permitted. 

Delete code blocks 

Deleting a code block removes the block and all code within it. CSS written at the global settings level remains unless edited in the Settings panel.

Move code blocks

Moving the code block after writing HTML and CSS can break the code or its intended effects. For best results, write the code after you've set the position of the blocks. 

Color blocks

To add color blocks to your Brandguide, drag and drop the color onto the canvas.

Color sources

The color block is sourced from the Brandfolder or Collection associated with the Brandguide. If no colors appear in the Brandguide, none have been added to the Brandfolder or Collection. 

To add colors, add them as an asset in the Brandfolder.

Brandfolder Image

Sync colors

When a change is made to the colors at the Brandfolder level, it also automatically reflects in the Brandguide. If a change is made in Brandfolder and the change isn't reflected in Brandguide, you can manually sync by selecting the circular sync button at the top-right of the color panel.

Color modes

You can alter which color modes appear in both the panel and the canvas.

1. Select the settings icon in the top right-hand corner of the color panel.
2. Select the checkboxes to display HEX, RGB, and CMYK, and select Save. 
3. A copy icon appears next to the color value.