The Staffbase Email Designer allows you to create mobile-responsive emails effortlessly. You can add images with the Email Designer as a powerful way to bring your emails to life. The Email Designer offers two ways to control how images are sized and displayed: cropping individual images and using block layouts.
File Types and Sizes in Staffbase Email
- My Files in Staffbase Email supports multiple image format types.
- The maximum supported image size is 25 MB.
- The recommended width for all images is 600-1000px.
When using GIFs, remember that on Outlook desktop versions before 2019, the GIF does not play entirely. Only the first frame is visible.
Cropping Images
You can resize, reframe, and reshape your images to fit any layout by cropping it. There are different pre-set cropping options.
For email header images, 16:9 works well across most desktop clients. For mobile-first designs, consider 9:16 or 1:1. Use Circle or 1:1 crops to create consistent, uniform images when placing multiple images side by side in your email.
- In the Email Designer, click the image you want to crop.
The contextual toolbar displays. - Click Edit Image.
The Edit Image dialog opens. - Under Crop, select the cropping option you want to apply.
- Optionally, enter Width and Height for exact pixel values or lock the aspect ratio.
- Optionally, select a Corner radius to round the corners and select a Background color for behind the corners.
- Click Apply.
You have cropped an image in the Staffbase Email Designer. You can crop the image again at any time.
Resizing With Block Layouts
Blocks are the foundation of your email layout. Each block can have between one and four columns, in a variety of width combinations. Elements like text and images live inside those columns and stretch to the full width of each column. You can use a block layout with smaller columns to make an image smaller.
You can achieve many different sizes with different block layouts:
Splitting and merging columns lets you create flexible, dynamic layouts that fit images of different sizes side-by-side, in the same row. For example, you can:
- Add a one-column block layout which spans the full width of your email.
- Split the column into two equal columns. Each column takes up half the available width.
- Use an unequal split (70/30 or 30/70) to make your image stand out more.
You can use Spacer elements to create negative space. For example, you can add space around an image and change the Spacer color from grey to white to make them invisible.
- In an Email, under Layouts, select the three-column block.
- In the middle column, click the + icon to add an image.
- Under Elements, drag-and-drop Spacer to the left and right of the block.
- Click the Spacers, and under Spacer Settings, adjust the color to the email background color. This makes the spacers invisible, while keeping your image centered.
Comments
0 comments
Please sign in to leave a comment.