Design Workflow Blog

Blocks Edit how to's

For additional walkthroughs, check out the Blocks Edit help docs.

A screenshot of adding a link in the visual editor, with the local page dropdown.

How-to: browse your site while editing

Browse pages and make edits in the editor before publishing

Abstract icons of 15 commonly used web page design patterns.

Starter page components theme

30+ standard web content design patterns, based on hundreds of real-world websites, landing pages, and forms.

Example menu being edited in Blocks Edit.

How-to: website navigation

A much simpler approach to setup website menus in a CMS.

Screenshots of Blocks Edit and Taxi for Email.

Switching from Taxi for Email

Transitioning your design system from Taxi for Email to Blocks Edit.

Saleforce Content Builder screenshot with a cross over it.

Salesforce content editor alternative

Building emails and pages using a visual editor that connects to Salesforce Marketing Cloud Content Builder and CloudPages.

Some examples of the components included in the Starter page boilerplate template.

Starter page boilerplate

Our open source skeleton template that uses modern HTML and CSS code techniques as a starting point for developing custom landing pages.

Abstract icons of 15 commonly used email design patterns.

Starter email components theme

Featuring 10 standard email templates built from common design patterns that come from referencing hundreds of real-world emails.

An illustration of the Blocks Edit editorial workflow: content creation, editing + review, design changes, review + approvals.

How to: team editorial workflow

The content review process in Blocks Edit and how your coworkers can be a part of it.

A screenshot of the Blocks Edit visual template editor with an example template.

How to: the Blocks Edit template format

A single HTML page consisting of modules with placeholder content.

A photo of a board of pinned pieces of content for a magazine.

How to: pin content to use later

Save sections of content you put together to reuse in emails, update saved content, and keep your library organized with groups.

An abstract illustration of integrations connecting to workflows.

How to: workflow integrations

Transfer image assets to your host of choice, connect to your current platforms, and utilize your organization’s single-sign on.

Graphic with titles for Text, Links and Images and their icons.

How to: editable content

Video walkthrough of making text and images editable, and how links work.

Graphic with titles for Sections, Components and Regions and their icons.

How to: modules

Video walkthrough of how to setup sections, components, and regions.

Five screenshots from the Blocks Edit visual editor: left top, an example of a notice for an image that doesn't have an alt tag; left middle, a notice for a URL that was evaluated as being broken; left bottom, a modal with tracking parameters for a link; right top, a comment being posted, right bottom, a checklist of reminders.

How to: quality control

Checks and balances we put in Blocks Edit to help your emails achieve their greatest potential!

Screenshot of a video screen capture showing an email template example.

How to: template updates workflow

Maintaining updates to your template while working on emails.

Screenshot of the revision history Blocks Edit feature.

How to: revision history

Undo and save states in Blocks Edit allow you to go back to previous edits of any of your emails.

An example of an email design system and its modules.

How to: using your design system

How Blocks Edit works with your brand guidelines and design system.

A screenshot of the Blocks Edit editor with inline image editing options.

How to: image formatting options

How images get placed and formatted within your content using Blocks Edit.

A screenshot of the editor showing personalization editing options.

How to: personalization and segmentation

Making your content dynamic with custom ESP code in Blocks Edit.

Screenshot of Blocks Edit link tracking feature.

How to: link tracking

Automatically append tracking parameters to your email URLs in Blocks Edit.

Screenshot of Blocks Edit section pinning feature.

How to: reusing content pieces

Working with content, modularly in Blocks Edit.

Screenshots of image options throughout Blocks Edit.

How to: using images

Working with images in Blocks Edit easily and automating common tasks.

A bunch of text formatting interface options with a big red restricted icon over them.

How to: limiting text formatting options for better results

Text formatting options the Blocks Edit way.

Screenshot of the sharing and exporting process in the Blocks Edit editor.

How to: sharing and exporting workflows

Sharing during editing and review, and how export options work in Blocks Edit.

Screenshot of example code with Blocks Edit tags highlighted.

How to: using editable tags in your dev workflow

How Blocks Edit editable tags fit into any email development workflow.

Diagram of the template, email, layout hierarchy in Blocks Edit.

How to: building a template for reuse

The email template design system model in Blocks Edit.

An example email with its associated MJML code snippet.

How to: using editable tags in MJML email templates

If you use MJML to code your email templates, here's how to add Blocks Edit editable tags to your MJML template code.