Building Content in Beefree

In this quick start guide, we'll briefly cover all of the features inside of the Beefree builder. 

If you're looking for something else, check out our other guides:

• Navigating Beefree
• Managing Designs
• Professional, Business & Enterprise
• Glossary

When you open the builder, there are two primary sections:

• Stage, which is where you drop content blocks and rows while designing. This is the section on the left side of the screen. 
• Sidebar, which is where many of the design elements can be customized. This is the section on the right side of the screen.

There is an icon that separates the builder stage and the sidebar. You can use this to minimize the sidebar at any time. 

To begin designing on the stage, you must select a design element from the sidebar. The sidebar includes three tabs to help you create content.

Settings

The settings tab allows you to set defaults for your entire design. When working with rows and content, those design elements inherit these settings. 

You can use the settings tab to modify the following options:

• Content area width
• Content area alignment
• Background color
• Content area background color
• Background image
• Default font
• Link color
• Language (optional)
• Configure Favicon (optional - Pages only)

Rows

Rows are the primary structural element for designs created in the Beefree builder. Within your rows, you can customize the column structure. With a multi-column row, you can place content side-by-side in your design. Most importantly, rows act as a container for all of your content blocks.

The following options populate in the sidebar when working with rows:

• Row background color
• Content area background color
• Content area rounded corners
• Content area border
• Do not stack on mobile
• Reverse stack order on mobile
• Row background image
• Row background video (Pages only)
• Hide on

As mentioned above, rows can include columns as well. As a result, there is a second section called Customize columns. You can use this section to modify the column structure. There is an +Add new button you can use to insert new columns. A separator icon populates between each column. Click and drag the icon to change the column structure.

For each individual column, you have the following options:

• Column background color
• Padding
• Border

To toggle between columns, click on the column in the sidebar you want to modify. The selected column is highlighted in purple.

For more information, refer to the following articles:

• Settings, Rows, and Content: How do they work?
• How do I select a row vs. content?
• How do I change the properties of a row?
• Column management

Content

There are many several content blocks you can use while designing in the Beefree builder. All content blocks include padding settings and hide-on settings in the sidebar. 

Below we've listed all the available content blocks. Click the name below to learn more about the associated type of content block.

• Title
• Paragraph
• List
• Image
• Button
• Table
• Divider
• Spacer
• Social
• HTML
• Video (separate documentation for using videos in emails and pages)
• Icons
• Menu
• Sticker
• GIF
• Forms (Pages only)

Mobile Design Mode

By default, the builder stage mimics what your design will look like on a desktop device. However, you can also use mobile design mode to build your content. This design mode uses a stage that mimics what the design will look like on a mobile device.

Most of the edits you make in mobile design mode are reflected on both the desktop and mobile versions. However, certain elements are marked with a mobile icon in the sidebar. These settings will only apply to the mobile version of your design.

For further information on this design mode, please see Mobile design mode.

Preview

The preview feature is fairly self-explanatory. You can use this feature to see what your design might look like on a mobile or desktop device. You can also use the dark mode toggle to see how dark mode settings may impact your design. If using display conditions, you can also preview how they will impact your design.

Note that the preview is an approximation based on the most popular devices and programs. This is particularly important when working with emails or using dark mode preview. Devices and email clients have different settings causing your design to render differently.

For further information, please see:

• Dark Mode Preview
• Email client support

Next: Team & Enterprise