# Designing messages with a drag-and-drop editor

The Drag & Drop email creator makes it easy to create your own email templates by intuitively dragging and placing elements in the desired places in the creation.

### Adding lines

1. To start creating a template, first go to the Row tab in the creator.
2. Choose a suitable row layout, such as one column, two columns or a more complex layout.
3. Drag the selected row to the workspace where you are building your template.

<figure><img src="https://1762163817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDIGjHYIXYoHyJoOeeUgD%2Fuploads%2FDTUJMj7MNRr63gd7AbPy%2Fimage.png?alt=media&#x26;token=5f96e167-46a1-4279-9406-2533c4eb18c8" alt=""><figcaption></figcaption></figure>

### Adding elements

1. After inserting a line, choose from the available options what you want to put in the line, for example:
   * Image
   * Icon
   * Text
   * Button: Place a Call to Action button and customize its text, color and link.
   * HTML code: If you have a ready-made code, you can paste it into an HTML block to advance customize your template.
2. Each of these elements can be freely moved, edited and customized in the creation.

<figure><img src="https://1762163817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDIGjHYIXYoHyJoOeeUgD%2Fuploads%2FBaOAYH04me4QCGqHIXhl%2Fimage.png?alt=media&#x26;token=a0ae86ae-40bd-455e-b794-0f0842259bd1" alt=""><figcaption></figcaption></figure>

### Modifying elements

1. Click on the selected item to open its properties and customize it:
   * Background color: You can set any background color for the whole block or individual sections.
   * Font: Edit the text by changing the font size, type, color and alignment.
   * Link color: If you create hyperlinks, you can customize their color to make them more visible or to match the rest of the design.
   * Linking elements: Images, buttons and text can be easily linked to external sites by adding the appropriate URL.

<figure><img src="https://1762163817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDIGjHYIXYoHyJoOeeUgD%2Fuploads%2FVHspGh2zjsYH0dGX1MZX%2Fimage.png?alt=media&#x26;token=d47e18dd-8cc6-483e-95ea-d007f5b6f24f" alt=""><figcaption></figcaption></figure>

### Adapting the view to mobile devices

Check and edit the layout for mobile devices, making sure everything is readable and well laid out on smartphones.

<figure><img src="https://1762163817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDIGjHYIXYoHyJoOeeUgD%2Fuploads%2FaZV7F9ipnZpv06qTKqaL%2Fimage.png?alt=media&#x26;token=c93d681d-2c8b-4f91-b2bb-9dc84214bff7" alt=""><figcaption></figcaption></figure>

<br>
