BombBomb gives you the choice to easily create an email using a template or order your own custom email design. But if you want to take a deeper dive into the nitty-gritty of formatting your email template, you can do that too! Watch this video or keep reading below to learn how to design your perfect email template.
- Adding, moving, or deleting an element
- Changing the colors of your email
- Editing the look of your email (borders, padding, margin)
Adding, moving, or deleting an element
To add an element to your email, click the "Layout" tab in the left panel. Under this tab, you'll see elements you can add to your template. To add one, click and drag the element you'd like to your email. When a placeholder changes to a blue-green color while hovering over it, you can drop the element in that spot.
There are nine elements you can add:
- Text will add an additional text box.
- Media will allow you to add an image or video.
- Media + Text will add a media element and text box in a row.
- 2 Columns will add two text boxes in a row.
- Divider will add a line you can use between elements to add visual interest.
- Social will add social media icons (covered in this article).
- Button will add a button (covered in this article).
- Container will add a media element and text box in a (vertical) column that will remain together, no matter how you edit them.
- Wrapped Text will add a media element and text box in a (horizontal) row that will remain together, no matter how you edit them, and allow your text to wrap around the image or video.
To add an image or video select the "Media" option in the "Layout" Menu. A media box will appear in your email body; click in the gray "Click to Add Image or Video" box; a menu will appear on the left titled "Media Settings" with options to add content by recording, uploading, or choosing an image/video from your media library or from your computer.
Select the piece of media you would like to upload under the "Media Type" dropdown box.
To delete an element, hover over the element and click on its respective gear icon. Scroll down and click the "Delete" button.
To move elements, hover over the element and click and drag the element by the four-way arrow icon on the left. You can drag and drop it anywhere a placeholder turns blue-green.
To resize an element, hover over the element and use the arrow in the right corner to change the size.
Changing the colors of your email
To change the colors of your email, click on the "Design" tab, then click into the Color Box of the area you'd like to change. If you have a specific color you'd like, you can add the HEX code or change the RGBA numbers. Or you can click into the color bar, and then click on the color you'd like.
Background will change the wider background color of the email.
Body will change the area behind your video, text box and signature.
"Body Text," "Heading 1," and "Heading 2" will change the colors of text in those styles. To find your text style, click into the text box, and an editing bar will appear above it with either "Normal" or Heading 1/2". "Normal" refers to body text. (You can also change your default font and size here.)
Links, Dividers, and Borders will change the default colors of your hyperlinks (such as your website and phone number in your signature), the dividing lines, and the borders, respectively.
Color themes: To make selecting colors easier, there are also color themes you can choose from. Click on "Change" next to the "Theme" field on the bottom left. Hover over the color theme you like and click "Choose."
Saving a color theme: If you've built a color theme you want to use in the future, you can save it. In the field next to "Theme," type in a name for your theme. Click "Save Theme." On your next email, you can click "Change" next to the Theme field and your new theme will be an option.
Changing the color of a row or column/border: To learn how to change the background color of rows, columns, or borders, keep reading below!
Editing the look of your email
To edit the look of an element, hover over it. You'll see both the row and column. Their corresponding boxes will show you what each will allow you to edit. Row Settings will allow you to edit anything from left to right, whereas the column will allow you to edit the element(s) highlighted. For example, in the image below, if you want to add a border around the edge of your video, you'd edit the column. If you want to add a border around everything in that row, you'd edit the row.
Click the gear icon next to the one you'd like to edit, and select either "Row Settings" or "Column Settings."
If you want to change the background color behind an element, select the row Settings. Click on the color box next to "Background" and select the color you'd like. To revert back to no color, click "Clear" next to the color box.
To add a border, increase the border width in row/column settings. You can change the color as well by clicking in the "Border Color" box. In this example, we've added a border around the row. If we added a border to the column, it would be around only the video.
To change the space around your element, you can edit the padding. Increasing the padding will enlarge the space around your element.
To add a margin (or white space) around your border or background color, increase the margin. If you don't have a border or background color, this function will do the same thing as changing your padding.
To round the corners of your email, click on the "Design tab" and adjust the corner radius.
If you want to revert to an earlier version of your design, click "History" in the left panel. As you hover over each version, it will show you a preview. Click on the version you'd like to revert to.
If you want to edit the source code, you can access the html by scrolling to the bottom and clicking on "Show Source." (It might be hidden behind the "Help" icon, so look out for it!)