Drag & Drop Editor (New) - Part 3: How to use content blocks?

Now that you have understood the difference between layout and content blocks, we will explain further how to use the content blocks in your emails and how to modify their settings.

❗️ Important
Please note that the Drag & Drop Editor (New) featured in this article is still in beta. We can activate it on demand for your account.

In this article, we will cover the following content blocks:

Text

Select the text content block and you will see the text toolbar on the top having different formatting options. Learn how to personalize your text using contact attributes.

mceclip2.png

Watch the video to learn more about adding a link, background color or image and modifying text block settings.

Image

Adding an image via the content library

  1. Select the image block and click Replace in the image settings which opens your content library.
  2. Locate the image that you would like to insert either from My files or Stock images.
    • My files: These are your own images that you upload. Click Upload to upload one or more images from your system.
    • Stock images: These images are from Unsplash which are free to use.
  3. Select the image and click Insert in the top bar. Your image will be inserted in the image block

Adding an image from a URL

  1. Select the image block. 
  2. In the image settings on the left, add the image url in the URL input box.

Watch the video to learn more about adding multiple images in a row and modifying image block settings.

Photo editor

Our drag and drop editor includes a photo editor where you can crop your image, add filters, text or text design. To access the photo editor, click your image and click the Edit button in the Image Settings.

mceclip1.png

You can also edit a photo from the Content Library. Just select the image and click Edit.

mceclip2.png

How to resize an image?

  1. Click the image to access the settings
  2. Reduce or increase the size of the field Width
  3. The image will be automatically resized.

mceclip0.png

Button

Add buttons to create a call-to-action in your emails.

  • Editing the button text: Click the button text to type in your text. You can even personalize the text.
  • Adding link to button: Click the icon highlighted in yellow in the below image to add your link.

mceclip1.png

Watch the video to learn more about modifying settings such as width, border radius, line size, background color for the button block.

Social

Select the social block to choose the social media links that you would like to add in your email. 

Watch the video to learn more about modifying the settings for social block.

HTML

The HTML block lets you add your own code. You can either type in or copy paste your code. To see the preview of your code click the highlighted icon in the image below.

mceclip2.png

Watch the video to learn more about modifying settings such as width and spacing for the html block.

Divider

The divider block adds a horizontal line to separate blocks.

Watch the video to learn more about modifying settings such as thickness, color, shape, width, background color for the divider block.

Header and footer

Use the header block to add your company logo. The footer block consists of the following:

  • View in browser link: This is also referred to as the "Mirror Link". This is a link that recipients can click if they have trouble viewing your email on their email client and would like to view in the browser version. Most of the email templates don't need this option if the templates are responsive but you can always add it if needed.
  • Unsubscribe link: This is basically an indication for your contact on which email address they are contacted in, and from whom.
  • Sendinblue logo: This will appear in the footer of your emails by default.
    • If you have a free plan, the logo will always be displayed in your footer.
    • If you have a Lite+ plan or above, you will be able to remove the logo.

⏩ What's next?

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.