# Email Editors & Templates > **Source**: [SendX](https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q) > >

Design stunning emails with SendX. Personalize content, use Drag & Drop and AI tools, and add visuals for better engagement. Learn to customize styles and build responsive, branded emails effortlessly.

## Browse Collection 1. [Exploring SendX Email Editors: Drag-and-Drop, Plain Text, and AI Editor Features](https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/wd3IO6ZoPWvXCjN3OTKSEA.md) (Video) 2. [Manage your email templates](https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/UnI728wZUhZZYn6D774zow.md) (Video) 3. [Creating a Newsletter with SendX AI Editor and Template Selection](https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/l0SZGiKkve1bnZgSQrJkKw.md) (Video) 4. [How to Share or Save Campaign Content as a Template](https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/BFV06ODaOM1JJQNdTvWU8g.md) (Video) 5. [How to Add Basic Personalization to Emails ](https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/Ws8VTnvgPqW1nf8TBYnZzA.md) (Video) 6. [How to create your first email template using drag-and-drop editor](https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw.md) (Video) 7. [How to customize, fonts, colors, and styles for brand consistency](https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/bxu995Ru7tukwiJD32hEHg.md) (Video) 8. [Saving and Reusing Custom Content Blocks in Emails](https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/kjlzKvefpcZBXqZO2s4png.md) (Video) 9. [Adding Social Media Icons to Emails: A Step-by-Step Guide](https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/ITQuZMmXW7qUyVjbJ1AXwg.md) (Video) 10. [Adding a "View in Browser" Link to Emails](https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/K1OSrIX9jFM3PcrBjPsObg.md) (Video) 11. [How to Add Images, Videos, and GIFs to Email Campaigns Using Drag and Drop Editor](https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/8udkK9QZkwNQM7SMk4NrlA.md) (Video) 12. [Creating an Email Template Using Custom HTML](https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/Hi4KV3g530j9rlsJXVUtJA.md) (Video) 13. [Customizing Unsubscribe Footer and Success Page in SendX](https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/djcNsxHC41fvSrd06kUiEA.md) (Video) --- # VIDEO: How to create your first email template using drag-and-drop editor ## METADATA - id: MuDuxflyrgWSzCYn0LkKVw - type: video - source: SendX - content_url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw - collection_url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q ## TRANSCRIPT - time: 00:00 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=0 text: Hi. This is going to be a tutorial on how you can design your first email using our drag and drop editor. So from the - time: 00:06 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=6 text: dashboard, click on the profile icon on the top right of the navigation bar, then click on settings. - time: 00:13 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=13 text: In settings, click on templates tab. - time: 00:16 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=16 text: Here you will be able to see all the email templates you have created in the past. - time: 00:21 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=21 text: Just click on add email template, which will open up the drag and drop editor where you can design your new email template. - time: 00:29 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=29 text: So we are going to design an email template for our e-commerce store, which will have products listing and link to purchase them. - time: 00:36 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=36 text: At the top, you can provide a name for your new template. - time: 00:42 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=42 text: So from here, you have the option to use an existing template from our templates library. - time: 00:47 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=47 text: We have a library of over hundreds of templates for different purposes. - time: 00:52 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=52 text: You can filter through them either by searching here, or you can select them by category. - time: 00:59 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=59 text: For the purpose of this video, we are going to use an empty template. - time: 01:07 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=67 text: So we initially have here is an empty row. - time: 01:12 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=72 text: What we can do is drag and drop different type of blocks in this row and create our email. - time: 01:18 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=78 text: So the first thing we are going to do is add our logo. - time: 01:23 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=83 text: So we are going to add an image here, and either we can provide a URL for the image, or we can upload the image. - time: 01:30 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=90 text: For now, let's provide a URL for the image. So this is going to be our logo. - time: 01:35 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=95 text: Then let's add another empty row. - time: 01:38 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=98 text: So simply go to the rows tab and click on the drop down and select empty. - time: 01:43 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=103 text: So you will have a bunch of empty rows here. You will have a single column empty row or two column empty row with - time: 01:49 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=109 text: different variation of column sizes. What we need right now is a single column empty row. - time: 01:55 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=115 text: Let's add another image here, which will be the image for our product. - time: 01:59 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=119 text: So again, let's provide a link for this. - time: 02:04 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=124 text: So this is the product we are selling. - time: 02:07 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=127 text: So now what we are going to do is we are going to add a button here, which the user can click and buy the product. - time: 02:14 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=134 text: So let's add another row and let's go back to the content tab and drag and drop the button block. - time: 02:22 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=142 text: So let's drop it here so we can click on it and we can modify the settings for this. - time: 02:28 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=148 text: We can provide the link where we want the user to be redirected. - time: 02:33 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=153 text: Also, let's change the text for this. Let's call it buy now, and let's change the color for it as well to match the product - time: 02:38 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=158 text: after it. - time: 02:42 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=162 text: Let's add another few products here, and let's say we want to add two products in a single row. So what we will do is we - time: 02:48 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=168 text: will add another empty row, but instead of a single column row, we will add two columns row. - time: 02:58 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=178 text: Now we can add content blocks to both of these columns now. Let's add image to both of them. Each of them is going to - time: 03:04 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=184 text: be a product. - time: 03:07 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=187 text: So let's again add a link for this product. - time: 03:13 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=193 text: Let's add another link for the second product. - time: 03:19 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=199 text: Now let's add a button to buy these as well. - time: 03:28 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=208 text: Let's change the color for these. - time: 03:31 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=211 text: Let's just copy the color for the button we have above into these buttons as well. - time: 03:39 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=219 text: So that's all of our products. - time: 03:41 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=221 text: Now what we want to do is add some social media icons just below it. - time: 03:46 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=226 text: So let's add another empty row. - time: 03:50 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=230 text: And in one column, we are going to add the social media icons. - time: 03:54 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=234 text: So let's just drag and drop the social media icons block. - time: 03:58 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=238 text: And in the other column, we are going to add an image block, which will be the payment methods we accept on our platform. - time: 04:04 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=244 text: So let's add an image for this. - time: 04:09 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=249 text: So right now, the alignment is not right for this. - time: 04:13 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=253 text: So let's add some padding onto this image. - time: 04:16 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=256 text: Just scroll down in the settings, and we have the option to add padding. - time: 04:20 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=260 text: We want to add padding at the top only. - time: 04:23 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=263 text: So let's click on more options. Let's add some padding to the top. It looks better now. - time: 04:31 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=271 text: Also, let's change the icon. Let's change the shape of these icons. - time: 04:37 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=277 text: Let's add some more padding to the other rows to make them look evenly spaced. - time: 04:42 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=282 text: Let's add some padding to this image as well. - time: 04:49 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=289 text: Once you have edited your email, you can also preview it by clicking the preview button at the top. - time: 04:56 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=296 text: And we can preview the email. - time: 04:59 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=299 text: We can preview it in mobile view as well, and we can enable the dark mode as well. - time: 05:04 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=304 text: Once you are satisfied with the email, simply click on save and continue. - time: 05:11 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=311 text: And that's it guys. - time: 05:13 url: https://video.sendx.io/yyIhzKxWWgeQ8fMgjNWA3Q/MuDuxflyrgWSzCYn0LkKVw?start_time=313 text: You have designed your first email template. ## SUMMARY # Designing Your First Email Using the Drag and Drop Editor This tutorial will guide you through designing your first email using our intuitive drag and drop editor. Follow these steps to create an engaging email template for your e-commerce store. ## Step 1: Accessing the Email Templates 1. From the dashboard, click on the profile icon located at the top right of the navigation bar. 2. Select **Settings** from the dropdown menu. 3. In the Settings menu, click on the **Templates** tab to view all your previously created email templates. 4. Click on **Add Email Template** to open the drag and drop editor. ## Step 2: Designing Your Email Template We will design an email template for an e-commerce store featuring product listings and purchase links. ### Adding a Logo 1. Provide a name for your new template at the top. 2. Choose an existing template from our library or start with an empty template. For this tutorial, we will use an empty template. 3. Drag and drop an **Image** block into the empty row to add your logo. You can either provide a URL or upload an image. ### Adding Product Images and Purchase Buttons 1. Add another empty row by selecting **Empty** from the Rows tab dropdown. 2. Drag and drop an **Image** block for your product image and provide a link for the product. 3. Add a **Button** block for purchasing the product. Modify the button settings to include a purchase link and change the button text to "Buy Now". Adjust the button color to match your product theme. ### Adding Multiple Products 1. Add a two-column empty row to display two products side by side. 2. Drag and drop **Image** blocks into each column for the product images and provide links for each product. 3. Add **Button** blocks for each product and adjust the settings to match the previous button. ### Adding Social Media Icons and Payment Methods 1. Add another empty row with two columns. 2. In one column, drag and drop the **Social Media Icons** block. 3. In the other column, add an **Image** block for the payment methods accepted on your platform. 4. Adjust the alignment and add padding to ensure proper spacing and alignment. ## Step 3: Finalizing Your Email Template 1. Preview your email by clicking the **Preview** button at the top. You can view it in mobile mode and enable dark mode for better visualization. 2. Once satisfied, click **Save and Continue** to finalize your email template. Congratulations! You have successfully designed your first email template.