Now for the fun part. Watch how easy it is to create the color blocking effect. First, to match the exact shade of pale pink in the Off screen Dispatch email, we used HTML-Color-Codes.info to identify the color of the image in the header. HTML color codes identify the hex code as . To make the first row the right color, we will: Select line Go to Row Background Color in the right menu Paste the color code (or select manually) Seamless edge-to-edge color! Now let's complete the pink color block. We'll just select the next row and do the same thing again. Now our email is color blocked. Yes, it 's as simple as that . Step 4: Format the text Let's finalize the design of this email with a few formatting touches. We will start with the text. Choose a default font for email Instead of going through each individual content block to choose your email font , go to the Settings menu on the right and select the font you want to use for the whole email. After that, you can change the header font or select the sections you want.
Adjust font sizes Tap any block of text and use the drop-down menu to fine-tune the font size. Customize text colors Use this same menu to choose the colors you prefer. Again, use the same matching color code to get the precise shade you need. Format the link style Don't forget the links! In the same Settings menu where you chose the default body font, you can also format the link style. In this case, we will choose black. When adding links to your email, make E-Commerce Photo Editing Service sure the "Underline link" box is checked. (It's even good practice when it comes to email accessibility !) Line height Make sure your body copy has room to breathe. For any content block you modify, adjust the line height of the text. Tip: duplicate the line If you've spent a lot of time formatting text in a particular row, you can simply duplicate it, instead of manually making the same adjustments in another row. Tap the line you want to copy. Next, click on the image of the double box on the far right. Your line will be copied! Then just drag it and grab the directional icon on the left to place the new line in the email. Step 5:
Adjust the padding Last step! And this is an important question. Before you finish the email, carefully consider the spacing between your content blocks. If there are still too many spaces or not enough space to breathe elsewhere, it is very easy to make adjustments. For example, there is always a gap between "Offscreen" and "Sending" in the header of our email draft. To tighten it up, tap on one of the content blocks, scroll down to Blocking options in the right menu, and make sure “More options” is enabled under Padding. Then you can decrease (or increase) the padding on any side in any content element. Step 6: Preview the finished color blocking email! Ok, one last, last step. When designing an email, preview it along the way to make sure you like the way it looks on both desktop and mobile. Here is an overview of the evolution of ours: Conclude Creating a color-blocked email is easier than you might think and adds a lot of visual value to your message. If you really want to master the most advanced email design tricks, be sure to download our free email design guide right away!