Step 1

Creating your email structure

To design a responsive email, you'll create sections with the<mj-section>tag. You can split your section in several columns with the<mj-column>tag in which you'll be able to add sub-tags (text, images, buttons…)

Add some text in the left column of your email like this:<mj-text> Some text </mj-text>"

Step 2

Adding images in the background

Images are a good way to spice up your emails and boost engagement. Let's see how easy it is to use MJML to add a responsive image in the background of a section. We've added a new section in which we'll add a background image.

Add a background image to the second section. Your code should look like this<mj-section background-url="/assets/img/background-url.jpg">

Step 3

Adding images inside sections

Background-images are useful, but you might want to add an image in a section or a column instead of as the background. To do this, simply use the<mj-image>tag with a src attribute linking to your hosted image. This lets us easily add an image on top of our image, such as a logo.

Add an image on top of the image you included previously. Your code should look like this:<mj-image src="/assets/img/mj-image.jpeg"></mj-image>

Step 4

Adding buttons

Every email has an end goal, whether you're driving your users to a landing page or to take a particular action. The best way to do this is to use a call-to-action (CTA) or a button. Adding a button is pretty easy with MJML - just add the tags<mj-button> Your text </mj-button>. Since we added an image in the background of our section, we can easily add the button on top of the image by adding our tags in the only column of this section.

Add a button on top of your background image in the second section of the email. Remember, to add a button, just include<mj-button> Discover </mj-button>

Step 5

Customizing elements

Up until now, we've only showed you examples using standard components. But it's just as easy to customize them by using attributes. For example, try customizing your button with attributes such as 'background-color' or 'border-radius'.

Customize your button to make it look like the way you want. We like "<mj-button background-color="#F45E43"> Discover </mj-button>"

Step 6

Generating responsive HTML

Now just sit back, relax and watch as MJML outputs HTML for you. Here's all the HTML you didn’t have to code since the engine did it for you!

Congratulations!

Congrats for finishing the tutorial!

Head over to the documentation to discover more high-level components and
attributes to pimp your components. Start coding responsive email right away by
downloading the engine so you can use MJML in your favorite environment, with plugins
for Atom, Sublime Text…