Intro
Pinpointe allows you to use both colors and images as backgrounds in the Drag & Drop Builder. We'll focus on colors for now, but will discuss using images as backgrounds at the end of this article.
You may select the color for the background of:
- Each primary block in your email template.
- The background color of an element within a primary block.
- The visible portion of the recipient's inbox NOT taken up by the width of the email itself.
Before we discuss how to change the background color, a few quick notes on the color selector that pops up in the left-hand side control panel. There are three ways to select a color:
- You can select a general color from the thin vertical bar on the top-right side, then use your cursor in the larger color square to the left to select how light or dark the specific color will be.
- You can enter a CSS Color Hex code in the indicated field.
- You can choose any color from the selection already saved to your account, which will include the Builder defaults plus any colors you have selected and saved previously.
Left-Hand Control Panel
For this example, we have added a primary block by dragging a Basic Block into the canvas area, and added more lines of placeholder text to increase the block's height.
Clicking on the gray "Gear" icon within the green square just to the left of the email template itself brings up the left-hand control panel for that primary block.
The figure below shows the top section of the main left-hand control panel for all primary blocks. Note the sub-section entitled "Background". You will see that there are two feature settings, "Background" and "Body". By clicking on the circular color spot directly across from either, you can change the respective background color.
A quick note on terminology: In this article, we use the word "background" in two ways. When NOT capitalized, it means the background of whatever Builder element to which we are referring. When capitalized, "Background", we specifically mean the viewable area of the recipient's inbox that lies to either side of the actual email. For a large-screen desktop system, this could be a fairly wide area since Builder emails are set to a maximum width of 640 pixels. On a smaller smart phone, the recipient may only have a thin vertical sliver of viewable inbox NOT taken up by the actual email content.
"Body" refers to the respective primary block whose left-hand control panel you have engaged.
To illustrate, we will click on the color spot to the the right of the "Background" feature and set the color to a dark grey. For the "Body", we will set the color to a light yellow. The figure below shows the resulting changes.
Now, in this example shown above, you will see there is a vertical space between the outer edges of the primary block (the yellow "Body" background) and the text within it. The text itself actually sits inside something called a text element, but for the purposes of this article we'll call it a text sub-block. It "belongs" to the primary block it is in and will by default "inherit" the primary block's background color, in this case light yellow. BUT, you can change the background color of the text sub-block to be something different.
To do so, first click within the text sub-block itself. This will bring up a left-hand sub-control panel just for that text sub-block. At the very top will be a feature called "Background", as shown in the figure below. By default, the color spot to the right of "Background" feature will show the color white, even though at the moment the text block has inherited the light yellow background of the parent block.
Now we will click on the white color spot and change the background color of the text sub-block to light green, as shown in the figure below.
Background Images
As we mentioned at the beginning of this article, you can also use images as backgrounds. Background images can only be applied to the "Background" or a primary block's "Body". You cannot use background images for just the text or title sub-blocks, but they can inherit the primary block's background image. This will be described in greater detail below.
To illustrate the use of background images, we will first reset the color of the text sub-block back to light yellow so that the entire primary block is the same color. Clicking on the grey "Gear" / green square icon, we will bring up the main left-hand control panel for the primary block. Please note the buttons labeled "Image" just to the right of the color spots.
First, we'll select an image for the "Background". The figure below shows the result. You can see that the dark grey has been replaced with an image. A recipient will only see the image in the inbox area that is NOT taken up by the email itself.
Now we will reset the "Background" to dark grey by clicking the small white "X" in the red circle next to the "Image" button"
We will then delete the background color for the text sub-block by clicking the same small white "x"in the red circle just to the right of the color spot:
Lastly, will click "Image" button for the "Body" background feature and select an image:
The above example illustrates a potential problem you must be aware of when using background images. If the color of the text is too close to the primary colors of the image, a recipient will have trouble reading the text. Always make sure to send a test email to yourself to check for these types of design issues.
There is also one very important note when using background images: Microsoft Outlook does not support background images in the majority of cases, and will instead use the primary block's fallback color. This can also cause an issue if your fallback background color does not have enough contrast to your text color.
As always, should you have any questions regarding any feature discussed in our Knowledge Base documents, please ask Pinpointe Support for assistance.