Advanced Style Kit for Workspace Styles

Overview

All paid Beefree plans have full access to Custom Workspace Styles. You can also access the Advanced Style Kit if you're using Business or Enterprise. This feature allows you to create additional style defaults for other types of content. Think of it as an extension of your workspace styles!

Use the Switch to the Advanced Style Kit button to access this feature. Find the button in the upper right-hand corner of your Workspace styles settings. 

So, how does the Advanced Style Kit work? Let's take a look.

Getting started

Some basic styles are necessary for you to start working in the Advanced Style Kit. If this is your first time setting custom styles for a workspace, you can't launch the Advanced Style Kit immediately. If you hover over the button, you'll receive a message. It reads, "Quick tip: set colors and typography here first, then switch."

You must set some basic custom styles before launching the Advanced Style Kit. Once you select colors and typography, you can start using the Advanced Style Kit.

You can also set custom styles for the other options, but these settings are not mandatory. Once you're ready, click the button to get started. 

The Advanced Style Kit opens directly in the Beefree Builder. In the upper left-hand corner of the screen, it indicates you are in the Advanced Style Kit. Keep in mind that there are some limitations to this version of the builder. Namely, the Advanced Style Kit does not operate as a drag and drop builder. There are several elements on the builder stage you cannot interact with.

There are also fewer tabs in the sidebar for the Advanced Style Kit. The available sidebar tabs are:

• Content
• Settings

The Advanced Style Kit builder also uses autosave rather than co-editing. You can use the Exit button in the upper right-hand corner to return to the workspace style settings. We'll save your style updates automatically. 

Settings

Upon launching the Style Kit, you'll land on the Settings tab. You'll see a handful of familiar options in the sidebar.

Use any of these settings to set your custom workspace styles. However, this version of the Settings tab doesn't include the content area width. You can only set this information on the Workspace Styles settings page. 

You can use the Advanced Style Kit to set custom settings for:

• Background color
• Content area background color
• Background image 
• Default font
• Link color

You can preview these settings on the Advanced Style Kit builder stage. Note that these settings only apply if selecting Start from Scratch when starting a new design.

Content

As mentioned above, the Advanced Style Kit does not act as a drag-and-drop builder. Instead, there are several content blocks already on the builder stage. As a result, you can't select the Content tab by clicking it.

Instead, select any of the content blocks available on the builder stage. Once you've chosen one, the sidebar will switch to the Content tab. You'll see many familiar options available in the email and page builder. Any option in the Advanced Style Kit sidebar is available as a custom style. Some of these options overlap with what you see in the primary workspace style settings, but many of them are only available as advanced styles.

Let's look at the different content blocks you can set custom settings for in the Advanced Style Kit. They are organized into two major sections.

Typography

This section allows you to set custom workspace styles for Titles and Paragraph content blocks. You have more granular control over the text styles here than on the main workspace styles settings page. 

Titles

The title content block has three primary options: H1, H2, and H3. As a result, there are three separate title content blocks in the Advanced Style Kit - one for each heading style. Refer to the placeholder text on the builder stage to see which heading you selected. 

You can set the following custom styles for each type of heading:

• Font family
• Font weight
• Font size
• Text color
• Link color
• Alignment
• Line height
• Letter spacing
• Text direction

Paragraphs

Customize your styles for the paragraph block in the content labeled as Body text.

Here you have the same options as what's available for the heading styles. There are some additional style settings for paragraph blocks, including:

• Paragraph spacing
• Content block padding

Components

This section allows you to select custom styles for several different content blocks. You can create custom styles for several content blocks not found in the primary workspace styles settings. 

Buttons

Although button settings are available on the primary workspace style settings, the Advanced Style Kit includes more customization options.

In addition to the primary button settings, you can also set custom styles for:

• Button width
• Font weight
• Alignment
• Line height
• Letter spacing
• Text direction
• Border radius
• Content padding (applies to the text within the button)
• Button borders
• Content block padding

Lists

The Advanced Style Kit allows you to set custom styles for the list content block. As a result, this section includes many of the same settings in the Typography section.

However, there are many custom styles available that only impact the list block:

• List type (ordered or unordered)
• List style type
• List items spacing
• List items indent

Dividers

The Advanced Style Kit is the only place to set custom styles for your dividers. 

You can set custom values for all of the following:

• Transparent divider toggle
• Line settings (if transparency is disabled)
• Width
• Alignment
• Content block padding

Spacers

Custom styles for spacers are also unique to the Advanced Style Kit.

Spacers, by definition, have very few options, but you can set the following custom styles:

• Height
• Hide on mobile/desktop

Social icons

You can set many social content block settings on the Custom Workspace Styles page. However, the Advanced Style Kit provides a couple of extra options.

The main benefit of setting social styles in the Advanced Style Kit is you can upload custom social icons. Like with many other components, you also have a couple of additional available settings:

• Alignment
• Padding

Forms

The Advanced Style Kit is the only place to set custom styles for your forms. Remember that the form content block is only available in the Pages builder.

Note that you can't manage fields in the Advanced Style Kit; this is only possible when designing a page. However, all other settings are available as custom form styles. This includes all the following settings:

• Width
• Alignment
• Font family
• Font size
• Label options*
• Field options*
• Button options*
• Content block padding

*These options include several additional settings for text, colors, alignment, borders, and padding.

Menus

Custom menu styles are also unique to the Advanced Style Kit. 

Many of the menu options will match those in the typography section. However, there are a couple of unique options for menus:

• Layout
• Separators
• Mobile menu toggle
• Items padding
• Content block padding

Tables

Custom styles for tables are also unique to the Advanced Style Kit.

You can set the following custom styles for tables:

• Layout
  • Border
  • Background color
  • Striped rows
• Header
  • Header row
  • Background color
  • Font weight
  • Font size
  • Text color
  • Align
• Content
  • Font family
  • Font weight
  • Font size
  • Text color
  • Link color
  • Align
  • Line height
  • Letter spacing
  • Text direction
• Block Options
  • Padding
  • All sides
  • More options