You can create your dream one-off email from scratch by not only stacking different elements, but also splitting each row of your messages into 1, 2, 3, or 4 versatile columns. All elements can be added via a drag, or a simple click will append them to the bottom of your message. 

Lets dive into each element: 

Table of Contents

Blasts > Text
Blasts > Image
Blasts > Image + Text
Blasts > Video
Blasts > Button
Blasts > Divider
Blasts > Social Link
Blasts > Signature


Text

Text > Element:

This is where you enter your text for the blast. There's multiple opportunities with how to format your message. You have the option here to edit the following:

  1. Boldness: highlight a piece of text you would like bolded and click the bold button.
  2. Italicize: highlight a piece of text you would like italicized and click the italicize button.
  3. Underline: highlight a piece of text you would like underlined and click the underline button.
  4. Font family: highlight a piece of text you would like a different font. 
  5. Size: highlight a piece of text and select the size you would like it.  
  6. Alignment: highlight what text you would like aligned left, center, right, or justified. 
  7. Colors: highlight a piece of text to change the color. If you don't see the color you are looking for you can enter in the desired HEX number.
  8. Hyperlink: add text that you want to link to a specific page. 
  9. Add personalization field: personalize your blasts with adding these fields to address your subscribers by name or email address. 

Text > Layout:

  1. Alignment: Align your text vertically within the text container. 
  • Top: align your text to start at the top of the container. 
  • Middle: align your text to start in the middle of the container. 
  • Bottom: align your text to start at the bottom of the container. 

2. Container Styles include: 

  • Background Color: change the background color of the container. 
  • Top/Bottom Padding: the amount of pixels between the top/bottom of the text and the top/bottom edge of the text container.
  • Left/Right Padding: the amount of pixels between the left/right of the text and the left/right edge of the text container.

Image

Image > Element: 

Here, you can either upload an image from your computer by clicking "Browse" or by pasting an image URL in the space below "Import From URL." After that, click "Add" or "Discard" to either keep or discharge the image. 

When you add an image you have the options to change the Alt-Text, replace the image and link it to a web address (URL), email address, or phone number. 

Image > Layout:

  1. Image Options:
  • Image Width: changes the size of the image horizontally- use the toggle and watch your image get smaller and bigger as you move it. 
  • Percentage: change the size of your image by a specific percent. 

2. Alignment:

  • Vertical Alignment:  align your image to start at the top, center, or bottom of the container. 
  • Horizontal Alignment: align your image to the right, center, or left of the container. 

3. Container Style:

  • Background Color: change the background color of the container. 
  • Top/Bottom Padding: the amount of pixels between the top/bottom of the image and the top/bottom edge of the image container. 
  • Left/Right Padding: the amount of pixels between the left/right of the image and the left/right edge of the image container- if you want your image to stretch across the entire email, set these to 0. 

Image + Text

Image + Text > Element

This element helps your text and image stay in place, no matter the screen size.

1. First, you'll see where you can upload an image or import from an URL.

2. Below that, you'll see where you can add text. 

Image + Text > Layout

  1. Image Options:
  • Image Width: changes the size of the image horizontally- use the toggle and watch your image get smaller and bigger as you move it. 
  • Percentage: change the size of your image by a specific percent. 

2. Alignment:

  • Vertical Alignment: align your image to start at the top, center, or bottom of the container. 
  • Horizontal Alignment: align your image to the right, center, or left of the container. 

3. Container Style:

  • Background Color: change the background color of the container. 
  • Top/Bottom Padding: the amount of pixels between the top/bottom of the image and the top/bottom edge of the image container. 
  • Left/Right Padding: the amount of pixels between the left/right of the image and the left/right edge of the image container- if you want your image to stretch across the entire container, set these to 0. 

Video

Video > Element

Blasts can pull in video from any source. If you are using Vimeo or YouTube, we will automatically pull the thumbnail for the video and place a play button to encourage video clicks. 

When you upload a video URL, it will show you what the preview image will be, and you can change the Alt-Text or replace the image. 

Check the "Play Button" if you would like the play button to be shown on top of the video in the newsletter. 

Uncheck the "Play Button" and the play button will not appear on top of the video in the newsletter.

*Note: when you add a Youtube or Vimeo link, a preview image will automatically generate.

Video > Layout

  1. Image Options
  • Image Width: changes the size of the image horizontally- use the toggle and watch your image get smaller and bigger as you move it. 
  • Percentage: change the size of your image by a specific percent. 

2. Alignment

  • Vertical Alignment: align your image to start at the top, center, or bottom of the container. 
  • Horizontal Alignment: align your image to the right, center, or left of the container. 

3. Container Style

  • Background Color: change the background color of the container. 
  • Top/Bottom Padding: the amount of pixels between the top/bottom of the image and the top/bottom edge of the video container. 
  • Left/Right Padding: the amount of pixels between the left/right of the image and the left/right edge of the video container- if you want your video to stretch across the entire container, set these to 0. 

Button

Button > Element

Create and link buttons in the color, font and size of your choice. Just like images, these can link to a website, email address, or phone number. 

  • First, enter your text in the box. 
  • Under "Link To", you have the option to link this button to a web address (URL), email address, or phone number.
  • Once you choose one of the three options, you will then be prompted to enter a URL, mailto address, or telephone number.

Button > Layout

  1. Button Style:
  • Button Color: color of your button. 
  • Button Text Color: the color of the text in your button. 
  • Top/Bottom Padding: the amount of pixels between the top/bottom of the text and the top/bottom edge of the button.
  • Left/Right Padding: the amount of pixels between the left/right of the text and the left/right edge of the button.
  • Rounded Corners: how rounded the corners of the button are- the higher the number, the more rounded the corners are.

2. Alignment: 

  • Vertical Alignment: align the button to start at the top, center, or bottom of the container. 
  • Horizontal Alignment: align the button to the right, center, or left of the container. 

3. Container Style:

  • Background Color: change the background color of the container. 
  • Top/Bottom Padding: the amount of pixels between the top/bottom of the button and the top/bottom edge of the button container. 
  • Left/Right Padding: the amount of pixels between the left/right of the button and the left/right edge of the button container. 

Divider

Divider > Layout 

This Element can add some design pizzaz or some space between blocks.

  1. Divider Style
  • Use Line > if you click this you will be prompted to then select the thickness of the line and the color.
  • Don't Use Line

2. Container Style

  • Background Color: change the background color of the container. 
  • Top/Bottom Padding: the amount of pixels between the top/bottom of the divider and the top/bottom edge of the divider container. 
  • Left/Right Padding: the amount of pixels between the left/right of the divider and the left/right edge of the divider container. 

Social Links

Social Links > Element

Select the social links that you want to enter in your blast to take your audience to your social accounts. Click the social links you want to add to your blast and they will appear. To un-add them, just click them again in elements. You can enter/edit your social links in your Cerkl settings. 

Social Links > Layout

1. Alignment

  • Vertical Alignment: align your social links to start at the top, center, or bottom of the container. 
  • Horizontal Alignment: align your social links to the right, center, or left of the container. 

2. Container Style

  • Background Color: change the background color of the container. 
  • Top/Bottom Padding: the amount of pixels between the top/bottom of the social links and the top/bottom edge of the social links container. 
  • Left/Right Padding: the amount of pixels between the left/right of the social links and the left/right edge of the social links container. 

Signature

Give a message a personal touch with this helpful Element. You can add a valediction, name, and position- as well as upload a signature image file. 

Signature > Element

  1. Upload image: to enter an image for your signature, you can upload it here.
  2. Import From URL: add an image of your signature with a URL.
  3. Closing
  4. Name
  5. Title 

Signature > Layout

  1. Text Style
  • Text Color: the color of the signature. 

2. Image Options

  • Image Width: changes the size of the image of your signature horizontally- use the toggle, and watch your image get smaller and bigger as you move it. 
  • Percentage: change the size of the image of your signature by a specific percent. 

3. Alignment

  • Vertical Alignment: align your signature to start at the top, center, or bottom of the container. 
  • Horizontal Alignment: align your signature to the right, center, or left of the container. 

4. Container Style

  • Background Color: change the background color of the container. 
  • Top/Bottom Padding: the amount of pixels between the top/bottom of the signature and the top/bottom edge of the signature container. 
  • Left/Right Padding: the amount of pixels between the left/right of the signature and the left/right edge of the signature container. 
Did this answer your question?