Clicking on each tab will reveal the components that the category contains, which you can then scroll up and down to visually browse the subcategories inside the selected tab. To browse the components available in the Emailify plugin, you can click on any of the category tabs under the plugin header bar. # Using the Emailify content componentsĮmailify is powered by components that can be instantly added from the plugin to your Figma canvas, where you can modify the content and styles as you normally would then you can power up each component by adding responsive design overrides and URLs/alt text etc via the Emailify plugin, too. The ?? Carousel Image element allow you to add more image slides to your existing ? Image Carousel parent elements. These options will be visible when an ? Image Carousel Figma layer is selected: If the platform icon you'd like to use isn't included in the preset options, you can manually swap out the contents of any ? Social Icon Link Figma frame layer and replace them with a new social icon vector. These options will be visible when an ✉️ Email Figma layer is selected: You can see which options are available under which context below, along with a brief description of what each element does. The options that are available in the context menu will change based on your current Figma layer selection. If you're just getting familiar with the Emailify plugin for the first time (or need a refresher), it's also highly recommended to read through the understanding the design elements section below to see which elements are available under what selection, and what each element does and relates to the others. To add these layout blocks and content elements, ensure that you have created at least one Emailify frame, and then click on that frame to automatically reveal the context menu at the bottom of the plugin. # Adding individual layout blocks and design elementsĮmailify allows you to build out your designs using special layout blocks and content elements that are added as layers to your Figma designs, and allows them to be exported out to HTML from the plugin. The email name that's currently shown as being selected in the Emailify plugin header drop down box always indicates which email is currently selected. Testing your HTML emails before sendingĮmailify works by creating special blank Figma container frames using the plugin, which then allows you to instantly add content components from the Emailify plugin to your Figma canvas, where you can modify the content and styles as you normally would then you can power up each component by adding responsive design overrides and URLs/alt text etc via the plugin, too.Uploading your emails to other platforms.Uploading your emails to ActiveCampaign.Built-In Emailify Platform Integrations.Opening the (optional) MJML file exports.
MJML GRADIENTS CODE
Export developer friendly MJML source code files.Add extra whitespace to the preheader text.Updating attributes and refreshing the preview window.Toggling dark mode overrides being shown in the preview.Previewing the size of your HTML in kilobytes (kb).Setting a custom base image URL for an email.Injecting global custom HTML/CSS in an email.Set a custom URL or dynamic template variable for images.Adding links to Figma text layer content areas.Adding URLs to images, buttons, social icons and navigation links.Hiding a layer from displaying on mobile or desktop.Rendering a row as an image (instead of HTML).
Re-ordering components with drag and drop in Figma.Editing and forking your saved custom components.Customising the design and content of your components.? Hero and ?️ Column Content Elements.Adding individual layout blocks and design elements.Import 'grapesjs/dist/css/' import grapesJS from 'grapesjs' import grapesJSMJML from 'grapesjs-mjml' let editor = grapesJS. Reset the Style Manager and add new properties for MJML I18n object containing language more infoĬlean all previous devices and set a new one for mobile Mj-wrapper mj-group mj-section mj-column mj-text mj-image mj-button mj-social mj-divider mj-spacer mj-style mj-font mj-hero Options OptionĬustom fonts on exported HTML header more info MJML components are rendered in real-time using the official v4 compiler (+ some mocks to make it run in the browser), therefore the result is, almost, the same as using the MJML Live Editor. This plugin enables the usage of MJML components inside the GrapesJS environment.