Custom Brand Styles
Table of contents:
Brand settings started with a simple custom color palette. This allows designers to choose which colors will be available inside the editor. Since then, we've expanded brand settings to create a full brand palette. Your brand palette allows you to set custom values for the following:
- Social Icons
To locate your custom brand settings, navigate to Settings > Brand Styles. Brand settings are available in all BEE Pro plans, but you may not have access to them depending on your user role. You need to be either an Owner, Admin, or Manager to access these settings.
Using brand colors, you can create your own custom brand palette. A brand palette can include, at most, 17 colors, and will always include black (#000000) by default. These colors will be available inside of any color palette in the BEE editor.
The custom color palette is at the top of your Brand Styles.
To start adding colors, press the + icon to open the color picker.
You can select a color by clicking around the color picker interface, or you can insert the Hex code or RGB values. Once you've found the color you want, select Save to keep it as part of your brand palette. You will receive a confirmation message in the lower right-hand corner of the screen.
If you need to remove a color from the palette, hover over the color to populate the delete icon.
If you click on the delete icon, you will need to confirm this action before proceeding.
The BEE editor has always used a set color scheme for any button when you drag a new button content block to the stage. Now you can customize several of the button colors. This allows you to drag-and-drop a button that already matches your brand to the editor stage at any time.
Creating your custom button
By default, your button will populate with BEE Pro colors. A preview of the button is also available. This will change in real-time as you make adjustments to the button values.
You can change the button background, border, and text colors. For the preview, the button border will be 1 px. To change the colors for your buttons, click on the color icon to the left of the hex code value. This will open the color picker, where you can select Save to confirm the change.
If your button background is white (#FFFFFF), the preview will populate over a dark background.
Brand text settings
In the brand text settings, you can set custom text and hyperlink colors. These are the default values used when you drag a new text content block to the editor stage.
Creating your custom text colors
Your brand text colors will by default match BEE Pro branding at first.
To change the color, click on the color icon to the left of the hex code. This will open the color picker. Select Save to confirm the change.
If you change your default text color to white (#FFFFFF), the preview text will populate over a dark background.
Brand Social Icons
The social content block populates with Facebook, Instagram, Twitter, and LinkedIn icons by default. But what if you aren't using these social media platforms? Or what if you frequently find yourself manually adding other icons?
Now you can customize the social icons that populate when using this content block. Additionally, you can set the URLs from your settings to make it faster than ever to create your design.
Setting your brand social icons
To start, the social icon settings will show the same default social icons that you see in the editor.
If you click on one of the existing social icons, a modal will open that allows you to customize the social icon.
In this modal, you can edit the title and the link that will generate in the social content block. The dropdown menu at the top of the modal is locked when you're working with the edit modal. When you select Save, you will see a confirmation message in the lower right-hand corner of the window.
If you click on the + icon in the social links section, you can add a new social icon to the default social icon box. In this modal, you can interact with the dropdown menu under Select an option to select a platform. You won't be able to interact with the Save button in this module unless you have entered a URL. The title field is optional.
If you need to delete one of the social icons, hover over the icon for the one that you want to delete. The checkmark in the upper right-hand corner of the button will become an X. Click on this icon in order to delete the icon.
A modal will open that asks you to confirm the action.
Using your brand settings in the editor
Now that you've customized your brand palette, it's time to start designing! Whether you are working on a template, an email, or a page, you will be able to use your custom brand palette.
You can find your custom color palette anywhere that a color picker exists in the editor. You will also see some options for easy access to frequently-used colors not in your palette. The bottom row(s) of the color picker within the sidebar represents your custom color palette. The color picker on the text toolbar may combine your brand colors and other default values.
You may be wondering, what are these extra colors doing here? Those aren't a part of my color palette! Not to worry - these colors come from settings that already exist inside the design. You'll see these same colors indicated in the message settings, as demonstrated below.
Note that black (hex code #000000) will always populate with your brand palette for easy access. If the colors from the editor settings are in your brand palette, you will not see duplicates.
If the design settings use only your brand colors, the other colors disappear. Keep in mind that brand and template colors will always be available on the lower row(s) of the color picker. Likewise, the top row(s) will display your recently used colors. A light divider between these sections helps you visualize this.
Your text brand settings will populate when you drag a new text content block to the editor stage.
You'll also see your brand button settings reflected if you drag out a new button content block.
Finally, if you drag out a new social content block, you'll see the platforms and URLs you set in your brand palette. The only further editing this might require is to select the style of social icons you want to use.