One unique feature of the Poplar platform is the capability to print dynamic mailers. You can personalize your postcards or letters just like you can in an email with any information you have on your customers like first name, past products purchased, and unique promo codes. This personalization allows you to create designs that are more likely to get the recipient’s attention since they’re tailored to each person.
Translating a static PDF design may sound intimidating, especially if you have little to no prior coding knowledge. Fortunately the process is usually as simple as pulling certain aspects of your static design together, re-saving them as one element, and embedding the URL within an .html file. There are a few key tools and elements to have in place before you begin:
Since Poplar is converting an HTML file to PDF, the capabilities and best practices differ slightly from a web page which uses a multitude of behind-the-scenes tools and software to render in a browser. A browser can be used to preview your code design, but keep in mind certain elements, such as merge tags, may appear differently in the browser than they do when converted to PDF in the platform - this is why viewing the PDF proof generated by the platform is the best, most accurate way to check your work.
Today we’re going to translate a 4x6 static postcard design to HTML as an example.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The yellow highlighted <link> tag contains the link to a Google Font. We recommend using Google Fonts for the most design flexibility; make sure all fonts and font weights are linked in this URL.
The orange highlighted area between the <style> tags is where your CSS styling lives - as an Internal stylesheet. We recommend using position: absolute; for all parent elements to ensure they don’t shift around when uploading to the platform.
The blue highlighted area is the body of your design, this contains all the content (text and images) you want to show on your postcard. (Learn to style HTML using CSS)
Open your original design files and identify any static images or color blocks that can be grouped together as a background image - for best print results, we do not recommend including static text or logos in this selection.
Copy & paste the background elements into a new Adobe Illustrator file using the 4.25" x 6.25" at 300 DPI/PPI dimensions specified in the template code (use 1875 x 1275px if pasting into a new Photoshop file):
Save the new file as a .png or .jpg file and make sure it’s under or around 1MB. Publicly host the file in an s3 bucket to generate a URL for the file; this should be a safe place where it won’t be removed or deleted since the printer will be accessing this image URL every time it prints a piece.
Paste the URL in the template, between the parentheses where the placeholder URL is:
background-image: url(http://template-assets.sharelocalmedia.com.s3.us-east-1.amazonaws.com/poplar-template-background.png);
Save and hit refresh in your browser preview to see the updated design.
In our original design, we have large yellow text at the top followed by grey sub-text underneath. Before we start typing the contents, we want to make sure we have the font and both font weights in the Google Font URL <link>’ed up top, since our copy contains bolded text:
<link href="https://fonts.googleapis.com/css?family=Saira:300,500&display=swap" rel="stylesheet" type="text/css">
Since this text has two very different styles, we’ll want to separate them into two different elements and differentiate them with a class name:
<div class="main-text">
Hey {{recipient.first_name}}<br>
we'd love to see<br>
you again...
</div>
<div class="subtext">
Lorem ipsum dolor sit amet, consectetur<br>
adipiscing elit, sed do eiusmod tempor<br>
incididunt ut labore et dolore <b>magna aliqua.</b>
</div>
*Make sure both <div> elements are located inside the safe area.
The class names should be used to target each element for CSS styling:
.main-text {
position: absolute;
font-family: 'Saira';
font-size: 34pt;
font-weight: 600;
color: #F0E66F;
top: 0.25in;
left: 0.15in;
line-height: 42pt;
}
.subtext {
position: absolute;
left: 0.15in;
top: 2.4in;
font-family: 'Saira';
font-size: 9pt;
font-weight: 300;
color: #333;
line-height: 14pt;
}
Save your file and refresh the browser to see the update. If your merge tag name is longer than the data that will appear in its place, you can type in a placeholder to make sure the alignment is correct, just be sure to swap the merge tag back in before uploading to the platform.
Logos and other text-based images print most clearly when saved and embedded as an .svg image as opposed to .png or .jpg. Similar to the background image, copy and paste your logo and/or static text into a new file:
Make sure your logo and/or text is outlined before exporting (Type > Create Outlines), then select File > Export > Export As… > Format: SVG (svg) > Export. Then set the Decimal number to 5 and hit OK:
Host your new .svg image file in your s3 bucket, and generate a public URL to be embedded in the HTML.
Within the safe area <div> tags, create an <img> tag with the URL as your source and give it an identifying class name:
<img src="http://template-assets.sharelocalmedia.com.s3.us-east-1.amazonaws.com/poplar-logo.svg" class="logo">
Add CSS styling:
.logo {
position: absolute;
width: 1.5in;
left: 0.15in;
bottom: 0.15in;
}
Then Save the file and refresh your browser to see the update:
Expert Tip:
This process can also be used to preserve custom font styles for static text. Merge tags and dynamic text have to be typed out and styled using a Google web font, but if you’re using a custom font for text that isn’t dynamic and you want to preserve the styling, that text can be exported and embedded as an .svg image.
Uploading to the platform and downloading the PDF proof is the most reliable way to preview your HTML:
If you replaced any merge tags with placeholders, double check that you swapped the merge tags back in before uploading. For back template files, make sure the address block placeholder and corresponding CSS is deleted before uploading as well because the Poplar platform automatically adds in the white address block for you.
Always look closely at the PDF proof to ensure there are no spelling errors, blurry, missing, or misaligned elements. Voila - you’re a coder! For additional help and troubleshooting reach out to support@heypoplar.com.
