Custom Workspace Styles

Overview

Workspace settings started with a simple custom color palette. This allows designers to choose which colors will be available inside the builder. Since then, we've expanded workspace settings to create a full palette. Your workspace palette allows you to set custom values for the following:

• Colors
• Buttons*
• Text*
• Social Icons*

*These features are not available in the Free BEE Pro plan.

To locate your custom workspace settings, navigate to Settings > Workspace Styles. Workspace settings are available in all paid BEE Pro plans. However, 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. If you're using a Free account, you only have access to workspace colors.

Workspace Colors

Using workspace colors, you can create your own custom color palette. A color palette can include, at most, 17 colors. It also includes black (#000000) by default. These colors are available inside of any color palette in the BEE builder.

Adding colors

The custom color palette is at the top of your Workspace 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 value. Once you've found the color you want, select Save to keep it as part of your workspace palette. You will receive a confirmation message in the lower right-hand corner of the screen.

Removing colors

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.

Back to top

Workspace buttons

The BEE builder 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 workspace to the builder 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 changes 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.

Back to top

Workspace text settings

In the workspace text settings, you can set custom text and hyperlink colors. These are the default values for paragraph, list, or title content blocks.

Creating your custom text colors

Your workspace 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.

Back to top

Workspace Social Icons

The social content block populates 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 workspace social icons

To start, the social icon settings will show the same default social icons that you see in the builder.

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 your default social icons. 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 becomes an X. Click this icon to delete the social icon.

A modal opens to ask you to confirm the action.

Back to top

Using your workspace settings in the builder

Now that you've customized your workspace 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 workspace palette.

You can find your custom color palette anywhere that a color picker exists in the builder. You will also see frequently-used colors not included 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 the color 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 design settings, as demonstrated below.

Note that black (#000000) always populates for easy access. BEE Pro will also filter out duplicate colors. 

If the design settings use only your workspace colors, the other colors disappear. Keep in mind that workspace 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 settings will populate with new paragraph, list, or title content blocks.

Your button settings are reflected if you drag out a new button content block.

If you drag and drop a new social block, you'll see the platforms and URLs from your workspace palette. The only further editing this might require is selecting the style of social icons you want to use.

Back to top