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.
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.
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.