Home › Guides › Design posts with your own HTML
Brand kits · Guide 19

Design posts with your own HTML

Bring a template nobody else has. Write the HTML once, mark where the copy goes, and every post you make afterwards wears your design — with click-to-edit on the slide.

~15 minutes onceCreator+You need: basic HTML/CSSResult: a template only you have
CUSTOM TEMPLATES
What you write once
1{{eyebrow}}
2{{title}}
3{{body}}
What every post gets
1your layout
2your fonts
3text that fits itself
4click-to-edit
<div class="ey"> {{eyebrow}}</div><h1 class="t"> {{title}}</h1><p>{{body}}</p>A real page, renderedin a real browser.Not a themed box with yourlogo dropped in the corner.
Some HTML & CSS
~15 minutes, once
Used by every post after

Do it in 5 steps

1

Start from a ready one, or a blank page

There are 48 designs across twelve niches and a builder that writes one from a description. Opening one of those and changing it is faster than starting empty, and you can see what the slots look like in something that already works.

48 ready designsnot generated yet
2

Mark where the copy goes

Ten slots — title, body, eyebrow, foot and the rest. Put `{{title}}` where the headline belongs and PostPop fills it on every post. The slots are the contract between your design and the writing.

<div class="ey"> {{eyebrow}}</div><h1 class="t"> {{title}}</h1><p>{{body}}</p>not generated yet
3

Let the text fit itself

Mention `--pp-fit` on an element and the renderer sizes the type to the space rather than overflowing it. The alternative is designing for your longest sentence and having every short one look lost.

<div class="ey"> {{eyebrow}}</div><h1 class="t"> {{title}}</h1><p>{{body}}</p>not generated yet
4

Generate as normal

Pick your template in the Studio like any of the eleven built-in ones. The copy is written the same way, from the same brand kit, into your design.

<div class="ey"> {{eyebrow}}</div><h1 class="t"> {{title}}</h1><p>{{body}}</p>EYEBROW
5

Click the slide to change a line

On the finished post, click the text where it sits and edit it. PostPop measures where each slot actually landed, so the box you click is the box you see — no hunting through a form to work out which field is which.

<div class="ey"> {{eyebrow}}</div><h1 class="t"> {{title}}</h1><p>{{body}}</p>EYEBROW

What a custom template can and cannot do

The boundary is worth knowing before you spend an evening on one.

Anything HTML and CSS can

Your own fonts, layouts, borders, gradients, background images, absolute positioning. It is a real page rendered in a real browser, not a themed box with your logo in the corner.

CANyour fontsgradientsabsolute layoutbackground imagesbordersanything CSS does

Ten places the copy lands

Title, body, eyebrow, foot, highlight, items and the rest. A design that uses two is fine; one that uses all ten gets a lot of writing. What you cannot do is invent an eleventh.

SLOTStitlebodyeyebrowfoothighlightitems+ four moreUse two or use ten. You cannot invent an eleventh.

Per-slot colour, for now

You can colour anything in your own CSS, but PostPop cannot recolour one slot per post — that needs a wrapper around the text, which is exactly the markup injection that click-to-edit was built to avoid.

CANNOTcolour it inyour own CSS ✓one slot,one post — not yetThat needs a wrapper round your text, which is themarkup click-to-edit was built to avoid injecting.
TIP
The slide editor works here too Click-to-edit was built for the built-in templates first and custom HTML second. Both have it now, which matters because custom templates are what the paying tiers are bought for. See Guide 10 · Edit a slide by hand.

A template, or a theme

One is your design. One is somebody else’s with your colours in it.

A theme

Somebody else’s layout with your colours in it. Recognisable as a tool.

Your template
EYEBROWEYEBROWEYEBROW

Your layout, your type, your rules — filled in automatically on every post.

Common questions

Do I need to write HTML myself?+
No. There are 48 ready designs across twelve niches, and a builder that writes one from a description. Hand-writing it is the third option, not the first.
What are the slots?+
Ten named places the copy lands — title, body, eyebrow, foot, highlight, items and so on. Write `{{title}}` in your HTML and the headline goes there.
What if my text is too long for the design?+
Mention `--pp-fit` on the element and the renderer shrinks the type to fit rather than overflowing. Without it, long copy spills.
Can I change the colour of just one line per post?+
Not yet. Colour anything you like in your own CSS; what is missing is PostPop recolouring one slot for one post, which needs markup we deliberately do not inject.
Is it on the free plan?+
One custom template is. More come with the paid tiers.

Posts that look like nobody else’s.

48 ready designs · a builder · or your own HTML.

See custom templates →

Keep going