Add wrappers, sections, and content

Building with Claude or Codex? Let the agent choose from your published Email Love components. It should not draw its own Wrapper, Section, or Column structure. If no component fits, ask it to stop and show you the gap. See Build Emails in Figma with Claude or Codex.

Steps to Add an Empty Section

Select your Email Frame

Select it in Figma to activate the plugin’s layout options.

Open the Build Your Own tab

Find it in the Email Love plugin sidebar.

Choose a layout type

Single Column
Two Column
Three Column
Four Column
or a Hero Section with a background image

Customize the padding

Once selected, you’ll be prompted to customize the padding around the new section using simple visual controls.

Click Add New Component

This inserts your empty section into the design.

This creates a new mj-wrapper containing an mj-section and the appropriate number of mj-columns based on the layout you chose.

Adding More Layers

To add a new Section: Select the Wrapper, then choose another layout from the plugin.

To add a Column: Select the Section and insert a new Column to adjust your layout structure.

To add content: Select a Column and insert elements like:

Text
Images
Buttons
Dividers
Spacers
Tables
Navigation
Social Icons

This modular structure lets you build custom email layouts with total flexibility. Great for both quick iterations and fully tailored designs.

Diagnose a Structure Problem with an Agent

Claude or Codex can inspect the hierarchy without changing your file:

Inspect the Email Love structure in this Figma frame: [frame link].
Do not edit the canvas. Find incorrect nesting, unrecognized helper frames,
fixed-height text containers, detached instances, and content that may flatten
into an image on export. Return the layer names and the smallest safe fix.

​Steps to Add an Empty Section

​Adding More Layers

​Diagnose a Structure Problem with an Agent

Steps to Add an Empty Section

Adding More Layers

Diagnose a Structure Problem with an Agent