The HTML behind it

Newsletter signup ad template HTML

This is the whole template. The fields in double braces fill from your data on every render. Copy it into your account and change anything you like.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style data-thirds="base">
html,body{margin:0}
[data-thirds="canvas"]{position:relative;overflow:hidden}
[data-thirds="canvas"] [data-thirds]{position:absolute;box-sizing:border-box;margin:0}
[data-thirds="text"]{white-space:pre-wrap;overflow-wrap:anywhere}
[data-thirds="image"]{display:block}
[data-thirds="table"]{border-collapse:collapse}
[data-thirds="table"] th,[data-thirds="table"] td{padding:4px 6px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule,#dde1e8)}
[data-thirds="table"] th{background:var(--head,transparent)}
[data-thirds="list"]{display:flex;flex-direction:column}
[data-thirds="canvas"] [data-thirds="item"]{position:relative;flex:none}
</style>
<style>@page { size: 1200px 628px; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; } </style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="image" data-thirds-page="p1" data-thirds-name="Page 1" style="width:1200px;height:628px;background:#ffe4ec">
<img data-thirds="image" data-thirds-id="brand-logo" data-thirds-name="Brand logo" style="left:70px;top:60px;width:64px;height:64px;object-fit:contain;object-position:50% 50%;" src="{{ logo | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iMTIiIGZpbGw9IiNmOWE4ZDQiLz48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIxNCIgZmlsbD0iIzgzMTg0MyIvPjxjaXJjbGUgY3g9IjMyIiBjeT0iMzIiIHI9IjIyIiBmaWxsPSJub25lIiBzdHJva2U9IiM4MzE4NDMiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWRhc2hhcnJheT0iNiA2Ii8+PC9zdmc+Cg==') }}" alt="Brand logo">
<div data-thirds="text" data-thirds-id="brand" data-thirds-name="Brand" style="left:150px;top:76px;width:700px;height:36px;font-size:22px;color:#831843;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ brand }}</div>
<div data-thirds="text" data-thirds-id="newsletter-name" data-thirds-name="Newsletter name" style="left:70px;top:160px;width:720px;height:180px;font-size:72px;color:#831843;font-weight:800;line-height:1.02;letter-spacing:-2px;" data-thirds-fit="shrink" data-thirds-min-font="34" data-thirds-max-font="72">{{ newsletter_name }}</div>
<div data-thirds="text" data-thirds-id="benefit-line" data-thirds-name="Benefit line" style="left:70px;top:360px;width:700px;height:80px;font-size:28px;color:#4a044e;font-weight:400;line-height:1.3;">{{ benefit_line }}</div>
<div data-thirds="box" data-thirds-id="input-box" data-thirds-name="Input box" style="left:70px;top:480px;width:520px;height:76px;background:#ffffff;border:3px solid #831843;border-radius:38px"></div>
<div data-thirds="text" data-thirds-id="input-placeholder" data-thirds-name="Input placeholder" style="left:100px;top:502px;width:460px;height:34px;font-size:24px;color:#9d7186;font-weight:400;line-height:1.2;">{{ input_placeholder }}</div>
<div data-thirds="box" data-thirds-id="signup-button" data-thirds-name="Signup button" style="left:610px;top:480px;width:300px;height:76px;background:#831843;border-radius:38px"></div>
<div data-thirds="text" data-thirds-id="signup" data-thirds-name="Signup" style="left:610px;top:502px;width:300px;height:34px;font-size:24px;color:#ffffff;font-weight:800;line-height:1.2;text-align:center;">{{ signup }}</div>
<div data-thirds="box" data-thirds-id="stamp" data-thirds-name="Stamp" style="left:880px;top:80px;width:250px;height:250px;background:#f9a8d4;border-radius:125px"></div>
<div data-thirds="text" data-thirds-id="stamp-line" data-thirds-name="Stamp line" style="left:890px;top:160px;width:230px;height:100px;font-size:30px;color:#831843;font-weight:800;line-height:1.15;text-align:center;" data-thirds-fit="shrink" data-thirds-min-font="18" data-thirds-max-font="30">{{ stamp_line }}</div>
</div>
</body>
</html>

Sample data

The values that made the picture.

Change any of them, and the same HTML makes a new file.

{
  "brand": "Lumen Skincare",
  "newsletter_name": "The Sunday Glow",
  "benefit_line": "One short email a week with a routine tip, a product test, and a reader question answered.",
  "input_placeholder": "you@example.com",
  "signup": "Sign me up",
  "stamp_line": "Free. Once a week. Unsubscribe any time."
}