The all-in-one platform
for internal communications.

Staffbase-Produkte für
Interne Kommunikation.

Articles in this section

Overview of the Staffbase Email Designer

Avatar
Christiana Nimtz

The Staffbase Email Designer allows you to create mobile-responsive emails effortlessly. Just drag and drop ready-made blocks containing titles, paragraphs, columns, videos, quotes, and more directly into your design. The My Files integration makes sharing and uploading media files even easier, giving you quick access to all the visuals you need. Learn everything about the Email Designer in this article.

The Staffbase Email Designer consists of three main areas:

Designer Panel 

Editor and Preview Area 

Settings Panel 
Use the designer panel
to select layouts,
elements,
and quick blocks
based on your
requirements. ↓ 		Use the editor and preview area to design your email by dragging and dropping layouts, elements, and quick blocks from the left panel.

Simply, select an element and customize its settings on the right panel to configure it to your needs. ↓

 Use the settings panel
to further configure the
layouts,
individual blocks
or elements
of your email. ↓
Designer_overview.png

Designer Panel

Explore the sections below to learn how to design and optimize your emails with layouts, content blocks, and interactive elements.

View

EmailDesigner_Quote (1).png

Use this toggle, to easily switch between the design mode and the preview of your email.

In the preview mode, you can additionally choose between the preview for desktop or mobile devices.
Actions.png

You can also download your email as an HTML file.

Actions

Use the arrows to undo or redo your last change. You can also download your email as an HTML file.
EmailDesigner_actions (1).png

Layouts

Designer_Layout Blocks.png

In the left panel, select the layout for each block you want to add to your email. Choose between one and four columns per block with different widths and combinations. Either click the layout you would like to use, or drag and drop it exactly where you need it in the editor.

The entire email layout consists of blocks. Your email can be a single block or a combination of several blocks.

 

If you click a block, the block settings are displayed in the right panel and you can:

  • Decide if you want to apply changes only to the selected blocks or to all the blocks used in this email
  • Lock/unlock a block (a locked block cannot be moved, its content cannot be edited)
  • Move the block up or down, duplicate the block, or delete it
  • Adjust the outer and inner background color of the block
  • Adjust the top and bottom spacing of the block
  • Adjust the column widths
 Block Settings.png
When you click on an empty block in the editor, several context menus display:

designer_blockContextMenu.png

Here you can:

  • Lock/unlock the block (a locked block cannot be moved, its content cannot be edited)
  • Select/deselect the block
  • Directly add elements to the block via the blue plus icon
  • Move the block up or down
  • Copy or delete the block
  • Merge or swap the blocks with their neighboring blocks via the gray arrows under the blocks

Elements

In Staffbase Email, you can enhance your email design by adding and configuring various elements detailed in the following tabs. Learn how to configure each element and make the most of your email design!

Text Element.png Start Typing Here.png Text Settings.png

Once a text element is dropped into your email design, you can double-click and
edit it.

Using the blue content menu icons, you can also:

  • Move the element
  • Copy the element
  • Delete the element
If you click a text element, the text settings are displayed in the right panel and you can:
  • Adjust the spacing
  • Add a table of contents
Image Element.png Designer_ImageElement.png Image Settings.png

Once an image element is dropped into your email design, you can
double-click it
and upload an image from My Files.

Using the blue content menu icons, you can also:

  • Move the element
  • Copy the element
  • Delete the element
If you click an uploaded image, the image settings are displayed in the right panel and you can:
  • Adjust the spacing
  • Open My Files to replace the image
  • Remove the image
  • Enter an image redirect link
  • Enter an alternative text
Button Element.png designer_button.png Button Settings.png

Once a button element is dropped into your email design, you can click it and open the button settings in the right panel.

Here you can:

  • Adjust the spacing
  • Edit a button link
  • Adjust the button text
  • Adjust the font, size, line height, color, and style of the button text
  • Adjust the width, height, corners, alignment, and color fill of the button

Using the blue content menu icons, you can also:

  • Move the element
  • Copy the element
  • Delete the element
Video Element.png designer_video.png Video Settings.png

Once a video element is dropped into your email design, you can click it and open the video settings in the right panel.

Here you can:

  • Adjust the spacing
  • Add a video link
  • Add an image from My Files as a video thumbnail
  • Select the color of the play button (black or white)


Using the blue content menu icons, you can also:

  • Move the element
  • Copy the element
  • Delete the element
Spacer Element.png designer_spacer.png Screenshot 2025-02-24 at 13.13.12.png

Once a spacer element is dropped into your email design, you can click it and open the spacer settings in the right panel.

Here you can:

  • Adjust the height
  • Select a color

Using the blue content menu icons, you can also:

  • Move the element
  • Copy the element
  • Delete the element
Social Links Element.png Designer_SocialLinks.png Social Links settings.png

Once a social links element is dropped into your email design, you can click it and open the social links settings in the right panel.

Here you can:

  • Adjust the spacing
  • Adjust icon style, size, and alignment
  • Add further social links like LinkedIn or Slack
  • Add links for all platforms you selected

 

Using the blue content menu icons, you can also:

  • Move the element
  • Copy the element
  • Delete the element

Quick Blocks

Quick blocks in Staffbase Email allow you to easily add structured pieces of content providing a consistent layout and saving time by eliminating the need to format content manually. Each quick block is fully customizable. Learn how to configure each quick block and optimize your email design!

Headline.png

Headline 

Once a Headline quick block is dropped into your email design, you can click it and edit the placeholder texts. The headline quick block consists of several text elements. Learn more about the text elements above.
NewsBlock.png

News 

The News quick block is only available if you have the Employee App or Staffbase Intranet, and if Staffbase Email is used together with the App or Intranet. It is not available for Email Standalone customers.

Once a News quick block is dropped into your email design, you can click it and open a list of the last published news posts on the right. You can search the list using keywords. Select the news post you want to include in your email by clicking or dragging it to the news quick block.

A thumbnail image, the article’s title, and the article’s teaser text are copied into the block, as well as a link to the article itself. If the article has no image or the article’s teaser text is blank, you can add your own image and teaser text in the news block. You can also edit all texts, including the link text.
Image Paragraph.png

Image Paragraph 

Once an Image Paragraph quick block is dropped into your email design, you can click it and edit both the image and text placeholders. Learn more about image elements and text elements above.
Image Text Columns.png

Image Text Columns 

Once an Image Text Columns quick block is dropped into your email design, you can click it and edit the images, the text placeholders, and the buttons. Learn more about image elements, text elements, and button elements above.
VideoText.png

Video with Text 

Once a Video Text quick block is dropped into your email design, you can click it and edit the video and the text placeholders. Learn more about video elements and text elements above.

Table.png

 

Table 

Once a Table quick block is dropped into your email design, you can click it and edit the table. Use the context menu to:

  • Insert or delete columns
  • Insert or delete rows
  • Choose header columns or header rows
  • Merge cells

To edit text into a cell, select the cell and start typing.

Table.png
Quote_Block.png

Quote 

Once a Quote quick block is dropped into your email design, you can click it and edit text placeholders for both the quote and the author. Learn more about text elements above.
Designer_Spacer (1).png

Spacer 

Once a Spacer quick block is dropped into your email design, you can click and edit it. Learn more about spacer elements above.
Social Links Block.png

Social Links 

Once a Social Links quick block is dropped into your email design, you can click and edit the placeholder text and the social links. Learn more about text elements and social links elements above.

Editor

Designer_NoContent.png

Start designing your email by clicking or dragging quick blocks or layouts from the designer panel into the editor. When you select an element in the editor, the related settings display in the right panel, and you can adjust them based on your requirements. 

Related articles

Comments

0 comments

Please sign in to leave a comment.