Now style the paragraph and the notice text. We just have to use CSS attributes in mj-text and mj-button elements. Now we need to style that and finish our example. Hi Jhony! Use the link below to verify your email Then we need 3 text elements and one button Let's do that, we will use mj-text for texts and mj-button for button and a padding for mj-section ![]() īy default images aligned at center, if you want to align it to the left or right, you need to set "align" attribute. Now I'm going to export my sample logo and paste it into the MJML project directory. I also added the mj-attributes for setting Montserrat as the default font for this template. In order to add fonts in MJML, we need to add this code right after the. I have used the Montserrat font, which is free to use, for this demo. First of all let's clean the unnecessary codes in our file. (What is a grid system ?)Īfter the quick overview, let's code. mj-section and mj-column is using a grid system.We can give an inline-style like in the HTML, yet while HTML wraps the style attributes in style="" block, MJML uses it directly with property name and value.We can define our styles in just like in the HTML.is equivalent of tags in the HTML, same way the is.An HTML file will start with and end with, MJML is using the same methodology.It seems there are so many things in common with HTML: We're going to code it from scratch, so let's go with single file, basic layout. You have options in there: you can go with basic empty layout or you can choose something from the gallery I also recommend you to select the minifying option for exported code, as 27 lines of MJML turns into 296 lines of HTML, and you can leverage this.Ĭlick the New Project, enter the project's name and you'll see this screen: There were some good features in options, such as minifying the exported code, configuring tab size and creating snippets are the ones I liked. We will stick with the MJML App for this demonstration. ![]() (Ohh sublime, you were a legend in the earliest days.)
0 Comments
Leave a Reply. |