Blocks Edit Design and Workflow Blog

How-to: browse your site while editing

2026-03-31T00:00:00Z

Your dashboard has all of your website’s pages. It allows you to manage pages, add new ones, and go into the editor to make changes to them, without having to publish until you’re ready to.

Browsing and editing

When going into the visual editor, you see a preview of your page before going into edit mode. While in preview mode, you can browse through pages you’ve created in Blocks Edit for your site. And go into edit mode to make any changes as you’re browsing.

This allows for times when you need to review multiple areas on your site that need changes and you want to preview how those changes come together. It also gives you the opportunity to review the changes with your team.

Local links

In order for you to browse your pages, you need to make sure your local links are setup properly. A local link is just a link to any page within your site. In the Blocks Edit editor, there’s an easy way to add a link to any page on your site by using the local pages dropdown when you add a new link. So you don’t have to remember exactly what the path for your link is.

When choosing your page from the dropdown for the link, the link path is automatically added based on the slug variable for your page. A slug is what’s used for the path in the URL of your page. If you want to change your slug variable for any page, go to your page’s settings, located in the side bar while in edit mode, and click on the Meta tab for the page slug field.

Browsing and editing gives you full control of your pages and making edits to them, while keeping your site in a browseable draft mode until you’re completely ready to publish.

Setup your website HTML in Blocks Edit to start building and browsing pages.

Using modern web images

2026-03-26T00:00:00Z

Artifacting comparison of the compatible web image formats at 4x zoom.

The standard image formats for the web are JPG, PNG, and GIF. JPG allows for compressing photos, GIF are usually for short (pixelated) animations, and PNG are for transparent, or flat graphics.

In recent years, WebP and AVIF have come along in an attempt to offer better compression and smaller file sizes. At this point these formats are compatible across browsers and operating systems, including desktop and mobile. And major graphics editing tools support them as well.

Formats compared

For a simple comparison test, I took an abstract image at 2000x1200 pixels. Using Pixelmator, I exported the image into the five compatible web formats. In this blog post’s featured image, you can see a zoomed in portion that shows the difference in compression quality for each. These were the file size differences:

JPG - 260KB, at 80% compression quality
PNG - 2.3MB, with advanced compression
GIF - 1.3MB, standard GIF compression
WebP - 161KB, at 80% compression quality
AVIF - 469KB, at 80% compression quality

Between quality and file size

Based on the numbers, WebP is the lowest in file size. But JPG isn’t that much higher. Somehow AVIF is considerably higher. And PNG and GIF are way too high. Which is why what's in the image is what should decide the format you go with.

Between JPG, WebP, and AVIF, you can see that AVIF is the sharpest, with WebP having some noticeable compression artifacts, and JPG having the most artifacts. So based on quality and file size, it would seem like WebP is the best option in this case.

Artifacts and pixel density

However, the artifacts are shown at 4x zoom of the original image. Zoomed out, and viewed at 2x pixel density, I honestly cannot tell the difference between the three formats. Which is why I go down to 80% quality when exporting because the 2x pixel density essentially makes it so you can’t see the artifacting!

Your results may vary, there is no one-size-fits-all answer. But to me, I’m not sure how much the newly added WebP and AVIF formats are really making a difference for the web. And anecdotally, it’s rare that I come across sites that use them at all.

Blocks Edit supports any web image format, including the modern ones, and will automatically scale uploaded images to the set placeholder image size, and compress them.

Modern responsive image sizing

2026-03-16T00:00:00Z

The img srcset property was introduced to address using alternate images on mobile devices. It seems straightforward enough: the same img HTML tag, with added image source definitions.

But in practice of managing a website, it can get complicated. Do you need to use alternate images for all of your site’s images? And what sizes should the images be? Here’s the approach I take to keep things simple.

Images that need responsive versions

We should first review where we need alternate image sizes for website images in the first place. For things like logos, icons, and illustrated graphics, we can now use vector SVG’s which don’t require any responsive adjustments. This applies for any design elements that may be used within the interface. This narrows the types of images that need alternate sizes to just photos and illustrations that are GIF/JPEG/PNG (or WebP/AVIF) files.

When allowing for designs to be responsive, it’s common practice to utilize columns for your layouts. And it’s likely that we have two or three column layouts that collapse to a single column on mobile. For images used in these layouts, it generally makes sense to just use the same image across layouts as it’s likely pretty close in size for each adjusted layout. Your image should not be the exact size of your columns to begin with, but an approximate that can fluidly get resized.

So this essentially leaves us with just large hero images that need alternate responsive sizes. (This blog post has this type of image.)

Sizing responsive versions

Taking into account screen pixel density for our images, it’s a given that all of our images should be 2x in size as all screens we look at are now higher density. We really no longer need to save non-2x images at all.

Deciding on each of our image sizes can be roughly based on screen sizes: mobile, tablet/smaller screen, and larger screens, along with the width of the content container your image is part of. For example:

1,200 pixels wide for mobile, filling up the screen width
2,000 pixels wide for tablet/smaller screens, or within a content container around 1,000 pixels wide
2,400 pixels for larger screens/within a container of around 1,200 pixels

Given the above, here's all the code we need:

The browser decides what image sizes to use based on the current screen’s width. Remember to set a backup image in src which can just be the medium size. Keep the number of sizes to three. The goal is to reduce load times by keeping file sizes small. Having many precise image size options is unnecessary since the file size difference between each size could be inconsequential.

You can use Blocks Edit to automate the sizing of your images for responsive sizes when you use the img srcset option in your theme.

Dark mode made easy

2026-02-19T00:00:00Z

The oft touted benefits of dark mode are iffy. And usage stats are tough to pin down, but some sources show as much as 60% of users on desktop and up to 80% of users on mobile prefer using dark mode. Dark mode has become a standard for websites to include as part of their design.

Adjusting your website design for dark mode can be a lot of work as it entails an alternate color scheme for every element of your design. This potentially means a lot of added CSS for each element, and HTML for swapping out content like images. Here are two core techniques to help make the process easier, including for future updates made to design elements.

Global color scheme

Start by developing a color palette for the regular version of your site to use consistently across your elements. If the colors for your layout components are used to define depth, like navigation that stands out over content, include those definitions as part of your palette.

Once you have your palette, in your CSS, set your colors as global variables:

:root { --content-tone-1: #444; --content-tone-2: #ddd; --content-tone-3: #111; --background-tone-1: #f1f1f1; --background-tone-2: rgba(255,255,255, .5); --background-tone-3: #fff; }

And use the variables you set throughout your elements:

h3 { color: var(--content-tone-1); }

By doing this, you will be able to use the global CSS colors to apply dark mode versions for them:

:root { @media (prefers-color-scheme: dark) { --content-tone-1: #aaa; --content-tone-2: #666; --content-tone-3: #ddd; --background-tone-1: #222; --background-tone-2: rgba(0,0,0, .2); --background-tone-3: #111; } }

This applies your colors to all the elements that use your variables!

Content swapping

When converting your design to dark mode, you’re basically putting content on black, instead of on white. This means that while your text will likely be white, not all of your content or components need to change. Most accent colors can work on both light and dark, especially for elements like titles and buttons.

This applies for images as well. For the most part, you should be able to keep the same images as light mode, especially for photos. You can also use transparent PNG’s and SVG’s for illustrations.

For certain images that may need dark mode adjustments, you can swap them out using the picture HTML tag:

Regardless of the size of your website, having these two techniques in place will greatly minimize the need for extra CSS and HTML for your dark mode adjustments.

For an example of the techniques above, check out the Starter web pages components template.

Automated navigation active state

2026-02-04T00:00:00Z

Having an active state for the current page in your navigation helps with usability, for your users to know where they are within your website’s architecture. Setting it up however, can get complicated. You can select it manually when creating your page in your backend system/CMS, or set up a complex menu system to match up your pages.

After years of having to deal with this on websites, I’ve come up with a technique that I wish I would have thought of sooner: a few lines of Javascript to automatically set an active state on links based on the current URL.

The code

The code is pretty straightforward: it finds all links on the current page and adds an “on” class to the link when it matches the current URL:

var currentURL = window.location.href;
var navItems = document.querySelectorAll('a');

function matchExact(r, str) {
  var match = str.match(r);
  return match && str === match[0];
}

for (var i = 1; i < navItems.length; ++i) {
  if (matchExact(currentURL.match(navItems[i].href), currentURL)) {
    navItems[i].classList.add("on");
  }
}

This approach works with any kind of navigation as it applies to the root of the link itself. And your navigation is likely the only thing that has a link to the page you are currently on!

You then set what the active state looks like via your CSS:

a {
  color: #0b72c7;

  &.on {
    color: #444;
  }
}

Extending it

If you need to, you can modify the code to target only your navigation. And change it to use the container around the link to apply your CSS class.

If you have a dropdown nav or subnav and you want to show both the current page and its parent as active, one way to do it is by utilizing the ul menu structure to determine the parent link and add an active state to it as well.

Check out the Starter components template that includes this technique as well as others to help with your web setup.

When to use forms in email

2025-12-03T00:00:00Z

Forms aren’t commonly used in email. Besides some technical limitations, users generally don’t expect interactive elements in an email, so they may ignore the functionality altogether. With this in mind, first decide if it’s better to stick to having your form on a landing page that the email links the user to.

Having a form in an email

That said, the user may be reluctant to leave their email inbox via a link to a form that they have to fill out. Especially when they don’t know what to expect from the form. Letting them know the length of the form in advance may be helpful for this. Or, this is where putting your form in your email may make sense.

To increase engagement, you’ll always want to try and keep your forms as short as possible. This is especially true with a form in an email. If your form feels like it’s getting long, you can consider splitting it, having just the first question, or a few questions in your email as a first step, with a next step button that goes to your landing page with the rest of the form.

A common practice for using forms in an email is to get some quick feedback. Like at the end of an order process or service. This normally entails a few multiple-choice fields and/or a short textbox. A single-question star-rating or up/down thumbs option can be done without even having to use a form, by just tracking the number of referral clicks.

Technical limitations

The majority of email clients support some level of form submission:

Of the clients that work, many only allow GET form method
Some allow POST, but require it opening a landing page
Yahoo and AOL on mobile iOS or Android do not support any form
All Outlook and Windows Mail also do not, except for Outlook on iOS

Since most of Outlook doesn’t allow form submission, you can use a fallback method that hides the form from all Outlook clients. This is especially necessary since it’s not just legacy Outlook that doesn’t support forms, but modern Outlook as well.

The HTML code below will hide your form content from all Outlook clients:

And you can show alternate Outlook content with:

Blocks Edit allows using your custom design and code to build your emails visually, including with form fields.

Multi-step form without the overhead

2025-11-19T00:00:00Z

A multi-step form is usually done in one of two ways. Either, via backend code that gets the data submitted with each step and passes it on to the server before going to the next one. Or, using Javascript to hide groups of fields that are shown as the user clicks to move on to the next step.

Using the GET method

A form mostly uses the POST method when submitting. But there is another form method that’s rarely used: GET. When submitting a form using this method, a query string is added at the end of the URL you submit to that includes the form’s data. Probably its most common use case is for a search results page where results are shown based on a query string variable.

Using GET works as a way to pass data from page to page, without requiring any kind of backend to do the storing and passing, or Javascript to hide and show fields. It’s a way to use built-in browser features without a bunch of overhead needed to setup. Just like how you can use browser validation, and other modern form field features.

How it works

You could build your form as multiple fully customizable static pages without needing complicated code for steps. And you can use the query string data for functionality like conditionals to show fields based on data a user submitted in a previous step.

By default, fields are only submitted to a query string to the next set page. In order to pass URL parameters across multiple steps/pages, here’s a Javascript snippet that creates hidden fields from submitted query string parameters in order to continue passing them to the next page:

window.onload = function() {
  var querystring = window.location.href.split('?')[1];
  var parameters = querystring.split('&');

  for(i = 0; i < parameters.length; i++) {
    var pair = parameters[i].split('=');
    var hiddenfield = document.createElement("input");
    hiddenfield.type = "hidden";
    hiddenfield.name = pair[0];
    hiddenfield.value = pair[1];
    document.forms[0].appendChild(hiddenfield);
  }
};

To keep in mind

Form data would not be submitted to its destination until the end of the form steps where it would do the POST to the server. This means that data is not stored anywhere along the way except in the user’s browser. There may be work arounds for this, like using cookies, but it’s something to be aware of for longer forms.

Also note that form field data is visible in the URL. While this isn’t a security issue, having a password field being shown is probably not a good idea. And if a user decides to copy and share the URL to your form, they may inadvertently include some variables they submitted in the form.

With Blocks Edit, you can make your custom form fields visually editable for your team to drag and drop them to build forms and submit to any platform.

Essential metadata for sharing a page

2025-10-08T00:00:00Z

Metadata for a page can serve different purposes. From setting the content’s language, to providing a short summary of the page’s content for search engines, and info for when the page is shared.

That last one has become the most relevant as it allows controlling how social media platforms output info for your page. Along with texting and chat apps, project management tools, and more. Here are the basics that should apply for all of them.

Metadata tags

Let’s start with the classic page tags that are used:

title tag - page title, used as a default for any platform/app
description - as part of default preview text
canonical - full URL with no extra variables like campaign referrer info
lang - needed mainly for non-english content

Open graph tags have become the standard for sharing links. These are the tags mainly used:

og:title - if you want to show as an override for your title tag
og:description - an override for your description tag
og:url - override for canonical tag
og:image - the preview thumbnail image

Some additional open graph tags are used by certain platforms:

og:site_name - the name for your site, it could also be the name of a section on your site, like the blog
og:type - use website for info pages, and article for blog posts, with more options available
og:locale - an override for lang tag

Preview thumbnail

While having a thumbnail preview draws attention when your page is shared on social media, it's not a requirement to have. The recommended usage is that you should only have one if there is relevant imagery on the page, like a feature graphic or photo. You can even point to the same URL as that feature image.

Text in the image should be avoided since the thumbnail image could be shown really small that the text would be illegible, or cropped in a way you can’t account for.

1200x630 pixels is the standard image size
Images can get scaled and cropped depending on the platform/app
JPEG, GIF, or PNG formats, with WEBP starting to get supported
Image file size shouldn’t exceed 5MB

In cases where you don’t have an image that can be used, if you have a fave icon set for your site, that may be used instead. You can use the apple-touch-icon meta property with an image of at least 180x180 pixels, or an SVG image. You can also create a preview thumbnail version to use as a backup for all pages on your site.

Bringing together all of the above, here's an example of this page's metadata used for sharing:


  
    
    Essential metadata for sharing a page

We don't include og:title, og:description, or og:url open graph tags since we want to just use the same content as the classic page tags.

Blocks Edit will pick up the metatags you use in your theme and allows changing them for each page.

Starter page components theme

2025-08-27T00:00:00Z

Our new Starter page components theme is a collection of over thirty web content components that came out of browsing through hundreds of websites! Components for your homepage, landing pages, blog, forms, and more.

Here’s what’s included in the theme. Different types of components serve different purposes but can be mixed and matched for different pages.

Feature sections

Skimmable sections for a homepage and landing pages.

Single-column - in its most standard form, this consists of a headline, a description, usually kept short, an optional image, and an optional call-to-action button.
Two-column - this can be a two-column version of the single-column consisting of title, description, image, and button. Or, an image can go on the left or the right side of the text and button.
Three-column - same as a single-column, but times three! Icons or simple graphics can be used instead of squeezing in images, or no images at all can also work. A secondary style for buttons works best here, or a text link.
Features grid - a listing of items, usually in multiple columns. If a call-to-action is used at all, it should either be in the form of text links for an item, or at the end of all the items.
Call-to-action - standalone section focused on taking an actionable step. This works best at the end of a page to act as a next step, but for longer pages, it can also go in-between content sections.
Testimonial - in the form of a quote followed by the author of the quote. A testimonial can be placed among other feature content sections, or as part of a section with multiple testimonials.

Article content

Ways to format content elements in an article.

Titles and intro text - the main title of the article and subtitles used throughout the article. Summary or intro text is often used to give more context to the title.
Bullet list - Providing a bullet list is a good way to make multiple points that are easier to digest their information and visually easier to read through.
Image with caption - where it makes sense within the article, an image is added in-between the text. Either an illustration or photo.
Pull quote - work well for highlighting certain ideas within an article that are particularly relevant.
Callout - a callout makes a piece of content stand out from the rest of the text. It can often include an illustration or photo.

Listings

A series of related items like articles, products, and events.

Article listings - would normally be part of an archive, on their own page, possibly with multiple pages for older posts. They would be ordered by date, with the latest posts at the top.
Product listing grid - depending on the type of product and the number that an online store may have, the details for a product listing could vary. But usually a thumbnail, the title, and a price are most commonly shown.
Event listings - An event listing would include the date, a title, and a link with info for how to attend the event. Events would also be ordered by date, but usually highlighting future events at the top, with the latest upcoming one first.
People listing grid - team members for an about page, business directory, etc

Forms

Fields to collect information, for contact forms, surveys, etc.

Landing page form - collect only info that is relevant to what your visitor is trying to accomplish; make it clear in your copy why the information is needed.
Contact form - should consist of a text area for the question/comment message along with a means to reply back to the person reaching out.
Feedback/survey - helpful for your product or service, allowing customers to share thoughts on their experience; questions can be in the form of multiple choices or as open-ended text areas.
Newsletter sign-up - an email address is all you need for a newsletter sign-up, with a good intro explaining why users would want to sign up and what they can expect from the newsletter.

Navigation

Different menu types.

Header - typically a horizontal bar across the top of your site, the most common place for your site’s primary navigation. It’s where visitors expect to look when deciding where to go on your site.
Dropdown - you can provide dropdown submenus for your main menu items. This allows the visitor to dig deeper into each of the top level sections of your site and find content that may be more specific to what they’re looking for.
Subnav - can also be added under the primary navigation once a visitor has clicked in to one of the pages of a particular section of the site. This allows them to see where they are and what related content they can continue to browse through.
Sidebar - instead of at the top, a submenu can go on the side, in a vertical list. This works best when the list of submenu items gets long and those submenu items also have submenu items!
Footer - for links to supplemental content you wouldn’t find elsewhere; additional categories of links, like social media; signup for your newsletter; or any needed legal copy.
Buttons - standard call-to-action

You can download the Starter page components theme for free and start using it to design and build your own web pages.

The Starter page components theme is included with new Blocks Edit accounts. Sign up for free to start using it in the visual editor.

Listing essentials

2025-08-14T00:00:00Z

Listings are essentially a group of related items, each item giving an overview of information, and usually including a call to action to encourage clicking through to. They offer an easier way for users to browse through collections that may otherwise be overwhelming to go through.

Blog archive

Along with other types of articles. Post listings would normally be part of an archive, on their own page, possibly with multiple pages for older posts. They would be ordered by date, with the latest posts at the top.

A listing of blog posts could have a post’s title, date, and a short description. And a link to go to the full blog post. It can also include a thumbnail image.

Filtered products

Depending on the type of product and the number that an online store may have, the details for a product listing could vary. But usually a thumbnail, the title, and a price are most commonly shown.

Products also tend to include menus of categories and other potential filters that are shown at the top or on a sidebar on the left. For example, t-shirts could include themes for categories, and filter by sizes available, or colors.

Upcoming events

An event listing would include the date, a title, and a link with info for how to attend the event. Events would also be ordered by date, but usually highlighting future events at the top, with the latest upcoming one first.

For an event that takes place over a longer period of time, there may be an agenda, and can be considered its own type of listing, with an overview for each time slot.

And more

There are many more kinds of listings that a page can have: team members for an about page, related products, product reviews, search results, property listings, a business directory, restaurant menus, etc.

For working examples of listings that you can refer to when designing your site, download our starter theme.

And check out our design essentials series for more examples and tips on using standard web elements.

Setup your own listings as visually editable components for your team to build out and edit pages with the Blocks Edit editor.

Article content essentials

2025-07-28T00:00:00Z

Breaking up content for blog posts and other types of articles (eg: help docs) makes the content more engaging to read and easier to skim through. From basic text formatting options to added images that accompany the text.

Titles and intro text

The main title of the article and subtitles used throughout the article. Summary or intro text is often used to give more context to the title.

Bullet list

Providing a bullet list is a good way to make multiple points that are:

Easier to digest their information
Visually easier to read through
Skimmable when going through the article

Image with caption

Where it makes sense within the article, an image is added in-between the text. Either an illustration or photo. And often-times, the image includes a caption that describes the image or photo.

Pull quote

Pull quotes work well for highlighting certain ideas within an article that are particularly relevant.

Callout

A callout makes a piece of content stand out from the rest of the text. It can often include an illustration or photo.

For working examples of article content that you can refer to when designing your site, download our starter theme.

Setup your own article content as visually editable components for your team to build out and edit pages with the Blocks Edit editor.

Feature content essentials

2025-06-26T00:00:00Z

Feature sections on a page highlight ideas in short-form content. They provide a format for content to be skimmed through and usually include a call-to-action, or links to further explore the idea. These different forms of content sections can be mixed and matched depending on the information needed on each page.

Single-column

In its most standard form, this consists of a headline, a description, usually kept short, an optional image, and an optional call-to-action button. A visitor skims the page to read the headline, looks at the related image, and reads the text for more info, then decides whether to take the next step by clicking on the button.

Two-column

This can be a two-column version of the single-column consisting of title, description, image, and button. Or, an image can go on the left or the right side of the text and button. The image on the left or right approach allows for having a listing of multiple sections.

Three-column

Same as a single-column, but times three! Icons or simple graphics can be used instead of squeezing in images, or no images at all can also work. A secondary style for buttons works best here, or a text link.

Features grid

A listing of items, usually in multiple columns. Because of the potential amount of items, icons can be helpful to differentiate between each one. If a call-to-action is used at all, it should either be in the form of text links for an item, or at the end of all the items.

Call-to-action

This would a standalone section focused on taking an actionable step. Typically in the form of a headline, short text, and a button. This works best at the end of a page to act as a next step, but for longer pages, it can also go in-between content sections.

Testimonial

In the form of a quote followed by the author of the quote. A testimonial can be placed among other feature content sections, or as part of a section with multiple testimonials.

For working examples of feature content that you can refer to when designing your site, download our starter theme.

Setup your own feature content as visually editable components for your team to build out and edit pages with the Blocks Edit editor.

How-to: website navigation

2025-05-29T00:00:00Z

Setting up navigation in a CMS can be a chore, especially if you have multiple menus. The approach to updating your navigation in Blocks Edit is the same as updating any other content: simple point and click inline editing.

Updating menus

Once your HTML design is editable, to update your menus, click on the edit icon next to your theme on your dashboard. You’ll go to a preview of your theme. Here you can make changes to the content of the frame of your site which includes the header and footer.

All menus are editable, including if you have a dropdown menu or a hamburger menu as well. To add items to a menu, use the duplicate option on one of its items. When you’re done with your updates, click the Save Content button at the top.

To apply the navigation updates to each page, go to the page you want to commit changes to, and look for the update icon at the top. Clicking it will save a new version of the page with the updates made.

Making your menus editable

When you’re setting up your design in Blocks Edit, you can make header and footer menus editable the same way you would any other piece of content, along with content that’s around the menus.

Use block-edit for editing text. And for adding menu items, use the block-repeat option on a region. When someone makes updates to the menus and applies the changes to pages, each page is rebuilt with the updates. If there are any design changes made to your HTML, it will include those as well.

For an example of editable menus in Blocks Edit, check out our Starter page components theme.

Website navigation essentials

2025-05-27T00:00:00Z

Navigation on a website can take many shapes and forms. Your site’s information architecture will help you determine the best way to organize content based on what your visitors are looking for. And being aware of the different kinds of menus that are available to you can help with deciding on the best experience for them.

Header

The header, typically a horizontal bar across the top of your site, is the most common place for your site’s primary navigation. It’s where visitors expect to look when deciding where to go on your site.

This header area also includes your logo in the upper left, and can include a secondary menu in the upper right, usually in the form of a call-to-action, like Sign Up.

Dropdown

Also in the header navigation, you can provide dropdown submenus for your main menu items. This allows the visitor to dig deeper into each of the top level sections of your site and find content that may be more specific to what they’re looking for.

The submenu, usually accessed by mousing over main menu items, can have just a list of links. Or, it can take the form of a mega menu, filling up more of the screen, where the list of items can be further broken down into categories and additional information can be provided for each of the links.

Subnav

Besides as a dropdown, a subnav can also be added under the primary navigation once a visitor has clicked in to one of the pages of a particular section of the site. This allows them to see where they are and what related content they can continue to browse through.

Sidebar

Or, instead of at the top, a submenu can go on the side, in a vertical list. This works best when the list of submenu items gets long and those submenu items also have submenu items!

Footer

Similar to the header, there are different ways to setup the footer of a page:

A listing of subpages without a dropdown
Links to supplemental content you wouldn’t find elsewhere
Additional categories of links, like social media
Signup for your newsletter
Any needed legal copy

Other menu formats

Hamburger menu - called a hamburger menu because it comes in the form of an icon that’s three horizontal lines on top of each other, it’s primarily used on mobile to open a website’s navigation though it can work on desktop as a way to simplify the header area
Breadcrumbs - horizontal list of links used to show hierarchy of pages and where the visitor is currently, with links to go up to parent sections
Link listings - commonly used on the main page of help docs, this format shows an overview of categories and subcategories

For working examples of website navigation that you can refer to when designing your site, download our starter theme.

Setup your own website navigation as visually editable components for your team to build out and edit pages with the Blocks Edit editor.

Modern form validation

2025-05-01T00:00:00Z

Now that browsers have form validation built-in, we can better use related form field CSS properties to improve the user experience. Add the more modern has() CSS property to the mix and you can replace techniques that previously required Javascript with just a few lines of CSS code.

Add an asterisk to required fields

Using an asterisk next to a form field label is a common way to indicate that the field is required. But instead of adding it manually, it would make more sense to show the asterisk automatically based on whether the field itself is actually required. Here's how to do just that:

form div:has(label + *:required) label::after, form fieldset:has(*:required + label) legend::after {
  content: "*";
}

A container is needed for each field and its corresponding label. For radio buttons and checkboxes, using fieldset acts as the container, and the field legend is used instead of label.

Highlight invalid fields

While the browser will prompt users if a required field is not filled out, or is filled out incorrectly, it does this only after the form is submitted. With the CSS below, this can be done on each text field, as the user is entering in their details.

form input:focus:invalid, form textarea:focus:invalid, form select:focus:invalid {
  border-color: #b91616;
  background-color: #f1e5e5;
}

The field textbox or dropdown is shown with a dark red border and light red background when the user clicks into a field and the field doesn't meet the required criteria. It also works for field types like email that need a specific format for its contents. You can go further and use :focus:valid to indicate when a field does meet its requirements.

Change submit button state

As further indication of the state of form fields, you can change the submit button to make it look like it's disabled until all required fields are filled out, and are valid:

form:has(*:invalid) input[type="submit"] {
  background-color: #aaa;

  &:hover {
    background-color: #aaa;
  }
}

This does not actually disable the button, it only changes its appearance. It still functions as a way to notify the user of which fields are missing information.

To see working examples of these techniques, along with other form field formatting options, check out our free Starter theme.

With Blocks Edit, you can make your custom form fields visually editable for your team to drag and drop them to build forms and have them submit to any platform.

Switching from Taxi for Email

2025-04-17T00:00:00Z

The Taxi for Email editor with the modules panel, and the visual Blocks Edit editor with drag and drop components.

Are you having issues or running into limitations with Taxi for Email? If you’re considering switching from Taxi, here are some ways to get started with Blocks Edit and transferring your setup.

Key features

Similar functionality that you can translate over includes the following. Click on each item for more info on how the feature works.

CDN for images - Blocks Edit allows you to use your own CDN of choice, with an integration to connect to your assets
Collaboration - invite team members for your organization and set different roles for them
Layouts - build your reusable templates of components
Personalization and segmentation - copy over your email provider tokens and segmentation code to use in Blocks Edit
Link tracking - add your link tracking parameters to use globally for your email links

Master template

The template setup for your email design is much easier with Blocks Edit. For example, here's the Taxi syntax for editing a piece of text:


  
  Headline

And here's the same editable text using Blocks Edit tags:

Headline

Adding Blocks Edit tags can be done via your HTML code, or via using the visual theme editor. Most of the work that you'll have to to do is removing the Taxi syntax from your code!

If you need help with your template setup, or with any part of the transition process, feel free to reach out to our support.

Request a demo and we’ll review your current workflow and go over what it will look like in Blocks Edit.

Email signature essentials

2025-04-02T00:00:00Z

Different examples of email signatures.

An email signature is essentially what’s shown at the end of an email you send to someone. It could be as simple as your name, or be used as a kind of business card, with additional information that may be useful to your recipient.

You can also customize the design of your signature, which is typically done in HTML. It allows for custom formatting, styling, and even images. Doing it in HTML gives you the most control over the look and feel to better match your brand, and works across email clients.

What to include

Here are some ideas of what you can put in your email signature:

Standard contact info like email address, phone number, website, and location/mailing address, if it seems relevant
Social media icons for different platforms you’re on
Company logo and other branding elements like a tagline, colors, and formatting
A photo of yourself is also common as a way to make your email feel more personable
A call-to-action like a link to schedule a meeting
A link to something engaging like a recent blog post, a big feature release, or an upcoming event

Adding to your emails

There are a couple of ways to add your signature to your email:

Your email client should have an option to add in a custom email signature in its settings. In some email clients, like Gmail, you can just copy and paste your signature. To do this, open the HTML file of your email signature in your web browser, highlight the full contents of the signature, or use the Select All option and copy it. Then paste in your email client signature box.

In some email clients, you can also copy and paste your signature directly in your email. Open the HTML file of your email signature in your web browser, highlight the full contents of the signature, or use the Select All option. Then in the email you're composing, paste where you want the signature to go.

For a working example of an email signature that you can refer to, download our starter theme.

Setup your own email signature as a visually editable component for your team to edit with the Blocks Edit editor.

Blocks Edit for websites

2025-03-04T00:00:00Z

The novel Blocks Edit approach of an HTML-only content management system is here, now available for building and editing websites!

The one and only visual theme setup

The steps involved in going from HTML design to content management system have just been reduced by an order of magnitude! Just import your HTML and your placeholder content becomes instantly editable. Use the visual theme editor to enable components.

Users can then drag in components and edit content inline to build and update pages. With an easy to use interface that prevents deviating from the intended design. And publish as static HTML, directly to a hosted server via FTP or CDN. No need for special server software.

Collaborative website updates

Also included are collaboration features to help reduce going between various tools during the review process among teams. From team commenting, to an activity timeline, revisions history, a checklist, and user access options.

With built-in functionality that helps with accessibility and all the important details. Plus the ability to save content pieces to reuse later, custom form building, automated image formatting, and more!

And you can use it completely free, with a fully-featured plan to import and build.

Blocks Edit update: instant editing

2025-02-26T00:00:00Z

The fastest CMS setup for email and landing pages now gets even faster, with the ability to start editing content right away, without having to setup anything! Just import your HTML email or page and content is ready to start making changes to.

Initial editing

After importing, you’ll see that text and images can be edited in the preview mode. Go back to your dashboard and you’ll be able to create new emails or pages with your imported HTML acting as a template. Make the changes you need to the text and images and export out the final HTML to use with your email provider or web host.

Further editing options

If you want to make adjustments to your editable content, you can go back to the visual theme editor from the dashboard by clicking on the edit icon next to the theme. Then click the Edit button at the top. You’ll be able to click on the different content pieces and disable ones you don’t want to be editable as well as set other options for each content piece.

Here you can also add components of the design that can be dragged in from the sidebar. Here’s an overview of everything you can do.

Instant editing in Blocks Edit is available to start using for your HTML designs. You can sign up for free and import now.

Modern form design

2025-02-19T00:00:00Z

In recent years, browsers have been adding more functionality for form fields. This includes built-in common practices and styling options to better customize the look of the fields.

It’s helpful to be aware of what browsers have to offer to build on top of instead of wasting time reinventing the wheel. Here are some of the most relevant updates that have wide browser support.

Built-in functionality

Standard usage patterns that have evolved over the years, browsers have decided to build in directly:

Browser validation - browsers now validate fields, even notifying the user of required fields, which can be done by just adding a required property to fields; no more Javascript needed and it’s fully-accessible!
Date calendar selection - browsers now include a mini calendar to select a date that comes up when using the input type="date" field; no more complex Javascript or dealing with potential mobile issues!
Semantic text fields - a text input field can be specified as email, url, or tel, which helps with form validation as well as showing a specific keyboard on mobile devices

Added styling options

And there is more flexibility for the design of individual form fields to better match the overall website design:

Accent color - define the color of selected radio buttons and checkboxes along with other form fields that have an accent color, by setting a color value for the accent-color CSS property in the :root
Radio button and checkbox size - you can now set the width and height of a radio button or checkbox to match the size of other fields
Select dropdown padding - and padding for a select field can also be set to better size and match other fields
File upload button styling - the button in the type="file" input that can now be styled to match your design (finally!) using input::file-selector-button

For examples of the above, along with other form field options, check out the free Starter theme.

With Blocks Edit, you can make your custom form fields visually editable for your team to drag and drop them to build forms and submit to any platform.

Form essentials

2025-02-12T00:00:00Z

Different examples of pages that have forms.

Forms are useful for collecting information from visitors. From a basic newsletter signup or contact form, to getting specific details to help with following up.

The first thing to keep in mind is to only ask for fundamental information. No one enjoys filling out forms so keep them short!

Landing page form

A landing page is a perfect example where you should keep your form as short as possible. Collect only info that is relevant to what your visitor is trying to accomplish. And make it clear in your copy why the information is needed. Many people may be hesitant to provide it.

You can always collect additional information at a later time. For example, if a user signs up for an account, you can have additional details for them to fill out in their account settings.

Contact form

A basic contact form should consist of a text area for the question/comment message along with a means to reply back to the person reaching out. Anything beyond that should state how it helps them get a better response.

A customer support request could ask for details to better review the issue the customer is having. Or they can choose from preset categories that would help direct the message to the right team. You can also ask for a screenshot that can be uploaded.

Feedback/survey

Getting customer feedback can be helpful for your product or service and allow for your customers to share their thoughts on their experience. Fields can be in the form of multiple choices or as open-ended text areas, or a combination of both.

You can make your survey multiple steps. For this, be sure to show an indicator of the number of steps for the survey and give an estimated time the user is expected to spend on the survey.

Newsletter sign-up

An email address is all you need for a newsletter sign-up. Include a good intro explaining why users would want to sign up and what they can expect from the newsletter.

For personalizing the emails you send, you can ask for the visitor’s name. You can also have a list of categories for the types of emails a user can choose to receive.

For working examples of form components that you can refer to when designing your pages, download our starter theme.

Setup your own form design as visually editable components for your team to build out and edit emails with the Blocks Edit editor.

Blocks Edit update: editable form fields

2025-02-05T00:00:00Z

Setting up a custom form on your site has just gotten easier with our latest update. You can now build out your forms from custom-designed fields that match your website branding. And easily set properties for your fields to submit to any form processor.

Component-based form building

Form fields work the same as other components in Blocks Edit. They are part of the left sidebar, ready to drag and drop into your page. Each form field has all the functionality needed to make a form work.

Clicking on a form field after dragging it in brings up options the same way as editing text or an image. These options include naming your fields for processing your form, and setting which fields should be required for validation. With additional customizable options based on the field type.

Designing form fields

Designing your form fields for use requires coding the HTML for your fields, with editable options that are completely flexible to your design requirements. The editable tags work around your code and allow for setting limits to the properties you want to enable for customization.

You can use either the visual theme editor to enable editable options, or view the help docs for the CSS classes to use for the tagging elements in your code. You can also refer to our Starter page components theme which features example form fields that are Blocks Edit enabled.

Form and form fields functionality is now available, ready to enable for your designs. Not signed up for Blocks Edit yet? Sign up to start using it free.

Modern email design

2025-01-23T00:00:00Z

Support for the legacy Outlook for Windows rendering engine is well on its way to being phased out. While the decision to let go of legacy Outlook is ultimately up to you and your email’s audience, it’s a good time to start looking forward to a whole new approach to how we code our emails.

Our workflow can now be more efficient and we can use more modern practices. And better focus our QA efforts.

Modern email coding

The two biggest aspects that affect email coding the most are that we no longer have to use tables or ghost tables, and we no longer have to put CSS styles inline among our HTML code (though it still needs to be included as part of the HTML). Both of these changes make our code cleaner to manage, and easier to understand as we’re working with it.

And we can now use more modern CSS techniques for our designs, with our HTML becoming more semantic for accessibility (as we eliminate so much nesting of containers). And we can focus our attention on dealing with other email headaches, like forced dark mode issues, and Gmail’s fragmented rendering issues across its email clients. (At least the maximum email length issue in Gmail now becomes less relevant.)

New testing methods

Testing is simplified now too. The top most widely used email clients are currently: Apple Mail, Gmail, and Outlook. Apple Mail can be used across different devices and generally offers a consistent rendering experience. Using a Gmail.com online account can cover a lot of Google’s email rendering. And Outlook.com can be used to test the updated Outlook rendering engine.

This also means less need for specialized email testing tools since you can cover the majority of users with the above clients. And you can test mobile and dark mode using these clients as well.

For some examples of modern email code, we’ve updated our boilerplate template and email components template to use modern techniques, with legacy code included that you can also reference.

You can code your email design any way you’d like and use Blocks Edit to enable visual editing for your team to build emails using drag and drop and inline editing.

The design of a design system

2024-11-11T00:00:00Z

For an effective design system that stands the test of time, start out by defining your goals for it. And make sure any thing you build for it, reinforces those goals. You also need a certain level of flexibility in your system to keep it creative and to allow for growth.

Define your goals

Design systems usually solve these four basic problems. You can pick one, two, three, or all four as your goals, but be specific on how they would apply to your organization and design process.

Scale - increase volume and speed of content
Consistency - improve accuracy accessibility and compliance
Efficiency - provide greater collaboration between teams
Quality - ensure brand and messaging governance

Make your system expressive

In the book, Expressive Design Systems, Yesenia Perez-Cruz talks about how to keep from making your design system too generic and keep your design components as stylistically unique as your organization's brand.

To do this successfully, your design system should include a component hierarchy and with thoughtfulness on how your brand gets expressed at each level and focus on the most essential elements of design: typography, color, and space:

Size - affecting how fast content is consumed
Scale - the size of elements relative to each other
Density - should the layout feel airy or compact
Weight - should the layout feel heavy or light

Along with achieving unity and cohesion, your design system should also embody a harmony by combining all of your design system elements to produce pleasing layouts. "...brand expression is more than your visual language — it's how all of your elements come together to communicate your brand voice." she writes.

For more on using a design system for your campaigns, check out our free guides for both landing pages, and marketing emails.

Blocks Edit provides a flexible approach to building from your design system of components, for teams to build and edit campaigns at scale.

Rolling out your design system

2024-11-04T00:00:00Z

There are two ways to rollout a design system. Either incrementally, or with a large-scale redesign. Unless there's a need to redesign your campaigns, you should go with an incremental rollout. Focus on not only building tools, but creating a shared language.

Your design system can be big or small depending on the size of your organization. Only build and document aspects that you need. Start small and build up.

Audit your current assets

Release small pieces of the design system at a time by first documenting design patterns from your current campaigns. This allows you to test your components in a real context. You can then start with common problems, like defining consistent headline options.

Organize a team that could help with gathering assets - this also helps develop a shared understanding of how to measure quality components
Start categorizing components - this will happen as you begin to find patterns of component types and helps define a language around your system
Take screenshots - besides individual assets, screenshots are a way to show examples of components used in their proper context
Keep branding in mind - how do components express your brand? How do they compare to brand guidelines? Are design elements consistent (fonts, colors, etc)?
Choose the right tool to keep assets in - it should allow for visuals, adding metadata and notes, and commenting

Collaborate with your team

Your design system is only as strong as your relationships with the teams who use it. You need to develop trust and allow for it to evolve by encouraging participation in its development.

Talk to people who will be using the system to find out what they need
Educate on value of using a design system based on problems it solves
Define a purpose to follow: how will the design system help, and who is it for
Align brand values and define principles of those values to refer to
If something is unclear, talk through and get feedback on how to further improve
Provide a point of contact, support ticketing system, discussion forum, etc
Include link to docs in other processes like company-wide demos and emails, etc

Start building and using an initial version of your system early as you continue to find patterns.

For more on using a design system for your campaigns, check out our free guides for both landing pages, and marketing emails.

With Blocks Edit, you can start using your design system at any point in the process, and regularly add to it while you continue getting campaigns out.

A primer on design systems

2024-10-21T00:00:00Z

A design system is essentially an organized way to produce campaigns more consistently. This could be as simple as a brand style guide, or it can get more complex, such as a collection of design patterns and assets.

How does a design system work?

The goal of a design system is to help your team scale design processes. With shared workflows and assets, your team can follow brand guidelines and be more efficient. It helps solve the following problems:

Maintains consistency with on-brand visuals and messaging
Fixes design and code debt with a reusable framework for increased efficiency and speed
Improves workflow, not having to reinvent the wheel each time by reusing components, keeping writing focused, and following best practices
Everyone can easily understand decisions made, while having to make less of them as they refer to a single source of truth for how to do things
Acts as a backup for when teams change (as people come in, or leave), with a shared repository of gathered knowledge

What to include in a design system

Branding

You can refer to your organization's current brand guidelines: a styleguide, logo requirements, etc. Any related design documentation that may be available. And any design patterns that are used for your marketing efforts.

Writing

The most important part of any campaign is the message it's communicating, the text itself. Your design system should include some guidelines around how copy is written. From the mechanics of the content, to the voice and tone.

Components

A good component is a) purposeful: all components solve a specific problem; b) reusable: components work for multiple use cases; and c) flexible: they work in many different contexts. The long-term benefit is that a designer can take greater care and give better thought to solving each solution instead of rushing to put together something that comes along.

Guidelines

Static components answer the how. Guidelines provide answers to: why, when, and where. "Can we?", "should we?", and "what if..." They should educate on constraints: workflows, habits, and best practices. Having this information leads to a reduced need for everyday problem-solving and decision-making.

For more on using a design system for your campaigns, check out our free guides for both landing pages, and marketing emails.

Blocks Edit follows design system principles and makes designs interactive and collaborative, for teams to build and edit using your custom components.

The landing page approach

2024-10-01T00:00:00Z

A landing page is typically defined as a page that you send your audience to from an email, ad, or other digital campaign. Its goal is to encourage users take an action like signing up, or buying a product. What makes a good landing page work is its focused messaging and call-to-action.

Website pages as landing pages

A homepage cannot be a landing page since its goal is to offer many directions a user can take within the site. While a landing page focuses the user’s goal towards a single action. But other secondary pages on a website can, and maybe should, apply landing page techniques!

Each page would focus on a single idea, and at the end offer an action to take. It could still be to sign up or to make a purchase when it makes sense, but it could also just be a next step to take that’s related to the content on the page. For example, a blog post could include a newsletter sign up for visitors who may be interested in getting future updates.

Landing page mindset

There are three key benefits that you get from your pages being more like landing pages, making them more focused and goal-oriented:

Clarity in messaging - a more narrow focus will make your content easier to digest for your audience
Audience segmentation - you can target different needs of different people when you get more specific, making your content more relevant
Improved search engine ranking - your content will contain keywords that are more niche and will appear higher in the long tail of search results

It also makes tracking results easier when there is a single goal to track on a page. You can see how traffic comes in and how it goes out via the call-to-action.

Speaking of call-to-action — if you want to make building your own landing pages easier, find out how our visual editor can help improve your team’s workflow.

Salesforce content editor alternative

2024-08-29T00:00:00Z

If you’re familiar with Salesforce’s Content Builder or CloudPages, you’ll have no doubt felt the frustration of trying to edit content for an email template or landing page. Either from the clunky visual editing experience, or with the limitations that you run into, require getting into the code to make an update.

We’ve felt this with our clients and decided to build our own editing experience with the Blocks Edit visual editor. Here are some ways we’ve focused on resolving the pain points that come with Salesforce’s content production experience and how you can integrate the editing workflow with your Salesforce account.

Better editing experience

Building an email or landing page in Salesforce requires working within their editing features which are very rigid when it comes to design options. The Blocks Edit visual editor takes a different approach. You can import any HTML email or landing page template to work with. You then enable the content you want to edit by clicking on regions in your template design. No coding needed!

You can also use Salesforce variables in your content and even add AMPscript among your content blocks. You can use an HTML template for any kind of email or landing page. Even create custom forms, or a subscription preference center.

No more limitations

The design limitations run deep in the editing tools in Salesforce. When trying to customize design options to match your branding, there’s very little you can do with the interface that you often have to get into the code to adjust. Or, you end up breaking the layout in some way, like the mobile version, that you have to fix something, usually again, by getting into the code.

By using a completely custom HTML template in the Blocks Edit visual editor, you don’t have to worry about those design limitations. And you don’t have to worry about breaking the design in any way as the editing options will only affect your content, leaving the design code intact.

Once you’ve put together your email, you can export it directly using our integration into Salesforce Marketing Cloud. Or, for landing pages, you can copy and paste the HTML and output it into your Salesforce CloudPages campaign.

Ready to get started? Find out more about how Blocks Edit will work with your current Salesforce setup.

5 core landing page techniques

2024-08-02T00:00:00Z

Different examples of branded landing pages.

At the bare minimum, you should make sure the branding of your email is consistent with your website’s branding. This also applies to your messaging. Beyond that, here are five key ways to better connect your landing pages to your email:

Relieve pain points - while your email introduces a problem and solutions you can offer, the landing page should emphasize tangible benefits from taking action
Design for taking action - the landing page should have a goal related to the email, such as: signing up for a trial, making a purchase, registering for an event, downloading content, or watching a video
Show, don’t tell - show the benefits of your product or service with photos, by describing use cases, and with customer testimonials/reviews
Keep the CTA simple - if you have a sign up form, only have a few initial fields, with any added required fields as a follow-up step
Build trust - include contact details and links to support content

Email is the best way to gain audience interest, as long as its done right. The above points are a good model to work from whenever you have a landing page that you want to setup for an email. And turn interest into conversion.

Build both on-brand emails, and landing pages using the Blocks Edit visual editor for the best way to produce your campaigns.

Emails with landing pages

2024-06-27T00:00:00Z

Every page on your website is essentially a landing page as you bring people in from search, social media, and your emails. However, the more traditional format for a landing page is based around a specific campaign and includes a goal, such as purchasing a product, signing up for a trial, or registering for an event/webinar.

Why email works best

Email marketing is one of the best ways to point people to these kinds of landing pages as your audience is already familiar with your brand and is interested in what you have to offer. They are more likely to click through than if they saw an ad, or a social media post.

Email also allows you to do more, like segment and personalize for specific audiences. You customize how you present your message. And your audience gets your message directly, unlike a search engine or a social media app acting as a middle-man.

Making them work together

Here are some best practices to keep in mind when sending out an email that includes a landing page:

Know your audience - what are their pain points, why did they sign up for your emails in the first place?
Match your branding - both your email and landing page should be consistent in design and messaging for a seamless user experience
Use basic email practices - include a good subject line, a clear message, and a strong call-to-action that links to your landing page
Landing page as an extension of your message - keep it straight-to-the-point since your audience already knows what to expect, but include additional points to reenforce the campaign goal
Use media on your landing page - added photos and even a video work well to further engage your audience
Use customer testimonials - especially if you’re selling a product
Include tracking in your links - from your email to your page, make sure to use ref, or utm variables to track your conversions

It’s tempting to try and include the goal for a landing page within an email to avoid the extra click. But if you utilize the benefits that emails and landing pages each uniquely have to offer together, that extra click is actually an opportunity for better results.

Blocks Edit allows you to build both on-brand email and landing pages, with a link tracking feature to bring them together.

54 marketing emails to send out

2024-06-11T00:00:00Z

Split into ten categories, these are standard emails to send out for products, services, events, and more. Both transactional and promotional emails.

Welcome/onboarding

The welcome email is sent as soon as your audience signs up, introducing who you are and what they can expect from your company. View examples

Welcome/account confirmation - your first email impression with your customer
On-boarding - steps for using your product or service which could be a series of emails
Email verification - having your users confirm their email address when signing up

Announcements

Announcement emails are a way to share and promote something new or updated with your business, product, or service. View examples

Product announcement - Create hype before the release by sending a teaser to existing customers
Product launch - show the product in action with the photos and videos to help your customers experience it virtually
Product guide - how-to tutorials, images of details, specs, and support information

Events

Educate your audience on an event's value and why it's worth investing their time in it. View examples

Event announcement - introduce the event, what makes it worth attending, and its date
Dive into the details - break down sessions with an agenda, speakers, and highlights on of what will be presented
Registration confirmation - confirms successful signup for event and provides next-steps
Reminder - reminds the person of the upcoming event and any last-minute information they should know about
What to expect from your appointment - details what the customer needs to do to prepare for an appointment
Live stream notice - notify users if your live event is being streamed online
Post-event recordings - include how your audience can access recordings of your sessions, if available
Request feedback afterward - ask participants for feedback on how the event went

Confirmation emails

Sent to audience to confirm something that has happened, like when making a purchase. View examples

Purchase receipt - details of order, expectation, and customer support contact
Delivery status - progress of delivery including shipping tracking info
Download link - for digital assets
Password reset - confirmation email for change of account password
Payment method update - confirming change of payment info

Subscription and payment

Customers expect to be notified by email about their account subscription and payment-related notices. View examples

Membership confirmation - highlights benefits and provides user-specific terms of membership
Free trial expiration - notifies recipient that their free trial is nearly over and tells them how to become a paying customer
Upgrade offer - if you offer a free plan, let your free members know about your premium options to enhance what they’re already doing
Auto-renewal - informs customer about the upcoming renewal of their service, with options to discontinue service or turn off auto-renewal
Account ended/cancelled - confirmation of membership having ended or being cancelled
Payment is due reminder - notifies the customer about an outstanding bill, triggered potentially at multiple intervals before and after payment is due
Renewed/payment received - if the customer has opted to renew automatically, you can send them a receipt email
Payment failure alert - informs customer that their payment method on file for a recurring service has failed and what they should do

Notifications

Activity notification emails for things like product updates or new content. View examples

Comment or message - someone posts a new comment response or sends a direct message to an account
New posts - an update is made to content that the customer chose to receive email notices for
Usage-specific - core activities made with your product, like taking photos, or writing articles
Login attempt - in cases where usage of an account seems abnormal, it helps to notify the customer
Product updates - important product/service features and changes
Service changes - updated terms or privacy policy changes
Save for later reminder - reminds customer of items they’ve chosen to add to a wishlist
Availability - let’s the customer know an item that they pre-ordered has been released
Back in stock - for products your customers showed interest in but was not available
Sale alert - tells customer an item they may be interested in is on sale to encourage a purchase

Promo and e-commerce

Capture subscribers' attention to prompt them to make a purchase. This includes upsells and abandon cart triggers. View examples

Upsell - providing customers additional product/service options based on options they are interested in
Browse/cart abandonment - when a subscriber browses a product category but doesn’t place anything in their shopping cart
Project abandonment - when a subscriber starts customizing a product or service but doesn’t complete the process
Checkout abandonment - when a subscriber doesn’t finish the checkout process

Helpful emails

Provide instructions, offer support options, and ask for feedback on your customer’s experience with your product or service. View examples

Care or installation instructions message - helps customer properly set up, install, use, or maintain their purchased product
Support request - confirming contact submission, with expected response timeframe
Quick survey option - a star rating system at the end of the email, or a thumbs up thumbs down format as “satisfied” and “not satisfied”

Engagement emails

Engagement emails pull in content, products, or services that relate with a previous action taken by an individual. View examples

Profile notices - let customers know to complete their profile and preferences that allow you to better cater to their interests
Nearly reaching milestone - lets customer know they are a number of points, purchases, or dollars away and highlights benefits they’ll receive
Reaching milestone - congratulates customer and goes over the added benefits they now have access to
Points or reward expiring - lets customer know that their points will expire soon and encourages them to use them
Loyalty program reengagement - triggered by a lack of usage, encouraging customer to get additional points
Product/service recommendations - based on general customer interests
Curated options - a collection of themed product/service options
Personalized recommendations - based on the customer’s previous purchases

Newsletter emails keep your readers in the know of news and updates, either on your product or service, or a specific topic, or both. View examples

Product/service updates - share what’s new to have your readers stay in the know
Curated info - focus on a particular topic that your readers are interested in

Need a starting point? Download these email components to use for designing and building your emails.

Starter page boilerplate

2024-05-20T00:00:00Z

The Starter page boilerplate template is what we use when we start coding any new design for a landing page.

The template code uses modern HTML and CSS techniques to make it accessible, compatible across browsers, and easy to work with. And it includes basic component examples based on most commonly used layouts and elements.

Modern HTML and CSS

The approach we take with our code is to use modern techniques that allow for the most flexibility. Both for design, and for being able to maintain the code long-term. Here are some ways that’s done:

Key header meta options that include mobile properties and dark mode
Open graph tags for previews used on social media and link cards
Column layouts using CSS grid
Standalone component examples for images, text, and buttons
Example layouts for various standard column formats

Basic components

The components included come out of common design patterns for landing pages. They provide structure for your design pieces and are mobile-responsive ready. Here’s what they can be used for:

Header and footer examples
Standard image with text formats
Two-column and three-column layouts
A four-column with icons and short text
Listing of items

The template is now available as a free to download, with Blocks Edit template tags added as well.

Blocks Edit for landing pages

2024-05-14T00:00:00Z

When uploading a new theme, you now have the option to upload HTML for pages. Once uploaded, the dashboard for your theme, along with the visual editor, adjust to web page-specific options.

Familiar interface

Everything will look familiar as the same core content workflow and features have been translated to work with landing pages. This includes:

Drag and drop, point and click inline content editing
Saved layouts to use for different page types
Pinning of content to reuse across pages
Building and editing for any team member to use
Draft and preview link for sharing, with commenting for team members
Checklist of important content reminders
Revision history of updates made by your team
Integrations for hosting assets and exporting, platform agnostic to work with any host provider

Editing setup

Setting up your landing page theme is as easy as with an email and you can also use the visual theme editor to make your HTML content editable.

And just like with emails, you can get started with your design and build and edit pages for free.

Starter email components theme

2024-05-07T00:00:00Z

Our new Starter email components theme is a collection of 10 standard email types that came out of browsing and studying hundreds of emails! The theme is made up of 15 stackable, commonly used sections.

Email types

The theme includes examples of each email type:

Welcome/onboarding - sent when your audience signs up
Announcements - share something new or updated
Events - educate your audience on your event’s value
Confirmation emails - confirm actions, like during the purchase process
Subscription and payment - account info and payment-related notices
Notifications - activity related to product or service
Promo and e-commerce - product offerings and recommendations
Helpful emails - instructions, support info, and feedback requests
Engagement emails - content based on customer’s previous actions
Newsletter - news and updates for a topic, or your product or service, or both

Components

These common design patterns can be reused modularly to build different kinds of emails:

Intro/hero and callout for featured and hi-lighted information
Information listing of related items
Short info listing as four items on a single line
Two-column and three-column layouts, commonly used for newsletters
Product overview with a photo, description, price and link to buy
Product listing of multiple products in a grid
Order receipt and current delivery status
Event listing in a calendar format and booking confirmation
Quick survey star rating with direct submission
Profile card format for loyalty programs with basic user info
Message sent by a user from your service’s dashboard

You can download the Starter email components theme for free and start using it to design and build your own emails.

The Starter email components theme is included with new Blocks Edit accounts. Sign up for free to start using it in the visual editor.

Newsletter email essentials

2024-04-25T00:00:00Z

Different examples of branded newsletter emails.

A newsletter email is an opportunity to share various information and content with your readers. Whether it’s related to your product or service, or about a particular topic, or topics, that your readers are interested in.

It typically consists of a round-up of links to content for further reading. A regular release cadence, like weekly or monthly, is common for a newsletter, but not strictly required.

What makes a good newsletter

Newsletters are meant to educate, inform, or entertain. That’s why people subscribe to them! You should first and foremost make sure your content adds value for your readers. Have a good understanding of what your readers care about.

The content should be consistent and on-topic for your audience to know what to expect from you. Be discerning in your curation, and thoughtful of your reader’s time.

If your newsletter is related to your product or service, you can certainly include content around your product or service as long as it’s useful to your readers. News on your product or service, upcoming webinars or events, and informational blog posts, are some good examples.

Standard formatting

Because newsletters often have various links to articles, the content tends to be formatted in a few standard ways to offer a good preview of what the article is about:

As listings with a description, with or without an accompanying image, and a call to action.

As two column listings with descriptions, with or without images, and call to actions.

Or as three column listings with shorter descriptions, smaller optional images, and call to actions.

For working examples of newsletter components that you can refer to when designing your emails, download our starter theme.

Setup your own newsletter design as visually editable components for your team to build out and edit emails with the Blocks Edit editor.

How to: team editorial workflow

2024-04-16T00:00:00Z

People you work with producing content for your emails can be brought into Blocks Edit at any step along the way.

Initial content writing

Writing content is normally done in a text editor with the copywriter highlighting certain aspects of potential design elements, like a call to action button or banner.

In Blocks Edit, the copywriter can write directly in the visual editor and drag and drop predesigned components that they can work their copy into. Inline editing of content shows them how their content will look in its final form, in real time. So there's no back and forth needed about how content fits within the design.

Copy editing and review

Reviewing content often requires other people to look at and make adjustments or provide feedback. Instead of passing around docs and gathering notes in multiple places, you can do it all in Blocks Edit by sharing the email with coworkers. Either via a link to get feedback, or by inviting them into the editor to make adjustments themselves.

They can view your email in its current state and add comments that you can respond to. And they don't even need to setup an account to do it. To make edits, they sign in and the email is available on their dashboard. Their changes are kept as part of a revision history that you can roll back if needed.

Design edits and additions

Additional design work may be needed, either for special imagery, or for updating or adding a new content component. Blocks Edit allows for making design updates while you continue working on your email.

A designer can add new components to the email’s template and they’ll be available for you to then drag into your email to use. They can also modify a current component that you can then update within your email’s design.

Final review

To get final approvals, there are multiple options for sharing. Either as a link for review and feedback. A test email that can be sent out. Or, a PDF version of the email can be downloaded to pass out.

To help with quality control, the Blocks Edit editor has notices to help you out. For images without alt tags, if a link's URL is missing, and if tracking for links should be added (if the feature is enabled). A checklist for the team can also be added with reminders for content that should be reviewed.

Sign up for your free Blocks Edit account and bring in your coworkers to become a part of your email production's workflow.

Engagement email essentials

2024-03-27T00:00:00Z

Different examples of branded engagement emails.

There are various ways to keep your customer engaged in your product or service, even after the initial purchase. Recommendations based on previous shopping, triggered emails based on usage of your product or service, or through notifications related to your loyalty program.

Loyalty/reward notifications

Loyalty emails show customer appreciation based on your customer’s interaction with your product or service. You can send out offers or specific triggered emails based their previous purchases and points earned.

Initial messages - these messages let customers know to complete their profile and preferences that allow you to better cater to their interests.
Nearly reaching a level or number of points - lets customer know they are a number of points, purchases, or dollars away from reaching a certain level or earning a milestone of points in the program and highlights the benefits they’ll receive.
Reaching a milestone - congratulates customer on getting to a certain level of your program or earning a milestone of points and goes over the added benefits they now have access to.
Points or reward expiring - lets customer know that their points will expire soon and encourages them to use them towards their rewards.
Loyalty program reengagement - triggered by a lack of loyalty program usage, encouraging customer to get additional points by continuing their usage.

Discovery/recommendations

If you have a range of content, products, or services, you can send out emails that allow for your customers to discover new options for them.

General recommendations - based on aggregate data of your customers.
Curated options - a collection of themed options. Holidays are an example of a good opportunity for these.
Personalized recommendations - based on the customer’s previous purchases. These usually perform the best.

Triggered

If you have a product or service that involves interaction from your customers, you can setup triggered emails to encourage further engagement.

Progression - customer doesn’t finish filling out their profile details or setting up required preferences to use your product or service.
Action taken - customer performs a certain action that would benefit from an email reminder at a later time. Like bookmarking a product, or registering for an event.
Usage reengagement - lack of app sessions or service usage, encouraging user to open the app with incentives, or by giving them usage tips, or highlighting new features.

Another type of engagement email worth considering are anniversaries of when your user signed up, a birthday email, or other special occasions that may be relevant to your product or service. A recent trend has also been year-in-review emails sent out towards the end of the year that highlight your customer’s usage of your product or service in a fun way.

For working examples of engagement components that you can refer to when designing your emails, download our starter theme.

Setup your own engagement design as visually editable components for your team to build out and edit emails with the Blocks Edit editor.

How to: the Blocks Edit template format

2024-03-18T00:00:00Z

The Blocks Edit visual template editor, making a piece of text editable.

The core idea behind the template setup for Blocks Edit is to keep things simple by using the HTML you’ve already got. You can start with a current email, or a collection of template modules. You may already have a template in this format that you use for your email’s design system or style guide.

Make it editable

To start enabling editing options, you can import your HTML and use the visual template editor. An example is shown in the screenshot above.

Or, you can add tags around your code that are unobtrusive to your design. Here’s the same example done via code:

Our very own Product Design Lead, Lucy Denton, is speaking at the UX Australia Design Research 2021 conference about her experiences engaging in research as a designer. Don't worry if you can't make it-she's already written a brilliant article on the subject.

The visual editor adds tags to your code the same way as if you did it manually. And won’t mess with your code's functionality.

Make it usable

Since editable options are added around content, you can use placeholder content as a guide for how content should be plugged in so it works well with your design. You can additionally set limits around the content like text length and image sizing limitations.

It also allows for using standard content template tags like Liquid. Or tokens from your email provider, for example: {{firstName}}, used for personalization.

Make it modular

Drag and drop modules consist of turning your design elements into sections and components. Sections are stackable containers. Components are elements that can be placed in those containers alongside your content, like headlines and buttons.

You’ll want to maintain a good balance between having flexible components that can be used within various sections, and having sections that are already laid out with elements that are meant for very specific use cases. This template from DICK'S Sporting Goods is a good example that offers a wide variety of both.

Make updates

Your template can be updated independently of the emails you’re currently working on. You can make changes to current modules in your template and add new ones. Your latest modules will be ready to use as soon as you import a new version of your template, or save updates made in the template editor. Here’s a video walkthrough of the template update cycle.

The Blocks Edit template model works around any design, makes implementation easy to manage, and streamlines the update workflow for you to keep your template up-to-date without it being a hassle.

Use Blocks Edit free and import your HTML to get started.

Helpful email essentials

2024-02-22T00:00:00Z

Different examples of branded helpful emails.

When welcoming a customer as they sign up for your product, or introducing them to a new product, making sure they have all the information they need for how to use it is key.

Instructions

Starting with basic instructions. Any needed installation instructions for properly setting up the product, and using it in conjunction with your customer's current setup.

Either within the email itself, or by providing links to help docs, tutorial videos, or even forums they can browse and participate in with any potential questions.

Support options

Along with instructions, you’ll want to make sure you include ways that your customers can get contact support for help.

And when a user sends a customer support email, consider an automated return email that confirms their message was received and sets an expectation of how long until they will get a response back.

An important factor to support emails is to allow for your customers to reply to the emails they receive directly. Email is for communication, so a basic reply should be made possible, even when the emails are automated.

Feedback survey

Beyond the initial product introduction, after your customers have been using your product for a while, you may want to get feedback on their experience.

Letting them know it helps guide and improve the product for them is helpful to get up front. How extensive the survey is and how much time it will take is also important for your customers to plan accordingly.

Another way to go is to offer single-click questions as part of other emails you send. Like a simple star rating they can click on, or “satisfied” or “not satisfied” options. Or a single question with multiple choices to choose from.

For working examples of helpful components that you can refer to when designing your emails, download our starter theme.

Setup your own helpful design as visually editable components for your team to build out and edit emails with the Blocks Edit editor.

How to: pin content to use later

2024-02-20T00:00:00Z

A board of pinned pieces of content for a magazine.

Pinning a section allows saving content that you can reuse across emails. It’s as simple as using the pin icon in the upper right of a section. Just give your pin a name and a screenshot of its current state is generated and put in the left sidebar under a Pins panel.

Pin versions

Clicking on the pin icon of a pin that has been previously saved will bring up that pin’s revision history. You can choose to save a new version of the pin with your updated content. You can also view a preview of the pin’s past revisions, and roll back to a particular version to use instead.

If a pin you’re using has an updated version added, there will be a red dot on the section’s pin option, no matter which emails you’re in email. This allows you to get the latest version of the pin’s content, if you want. You will be shown the revision history view to preview the changes first before committing to do so.

Pin groups

As you start collecting more pins, you can start organizing them into groups. Click the Add a pin group button, at the top of the pins sidebar, and give your group a name. When creating a new pin, you’ll have a dropdown of your groups to put the pin in.

Groups appear on the left sidebar with a drop down option. Collapsing a group shows the pins within the group for you to use in your email.

You can use pins today in Blocks Edit. Sign up for free!

How to: workflow integrations

2024-02-13T00:00:00Z

Similar to how Blocks Edit utilizes modular template design, our integrations are also modular, made to fit within your workflow. You pick what you need at a particular point in your process.

And because we take a platform agnostic first approach, integrations follow standard protocols for total flexibility and to ensure you have complete control of how you manage your assets.

Images and hosting

For your email’s images, in Blocks Edit, you connect to your hosting provider to upload the images you use via sFTP. Your host could be the same host as your organization’s website. You could also connect to a CDN like AWS, or Google Cloud Storage.

While working on your email in the Blocks Edit editor, you can upload any images you need from your computer, or from your connected image source. The editor will format your image automatically, according to rules set in the template. And you can crop your image as well.

When you’re ready to export your email to send out, one of the export steps includes exporting your uploaded images. This is where you can select your host, and even browse and choose what folder you want to upload to. Your images get transferred, and their URL’s get updated in your HTML so your email is ready to send.

Exporting to your email provider

After exporting your images to your host, the next step is to export your email’s HTML. It will be made available for download in its final form so you can then just import it into your email provider. You can also export to your host which works great for having an online version of your email to link to.

Additionally, we have some common email providers you can choose from to connect to directly. This allows you to transfer your HTML to the email provider directly instead of downloading your HTML and importing it manually.

Single sign-on

If your organization uses single sign-on, you can get your account setup to utilize its benefits by connecting to Blocks Edit. We have options for the SAML standard that works with any SSO provider, or direct connections to Okta and OneLogin.

Once connected, anyone in your organization can use your SSO to come into your Blocks Edit setup to view and edit emails. Accounts are provisioned automatically as they are created via your SSO provider and Blocks Edit is shown as part of your other dashboard tools.

Blocks Edit individual user plan

2024-02-06T00:00:00Z

We’ve updated our pricing to make it more flexible for teams of all kinds, with a per user option that allows coworkers to add editors as their team grows.

Our recently upgraded review mode allows coworkers to review and comment on email previews without an added per user cost.

Updated integration pricing too

We’re also making integrations more available and flexible at an added $5/user per month for each integration, no matter the type of integration. From uploading to your assets host, to direct email provider connections, to single sign-on for your organization. And any future integrations that we add.

Free solo plan

And we still have our free plan for a single user to use all that Blocks Edit has to offer as well. With all editing features, and no limits on templates used or emails built.

We’re excited by the new opportunities this allows for people to access a better way to build the best quality emails. And to be able build and edit them with their team!

Now is the best time to sign up for your Blocks Edit account and get started building great emails with your team.

Blocks Edit update: review commenting

2024-01-30T00:00:00Z

We’ve revamped our email review mode to make it more useful. Like before, you can share a direct link to the preview for an email you’re working on. Now, anyone that you send the link to can add a comment with their thoughts as a guest, without having to have an account to post their comment.

Comments sidebar

Commenting takes place as part of a timeline view which can be accessed from the right sidebar activity icon. Here you can view a history of updates made to the email and by whom, as well as their comments. This sidebar was previously only available when team members were logged into their Blocks Edit account.

Posting a comment

At the top of the sidebar is the option to submit a new comment. The comment then appears as part of the timeline view below where your coworkers can respond to it. When clicking on the field, a modal comes up for them to enter their name. That’s all that’s needed and they can then share their thoughts on your email.

You can use preview links with commenting now as part of your Blocks Edit team plan. Not signed up for Blocks Edit yet? Sign up to start using it free.

Promo/e-commerce email essentials

2024-01-11T00:00:00Z

Different examples of branded promo/e-commerce emails.

A promo email can be specific to a product, or offer a range of products. Promotion for a singular product can be a product introduction, update, or sale. Multiple products could be showcased together as part of a category or theme.

Sales

When sending out an email that offers a sale, try to impart a sense of exclusivity for your subscribers to feel like they’re getting the offer before anybody else. You can include additional product/service options to cater to the diverse needs of your customers, and as an opportunity to upsell.

Consider segmenting your promotions to specific customers to better target your offer. Segmenting can come from their previous shopping habits or preselected interests.

Upselling

Upselling is a way to give your customers additional options. “Since you looked at this product, you might also like these ones” or “People who bought this product also bought these ones.”

Upselling can be made along with promoting related products along a single product, or as a collection of products based on a customer’s previous shopping habits.

Abandon cart

Abandonment emails, also known as abandoned cart, or abandon cart for short, are automated reminders sent to individuals who have not finished an online transaction. They can be effective since they’re based on actual items the customer chose. An email is typically sent about an hour after the customer abandons the purchase.

Whether potential customers got distracted or weren’t sure about buying, the email provides a reminder and reassurance about the potential purchase and works as a great way to recover lost sales. Be sure to address some of the possible reasons people didn’t purchase, for example by encouraging them to check out different color options.

Sometimes people abandon purchases because they’re just not confident in the product or service. To overcome this, offer social proof by showcasing some testimonials and stories of customers using the product.

For working examples of promo/e-commerce components that you can refer to when designing your emails, download our starter theme.

Setup your own promo/e-commerce design as visually editable components for your team to build out and edit emails with the Blocks Edit editor.

Notification email essentials

2023-11-30T00:00:00Z

Different examples of branded notification emails.

Notification emails, like confirmation emails, are all transactional. They are a response to a user’s previous actions. Even though they are all transactional, you’ll want to make sure to include unsubscribe settings for some of these as your customers may not all agree with how important you think it is for them to receive them.

Activity updates

Usually for apps and Saas products, these standard notification types are related to a customer’s interaction with your product or service.

Comment or message - someone posts a new comment response or sends a direct message to an account
New posts - an update is made to content that the customer chose to receive email notices for
Usage-specific - core activities made with your product, like taking photos, or writing articles
Login attempt - in cases where usage of an account seems abnormal, it helps to notify the customer

If there’s the potential for many notifications on a regular basis, consider grouping them with a summary email of messages or posts made within a given period, like a day, or a week. Grouping notifications are a good way to keep the customer subscribed without overwhelming them with too many emails. It also serves as a reminder for the customer to engage with your product or website.

Alerts

These are usually related to subscriptions and payments, but can also be reminders and any service changes your customers should be made aware of, like updated terms or privacy policy changes.

Service updates can fall into this category as well. The focus should be on whether it greatly affects your customer’s current use of the product. New product features can be included, but should be kept to things your users would want to know about, not every single push you make. Giving them the option of what kinds of updates they get emails for can be helpful.

Ecommerce

Similar to content updates, these are product-specific based on a user’s interaction with your online store, either for physical or digital goods.

Save for later reminder - reminds customer of items they’ve chosen to “save for later” or added to a wishlist
Availability - let’s the customer know that an item that they pre-ordered has been released
Back in stock - for products your customers showed interest in but was not available
Sale alert - tells customer an item they purchase regularly is on sale to encourage a purchase

Sales emails are generally considered promotional, not transactional, but if the product/service sold is relevant to actions the user has taken in the past, then it can count as transactional. You can additionally include an opt-in option for receiving sales and promo emails when your customer signs up for their account.

For working examples of notification components that you can refer to when designing your emails, download our starter theme.

Setup your own notification design as visually editable components for your team to build out and edit emails with the Blocks Edit editor.

Subscription and payment email essentials

2023-11-15T00:00:00Z

Different examples of branded subscription and payment emails.

Subscription and payment-related notifications are where email becomes most relevant as it’s where users expect to be notified about their accounts.

Account status

Seems basic and common, but is the most important when it comes to maintaining the relationship with an on-going customer.

Membership confirmation - welcome email for a membership highlighting its benefits and providing any user-specific details like term of membership
Free trial expiration - notifies recipient that their free trial is nearly over and tells them how to become a paying customer
Upgrade offer - if you offer a free plan, you can let your free members know about your premium options to enhance what they’re already doing
Auto-renewal - informs customer about the upcoming renewal of their service, which usually also reminds them of the benefits of their service, with options to discontinue service or turn off auto-renewal
Service expiration - tells customer about the upcoming end of their service and encourages them to renew or purchase another service
Account ended/cancelled - confirmation of membership having ended or being cancelled

As a new account is on its way to expiring and potentially getting cancelled, consider offering incentives and promotions for users to become paying customers. You can also allow them to extend their trial with an option directly in the email!

Payments

If your company bills on a recurring basis, a series of emails may be needed around your service and payment.

Payment is due reminder - triggered potentially at multiple intervals before and after a payment is due, this message notifies the customer about an outstanding bill
Renewed/payment received - instead of reminding of a payment, if the customer has opted to renew automatically, you can send them a receipt email
Payment failure alert - informs customer that their payment method on file for a recurring service has failed and what they should do

You will eventually run into an issue with a payment method. Dunning is the act of notifying customers that a recurring payment has failed, usually because of outdated payment information, insufficient funds, or a lost, stolen, or otherwise blocked card.

Dunning process

Your dunning emails serve to guide the customer through the process of updating their details and solving the problem and should be as frictionless as possible to ensure that a payment is made:

Most failed payments aren’t due to customers not being willing to pay, so be gentle when notifying them about a failed payment
Provide step-by-step instructions to let the customer know how simple the process is
Explain what customers can expect to happen with their account when updating their information, or if they don’t do it within a given timeframe
Link directly to their account page where they can update their payment info
Include customer support contact info in case they have any questions
Multiple reminder emails may be needed if there is no response to the initial one

Most customers don’t instantly know why a payment failed. Expired credit cards are not uncommon, especially when someone has been a customer for a while. There’s also fraud and other issues that could have caused a payment to get canceled. It can help to also make your customer aware of these potential issues in case they need to take additional steps to resolve them.

For working examples of subscription and payment components that you can refer to when designing your emails, download our starter theme.

Setup your own subscription and payment design as visually editable components for your team to build out and edit emails with the Blocks Edit editor.

How Fisher & Paykel built on-brand emails with their team

2023-10-24T00:00:00Z

Fisher & Paykel has been designing products since 1934 and has grown into a global company with appliances sold in more than 50 countries around the world. Their proud heritage is founded on a pioneering spirit and a culture of curiosity that has challenged conventional appliance design for decades.

Their email marketing team wanted to reduce the amount of time they spent building their emails so they could work on more campaigns than they were able to. They realized that using a template builder was the solution, but wanted to be able to use their custom, branded designs. They also wanted to ensure compatibility with their email provider.

"We were looking for an email template builder that would allow us to create on-brand emails, preload ESP-specific coding, and be easy to use for people with no email building experience. Blocks Edit was the perfect solution."
— Ralph van den Broeck, Marketing Automation Manager, Fisher & Paykel Appliances

Fisher & Paykel email example

They could use their designs and allow team members to visually build emails in Blocks Edit, offloading the added development work that their designers had to do to regularly produce their emails. Other team members could now easily build and edit emails while adhering to their brand guidelines.

"With Blocks Edit, we can import our own HTML templates and turn them into drag-and-drop templates that are always on brand. We can also limit the ability to change copy and styling options, so that anyone can use the tool and expect an on-brand result."
— Ralph van den Broeck, Marketing Automation Manager, Fisher & Paykel Appliances

Once they started using Blocks Edit, they were immediately able to output more emails in less time, allowing them to plan and launch more campaigns than they could before and ultimately reach more customers.

"Blocks Edit has significantly reduced our need for a UX designer's time and increased our productivity. We can now focus on creating engaging content instead of having to deal with rendering issues, freeing up our UX designer to focus on other projects."
— Ralph van den Broeck, Marketing Automation Manager, Fisher & Paykel Appliances

Fisher & Paykel email example for their Haier brand

Learn more about Blocks Edit and how it can work for you and your team.

Confirmation email essentials

2023-10-12T00:00:00Z

Different examples of branded confirmation emails.

Confirmation emails are all transactional, most commonly used for sign ups and account creation, and purchase and delivery information. Because these emails contain dynamic content, they are often handled by IT departments, though many email providers have API’s that allow for bringing in necessary data for automated sends.

Purchase

Order/purchase receipts are the most necessary of emails to send. Start with practical elements like necessary details of what was ordered, customer support contact info, highlighted FAQ’s, and any options for making changes to an order (like updating their shipping address). Including images for the products makes it easy for the customer to ensure it’s what they ordered. In your totals, highlight discounts given.

Additionally, show related products for cross-selling opportunities, if applicable to the customer and their specific order. Show added value, like info on your rewards program (and how the purchase can be applied towards their account), or any discount offers on future purchases.

And delivery

If the order requires processing and/or delivery, include details on how your customer can check on the status, like a tracking link, and make the expected delivery date clear. Consider showing a status bar with the important steps of the process. And if needed, send out multiple emails for the steps.

At the end of the process, ask for feedback on the purchase experience, or for a review of the product(s) or service(s). And options to share/refer to friends and family. You can offer a discount code as incentive to share.

Required actions

There are confirmation emails that require an action to be taken by the user. Such as verifying the email address that they signed up with, moving forward with a password reset, or downloading expected digital assets. In these cases, copy should be kept short, with a clear call-to-action. Related content, like helpful tips, can be added below the key information.

Helpful notices

Notices of actions made are also good to send out. Like when important changes are made to their account. Or a payment method is updated. Or for an appointment that’s scheduled.

Even letting users know you’ve received a message that they sent, either via email, or by submitting a form on your website. Be sure to include when they can expect a reply.

For working examples of confirmation components that you can refer to when designing your emails, download our starter theme.

Setup your own confirmation design as visually editable components for your team to build out and edit emails with the Blocks Edit editor.

Event email essentials

2023-09-25T00:00:00Z

Different examples of branded event emails.

Whether your event is in-person or online, email ensures your audience is updated on a timely basis. From packed multi-day sessions, to single appointment reminders.

Effective patterns

Start with explaining what the event is about and why your readers would want to participate. Educate your audience on its value and why it's worth investing their time (and money) in it. Simplify the RSVP process with a direct call-to-action.

If your event consists of multiple sessions at specific times, consider including an agenda that lists the schedule of sessions and if needed, their specific locations to help your readers plan accordingly.

If you have speakers giving presentations, introduce them to your readers with some information about them and what they will be talking about.

If you have multiple events coming up, include a listing for them with an option to register ahead of time. Show them along with a recent event to allow the reader to consider attending them if they can’t make that current one.

Webinars

Webinars are more prevalent than ever as people have started working remotely more than ever before and have become acclimated with interacting with people online. For your emails, include a notification when you go live, and place the post-webinar recording information in case your audience are unable to attend.

Email series

For big events, send out multiple emails as a way to prepare your audience for attending and not overload them with too much information, all at once.

Make an announcement for it - introduce the event, what makes it worth attending, and its date to keep in mind
Dive into the details - break down all the sessions with an agenda, highlight speakers, and present info on the valuable content that will be presented
Registration confirmation - confirms successful signup for event, providing directions on how to access the event and next-steps
Reminder - reminds the person of the upcoming event and any last-minute information they should know about
What to expect from your appointment - details what the customer needs to do to prepare for their appointment
Post-event recordings - include how your audience can access recordings of your sessions, if available
Request feedback afterward - as your audience are participants of your event, ask them for feedback on how it went for them to help better prepare for the next one

For working examples of event components that you can refer to when designing your emails, download our starter theme.

Setup your own event design as visually editable components for your team to build out and edit emails with the Blocks Edit editor.

Announcement email essentials

2023-09-08T00:00:00Z

Different examples of branded announcement emails.

Your subscribers already have a certain degree of interest in what you provide so letting them know about your new secret product or service will increase their engagement.

Effective patterns

Create excitement. What’s the story behind your new product or service? What makes it special? Provide the unique details that will spur your customers’ interests.

Use the email to communicate the value of the new product or service. Highlight its benefits. Showcase what makes this product different than the other products in your offering.

Additional content ideas

Create hype before the release. Sending a teaser to existing customers will make customers feel like they’re part of the club.
Include a calendar invite that viewers can add to their calendars for an automatic reminder of your launch.
Show the product in action. Include the photos of your products in use and help your customers experience them virtually.
Share behind the scene details with your customers. It will make them feel connected to your brand and excited about the arrival.
Guide the reader with how-to tutorials, images of details, and specifications documentation.

Segmenting

Segmenting based on previous purchases will increase your customer’s interest in your latest offering. It also prevents them from feeling bombarded with product releases on a regular basis knowing their only getting the ones that are applicable to them.

For working examples of announcement components that you can refer to when designing your emails, download our starter theme.

Setup your own announcement design as visually editable components for your team to build out and edit emails with the Blocks Edit editor.

Welcome/onboarding email essentials

2023-08-31T00:00:00Z

Different examples of branded welcome/onboarding emails.

The welcome/onboarding email is the first impression a company makes with a new customer or newsletter subscriber via email. It sets the tone for future communications from your brand. The whole process of sending a welcome email can be automated and sent right away, right after sign up.

You want to design emails in a way that authentically reflects your brand. Stick to your style guide and try to keep the email experience consistent in look and feel with campaigns in the future.

Effective patterns

Add value by providing next steps. Next steps are important for setting clear expectations for new subscribers who probably aren’t sure what to do next. Lay out their on-boarding steps and what they need to do to fully setup your product or service. Lead them towards the “ah-ha” moment, the core value that you have to offer. Have a clear call-to-action as a next step or recommend products/services/features to start exploring.

Include helpful resources. Link to content on your website that will give your customers more context about what you do and how you do it. A How It Works section educates the subscriber about the product or service on offer. Whether it's tutorial videos, an FAQ page, or helpful blog posts containing best practices, give them the tools they need upfront.

Personalized introductory offers on products are something consumers often want. If you base these offers on the information they’ve provided, the welcome email can help drive ongoing interest.

Provide information about customer service and ways your customers can get help if they need it. Adding this contact information to your welcome email is a great way to lay the foundation of trust needed for building a relationship.

Additional content ideas

Tell your company story to let your customers know you can relate to the problems they're facing and that you’ve been there. Who you are, what your brand is about, and what is the story behind their product.
Reiterate your unique selling points to confirm you’re the right choice for them. Include an overview of key benefits and features worth highlighting.
Build trust by putting a face to a name with a photograph and message from the company's founders.
Acknowledge how grateful you are to your subscribers for taking their time to subscribe by saying "Thank You".
Show how other customers are using your product or service with customer testimonials and case studies.

As a series of emails

If you find that you’re including too much information in your welcome email, you may want to consider a series of emails instead for an onboarding process. Make sure all emails contain an "unsubscribe" option.

Most series-based welcome/onboarding emails have between three and six different emails in them, and the automation plays out over a week or two. The right number of welcome emails and when you send them is going to depend on your industry, your target audience, and what you're offering.

For working examples of welcome/onboarding components that you can refer to when designing your emails, download our starter theme.

Setup your own welcome/onboarding design as visually editable components for your team to build out and edit emails with the Blocks Edit editor.

How to: editable content

2023-07-25T00:00:00Z

Transcript of video:

Making content editable in your template is as simple as enabling which text pieces or images you want to be editable for your team when they build emails. We’ll go over the options available for each content type as well as what you can do with links.

Text

Let’s start with text. By default, editable text includes basic formatting options as well as the option to add a link to selected text.

In the template editor, go into edit mode and with the content option chosen on the left, start selecting text pieces within your template. Default formatting options can be disabled, along with the option to add a link. You can additionally enable the option for the text area to be removed. And set a maximum number of characters for it.

There are no options for text alignment or custom colors. This is to err on the side of following a design's guidelines by limiting the ways that someone can potentially deviate from them. You can add these options to your template yourself with the variants feature which allows your team to choose between alternate styles of content areas that you pre-design.

Setting a unique variable name for your piece of content is also required if you want to use the template update feature. This feature allows making updates to your template and then importing those changes to individual emails as well as previously saved pins.

Let’s take look at what the code for a text area looks like. When adding the block-edit tag to your code, make sure to use it on the container directly around your text.

Links

There is of course the option to add links to text which includes its own formatting. By default, text is underlined. To use a specific format for links, you can select alternate link styles. If you have the link tracking parameters feature enabled, you can also set the parameters you added here.

To add a link style, find an example of a formatted link in your template that you want to use. You just need to add a data-style attribute with a unique variable name and it will get added as a link style option.

Images

When an image is made editable in a template, you can choose to upload a new image in its place either from your local computer, or if setup, from a source, like an FTP or CDN.

By default, an image’s size is determined from how its placeholder is setup in the template. Blocks Edit refers to the image’s original size properties. When a new image is uploaded, there is an option to crop it based on the original image’s dimensions and it gets scaled down to the image’s pixel size.

If you have a height: auto style on your image, the cropping and scaling will only constrain to the width while the height will automatically adjust based on how it’s cropped.

And that’s making content editable in your template. It allows for easily and quickly setting up your email designs to be reviewed and edited by your team.

How to: modules

2023-07-17T00:00:00Z

Transcript of video:

Modules in Blocks Edit consist of sections, components, and regions. Dividing modules this way allows for separating content from layout, with each module type having its own functionality when building an email in the visual editor. Let’s go over each type and how to go about enabling them in a template.

Sections

Let’s start with sections. A section acts as a stackable container on top of other sections. Enabling a section will add it as a draggable module in the sidebar. When dragging it into the editor, it can only be placed between other sections.

In the template editor, go into edit mode, and with the section icon chosen on the left, start selecting areas that you want to turn into drag and drop modules. Use the blue bar of HTML elements at the bottom to help determine which areas would work as separate containers that are on top of each other. In this example, we’ve already enabled this section.

Each unique section requires a variable name and you can optionally also add a title to show in the sidebar. Click Update to confirm your changes. Let’s take a look at the code for it. You can do this either in the editor, or with your own code editor of choice. You can see the necessary classes and attribute that were added for the section.

A section can also have variants. Variants are alternate versions of sections that you can enable to choose from. This allows for preset design features and formatting options that can be switched between. Let’s look at this one for example. You can see in this example that this section has a format with and without this left border. Both versions of the section should be placed next to each other and given the same data-group attribute name.

Components

Next is components. Components are standalone pieces that can be placed within a section. Enabling a component adds it to a separate sidebar specific to components to drag in.

In the template editor, with the component icon chosen on the left, start selecting areas that you want to turn into a component. Again, use the blue bar of HTML elements at the bottom to help determine which areas would work as standalone components.

Let’s look at the code for components. You can see the classes and attributes that it needs to work. Variants can be added to components as well. In this example there is an alternate color to the button.

Regions

And finally, we have regions, which are static areas, that can’t be dragged around and don’t get added to the sidebar when enabled. A border around it is shown when mousing over it within the editor.

Go into edit mode and look for the region icon on the left. Decide what group of elements that you want to turn into a region. You can use the blue bar of HTML elements at the bottom to determine which will work. You have the options for allowing a region to be duplicated, or removed, or both. Duplicating a region makes it part of a listing where each copy can be ordered or removed.

Let’s see the code for regions. Regions can also have variants. In this example, the text is left-aligned and center-aligned.

And that’s module types in Blocks Edit. The essential building blocks for your email’s layout, based around your design system.

Template technique: handling spacing

2023-05-31T00:00:00Z

It can be tricky to get spacing that's consistent across your template and also doesn't cause potential unintended side effects with elements within your layout. Here are a couple of techniques for doing so that work with any email design. And with code that is supported across email clients.

Spacing for sections

Because of how sections stack on top of each other, there's no one way to add spacing between them. Depending on which sections are above or below, some could use larger, or smaller spacing, while others look good without any spacing at all. So the best way to go about section spacing is to use a spacer that can be plugged in as needed:

You can also do this among elements within a section:

Spacing for columns

The code examples below calculate and add padding for various types of columns using a simple method that works for any kind of layout.

Single-column content section

No padding added since container matches body background color.

Text copy goes here. Sometimes it includes email provider tokens to pull in audience info, like %%first_name%%. And some additional text that may also include a link.

Single-column with background color

Padding added as background color is used that stands out from the body.


  
    
      More text copy goes here. It could be as long as you need it to be as there is plenty of room to let it flow!

Two-column with left image

Limited padding added to separate text column from image column.



  
  
    
  
      
  
    
  
  
  
    
  
      Text next to an image, in a two-colum section, split 50/50.

Two-column with left image and background color

Additional padding added for container having background color.



  
  
    
  
      
  
    
  
  
  
    
  
      Text next to an image, in a two-colum section, split 50/50.

Two-column with images

Padding set to 50% of standard amount for in-between column spacing.



  
  
    
  
      
      Text under an image, part of a two-column section, split 50/50.
  
    
  
  
  
    
  
      
      Text under an image, part of a two-column section, split 50/50.

Two-column with images and background color

Additional padding plus 50% padding of standard for in-between columns.



  
  
    
  
      
      Text under an image, part of a two-column section, split 50/50.
  
    
  
  
  
    
  
      
      Text under an image, part of a two-column section, split 50/50.

Three-column with images

Same 50% padding of standard spacing applied to three columns.



  
  
    
  
      
      Text under an image, part of a three-column section, split into thirds.
  
    
  
  
  
    
  
      
      Text under an image, part of a three-column section, split into thirds.
  
    
  
  
  
    
  
      
      Text under an image, part of a three-column section, split into thirds.

Three-column with images and background color

And three columns with a background color.



  
  
    
  
      
      Text under an image, part of a three-column section, split into thirds.
  
    
  
  
  
    
  
      
      Text under an image, part of a three-column section, split into thirds.
  
    
  
  
  
    
  
      
      Text under an image, part of a three-column section, split into thirds.

For an example of a full template that uses these spacing techniques, take a look at the Starter template.

Template technique: levels of email dark mode

2023-05-24T00:00:00Z

Setting up your email’s design for dark mode isn’t really a choice since some email clients will do it anyway. This includes Gmail and Outlook which will invert background colors and text. This leads to potential accessibility issues that make your designs hard to read, or in some cases, completely unreadable.

Forced dark mode

So you’ll have to adapt to the way email clients treat your design for dark mode. The way to do this is to first test your email template in the email clients that will force color changes for your design. The email clients to look out for are:

Outlook 2021, Office 365, and Windows Mail, on Windows - all do a full invert of colors across the board
Outlook.com, on Windows (across all browsers) - will invert some colors, but doesn’t always invert all background colors or text of certain elements, like buttons
Gmail app, on iOS - also does a full color invert
Gmail app, Android - partially inverts colors, similar to Outlook.com

Use Email on Acid or Litmus to get a range of test environments to look at.

Making adjustments

You can adjust some aspects of your design where necessary to account for the changes. Make sure your logo and transparent graphics look good on a darker background. Consider adding an outline around your logo to ensure it’s readable. Avoid text over background images since images don’t get inverted, but the text will.

For Outlook.com, attributes are added to elements that change colors. So you can refer to those attributes and overwrite their changes by including classes in your HTML and then targeting them in your