Drag & Drop Editor (New) - Part 3: How to use content blocks? (Text & Links, Image, Button, etc.)

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
We can activate the New Drag & Drop Editor 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:

  • Styles (paragraph, headings, link, button)
  • Font
  • Size
  • Text color
  • Text formatting (Bold, italics, underlined, strikethrough)
  • Font background color
  • Remove format
  • Add or remove a link
  • Add an emoji
  • Bullets and lists
  • Personalization

Text-bar-combine.gif

Links and personalization

mceclip0.png

Learn how to personalize your text using contact attributes.

To add a link on your text, select the text, click the link icon and fill in the details in the Insert/edit link window. The Link title is the pop-up that appears when you hover over your link.

mceclip0.png

You can select different types of links:

  • Absolute link (URL): this is the basic option for links, choose this one to add a URL.

  • View in browser: The mirror link is automatically added to the footer of your campaigns. It's a link that recipients can click if they have trouble viewing your email in their inbox and want to open your email as a web page. Having a mirror link in your campaigns is not mandatory.
    ➡️Y
    ou can check our dedicated article on mirror links
  • Unsubscribe: The unsubscribe link is also automatically added to the footer of your campaigns. It's a link that recipients can click to open your Sendinblue unsubscribe page and stop receiving your emails. Having an unsubscribe link in your campaigns is mandatory as it is essential to your contacts and for the proper functioning of your campaigns.
    ➡️Y
    ou can check our dedicated article on unsubscription links

  • Update your preferences: Sendinblue offers an Update profile form to help you collect updated information about your subscribers, such as their details, preferences, and even which lists they want to be subscribed to. We recommend including a link to this form in the footer of all of your emails to help subscribers share their preferences with you. 
    ➡️You can check our dedicated article on Update profile links
    • This option will be added automatically when you select a form in Campaign > Settings > Use a custom update profile form as explained here. If this option is greyed out, you need to activate this option in Campaigns > Settings first.
    • If you're using a template, you need to manually add this link Update your preferences.
  • Email Link (mailto): with the Email link you can add an email address.

  • Click to call phone number: add a link to a phone number with this option

  • Anchor for relative links: You can create an anchor somewhere in your campaign and then use the relative link option to link to that anchor. 
  • Relative link (for anchors): once you've created your anchor in your campaign, use this option to link to the anchor (for example going back to a specific part of the newsletter at the top of the page)

To remove or update a link, place your cursor on the link, click the link icon and you'll see the Remove and Update button.

mceclip1.png

Same block, different formatting

With this new editor, you can choose a different formatting within the same text block. For example you can have a title followed by a paragraph and bullets. You can also have different colors within the same block. 

Multiple_styles.gif

Colors

Capture_d_e_cran_2021-08-02_a__17.32.47.png

The colors you use in your template will now be saved in the color picker. Like that, next time you need to use them in your design, it'll be much easier. You can always remove a saved color by selecting a text with this color, click the color picker and then Remove color. It may take a few minutes to disappear.

 

Remove format

You can easily remove the formatting of a selected text by clicking the Remove format icon:

mceclip1.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 New 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 Insert image from URL.

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

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

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

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 just leave 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.

Product

If you're using Shopify or Shopware plugins with our New Drag & Drop Editor, you'll see the Product content block.

  1. Drag and Drop the Product content block to your newsletter
  2. Select a product by using the search bar
  3. Click Insert.

You'll see the product image, product title, product description and product price. The product url is automatically linked to product image and button as long as your shop is published.
You can check our dedicated article on how to Insert a Product block in the Drag & Drop Editor (New).

⏩ 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.