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.
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.
Q: I'm getting an error when editing or saving my HTML newsletter. What should I do?
A: Try undoing recent changes, clearing your browser cache, or using Chrome. If you pasted content from another source, try retyping it directly. Contact support if the error persists.
Q: I'm getting an error about enabling storage or registering image callback. What does this mean?
A: This is typically a temporary error. Try refreshing the page and uploading again. If it persists, contact Levitate support.
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.
AI Generated Images
The Levitate HTML builder does not currently support the use of stock photos. However, you can easily create custom images using our built-in AI image generation feature, shown below. This allows you to generate visuals tailored specifically to your content without relying on external image libraries.
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:
- Click on the image in the HTML builder
- In the image properties, set Width to
100% - Click Save
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.
-
Tips for Accurate Block Positioning
Buttons: 
