Design for the gallery
You draw the page in HTML. T-Builder makes it a WordPress site.
A designer who writes HTML and CSS can offer a design to the gallery without touching WordPress. Follow this page and the converter turns every section into native Elementor in one pass. Your name goes on the card; every developer with an account can copy it into their library and install it on a client's site.
1
Upload the page to your library
In your account under Library, as a single .html file.
2
Press "offer to the gallery"
The page is drawn in a real browser and every section is scanned. You see the score and what each section becomes.
3
The team approves it
A title, a shelf, a few tags, your name on the card. Public within minutes.
The nine rules
What the check looks for.
Each rule is one line in the report you get back. The converter's own verdict, how many sections become native, weighs most.
01
One page, one file
A single .html under 1.5 MB with all CSS in one <style> in the head. Fonts come from Google Fonts through one <link>; everything else lives in the file. A multi-page design is offered page by page, home first.
02
Sections, named
Every block of the page is a <section> with a data-tb attribute saying what it is: hero, services, features, pricing, faq, team, testimonials, figures, gallery, steps, cta, contact. A <header> with a <nav>, a <footer>, exactly one <h1>. Between three and twenty-four sections.
03
Repeated things as siblings
Three or more cards, prices, team members or questions are siblings of the same shape inside their section. The converter turns them into one Items grid, Slider, Pricing or FAQ widget the client adds to. Questions are <details><summary> pairs.
04
Texts the chat may replace
Mark the words a buyer will change first with data-tb-text: company.name, company.tagline, company.phone, company.email, company.address, company.city. "Make it for a dentist in Rotterdam" then swaps the right words and leaves your typography alone.
05
Design tokens on :root
Colours, fonts and radius as custom properties on :root (--accent, --bg, --heading, --body, --font-heading, --font-body, --radius), used everywhere. They become the theme settings a client changes in one place.
06
Pictures that are yours
Real photographs you own or licensed, 1600 pixels wide at most, no text baked in, every <img> with an alt text in the page language. No placeholder services. A picture is replaced by the buyer; a good one sells the design.
07
No JavaScript
Motion is CSS: transitions, keyframes, scroll-driven reveals with data-tb-reveal. The phone menu is a <details><summary> or a checkbox toggle. Sliders are written as a row of slides; the converter gives them the Slider widget with arrows, dots and autoplay.
08
Mobile first
A viewport meta, at least one breakpoint, rows that wrap, type that scales down, buttons that fit a thumb. The gallery shows every design at phone width next to the desktop; so does every client.
09
Real copy
Specific sentences written for the kind of business, never lorem ipsum, never curly placeholders. Write in the language of the design and say so on <html lang>.
A section, the way the converter likes it
Plain HTML. Named. Nothing clever.
Three cards as siblings become one Items grid. The heading, the text and the button become their own widgets with your spacing on them. The texts marked with data-tb-text are what the chat swaps when a buyer says who the site is for.
<section data-tb="services" id="services">
<h2>What <span data-tb-text="company.name">Noorlicht</span> does</h2>
<p>Solar panels and home batteries, installed by our own team.</p>
<div class="cards">
<article class="card" data-tb-reveal>
<img src="img/panels.jpg" alt="Panels on a tiled roof in Utrecht" width="800" height="600">
<h3>Solar panels</h3>
<p>Sized to your roof and your use.</p>
<a href="#contact">How it works</a>
</article>
<article class="card" data-tb-reveal data-tb-delay="1">…</article>
<article class="card" data-tb-reveal data-tb-delay="2">…</article>
</div>
</section>| You write | The client gets in Elementor |
|---|---|
| A <section> with text, pictures and buttons | Containers with Heading, Text, Image and Button widgets, your spacing on them |
| Three or more sibling cards | Items grid: one repeater, the client adds a fourth |
| A row of slides | Slider: arrows, dots, autoplay, swipe, no library |
| <details><summary> pairs | FAQ: a list the client edits, with FAQ structured data |
| Numbers with data-count | Counters that count up when they come into view |
| A <form> | A form in the plugin the site already runs, or a T-Builder form with spam protection |
| A strip of logos or words | Marquee band |
| <nav> in <header> | The site menu, with the phone menu you drew |
Rights and credit
Yours, shown with your name.
You keep the rights. Offering a design lets Tredcoo show it in the gallery and lets account holders copy it into their library and install it on sites they build. You can withdraw it; copies already made stay with their owners.
Only what is yours. The pictures, the fonts and the words must be yours to give. A design that borrows from someone else's work is taken down and the account loses the gallery.
Your name on the card. The gallery shows the designer's name and, if you like, a link to your portfolio or studio. Clients and developers see who drew it.
Paid designs. Set a price on the offer, $19 to $79, or keep it free. A developer buys a licence from their credit; you earn 70 % of every sale, 80 % when the design is exclusive to Tredcoo. Royalties are paid to your bank through Stripe on the first of the month, once your payable amount reaches $50. Tredcoo is the seller on the receipt, so you never invoice anyone.