How To Make Colorful Email Template On Google

When your email really matters, there are certain things you want to get correct. Formatting, phrasing, structure, content: all things that are hard to do in Gmail's cramped compose window.

In this article I'll show you how you can create emails in Google Docs that look amend than annihilation you could have dreamed of making with Gmail. You'll exist able to add headers, content margins, and footers, all with the perfect alignment and style to engage your audience.

Leaving the Gmail etch window for Docs will also give you tools like comments and suggestions, so you can meliorate collaborate with coworkers or review your piece of work. Allow'southward become started 👏.

Learn how to build an email just similar this in Google Docs

If you lot think you demand a designer, HTML, CSS, or an expensive email marketing tool like Mailchimp to make a peachy email, you're wrong. I'm going to show you lot how to create an email simply similar this, with naught more than than simple tables, alignment, and formatting.

Example email created in Google Docs — Acquire to build this email in Google Docs

Things to go on in heed when creating emails with Google Docs

Beautiful doesn't take to mean complicated. Adhere to simple design principles like proper alignment, white space, and color (all things we tin can do well in Google Docs).
Design in a way that is piece of cake to achieve with tables by relying heavily on block layouts.
Maintain readability for all users past ensuring your content looks proficient on small screens. Advanced responsive blueprint requires other tools.

Iii steps to create your perfect electronic mail

Permit'due south go through the steps to creating your electronic mail. Build a header, create the torso, and close with a footer.

For this process, it's helpful to think of your electronic mail as a stack of tables, each fulfilling a key office in the email'southward design. This email can look nonetheless you want information technology to but we'll demonstrate using the following unproblematic pattern.

An email outline, organized as a series of tables for the layout

Earlier you start, use page setup to optimize your document size and margin

Information technology's all-time to set the folio margins to 0 and create a big canvas to work with. This isn't a required step, but it volition make information technology easier to create your e-mail.

Open the File carte du jour and select 'Page setup.'
Gear up each margin to 0
Set the newspaper size to Legal

The page setup screen in Google Docs with margins set to 0 and paper size set to legal

Step i: Start your e-mail with a header

We will utilise a tabular array with 1 row and one cavalcade to serve as our email header. A couple of dissimilar design options will work well for this step. Yous could:

Utilize a solid block of color to frame the email.
Employ some text combined with a small image (like your logo, for instance).
Apply a wide, well-cropped paradigm (which is what we will demonstrate here).

If you lot don't take a great option of images to piece of work with, try 1 of the many great resources online for gratuitous images like Unsplash.com.

An email being created in Google Docs with an image header — Here'southward how your email volition wait at the end of footstep one

Follow these instructions to complete step one:

Add a table with one row and one cavalcade
Right-click to open 'Table properties'
Set the Column width to v inches
Set the tabular array edge to 0 pt
Set the 'Jail cell vertical alignment' to 'Middle'
Gear up the 'Tabular array alignment' to 'Center'
If using a text header, we recommend adding a Cell padding. Offset with 0.15 simply try different options to go the right look.
Insert your paradigm into the cell.
If your image isn't cropped correctly, or if information technology didn't automatically resize, use 'Epitome options' to right things.

The table properties screen of Google Docs showing the necessary settings

Sizing for unlike devices: Equally y'all progress, go along to test your content on both mobile and desktop to ensure information technology'southward readable. An email designed for a desktop experience volition not look the aforementioned on mobile. This demo uses a v inch width for it's tables. For a primarily desktop audition, a vii or even 8-inch width might be optimal. 5 inches is a heart ground that works well in both but your feel may vary depending on your content.

Stride ii: Create your email body with content containers

The next stride is to create centered content tables with white space on each side.

Ii types of content work well with this design and they can be combined to fit your needs.

A single column, which works all-time to brandish text.
Two columns, which tin can be used to highlight of import items one by 1, each with an image. Column widths tin can vary, if you desire each to exist the same, or one slightly larger to fit different contents.

An email being created in Google Docs with an image header and body — Here'south how your email will look at the end of stride 2

Follow these instructions to consummate step 2:

Single column table for text content

Add together a table with one row and one cavalcade
Set the Column width to four inches
For the remaining options, apply the same table properties as before
Optional: Set the cell padding to 0.15 for a more than balanced look
Add your text content

Multiple columns to display images aslope other content

Add together a table with two columns and a row for each pair of images and content. In our example, we are using two rows and 2 columns.
Using table properties, set the showtime column width to 1.5 with cell padding of 0
Set the second cavalcade width to 3.5 with jail cell padding of 0.xv
Add your images and text content.
For images, using Paradigm options, endeavor resizing the images to get the right look. In this demo, our icons are set to 1'' size. This will center them in the 1.5'' column.
For text, style appropriately with bolded headings and links.
Remember to check the cell vertical alignment to ensure everything is prepare to middle.

Tip: During this step, it is helpful to leave the jail cell border on until yous've finished. This makes it easier to ensure your cavalcade height and padding settings were done correctly.

A fully designed email created in Google Docs — Hither's how your email will look at the end of pace three

Follow these instructions to consummate pace 3:

Kickoff with a blocked footer

To visually block off the end of your email, a uncomplicated table with 1 jail cell and 1 cavalcade tin can be used with a solid color background. Alternatively, you lot can echo the same steps from our header to include an image here.

Add necessary data to the finish of your email

Go on to add any necessary text beneath the footer. To avoid distracting from your email, try small-scale, centered text for details that go at the end of mailers like an unsubscribe link, your business address, and links to customer back up.

Tip: Add icons to link out to your profile on other spider web backdrop or social media sites. Icons in all shapes, sizes, and colors can be establish online at sites like Iconfinder.com.

Useful resources to improve your email content

Other Styling Tips

Experiment with your fonts: Attempt different combinations of font size, typeface, and colour- if you see something you like online or in another email, utilise the inspect element tool in your browser to learn what it is.

Plan for night mode: A few simple tweaks to your email tin ensure dark fashion compatibility without too much piece of work. Swap white images or icons for those with color or just add together an outer glow with a tool similar Pixlr or Photoshop. If you haven't heard of dark mode and the challenges that come along with it, you can read nigh information technology hither.

Sending your email with Gmail

To send our email, nosotros now need to merely copy and paste the contents of our Google Doc into Gmail. While this might feel "also like shooting fish in a barrel," in most circumstances, the electronic mail should transfer over exactly how you want it to.

If y'all see issues with this step, try adjusting the width of your tables, padding, and content size to ensure nothing is cut off or misaligned.

Bonus: Edit your existing Word documents in Google Docs

Do you prefer drafting in Microsoft Give-and-take? Is your content already in Word? Try opening it with Google Docs before pasting into Gmail, which tin can profoundly reduce formatting problems.

Follow these simple steps: