8/19/2023 0 Comments Mjml buttonWe can also apply styles to a group of components using tag to help us reduce duplications in our code we'll get to use that later as well. We can add MJML component tags (like, ,, etc.) inside tag to override the default settings on a specific component. I have also set the padding to 0 because some components have default padding, by resetting it to 0 will make it easier for us to construct our template especially when following the expected design. Using tag makes it easier to override the style of MJML components via one tag. Let's update the code with the following below: Next, let's define a default style for our MJML components. The tag allows us to control on which breakpoint the layout should go desktop/mobile. To start with, let's define the breakpoint by writing the following code below: Inside tag we can define things like breakpoint, attribute overrides, create reusable classes and styles and inside tag is where the sections of our email template will be. It's more of an extension of what we already know and used to. It doesn't feel like writing code in a new language. That's what I like about MJML, it doesn't look too foreign. This should look very familiar to you since it's like, and in regular HTML. Open the main file src/index.mjml and type the following below: Let's set up the initial structure of our MJML code. Delete or clear the contents of the following below: This is the index.html served by our local server. If you end up seeing the directory of /src/, just refresh the page and you should see your email template. You should be able to see the boilerplate with the text Hello World displayed on your browser. This command will open your default browser and go to If it doesn't, you can do it yourself too. Once installed, you can run the local development by typing the script in your terminal: yarn run dev Next, type the following below in your terminal to install the dependencies of the boilerplate: yarn install Then, open the terminal in Visual Studio Code. Make sure to install them if you haven't!Īlright, let's start by opening our project in Visual Studio Code. This is the link to the email template we'll accomplish by the end of this post, you can use it as your reference throughout this tutorial.īy the way, upon writing this post, I assume that you have some web development background and basic knowledge regarding npm, yarn, HTML and CSS. To start, you would need to setup your local development for MJML framework, I've written a separate post just for that, but you can also just clone the boilerplate to save time: git clone mjml-sample-edm If you're new to it, then you're in the right place because I'm going to build an email template using MJML framework in a step by step way so you can follow me along. Originally created by a team of developers at Mailjet, MJML's objective is to simplify the way people design responsive emails. It's called MJML - short for Mailjet Markup Language. I want to make the icon images inline as well on the mobile version WITHOUT using the mj-social-element that MJML has since I would like to use the icon images I have and not the icon images the mj-social-element offers.If you haven't heard about it yet, there's already an email framework that makes it less painful to build responsive email templates. And I want to create an inline of images both on desktop and mobile. I am trying to create an email template using MJML.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |