Quickstart5 min read•Audience: All, Marketers, Developers
Quick Start Guide
Go from an empty canvas to an exported, production-ready responsive email in five minutes.
Key Takeaways
- Create a new project from the PostBrix dashboard.
- Add a Section and Column layout structure to the canvas.
- Insert Heading, Text, and Button blocks with custom styles.
- Preview your design on Desktop and Mobile views.
- Export the final responsive HTML or copy it to your clipboard.
Step 1: Create a New Project#
Log in to your PostBrix workspace and navigate to the Projects dashboard.
- Click the New Project button in the top-right corner.
- Select Blank Canvas to start fresh, or pick a starter template from the Marketplace.
- Give your project a clear name (for example,
Welcome Onboarding v1). - Click Create to launch the visual editor.
Step 2: Add Your Structure (Section & Column)#
In email development, all content elements must live inside structural containers.
- In the Left Panel, locate the Layout category.
- Drag a 1-Column Section onto the canvas.
- Notice that a full-width
mj-sectioncontaining a singlemj-columnhas been created. - With the section selected, open the Right Panel (Properties) and set a comfortable background color (such as
#ffffff) and padding (20px 24px).
Layout Rule
You cannot drop a Text or Button block directly onto the empty background. Always place a Section first, then drop your content blocks into its Columns.
Step 3: Add Heading, Text, and Call to Action#
Now populate your column with content:
- Drag an Image block into the column. In the right panel, paste your logo URL or select an image from your Asset Library. Set the width to
160pxand add descriptive alt text. - Drag a Heading block below the logo. Double-click the text on the canvas to write:
Welcome to Acme Cloud!. - Drag a Text block below the heading and add a short introduction paragraph.
- Drag a Button block below the text. In the right panel, configure the button URL (
https://acme.com/get-started), background color (#4f46e5), text color (#ffffff), and border radius (6px).
Step 4: Verify Responsive Preview#
Before exporting, inspect how your layout adapts across screen sizes:
- In the top toolbar, click the Mobile toggle icon (375px width).
- Check that your font sizes remain legible and padding does not clip.
- Click the Desktop toggle icon (600px width) to return to standard view.
- Open the Preview Modal to see a full-page simulation with header metadata.
Step 5: Export Your Email#
Once your email looks great, you are ready to export:
- Click the Export button in the top navigation bar.
- Select HTML Export to download an
.htmlfile or click Copy HTML to copy the compiled markup directly to your clipboard. - Paste the markup into your sending platform or test it with an email preview tool.
Frequently Asked Questions
Can I re-edit my exported HTML file inside PostBrix later?
We recommend keeping your project saved inside PostBrix. PostBrix projects save the structural JSON AST. While you can re-import JSON project files, raw compiled HTML contains complex Outlook VML conditionals and cannot be cleanly reverse-engineered into editable blocks.