Adding branding (colors & fonts) to your account
Qwilr's Brand Editor lets you add a palette of colors and fonts and get a clearer overview of your brand style. You'll create documents that stand out while consistently reflecting your company's brand.
We know that sometimes you might also want to make exceptions to your brand rules. That's why we created Block Styles, so you can modify the style of individual blocks or set styles for just one Qwilr Page.
Note: These settings are only available to account admins.
In this article:
To set up your brand colors and fonts, click your initials in the top right corner of the screen. Then select Set Up Brand.
The colors you select in Brand Setup will apply to all projects within your account. The default setting is 2 colors, but you can add more as needed.
The first brand color is used as the default color for the following elements:
- Heading 1 (H1)
- Background colors
The second color is used as the default for the following elements:
- Heading 2 (H2)
- Background colors
To change either of the default colors, click on a circle to bring up the edit menu.
Choose a color from the menu or paste in your own hex color code. Then click Update Color.
Here are some useful tools for finding hex color codes:
- http://paletton.com/ (good for finding complimentary color codes)
- http://html-color-codes.info/colors-from-image/ (good for confirming the hex color code on your company logo)
If you've already created some Qwilr Pages in your account, you'll see a warning message letting you know that the colors in these pages will be changing to the new default you've set. Click Update Color to save the change and update the pages.
If you have (or wish to use) only 1 brand color, then you can either:
- Set both default colors to the same color code
- Set your second default color to a neutral black or grey
Adding More Brand Colors
To expand your brand colors, click on the circle with a + sign. Choose a color from the menu or paste in a hex color code, then click Add Color.
You can add up to 5 additional brand colors, for a total of 7. The first two colors in the set will still be your account defaults, but the additional colors will appear in your Block Styles menus to select as background, text, and element colors.
When you're done adjusting colors, click Update Brand to save the changes.
Note: There may be cases where Qwilr limits the selection of available brand colors in a block. This will only happen when a particular color would affect readability.
The fonts you select in Brand Setup will apply to all projects in your account. Different fonts can be selected for Heading (H1), Subheading (H2) and Body text. As a default, all three are set as Open Sans.
To change a font, click the Change button.
You'll have three options:
- Select a Google font (one of 900+ fonts)
- Select an Adobe font (once you've added your Adobe Font-Kit ID)
- Select a custom font (one you've uploaded)
Using a single brand font
Once you've selected a brand font for H1, you can set it as the brand font for all text by enabling the switch as shown below.
Using our recommended font pairings
If you're not sure which fonts to use, try our font pairings to make the selection quick and easy. Click the Show Font Pairings button.
Scroll through to find a combination you like. Click on it, and you'll see a display of fonts. Click Try Fonts to install them as your brand fonts.
You'll still be able to change any fonts at any time. When you change a brand font, all existing pages in your account will be updated with the new font.
When you're done setting fonts, click Update Brand to save the changes.
That's it! Your branding is now set up, and all your pages will have a consistent look that matches your brand style.
Note: This feature is available only on our Enterprise plan
Once you've set up your brand colors and fonts, you can decide how much or little access your team will have to styling controls. In the Team Permissions section, you can use the switches to enable or disable the style settings in the Block Style menu. These settings include:
- Block Style Shortcuts: changing the background color and block width and height
- Text Style Shortcuts: changing the font colors, size, and alignment of all text items in a block
- CSS Style Shortcuts: adding custom CSS to a block to change its appearance
- Motion Style Shortcuts: adding animation effects to blocks
- Edit Styles through the Toolbar: changing the color, size, and alignment of individual text items
As you change the permission settings, you'll see a preview of what your team will have access to in the Block Style menu.
If you'd prefer that your team not edit any styling in the pages they create, disable the Edit saved styles switch and all settings will be disabled. The Block Style menu will be empty.