Premade blocks

Premade blocks are used to enable users to use prepared parts of the email. For ex. headers or footers. You can define your own premade blocks with option premadeBlocks on the TOPOL_OPTIONS object. You can hide premade blocks and the premade block button using premadeBlocks: false.

javascript

premadeBlocks: [
  {
    name: "Header 1",
    blocks: [
      {
        img: "url", // Image url, for best experience use width > 330 px
        name: "Premade header 1", // Or name if not image available
        // MJML JSON
        definition: [
          {
            tagName: "mj-section",
            attributes: {
              "full-width": false,
              padding: "9px 0px 9px 0px",
              "background-color": "#000000",
            },
            type: null,
            children: [
              {
                tagName: "mj-column",
                attributes: { width: "33.333333%", "vertical-align": "top" },
                children: [
                  {
                    tagName: "mj-social",
                    attributes: {
                      display: "facebook:url twitter:url google:url",
                      padding: "10px 10px 10px 30px",
                      "text-mode": "false",
                      "icon-size": "25px",
                      "base-url":
                        "https://s3-eu-west-1.amazonaws.com/ecomail-assets/editor/social-icos/simplewhite/",
                      "facebook-href": "https://www.facebook.com/PROFILE",
                      "facebook-icon-color": "none",
                      "facebook-alt": "Sdílet",
                      "twitter-href": "https://www.twitter.com/PROFILE",
                      "twitter-icon-color": "none",
                      "twitter-alt": "",
                      "google-href": "https://plus.google.com/PROFILE",
                      "google-icon-color": "none",
                      "google-alt": "",
                      "instagram-icon-color": "none",
                      "linkedin-icon-color": "none",
                      align: "left",
                      "youtube-icon-color": "none",
                      "youtube-alt": "",
                      "youtube-icon":
                        "https://s3-eu-west-1.amazonaws.com/ecomail-assets/editor/social-icos/simplewhite/youtube.png",
                      "youtube-href": "https://www.youtube.com",
                      containerWidth: 200,
                    },
                    uid: "H1lqIiX4lm",
                  },
                ],
                uid: "SJ3I0XVx7",
              },
              {
                tagName: "mj-column",
                attributes: { width: "33.333333%", "vertical-align": "top" },
                children: [
                  {
                    tagName: "mj-image",
                    attributes: {
                      src: "https://storage.googleapis.com/jan50/blackberrylogo.png",
                      padding: "19px 10px 10px 10px",
                      alt: "",
                      href: "",
                      containerWidth: 200,
                      width: 100,
                      widthPercent: 50,
                    },
                    uid: "rkEyL-HeQ",
                  },
                ],
                uid: "r1e280m4xQ",
              },
              {
                tagName: "mj-column",
                attributes: { width: "33.333333%", "vertical-align": "top" },
                children: [
                  {
                    tagName: "mj-spacer",
                    attributes: { height: 15, containerWidth: 200 },
                    uid: "rJfqLiXEgm",
                  },
                ],
                uid: "B1W380QVxX",
              },
            ],
            layout: 1,
            backgroundColor: "",
            backgroundImage: "",
            paddingTop: 0,
            paddingBottom: 0,
            paddingLeft: 0,
            paddingRight: 0,
            uid: "rkqIjQNe7",
          },
        ],
      },
    ],
  },
];

You can add how many premade blocks you want. You can also add more blocks to the premade block.

Premade blocks #

Premade blocks