HTML Builder Design FAQs
Columns:
Click here for the Full Walkthrough
Adding Columns
First, in a blank HTML template, you’ll need to click “add content” and choose the desired amount of columns.
Please note that if you only want one column, you can just go ahead and start dragging content boxes. If you want multiple columns, follow these steps:
Once the columns are selected, you can drag and drop content. Below, I’ll demonstrate a common column, text beside an image. You can then add text and upload an image of your choice.
Column Properties:
Click here for the Full Walkthrough
Background Color
To edit column properties, you have to click outside of the content. From there, you’ll see where you can edit the background color. Please note that you’ll need to click the column tab to edit the different columns.
Padding
To edit padding, you can either apply the padding to all sides or click more options so that you can pick which sides the padding gets applied to.
Borders
Similar to padding, you can either apply borders to all sides or click more options to pick which sides the borders get applied to. Please note that if you’re adding borders when you have multiple columns, you’ll have to make one of the shared sides 0px so that the middle line isn’t thicker than the other sides.
Rows:
Click Here for the Full Walkthrough
Adding Rows
When adding rows, you’ll need to click the “+” icon so that you can edit the column properties. If not, you won’t have the option to click the side of the content like mentioned above.
Adding Background Images
Once you have an image, click so that you get to row properties (same way as column properties, just scroll down). Then, you’ll upload your image. Please note that if you’d like the image to be the same width as the rest of the content, you’ll need to click content under container width.
Positioning and Moving Blocks:
The HTML Newsletter Builder uses a drag-and-drop interface, allowing you to easily arrange content blocks and columns within your email design.
How to Move Columns or Blocks
- Hover over the column or block you want to move.
- To drag handle (←↕→) will appear on the right side of the column.
- Click and hold the drag handle.
- Drag the column or block to your desired location.
- A blue line will indicate where it will be placed.
- You can move blocks up or down within the same column.
Release your mouse to drop the column or block into position.
Tips for Accurate Block Positioning
Can’t move a block?
Make sure you’re clicking and dragging from the drag handle (←↕→), not from the content area of the block
Block jumps to the wrong position?
Watch for the blue drop indicator — it shows exactly where the block will land before releasing your mouse.
Moving blocks between columns:
Blocks are locked to their respective columns. To rearrange column layout, use the Layout Selector feature.
FAQs
Q: How do I move a block to the top of my newsletter?
A: Drag the block upward until the blue line appears at the top of your column, then release your mouse. This places the block at the top position.
Q: Can I drag blocks between sections?
A: Yes. Blocks can only be moved within their current section. To move content between sections, recreate the block in the target section and copy your content into it. Also you can drag block as well.
Q: Why won’t my image block move where I want it?
A: This usually happens due to browser lag or draft errors. Try refreshing the page, reopening your draft, and ensuring you’re using the drag handle rather than the image itself.
Images:
Click here for the Full Walkthrough
Uploading Images
To add an image, first add a row. Then, you’ll drag over the image from the content blocks.
Click the image, then “upload image,” and choose the desired image.
Adjusting the Width
Where it says auto width, click the button. From there, you’ll have the option to change the percentage.
Adding Links
If you keep scrolling from where you uploaded the image and adjusted the width, you’ll see the section where you can add links to images. From there, you’ll easily be able to copy and paste the desired link.
Image Overlapping:
When you preview your HTML newsletter as a PDF for compliance review, you might notice images overlapping or extending beyond their containers. This is a common issue with specific causes and solutions.
Why This Happens
- PDF rendering is different from email rendering:
- Email clients (Gmail, Outlook) render HTML one way
- PDF generators render HTML differently
- Images that look perfect in email preview may overlap in PDF
Common causes of image overlap
- Images that are too large for their container
- Missing or insufficient padding between elements
- Column width issues in multi-column layouts
- Absolute positioning or fixed widths
- Image dimensions not specified
Solution 1: Set Image Width to 100%
The most common fix is to ensure images scale to fit their container:
1. Click on the image in the HTML builder
2. In the image properties, set Width to `100%`
3. Click Save
Why this works: Setting the width to 100% forces the image to fit within its container, preventing overflow.
Solution 2: Add Padding Around Images
Add space between images to prevent overlap:
1. Select the image or content block
2. In the Block Settings, find Padding
3. Add padding:
- Top padding: 10-20px
- Bottom padding: 10-20px
- Left/Right padding: 5-10px (optional)
4. Click Save and preview again
Solution 3: Reduce Image File Size
Large image files can cause rendering issues:
1. Before uploading, resize images to the appropriate dimensions:
- Single-column images: 600px wide maximum
- Two-column images: 300px wide maximum
- Three-column images: 200px wide maximum
2. Compress images using tools like Adobe or Wecompress
3. Re-upload the optimized images to your newsletter
4. You can also click edit image and adjust the image size after uploading the image. Adjust to 500-800 width, which will automatically adjust Height.
Step-by-Step Troubleshooting Guide
Step 1: Identify Which Images Are Overlapping
1. Generate a PDF preview of your newsletter
2. Scroll through the PDF and note which images overlap
3. Take screenshots for reference
Step 2: Check Column Widths (Multi-Column Layouts)
If you're using a multi-column layout:
1. Ensure each column has equal width
2. Check that column widths add up to 100% (e.g., 2 columns = 50% each)
3. Verify images within columns are set to 100% width
Step 3: Preview Again
1. Click Preview or Generate PDF again
2. Check if overlapping is resolved
3. If not resolved, try the advanced solutions below
Advanced Solutions
Issue: Images Still Overlap After Basic Fixes
Advanced Fix 1: Use Spacer Blocks
Add invisible spacer blocks between content sections:
1. In the HTML builder, click Add Block
2. Select block
3. This creates guaranteed space between elements
Advanced Fix 2: Simplify Your Layout
If the newsletter has a complex layout:
1. Consider simplifying to a single-column design
2. Stack images vertically instead of side-by-side
3. Use fewer elements per section
4. Complex layouts often cause PDF rendering issues
Mobile vs Desktop View Considerations
Important: PDF preview shows desktop view, but recipients may view on mobile.
Testing both views:
1. Desktop Preview: Generate PDF to see desktop rendering
2. Mobile Preview: Use "Preview on Mobile" option in HTML builder
3. Ensure images look good in BOTH views
Mobile-friendly image tips:
- Images should stack vertically on mobile
- Set max-width to 100% so images scale down
- Test on actual mobile devices if possible
Common Scenarios and Fixes
Scenario 1: Two Side-by-Side Images Overlap in PDF
Cause: Column widths exceed 100% or images have fixed widths
Fix:
1. Check that columns are exactly 50% each (for 2 columns)
2. Set both images to width: 100%
3. Add 10px padding between columns
Scenario 2: Images Stack on Top of Each Other
Cause: Insufficient vertical spacing or missing breaks
Fix:
1. Add padding-bottom: 20px to the image block
2. Insert a spacer block between images
3. Ensure each image is in its own content block
Scenario 3: PDF Looks Perfect, But Email Preview Looks Wrong
Cause: Different rendering engines
Solution:
- Test in actual email client (send test email to yourself). You can also send a test to yourself by adding ‘TEST’ tag to your contact profile and send a test to the test tag.
- Don't optimize only for PDF; ensure email looks good as well
When to Contact Support
Contact support@levitateapp.com if:
- You've tried all solutions, and images still overlap
- PDF preview consistently breaks despite correct settings
- Image overlap only happens on specific email clients
- You need help with custom HTML/CSS code
- The PDF rendering has changed suddenly
Include in your support request:
- Screenshots of the PDF showing overlap
- Screenshots of your HTML builder layout
- Image dimensions and settings
- Whether the issue occurs in the email preview or just the PDF
- Name of the HTML template
Recommended Image Specifications:
- Format: JPG or PNG (avoid GIFs for photos)
- Resolution: 72-96 DPI (higher DPI won't display better in email)
- Width: 600px for single-column, 300px for two-column
- File size: Under 200KB per image (compress for faster load)
Buttons:
Click here for the Full Walkthrough
Adding Buttons
To add a button, first add a row. Then, you’ll drag over the button from the content blocks.
Editing Buttons
Click on the button and go to “button options.” From there, you can edit the background color, the font, the width, and the shape.
You can also add links to each button by copying and pasting them into the URL option under “action.”
Divider Lines:
Click here for the Full Walkthrough
How to Edit
In the same way you add other content boxes, you can add a row and drag the divider content box over to add a line. From there, you can edit the line by clicking on it where you’ll see options to edit the width, line type, thickness, color, and alignment.
Social Media Icons:
Click here for the Full Walkthrough
Adding Links
You can add social media icons to HTML newsletters that link to your social media pages. To do so, drag the social content box into a new row, click on the gray icons, and click the icons you would like to link to.
From there, you can add the URLs to those social pages.
Body of HTML:
Click here for the Full Walkthrough
Content Width and Background Color
You can edit the content width of an HTML newsletter by clicking on the body tab to the right (you’ll first have to x out of any content box editing you’re doing). From there, you can edit the content width and background color.
Changing Link Color
You can also change the link color if you scroll to the bottom. There, you’ll see where you can edit the link color.
Mobile vs. Desktop
Click here for the Full Walkthrough
Stacking
To edit the mobile view so that the content doesn’t stack on top of each other, click into the column properties and choose the mobile tab.
Then, scroll down, and choose “Do Not Stack on Mobile”
Please note that editing under the mobile tab can change the desktop formatting, so make sure to switch between the two.