lorem ipsum dolor sit amet, consectetur adipiscing elit.In the part of this email, we will have two columns: one with descriptive images, and two with our text block to complement the images in the first part. vestibulum sed finibus lectus, sit amet suscipit nibh. proin rutrum enim eget magna efficitur, eu semper augue semper. The intro text will consist of a title, body text and a call to action. The background-color property allows us to specify the background color of the button, and then use the href to specify the location of the link or page. The call-to-action button is implemented using the mj-button component. You can also set the text color, font size, font family, etc. To use the image header, we'll add a background-url property to the jms -section component, then style the image with the background-size and background-repeat properties.įor our slogan text block, we center the text horizontally and vertically using the align property. This part of our email will only contain our company/brand name in the center banner position.
#MJML SOCIAL ICONS FULL#
To make the background full width in the column, set the column width to 600px and width="600px". The button's href sets the position of the button. Similar to the first heading, you will have to center the text both vertically and horizontally, the padding remains the same. To add an image caption, you have to replace the background color of the section with background-url. We'll also have a call-to-action button that leads to a page with more details. In this section, we will have a background image and a piece of text that should represent our company slogan. The mj-text component is used for our text content and takes style properties like font style, font size, color, etc. The mj-column component is used to define a column. This part of our email contains our company/brand name only in the center banner position: mj-body defines the starting point of our email, while mj-section defines a section that contains other components.įor each part of the definition, a background-color property with its own hexadecimal value is also defined. As shown above, our email will be divided into six parts, in our email.mjml file:Īs you can see above, we are using two mjml components: mj-body and mj-section. These parts are the framework for our responsive email. Once the file is created, our responsive email will be divided into the following parts:
#MJML SOCIAL ICONS INSTALL#
You can install mjml with npm to use it with node.js or the cli:įirst, create a file called email.mjml, although you can choose any other name. In this tutorial, we will use mjml to build beautiful responsive mail and test it on multiple mail clients. It also has feature-rich standard components to reduce development time. Its semantic syntax makes it easy to use. This markup language was designed to reduce the pain of writing responsive emails. Mjml is a modern email tool that enables developers to create great-looking, responsive emails on all devices and mail clients.
0 kommentar(er)
