Dit is je waarschijnlijk overkomen. Je kopieert een mooi gestylde blok — een titelkaart, een gekleurde callout — en plakt het in de WeChat-editor of een CMS. Soms arriveert het er precies goed uitziend. Andere keren landt het als naakte tekst met alle ontwerp eraf gestript. Dezelfde actie, ander resultaat, en het voelt willekeurig. Dat is het niet. Het verschil is of je inline-HTML hebt gekopieerd.
Dit ene idee begrijpen maakt gestylde content plakken voorspelbaar in plaats van een gok.
Wat inline-HTML eigenlijk is
Webstyling kan op twee plekken wonen. In een normale website zit de styling in een aparte stylesheet, en de HTML verwijst er gewoon naar via klassenaam: <div class="title-card">. De div is op zichzelf betekenisloos — het ontwerp woont ergens anders in een CSS-bestand.
Inline-HTML zet de styling in het element zelf: <div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">. Alles wat nodig is om het blok te renderen reist met het blok mee. Er is geen extern bestand om van af te hangen.
Dat onderscheid is het hele verhaal van waarom sommige plaksels hun ontwerp behouden en andere niet. Wanneer je in een editor plakt, krijgt de editor de stylesheet van de bronwebsite niet. Als het ontwerp in die stylesheet woonde, is het weg — je krijgt de kale structuur, oftewel gewoon uitziende tekst. Als het ontwerp inline was, komt het mee, en het blok rendert correct.
Waarom WeChat en rich editors het nodig hebben
De editor van WeChat is streng. Hij verwijdert externe stylesheets en filtert veel styling weg. Een blok dat leunde op een klasse die elders is gedefinieerd heeft niets om op terug te vallen zodra het in WeChat zit. Veel rich-text-editors en CMS-plakvelden gedragen zich hetzelfde — ze saneren wat je plakt en behouden alleen inline-attributen.
Dus de betrouwbare manier om een gestylde blok in deze editors te krijgen is het als inline-HTML te kopiëren, waar de styling zelfstandig is. Dan heeft zelfs een strenge editor alles wat het nodig heeft om het blok te tonen zoals ontworpen.
Hoe een blok "met opmaak" kopiëren werkt
Moderne browsers hebben een Clipboard-API die rijke content — HTML met opmaak — op het klembord kan zetten, niet alleen platte tekst. Wanneer een tool een blok "als inline-HTML" kopieert, gebruikt het die API om de zelfstandige markup van het blok op je klembord te zetten. Je plakt dan (Ctrl/Cmd+V) in de editor, en omdat de styling inline was en het klembord de HTML meedroeg, verschijnt het blok gestyld.
Twee dingen moeten waar zijn om dit te laten werken:
- De markup moet inline gestyld zijn, zodat er geen extern bestand nodig is.
- Het klembord moet het als HTML meedragen, niet als een platte-tekstdump van punthaken.
Krijg beide goed en het plakken "werkt gewoon." Mis een van beide en je krijgt platte tekst of een muur van zichtbare code.
Het doen zonder code met de hand te bewerken
Je zou in principe een gestylde blok kunnen nemen en elke stijl handmatig inline maken — de regels van elke klasse verplaatsen naar een style=""-attribuut op elk element. Voor alles voorbij een triviaal blok is dat saai en foutgevoelig, vooral bij SVG-kaarten waar styling over veel knopen verspreid is.
Een tool die dit afhandelt is makkelijker. IMG.DIY's Layout Module Extractor extraheert gestylde blokken uit geplakte WeChat-content en geeft elk een kopieerknop die het via de Clipboard-API als inline-HTML op je klembord zet. Je klikt kopiëren, schakelt naar de WeChat-editor (of je CMS, of een rich-text-veld), plakt, en het blok behoudt zijn opmaak. Geen handmatig inline maken, geen kapotte markup repareren.
Een snelle plak-checklist
Wanneer een gestyld plaksel misgaat, loop dit na:
- Kopieerde je inline-HTML, of een screenshot/platte tekst? Alleen inline-HTML plakt als een werkend gestyld blok.
- Plak in de normale body van de editor, niet in een "broncode"- of "platte tekst"-modus, die de markup kan strippen of ontsnappen.
- Controleer het blok in de voorvertoning. WeChats eigen voorvertoning toont hoe het blok echt op een telefoon rendert — bevestig daar voordat je publiceert.
- Ogen kleuren verkeerd, herkleur dan vóór het kopiëren. In de extractor kun je op een kleur klikken en die overal in het blok veranderen, zodat je het al in je merkkleuren kopieert.
Eén eerlijke beperking die het waard is te herhalen: een tool als deze kopieert en organiseert blokken — het is een extractor, geen sjabloonontwerper vanaf nul, en het kan geen artikel via URL ophalen (browsers blokkeren cross-site-fetches van WeChat-pagina's, dus je plakt de content erin). Binnen die grenzen is inline-HTML wat een gestyld blok de reis van de ene editor naar de andere met zijn ontwerp intact laat overleven.
Zodra je een blok een paar keer perfect hebt zien inplakken, valt de eerdere willekeur op zijn plaats: het was nooit willekeurig. Het ging altijd over de vraag of de styling in het blok meereisde.