Custom Brand Styles
Table of contents:
Brand setting started with custom color palettes, which allowed BEE Pro users more control over the default colors that populate when working inside of the editor. We're happy to introduce additional brand settings that allow you to also set the default button and text colors, as well as the ability to choose which social icons populate when you drag a new social content block into the editor.
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 in order to access these settings.
Using brand colors, you can create your own custom brand palette. A brand palette can include a maximum of 17 colors, and will always include black (#000000) by default. Keep in mind that your brand palette only extends to the editor sidebar, so you can't use it with the color picker inside of the text toolbar.
The custom color palette is found at the top of the Brand Styles,
In order 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'll receive a confirmation message in the lower right-hand corner of the screen.
If you need to remove a color from the palette, simply hover over the color to populate the delete icon.
If you click on the delete icon, you will be asked 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 the button background, border, and text color before you enter the editor so that your custom button is already ready-to-go any time that you want to use one in your design.
Creating your custom button
The brand settings for the button match the default button that is generated when you drag a button content block to the BEE editor stage. A preview button will also generate below these settings.
You can change the button background, border, and text colors. By default, the button border will be 1 px. In order 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 in order to confirm the change.
If you change your default button background color to white (#FFFFFF), then the preview button section will automatically generate a dark background so that the button is visible.
Brand text settings
You can utilize the brand text settings to determine your custom text and hyperlink colors for the text content block. Your brand colors will also be available in the color picker within the text toolbar.
Creating your custom text color scheme
The text settings for your brand already have pre-set values that you use in the editor when working with a custom template. Below you can also preview the default text and hyperlink settings as they will appear in the editor.
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), then the preview text will automatically generate a dark background so that the text is visible.
Brand Social Icons
When you use the social content block in the BEE editor, the content will populate by default with the following icons: Facebook, Instagram, Twitter, and LinkedIn. But what if you aren't using these social media platforms, or you frequently find yourself manually adding other icons? With the brand social icon settings, you can customize the social icons that populate this content block. Additionally, you can set the URLs from the 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 four social icons that pre-populate with a new social content block inside of 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 receive a confirmation message in the lower right-hand corner of the window.
If you click on the + icon under 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 in order to select your preferred social icon. 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 change and 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 or a message, you will be able to use your custom brand palette.
You can find your custom color palette anywhere where you can use the color picker or change the hex code in the editor sidebar. The color picker interface will always generate some options for easy access to frequently-used colors. When you're using a custom color palette, the bottom row(s) of the color picker interface represents your custom color palette.
You may be wondering, what are these extra colors doing here? Those aren't a part of my color palette! Not to worry; some of these colors are determined by settings that already existed inside the template or message. You'll usually 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. However, if you have the colors in your settings to match the brand palette, the other additional values will disappear, as demonstrated below.
Now that we have replaced the values in the settings tab with only colors from our custom color palette, the unwanted colors have been removed. Brand and template colors will always be available on the lower row(s) of the color picker, while the top row(s) will display your recently used colors.
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 a new social content block into your message, you'll find your custom links and icons pre-populate without further editing.