The only components which are not laid out in columns are high-level components such as and, or.
Structuring the emailĪn MJML file is generally made of rows ( ), which are themselves made of columns ( ).
Finally, we can set default styles for a component as described here. Then, we can create mj-classes using the tag, which we will then apply on some MJML components, such as the “preheader” and “menu” mj-classes. We’ll be able to override this default padding by manually setting a new one on the components directly. In this stage, we’re setting the default padding for all components to 0. First, it’s possible to apply a style to all components at once, using. Instead of manually adding styles to MJML components, enables us to inline MJML styles in various ways.
#Mjml tutorial code#
In the code snippet below we’ve created a CSS class that we will use to style the “Shop Now” CTAs, as well as redefined the default style for the link tag to prevent links from being blue and underlined. Those styles will be inlined to the HTML upon rendering. enables you to use CSS in MJML, leveraging CSS classes and styles. Creating CSS styles for the “Shop Now” calls to action In this email by H&M, we can see that there are some elements with similar styles which are used several times, such as the menu and description of the images or the “Shop Now” calls to action. Here is what a basic MJML layout looks like: Getting started with some styles Once you’ve decided which method suits you best, we’re ready to get started. By choosing the online editor, you’ll be able to start immediately, but running it locally enables you to use your favorite email editor (with plugins for Atom, Sublime Text, Vim) and always be up to date with the latest version. There are several ways to code in MJML, such as running it locally or using the online editor. By the way, if you’re looking for inspiration for your email campaigns, ReallyGoodEmails is the place to go! Coding emails with MJMLīefore we start, let’s get ready to use MJML.
0 kommentar(er)
