Change the Column Width in a HTML Email Template
Full article - https://help.designmodo.com/article/p...
Postcards - https://designmodo.com/postcards/
► Learn how to change the column width in a Postcards email template in order to quickly increase or decrease proportions of layout constituents to adjust the entire structure to your requirements.
The good design of the email newsletter is everything when it comes to creating the first impression that as we all know, makes a huge difference.
Creating an email template that embraces your idea perfectly is an essential skill for every email marketer and online business owner who wants to run successful campaigns.
In the past to craft an email template was a pure nightmare that required both design and coding skills, to say nothing about spending a bunch of time on testing it across various devices, screens and email readers to achieve the consistency in the overall experience.
Today an HTML email template builder such as Postcards does all the heavy lifting for you. Thanks to its intuitive drag-and-drop interface and hundred handcrafted components and inbuilt features, you can quickly bring your idea to life.
Postcards is a powerful and, most importantly, flexible instrument. You can easily edit the default components by changing not just the appearance but also proportions to build non-standard layouts.
► How to do this? We are going to show you.
Find out how to change the column width in an HTML email template created in Postcards in our tutorial.
Our video tutorial has 5 steps. The majority of them include code handling. Therefore, if you are a non-tech-savvy person, make sure nothing distracts you in order not to miss important details.
Simply repeat the instructions, and in the end, you will have a layout with custom column width.
The preparatory stage. If you want this tutorial to bring the actual results, make sure you have a Designmodo account and HTML code editor (our choice is Notepad++, though you can use Visual Studio Code or something alike).
► So, let us begin.
Step 1 Create and export a Postcards template. Quickly assemble the layout from the available bricks and export it. Before hitting the “Download ZIP” button, ensure you check the “Host Images Online” option.
Step 2 Change the media query for “min-width.” Open your index.html file in a code editor. Here we are going to alter CSS styles by changing the “min-width” setting in “media query.”
Step 3 Change the width for the table element that wraps the entire template. It is time to dive into the body of the copy and make adjustments for the table that bears everything inside. Pay attention to which table tag we are tweaking since there are many of them.
When you find the right one, simply increase the “max-width” attribute.
Save all your changes since we do not want to lose progress.
Step 4 Change the sections where there are two columns to fit the new width. We need to fix the Header and Footer of our template since they have columns inside that need to be adjusted to the new table width. We begin with Header.
Step 5 Change the Footer to increase the size of the columns to match its container. Let us repeat the same routine, but this time we are going to edit the bottom part of our template.
That is all. If you did everything right, now you can enjoy a Postcards email template with custom column widths.
If the video tutorial is not enough to handle coding, you can check out our text version with descriptive screenshots.
Watch video Change the Column Width in a HTML Email Template online without registration, duration hours minute second in high quality. This video was added by user designmodo 04 February 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,798 once and liked it 9 people.