Build and style a Brandguide

Welcome to the new Brandguide experience!

This article, as well asGetting Started with Brandguide,andBrandguide Customization Using CSS,will walk you through how to migrate your content to the new experience.

Editing capabilities on your existing Brandguide will be going away on September 1, 2023. On December 1, 2023, the legacy Brandguide editor will no longer be available.

Pages

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

Adding pages

1. 导航到the Pages option in the sidebar.
2. Select theAdd page button.
3. Name the page, and set the Slug.
4. Select,Save, and create page.

Deleting pages

Select the trash icon next to the page you want to delete in the Pages and Sections flyout.If a page is deleted, the action cannot be undone,and blocks and sections housed within the page cannot be recovered.

Sections

Sections are an organizational level of a Brandguide that is nested within pages and consists 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 flyout on the left-hand side. Blocks are Brandguide components like images, text, color, and code that live in the canvas area as content.

Adding blocks

1. 导航到theleft-hand sidebarand select theblock option.
2. This will produce a flyout with images, text, code, and color block options. Content that you can add will have a dotted line around it.
3. Select the block and drag it into the canvasarea.Purple lineson the canvas indicate an approved drop zone.
4. Release the clickto drop the block into the canvas.

Deleting blocks

1. Select thetrash iconon the block. When you delete a block, it can’t be recovered.

Rearranging blocks

You have two options:

1. Drag and dropthe block somewhere else on the page.
2. Use thearrowto 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, then the asset will automatically be updated in the Brandguide as well. CDN powers this experience. To promote brand consistency, you cannot 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

Adding images

1. Select theimage iconin the left-hand flyout.
2. Another flyout will appear with a Brandfolder experience.The Brandfolder or Collection associated with your Brandguide will appear as a default.
3. Tochoose another Brandfolder or Collection, selectthe black arrowat the top of the flyout.
4. Locate the image you want to use and add it in one of the following ways:
   • Drag and dropthe 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, andthen choose [+] Place.
   • Hover over the image, select the ellipsis, choose view details, andthen drag and dropthe image.

Changing image size

1. Hoverover the image andselect the ellipsis.
2. Choose view details.
3. Open up theplacement options.
4. Alter the width and height of the image.
5. Select Place.

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

Text blocks

Adding text to your Brandguide can be done by dragging and dropping a text block onto the canvas.

Altering text styles

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

Default text

1. Navigate to settings.
2. 将十六进制代码输入的文本color box.

This will affect any text on the page, including text blocks.

Block-level text

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

Typography

Currently, users cannotupload or sync fonts with a Brandfolder to Brandguide.The fonts available in the dropdown are sourced from Google Webfonts. Advanced users can add third-party fonts using CSS. For more information, visit theBrandguide Customization Using CSS article. The Brandfolder support team will not be able to 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 cannot help you when implementing your code into Brandguide. Any code will be sanitized to prevent XSS attacks. Be aware that our developers may make changes to our Brandguide code at any time that have the potential to impact your CSS and HTML.

Editing code blocks

When an HTML/CSS block is added to the page, you can add custom code to the Brandguide. HTML will be added to the particular location on the page, and CSS will apply to whatever areas of the canvas it is specified to affect. Once finished with the code,select the eye iconto view changes.

CSS can also be edited globally under settings since it is best practice to have those styles set at the top level and cascade down.

Adding video using HTML

The flyout image block does not support the addition of video content blocks. However, using the Video embed code, video can be added via custom HTML and video assets from Brandfolder. Customer support cannot help you when implementing your code into Brandguide.

1. Open the asset modal for the video.
2. 导航到theEmbed tab.
3. Locate the Video Embed Code and selectCopy Link.
4. 将代码粘贴到HTML块。

Sanitizing code blocks

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

Deleting code blocks

Deleting code blocks will remove the block and all code written within the block. CSS written at the global settings level will remain unless edited in the settings flyout.

Moving code blocks

Moving the code block after HTML and CSS have been written has the potential to break the block or the intended effects of the code. For best results, write the code after the position of the blocks has been set.

颜色块

Adding color blocks to your Brandguide can be done by dragging and dropping 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.

Syncing colors

When a change is made to the colors at the Brandfolder level, the change will also automatically reflect within the Brandguide. If a change is made in Brandfolder and the difference is not reflected in Brandguide, you canmanually syncbyselecting thecircular sync buttonat the top right of the color flyout.

Color modes

You canalter which color modes appearin both the flyout and the canvas.

1. Select thesettings iconin the top right-hand corner of the color flyout.
2. Select thecheckboxesto display HEX, RGB, and CMYK, andselectSave.
3. A copy icon will appear next to the color value.