3. Email Design 101: Templates, imagery, spacing, personalization, and more
Designing a beautiful email in Splash is just as intuitive as designing an event page.
Similar to choosing a theme for your Splash page, you have the ability to select your preferred template for your email communication.
Upon creating a new, you'll be prompted to select a place to start from.
Let's explore the variety of templates you can begin with:
Custom Email Templates (Enterprise): Custom email templates are saved email designs associated with and accessible within a specific event theme (template). Custom email templates are available with our Enterprise offering, Splash for Business.
If you're an enterprise client, it's likely that our team of designers created a few beautiful Starter Themes as part of your Enterprise license. Starter themes tend to come with a sequence of dazzling, fully branded email templates. If you're building you are creating your own themes, any email you save as a template will be available on child pages created from that theme.
All custom email templates associated with the particular theme can be found in the My Templates tab of the Email Sender.
Bold Templates (Basic & Enterprise): This set of emails is guaranteed to result in an invitee inbox implosion (translation: straight dynamite). The templates are bold in text composition — a generally larger typeface paired with powerful headlines — and their calls to action are can't-miss. You'll notice in the example below that some Bold templates use a colored background, the first of our email collections to offer that style choice.
You can find Bold templates available on our public themes, Splash and Ignite.
Event Card (Basic & Enterprise): Your event card is what your event page looks like on social media and chat — think Facebook timelines and Slack messages. They're beautiful! This template set embeds your event card's concise, poster-like visual into the meat of the message, saving you lots of time on design.
You can find the Event Card Theme on our public themes, Wink and Scribble.
Dynamic Templates (Basic & Enterprise): These templates - broken out into Invite, Reminder, Save the Date, Day Of, Note, and Thank You (for your planning convenience) - are available on public Splash themes Sprout and Ignite.
In the world of Splash dynamic means living and breathing. So as your changes are made to your Splash page, they reflect in your email template! How you might ask? Through Linked Elements. In emails, linked elements pull information and imagery from specific places on your event page. For example, take a look at this linked image element:
You'll also notice that the body of these Bold Themes comes readily prepped with Personalization Tags which help in making those invitations and invitees feel as special as possible. Note that the actual information won't populate in editing mode...
But when you send a test email (please always do!), as well as the real deal one, you'll see the information populate!
Personalization tags are broken up into two categories: Recipient Information and Event Information. It's 100% up to you which text elements within your email you choose to insert them in! We've noticed that the most commonly used tag is a custom salutation, such as "Hey first_name," which can also be inserted into the message's subject line.
Pre-made Event Sequence Templates (Basic & Enterprise): Similar to Dynamic Templates, these are broken up into the various stages of the event lifecycle: Save the Date, Invite, Reminder, Day Of, and Thank You. These templates are slightly more simple but are also extremely flexible; like very Splash email, these can be customized various elements, design tools, and personalization tags!
Start Fresh (Basic & Enterprise): Need a clean state to get your thoughts out there? No sweat! You have four templates where you can let your thoughts...and designs run wild:
- Image Only: This is your choice if you're looking to email out of just your event card! More info on how to do so here. It's also the template of choice for those accustomed to uploading a single, flyer/poster style image.
- Custom HTML: Here's how it works: you pop in the code and, assuming it's viable, the results will render as expected. Note below, you'll be operating in the Custom HTML element within the Email Layout toolbar.
- Plain Text: Mimic the same aesthetic of sending an email via your personal address! Check out how to do so here.
- Blank: The name says it all! Remember that within any email template, you're able to add and customize a whole library full of elements.
Now that we've ran through all of the templates you have at your disposal as well as two main features of our Email Sender (Linked Elements and Personalization Tags), let's take a quick look at some other common design questions that can arise:
Can I edit the preview text that appears after the subject line?: You sure can! Right below your subject line, you'll see a place to input a Preheader:
The text you enter here will display the beginning of your email content. See an example:
What elements can I add to an email?: You should feel 100% empowered to create as intricate of email designs as you'd like! The most common elements our users tend to include in their emails are...
Pro tip: Within every Image Element you'll see a property called Accessibility Options.
The image description you enter in the Alt Text input will display when a recipient is unable to access your image. This can happen if your recipient has images turned off in their email client, or if they're reading your email with a screen reader.
How do I reorder the elements in my email? Easy as pie! By simply dragging and dropping the elements up and down within your email's Layout, you'll instantly see the content re-order in your email.
What fonts can I use?: Here at Splash we pride ourselves off of looking A+ across a number of devices and applications. This is why we only offer a select group of fonts that are proven to render correctly across all environments! More info here.
How do I add spacing?: There are two great ways to add spacing to your email.
- Padding: If you're operating with our advanced editing mode Designer Pro, you're likely familiar with the concept of adding padding to blocks and elements. Padding controls the space within an element. It's super easy to pop into any of your email's elements via the right side toolbar.
- Spacer element: Adding a spacer element from our email element library is an elegant way to increase the spacing between two email elements. To increase the spacing a spacer offers, click into it in the Layout and fine-tune its top or bottom padding.
The spacer's color can also be changed, and changing it to the same color as the email background will make it invisible.
Can I edit the footer?: If you're operating with Splash for Business and have just had our white label feature turned on for your page, keep in mind that this will not apply to emails retroactively. But as for the next one you create...your footer is as clear as crystal!
For more email design best practices, check out our article "Building Scalable Email Templates".