Skip to main content
Mozzaik365 becomes Jint — new identity, same mission. For more information, click here

Search

Welcome to the support center

Designing & Building Newsletters

Support Jint
  • Updated

This guide is the complete reference for the Newsletter Studio editor. While the "Getting Started" guide covers the basics, this document explores every component and setting available to help you create rich, professional, and on-brand newsletters.

 

1. Structuring Your Newsletter

The foundation of any great design is its structure. Newsletter Studio provides powerful and flexible elements to build your layout, which can even be nested within each other for advanced designs.

 

The Page

This is the top-level container for your entire newsletter. By clicking on the background of the canvas, you can access the global Page settings in the right-hand panel.

  • Email Subject: The title of your newsletter as it will appear in a recipient's inbox.

  • Theme Color: A global color choice that will be applied to elements like buttons and links by default, ensuring a consistent look.

  • Global Font (New Feature): To ensure brand consistency, you can set a global font for your newsletter. This font will be applied to all text components by default. You can choose from the following 9 email-safe fonts:

    • Arial

    • Helvetica

    • Times New Roman

    • Georgia

    • Tahoma

    • Verdana

    • Courier New

    • Trebuchet MS

    • Segoe UI (default)

 

Sections

Sections are the primary horizontal containers that divide your newsletter into logical parts. Think of them as building blocks that hold all your content. Each Section has its own settings, allowing you to control its background color and its padding, which helps create visual separation.

Here is an example of a section with a red background color

Columns

Columns sit inside a Section and allow you to divide it vertically. This lets you place components side-by-side.

The Columns component has two key settings:

  • Size: Controls the number of columns, from one to four.

  • Stack columns on mobile: This critical responsive setting controls how your columns behave on mobile devices. When enabled (the default), columns will stack vertically on mobile, ensuring content is readable one after another. If you disable it, the columns will attempt to remain side-by-side, which can cause content to appear very small on narrow screens.

Example of column component

 

2. Content Components

These are the elements you will drag from the left panel onto your canvas to build your newsletter.

Text and Title

  • What it is: The primary components for adding all written content.

  • Settings: You can customize the font family, size, style, color, alignment, and spacing for any piece of text.

Button

  • What it is: Creates a clickable button to direct readers to a specific webpage.

  • Settings: Customize the button's text, destination URL, colors (background and text), and alignment.

Image

  • What it is: Adds visual appeal to your newsletter.

  • Settings: You can upload an image from your computer or insert one using a URL. You can also adjust the spacing around the image.

Profile

  • What it is: Integrates a user's profile card directly from your organization's Entra ID directory. Perfect for author signatures or highlighting an employee.

  • Settings: Customize the alignment and layout (e.g., information below or next to the photo).

3. Special Focus: The News Component

The News component is one of the most powerful features, allowing you to seamlessly pull content from your SharePoint sites.

 

Adding and Managing News

When you drag the News component onto your canvas, a selector appears, allowing you to browse and select articles from across your SharePoint environment. You can add and remove the news items directly in the selector.

Layout Options

The component now offers two distinct layouts for greater design flexibility:

  • Vertical: The classic layout, ideal for stacking articles in a list.

  • Grid : A new layout that displays news side-by-side. This is particularly effective when the component is placed in a full-width section. Note: The news component cannot be used in three or four-column grid layouts.

Vertical news layout

Grid news layout

 

Mobile Responsiveness

The News component is fully responsive. To ensure the best reading experience, it will always display in the vertical layout on mobile devices, regardless of the desktop setting. You can preview this using the mobile view toggle in the editor.

 

4. Editor Best Practices

  • Drag and Drop: The core mechanic is simple: drag any component from the left panel and drop it onto the canvas.

  • Use the Outline: For complex newsletters with many sections and columns, the Outline panel (at the bottom left) provides a tree view of your structure, making it easy to select and rearrange items.

  • Preview Often: Use the desktop and mobile icons at the top of the canvas to frequently check your design on different screen sizes.

  • Auto-Save: All your changes are saved automatically in real-time, so you can work with confidence.

 

5. Working with Images: Specifications and Best Practices

To ensure your newsletters look professional and load quickly for all recipients, please follow these guidelines when using images.

 

Layout & Dimensions

  • The maximum width of the newsletter body is 600 pixels. Any image placed in a single-column section should ideally be prepared with this width in mind.

 

Supported File Formats

  • For Modern Email Clients: JPEG, PNG, GIF, SVG, AVIF, WebP

  • For Classic Outlook Clients: JPEG, PNG, GIF

    • To guarantee compatibility for all users, sticking to JPEG, PNG, or GIF is the safest option.

 

Image File Size

  • Maximum Limit: You can upload an image up to 25 MB.

  • Recommendation: For a better user experience and fast loading times, we strongly recommend optimizing your images. Ideally, individual images should not exceed 2 MB.

 

Resolution for High Quality

💡 Pro Tip for Sharp Images: To ensure your images look sharp and avoid pixelation on high-density displays, we recommend uploading images that are twice the size of their display container.

Example: For a full-width banner that will be displayed in a 600-pixel wide area, an image that is 1200 pixels wide is recommended for the best quality. The browser will scale it down perfectly, resulting in a crisp image.

 

What's Next?

Now that you've mastered the design tools, the next step is to get your newsletter to your audience.

Comments

0 comments

Please sign in to leave a comment.