The Design elements are single items that can be added to your newsletter. If you want, we also created more complex elements that gather images, title, text and button in Content elements. In this article we'll explain to you how to add the design elements (Title, Text, Image, Button and Space) to your newsletter and how to modify their settings. 

• Part 1: Overview of the drag & drop editor
• Part 2: Add and move blocks in your email campaign
• Part 3: Block options and elements options 
• Part 4: Design elements (Title, Text, Image, Button & Space) - YOU ARE HERE
• Part 5: Content blocks
• Part 6: Header and footer elements

Title and Text

With the elements Title and Text, you can easily add written information to your email campaigns, then apply a variety of font styles and settings. 

Format your titles and text with the toolbar

You can modify the text formatting (bold, italic, underlined, crossed, etc.) by clicking on the text and using the formatting toolbar:

Modify the element settings

The element settings are different from one element to another. You can access them by clicking on your element (Title or Text in this case). On the right, the element settings will appear and you will be able to modify the following options:

Font family Alignment of the title (for the text, the alignment can be changed from the formatting toolbar) Color of the links If the links are underlined or not

Add a link in your text

Adding links to your text couldn't be easier! Use the formatting toolbar in a Text element to turn any piece of text in your email campaign into a link.

1. Add the Text or Title element to your design.
2. Replace the Lorem ipsum by your own text.
3. Select the text you want to add a link to.
4. Click the Link icon in the formatting toolbar
5. Leave the Link type as URL and enter the URL in the field.
6. Click OK.
   

In the tab Target, you can choose the destination of your link (open new window, same window, etc).

To remove the link, select the text and click the icon Unlink, on the right of the Link icon.

Add a mailto 

Similar to adding a link, you can add a mailto in your emails if you want to receive responses when subscribers click the link. 

1. Add the Text or Title element to your design.
2. Replace the Lorem Ipsum by your own text.
3. Select the email address you want to add a link to.
4. Choose Email as a Link Type.
5. Enter the email address (mandatory) and the message subject/body (optional)
   Fill in the Message Subject and Message Body fields if you want the subject line and email body to be automatically filled in when someone clicks the link to send an email.
6. Click OK.
   

Add a background color or background image

If you want to add a background color or image to the title/text elements, you need to go to the block options by clicking on the pen icon. Check the whole procedure in our section Background color or image from Part 3: Block options and elements options article.

Image

With Sendinblue, you can quickly upload, add, and edit images in your email campaign. This is a perfect way to customize the design of your emails and make it more engaging.

You can add images in two different ways in you emails:

• Using the Image Gallery
• From a URL

We will describe these two methods in the sections below.

Adding an image via the Image Gallery

1. Drag and drop the Image element into your email.
2. Click the image
   The Image Gallery appears in the left menu.
3. To add an image in the Image Gallery:
   • Click + Add an image on the top right
   • Or drag and drop an image in the menu
4. When it has finished loading, drag and drop your image in the Image element.

Adding an image from a URL

1. Drag and drop the Image element into your email.
2. Click the image.
   The Image settings appear on the right.
3. At the bottom in Image Source, check From URL.
4. Paste your image URL in the field.

Your image will not be displayed in the editor but you can preview it when you send a test email.

Edit the settings of the image

In the left menu, you'll have access to several settings for your image. Click the image to access this panel:

Image link: if you want your image to be clickable, you can add a link in this field. Alt text: this text will appear instead of the image when display is disabled by the user or by default by the email consultation interface. Border: add a border to your image and pick the color and thickness Image border radius: You can give any element "rounded corners" using this setting Image alignement: align your image on the right, center or left Image source From gallery: pick your image from the gallery on the left From URL: insert an image URL

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 on the top left corner of your image.

How to resize an image?

1. Click Edit at the top-left corner of the image
2. Go the Transform at the top-left corner of the photo editor
3. Select Custom
4. Tick the box next to Lock the resolution
5. Change the width or height of the image, the other will be automatically adapted to keep the same ratio
6. Click Save
7. The resized image is added in the gallery and you can drag and drop it in the image element.

Button

You can use our Button element to link to a website or file to download. Adding buttons to your email campaigns are great to highlight specific links that you want people to click. 

Link: insert your URL here. To add a mailto, put mailto:contact@mycompany.com (put your email here) Font Family: font of the text on the button Button Color: pick the color of your button Text Color in Button: pick the color of the text of your button Button height: change the height of your button Button font size: change the size of the text on your button Button Radius: add rounded corners to your buttons. Button align: choose the alignment of your button (left, center, right) Border: add a border to your image and pick the color and thickness

Space

Adding spaces to your design will make your campaign more pleasant to read. The Space element will automatically take the same color as the background color of the page, you can only change the height of the element. 

You can also manage all the spacing directly within the elements (text, button, image, etc.) in the block options by clicking the pen icon on the top-right corner of the element. To learn more about space, check our article Part 3: Block options and elements options.

⏭️ What's next?

• Part 5: Content blocks
• Part 6: Header and footer elements

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