Cart (0)
Do you want to save? Subscribe Pro Access and get all assets for free without limits
Polybox Documentation
Getting started
Polybox created on the Mailjet. MJML is the only framework that makes responsive email easier. The files have the *.mjml extension. There are also added files in the *.html format for those who are used to work in this format. Many resources are existing where you can convert *.mjml files to *.html and vice versa. In this build you can find anything you need for a beautiful email list template. All you need to do is collect blocks from a different section and your mailing list will be ready for use. The templates are sized to a maximum width of 600px and responsive for mobile devices.
Getting Started for MJML#
-
Install MJML framework MJML framework - Official Page
-
Open MJML editor
-
Navigate to the project
Getting Started for HTML#
-
Open your code editor
-
Navigate to the project
File structure
Polymails
├── cover.jpg
├── Contents
│ └── Contents (Web version)
├── index.html
└── index.mjml
│ └── img
├── *.png
└── *.jpg
│ ├── index.html
│ └── index.mjml
├── CTA Blocks
│ └── CTA Blocks (Web version)
├── index.html
└── index.mjml
│ └── img
├── *.png
└── *.jpg
│ ├── index.html
│ └── index.mjml
├── Dividers
│ └── Dividers (Web version)
├── index.html
└── index.mjml
│ └── img
├── *.png
└── *.jpg
│ ├── index.html
│ └── index.mjml
├── E-commerce
│ └── E-commerce (Web version)
├── index.html
└── index.mjml
│ └── img
├── *.png
└── *.jpg
│ ├── index.html
│ └── index.mjml
├── Features
│ └── Features (Web version)
├── index.html
└── index.mjml
│ └── img
├── *.png
└── *.jpg
│ ├── index.html
│ └── index.mjml
├── Footers
│ └── Footers (Web version)
├── index.html
└── index.mjml
│ └── img
├── *.png
└── *.jpg
│ ├── index.html
│ └── index.mjml
├── Headers
│ └── Headers (Web version)
├── index.html
└── index.mjml
│ └── img
├── *.png
└── *.jpg
│ ├── index.html
│ └── index.mjml
├── News
│ └── News (Web version)
├── index.html
└── index.mjml
│ └── img
├── *.png
└── *.jpg
│ ├── index.html
│ └── index.mjml
├── Styleguide
│ └── Styleguide (Web version)
├── index.html
└── index.mjml
│ └── img
├── *.png
└── *.jpg
│ ├── index.html
│ └── index.mjml
├── Transactions
│ └── Transactions (Web version)
├── index.html
└── index.mjml
│ └── img
├── *.png
└── *.jpg
│ ├── index.html
│ └── index.mjml
├── Emails
│ └── App tutorial
└── App tutorial (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── App update
└── App update (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Blog digest
└── Blog digest (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Delivery summary
└── Delivery summary (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Desktop features
└── Desktop features (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Fashion
└── Fashion (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Fashion - Version 2
└── Fashion - Version 2 (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Message notification
└── Message notification (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── News digest
└── News digest (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Order summary
└── Order summary (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Plans
└── Plans (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Product announcement
└── Product announcement (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Product announcement - Version 2
└── Product announcement - Version 2 (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Product announcement - Version 3
└── Product announcement - Version 3 (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Product announcement - Version 4
└── Product announcement - Version 4 (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Promo sale
└── Promo sale (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Subscription renewed
└── Subscription renewed (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
│ └── Taxi
└── Taxi (Web version)
├── index.html
└── index.mjml
└── img
├── *.png
└── *.jpg
├── index.html
└── index.mjml
in * (Web version) folder all pictures in the file are attached as base64
in the Emails folder all blocks are assembled into a ready-made template.
Introduction
Each folder has index.mjml and index.html files.
If you work with index.mjml files you just need to copy the block that you need. Example: Open the Header folder and then the index.mjml file, and go to the mjml-body. All blocks of this section are collected here.
<!--Header 1 -->
<mj-wrapper background-color="#ffffff" padding="20px 20px 0px">
<....>
</mj-wrapper>
<!--Header 1 -End -->
<!--Header 2 -->
<mj-wrapper background-color="#ffffff" padding="20px 20px 0px">
<....>
</mj-wrapper>
<!--Header 2 -End -->
<!--Header 3 -->
<mj-wrapper background-color="#ffffff" padding="20px 20px 0px">
<....>
</mj-wrapper>
<!--Header 3 -End -->
and so on.
If you work with index.html files you just need to copy the block that you need. Example: Open the Header folder and then the index.html file, and go to the body. All blocks of this section are collected here.
<!--Header 1 -->
<!--[if mso | IE] --><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"><tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style=" background: #ffffff; background-color: #ffffff; margin: 0px auto; max-width: 600px; ">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background: #ffffff; background-color:
#ffffff; width: 100%">
<tbody>
<....>
</tbody>
</table>
</div>
<!--[if mso | IE]--></td></tr></table><![endif]-->
<!--Header / 1 -End-->
<!--Header 2 -->
<!--[if mso | IE] --><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"><tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style=" background: #ffffff; background-color: #ffffff; margin: 0px auto; max-width: 600px; ">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background: #ffffff; background-color:
#ffffff; width: 100%">
<tbody>
<....>
</tbody>
</table>
</div>
<!--[if mso | IE]--></td></tr></table><![endif]-->
<!--Header / 2 -End-->
<!--Header 3 -->
<!--[if mso | IE] --><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"><tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style=" background: #ffffff; background-color: #ffffff; margin: 0px auto; max-width: 600px; ">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background: #ffffff; background-color:
#ffffff; width: 100%">
<tbody>
<....>
</tbody>
</table>
</div>
<!--[if mso | IE]--></td></tr></table><![endif]-->
<!--Header / 3 -End-->
and so on.
MJML
An example of creating a page consisting of 4 blocks
Head of the document
<mjml>
<mj-head>
<mj-title>Delivery summary</mj-title>
<mj-attributes>
<mj-all font-family="Helvetica, Verdana, Arial,sans-serif"></mj-all>
<mj-all padding="0px"></mj-all>
<mj-section padding="0px"></mj-section>
<mj-image alt="" padding="0px"></mj-image>
<mj-class name="h1" font-family="Helvetica" font-weight="normal"
font-size="48px" line-height="58px" letter-spacing="-1.65px"
color="#000000"></mj-class>
<mj-class name="h2" font-family="Helvetica" font-weight="normal"
font-size="38px" line-height="46px" letter-spacing="-1.10px"
color="#000000"></mj-class>
<mj-class name="h3" font-family="Helvetica" font-weight="normal"
font-size="32px" line-height="44px" letter-spacing="-1.05px"
color="#000000"></mj-class>
<mj-class name="h4" font-family="Helvetica" font-weight="normal"
font-size="24px" line-height="32px" letter-spacing="-0.75px"
color="#000000"></mj-class>
<mj-class name="p" font-family="Helvetica" font-weight="normal"
font-size="16px" line-height="25px" letter-spacing="-0.3px"
color="#000000"></mj-class>
<mj-class name="descr" font-family="Helvetica" font-weight="normal"
font-size="14px" line-height="22px" letter-spacing="-0.3px"
color="#000000"></mj-class>
<mj-class name="descr-up" font-family="Helvetica" font-weight="normal"
font-size="14px" line-height="25px" letter-spacing="-0.1px"
text-transform="uppercase" color="#000000"></mj-class>
<mj-class name="link" font-family="Helvetica" font-weight="normal"
font-size="16px" line-height="25px" letter-spacing="-0.3px"
text-decoration="underline" color="#000000"></mj-class>
<mj-class name="button" style="display:inline-block;"
style="box-sizing:border-box;"></mj-class>
</mj-attributes>
<mj-style inline="inline">a { text-decoration: none; color: inherit;}</mj-style>
<mj-style inline="inline">.link-nostyle { color: inherit; text-decoration:none }; /* Apple specific Links */ .apple-link-black a {
color:#111111 !important; text-decoration:none; } .apple-link-gray a
{ color:#999999 !important; text-decoration:none; }
.apple-link-white a { color:#ffffff !important;text-decoration:none; }
.apple-link-tan a { color: #aa6034
!important; text-decoration: none; } .apple-link-light-grey a {
color: #c7c8ca; text-decoration: none; } .preheader {display:none
!important; visibility:hidden; mso-hide:all; max-height:0px;
max-width:0px; opacity:0; overflow:hidden; width:100%;}
img[class="img-max"] { max-width: 100% !important; width: 100%
!important; height: auto !important; }
</mj-style>
</mj-head>
<mj-body background-color="#f3f4f8">
Add header - Header / 3 from the -Headers folder
<!--Header 3 -->
<mj-wrapper background-color="#ffffff" padding="20px 20px 0px">
<....>
</mj-wrapper>
<!--Header 3 -End -->
Add the second block. For example, the -Transactions / 3 from the Transactions folder
<!--Transactions / 3 -->
<mj-wrapper background-color="#ffffff" padding="28px 20px 36px">
<....>
</mj-wrapper>
<!--Transactions / 3 - End -->
Add one more block. For example, the -Transactions / 6 block from the Transactions folder
<!--Transactions / 6 -->
<mj-wrapper background-color="#ffffff" padding="28px 20px 36px">
<....>
</mj-wrapper>
<!--Transactions / 6 -End -->
Add a footer. For example footer -Footer / 3 from folder Footers
<!--Footer / 3 -->
<mj-wrapper>
<....>
<mj-wrapper>
<!--Footer / 3 -End -->
<mj-body>
<mjml>
Here you are, your template is ready.
HTML
An example of creating a page consisting of 4 blocks
Head of the document
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Delivery summary</titled>
<--[if !mso]><!-- --><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--<![endif]-->
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
#outlook a { padding: 0; }
body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { border: 0; height: auto;line-height: 100%; outline: none; text-decoration: none;
-ms-interpolation-mode: bicubic; }
p { display: block; margin: 13px0; }
</style>
<!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
<!--[if lte mso 11]><style type="text/css"><.mj-outlook-group-fix { width: 100% !important; }></style>
<![endif]-->
<!--[if mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width: 480px) {
.mj-column-per-100 {width: 100% !important; max-width: 100%; }
.mj-column-per-25 {width: 25% !important; max-width: 25%; }
.mj-column-per-20 {width: 20% !important; max-width: 20%; }
.mj-column-per-55 {width: 55% !important; max-width: 55%; }
.mj-column-px-173 {width: 173px !important; max-width: 173px; }
.mj-column-px-20 {width: 20px !important; max-width: 20px; }
.mj-column-px-366 {width: 366px !important; max-width: 366px; }
</style>
<style type="text/css">
@media only screen and (max-width: 480px) {
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; } }
noinput.mj-menu-checkbox { display: block !important; max-height: none !important;visibility: visible !important; }
@media only screen and (max-width: 480px) {
.mj-menu-checkbox[type="checkbox"]~ .mj-inline-links { display: none !important; }
.mj-menu-checkbox[type="checkbox"]:checked ~ .mj-inline-links, .mj-menu-checkbox[type="checkbox"] ~
.mj-menu-trigger { display: block !important; max-width: none
!important; max-height: none !important; font-size: inherit!important; }
.mj-menu-checkbox[type="checkbox"]
~ .mj-inline-links > a { display: block !important; }
.mj-menu-checkbox[type="checkbox"]:checked~ .mj-menu-trigger .mj-menu-icon-close { display: block !important;}
.mj-menu-checkbox[type="checkbox"]:checked~ .mj-menu-trigger .mj-menu-icon-open { display: none !important; }
}
</style>
</head>
<body style="background-color:#f3f4f8">
<div style="background-color: #f3f4f8">
Add header - Header / 3 from the - Headers folder
<!--Header / 3 -->
<!--[if mso | IE] --><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600">
<tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style=" background: #ffffff; background-color: #ffffff; margin: 0px auto; max-width: 600px; ">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background: #ffffff;
background-color:#ffffff; width: 100%">
<tbody>
<....>
</tbody>
</table>
</div>
<!--[if mso | IE]--></td></tr></table><![endif]-->
<!--Header / 3 -End-->
Add the second block. For example, the -Transactions / 3 block from the - Transactions folder
<!--Transactions / 3 -->
<!--[if mso | IE] --><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600">
<tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style=" background: #ffffff; background-color: #ffffff; margin: 0px auto; max-width: 600px; ">
<table align="center" border="0" cellpadding="0" cellspacing="0"
role="presentation" style="background: #ffffff; background-color: #ffffff; width: 100%">
<tbody>
<....>
</tbody>
</table>
</div>
<!--[if mso | IE]--></td></tr></table><![endif]-->
<!--Transactions / 3 -End-->
Add one more block. For example, the -Transactions / 6 block from the - Transactions folder
<!--Transactions / 6 -->
<!--[if mso | IE] --><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600">
<tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style=" background: #ffffff; background-color: #ffffff; margin: 0px auto; max-width: 600px; ">
<table align="center" border="0" cellpadding="0" cellspacing="0"
role="presentation" style="background: #ffffff; background-color: #ffffff; width: 100%">
<tbody>
<....>
</tbody>
</table>
</div>
<!--[if mso | IE]--></td></tr></table><![endif]-->
<!--Transactions / 6 -End-->
Add a footer. For example footer -Footer / 3 from folder -Footers
<!--Footer / 3 -->
<!--[if mso | IE] --><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600">
<tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin: 0px auto; max-width: 600px">
<table align="center" border="0" cellpadding="0" cellspacing="0"
role="presentation" style="width: 100%">
<tbody>
<....>
</tbody>
</table>
</div>
<!--[if mso | IE]--></td></tr></table><![endif]-->
<!--Footer / 3 -End-->
</div>
<body>
<html>
Here you are, your template is ready.