Leestijd: 6 min
Bij CleverReach bieden we u een groot aantal sjablonen die u gemakkelijk kunt gebruiken en aanpassen. Als je toch je eigen sjabloon wilt maken, kun je deze instructies gebruiken:
Voorbeeld
Laten we beginnen met dit eenvoudige voorbeeld. Laten we ons voorstellen dat dit onze sjabloon is en dat we het de gebruiker zo gemakkelijk mogelijk willen maken om te bewerken:
<html>
<body bgcolor="#ffffff">
<h1>Dagelijkse nieuwsbrief</h1>
<p>Je dagelijkse update voor alles wat er gebeurt met XXXXX</p>
<table >
<tr><td>
<div>
<h3>is dit net gebeurd?</h3>
<img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" />
<p>Je zou niet geloven wat er net gebeurde. Als je meer wilt weten, klik dan op de onderstaande link!</p>
<a href="http://www.example.com">Lees meer</a>
</div>
<div>
<h3>Wacht, is dit ook gebeurd??</h3>
<img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" />
<p>Misschien niet zo geweldig als het vorige nieuws, maar nog steeds heel erg interessant.</p>
<a href="http://www.example.com">Lees meer</a>
</div>
</td></tr>
</table>
</body>
</html>In deze code kunnen alleen teksten, afbeeldingen en links worden bewerkt.
In de regel behandelen we tekst en koppelingen als eenvoudige HTML, dus we kunnen alleen deze twee hoofdtypen invoegen: HTML en BEELD
- Om de tekst bewerkbaar te maken, omwikkelen we hem met
<!--#html#--><!--#/html#--> - Om afbeeldingen bewerkbaar te maken, omwikkelen we ze met
<!--#image#--><!--#/image#-->
In ons voorbeeld zou dit er als volgt uitzien:
<html>
<body bgcolor="#ffffff">
<h1><!--#html#-->Dagelijkse nieuwsbrief<!--#/html#--></h1>
<p><!--#html#-->Uw dagelijkse update voor alles wat er gebeurt met ACME<!--#/html#--></p>
<table >
<tr><td>
<div>
<h3><!--#html#-->is dit net gebeurd?<!--#/html#--></h3>
<!--#image#-->
<img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
<p><!--#html#-->Je zou niet geloven wat er net gebeurde. Als je meer wilt weten, klik dan op de link hieronder!<></p>
<!--#html#--><a href="http://www.example.com".>Lees meer</a><!--#/html#-->
</div>
<div>
<h3><!--#html#--><!--#/html#-->Wacht, is dit ook gebeurd??</h3>
<!--#image#--><img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
<p><!--#html#-->Misschien niet zo geweldig als het vorige nieuws, maar nog steeds heel erg interessant.<!--#/html#--></p>
<!--#html#--><a href="http://www.example.com".>Lees meer</a><!--#/html#-->
</div>
</td></tr>
</table>
</body>
</html>Je kunt deze sjabloon nu in de editor laden en op de tekst- of afbeeldingsgebieden klikken om ze te bewerken.
Opmerking: U kunt de broncode-editor gebruiken tijdens het maken en eenvoudig schakelen tussen de editors (rechtsboven) om uw resultaten te controleren.
HTML-inhoudsblokken
De vorige methode werkt goed als je niet wilt dat de gebruiker te veel invloed heeft, maar het is meestal gebruikelijker om specifieke gebieden te hebben waar de gebruiker eenvoudig voorgebouwde HTML-bits kan neerzetten die verschillende vormen van lay-outs bevatten.
We noemen deze gebieden lussen. Elk inhoudsblok wordt omsloten door <!--#loopitem#--><!--#/loopitem#--> om deze elementen uit elkaar te houden.
In het bovenstaande voorbeeld zie je dat er 2 DIV's zijn, die elk een inhoudsblok vertegenwoordigen. Laten we onze lus-tag toevoegen en een van de inhoudsblokken weglaten, want ze lijken toch al vrij veel op elkaar:
<html>
<body bgcolor="#ffffff">
<h1><!--#html#-->Dagelijkse nieuwsbrief<!--#/html#--></h1>
<p><!--#html#-->Uw dagelijkse update voor alles wat er gebeurt met ACME<!--#/html#--></p>
<table >
<tr><td>
<!--#loop#-->
<!--#loopitem#-->
<div>
<h3><!--#html#-->gebeurde dit net?<></h3>
<!--#image#--><img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
<p><!--#html#-->Je zou niet geloven wat er net gebeurde. Als je meer wilt weten, klik dan op de link hieronder!<></p>
<!--#html#--><a href="http://www.example.com".>Lees meer</a><!--#/html#-->
</div>
<!--#/loopitem#-->
<!--#/loop#-->
</td></tr>
</table>
</body>
</html>Opmerking: Lussen kunnen niet tussen gelijksoortige structuren worden geplaatst.
Sjabloon tags
Dit is een lijst van alle beschikbare sjabloontags die we gebruiken om sjablonen bewerkbaar te maken. We hebben ze onderverdeeld in 3 categorieën:
- Inhoudelijk (grundlegende bewerking)
- Hilfebezogen (Schaltflächen, Abstandshalter enz.)
- Ontwerp (Hulp bij de vormgeving van uw ontwerp)
Inhoudelijk
Deze tags bieden je basisbewerkingsopties::
HTML
De HTML-tag kan verschillende HTML-gerelateerde dingen aan. Van eenvoudige tekst tot complexe inhoud, het heeft verschillende opties om elke HTML-tag afzonderlijk te beheren.
<!--#html mode="default" inline="true"#--><!--#/html#-->modus stelt verschillende opties in voor inhoudscontrole
- standaard: basistekstopmaak, links en plaatsaanduidingen
- volledig: zoals standaard, maar met afbeeldingen
- textonly: toont alleen plaatsaanduidingen in de werkbalk
- link: toont alleen linkinstellingen en plaatshouders
- safelink: Geen werkbalk, kan geen links verwijderen, maar heeft in plaats daarvan een zijbalk
inline="true" maakt van het element een inline element en geen blok (alleen binnen de editor). Dit herstelt alleen visuele fouten in de editor en heeft geen invloed op de daadwerkelijke uitvoer.
vervangen="waar" markeert de hele tekst wanneer deze voor het eerst wordt geselecteerd, zodat deze gemakkelijker kan worden vervangen.
BEELDEN
Dit wordt gebruikt om afbeeldingen bewerkbaar te maken, maar ook om ze "browser-veilig" te maken. Afbeeldingen in e-mails plaatsen is niet zo eenvoudig als je zou denken. Daarom probeert de editor de afbeelding in te sluiten in een tabel om deze correct uit te lijnen. Als je afbeelding al is ingesloten in een tabel, plaats de afbeeldingscode dan buiten de tabel en niet rond de afbeelding. Als je niet wilt dat je afbeelding wordt omwikkeld, kun je de optie "nowrap" gebruiken.
<!--#image align="center" #--><!--#/image#-->align="center|left|right" Dit definieert de standaardoriëntatie van de afbeelding. Als er geen is ingesteld, wordt geprobeerd het te vinden.
marge="10px 20px" definieert de buitenrand van de afbeelding (standaardwaarde "0px")
nowrap="true" De afbeelding is niet opgenomen in de tabel, zodat uitlijnen niet mogelijk is.
noresize="true|fasle" Verwijdert de mogelijkheid om het formaat aan te passen
forcepx="true" Percentage afbeeldingen worden geconverteerd naar px. Dit werkt over het algemeen het beste met alle e-mailclients
replace="true" Opent de bestandsbrowser zodra op de afbeelding wordt geklikt. Slechts één keer gebruikt en om plaatshouderafbeeldingen te vervangen.
inline="true" Maakt de afbeelding (in de editor) een inline afbeelding en geen blok. Dit herstelt alleen visuele fouten in de editor en heeft geen effect op de daadwerkelijke uitvoer.
LOOP
Schleifen schaffen einen bestimmten Bereich, in dem der Benutzer neue Elemente aus der Seitenleiste einfügen kann. Schleifen können nicht zwischen Tabellenelementen platziert werden wie <table><tr> of <ol><li>
<!--#loop#-->
<!--#loopitem#-->...<!--#/loopitem#-->
<!--/loop#-->loopitem naam: indien ingesteld, maakt het een afneembaar element in de zijbalk
loopitem zijbalk: wordt alleen opgenomen in de zijbalk, maar niet in de eigenlijke inhoud (standaard:false)
loopitem inklapbaar: maakt de knoppen samenvouwbaar (standaard:false)
STAPEL / STAPELINVOER
Stacks werken als loops, maar zijn zeer beperkt in hun gebruik. Het idee is om de gebruiker een plek te geven waar hij alleen eenvoudige elementen kan regelen (HTML, IMAGE, BUTTON, SPACER en DIVIDER). Dit kan worden gebruikt om kolommen bewerkbaar te maken zonder de eigenlijke kolommen te breken.
<tabel>
<tr>
<td>
<!--#stacks#-->
<!--#stack-entry#--><p>A</p><!--#/stack-entry#-->
<!--#stack-entry#--><p>B</p><!--#/stack-entry#-->
<!--#/stacks#-->
</td>
<td>
<!--#stacks#--><!--#/stacks#-->
</td>
</tr>
</table>Hulp Tags
Deze tags zijn voornamelijk geprefabriceerde elementen, variërend van eenvoudige afstandhouders tot complexe elementen.
KNOP
Dit maakt een HTML-knop die veilig is voor de klant. Geen van de waarden is eigenlijk vereist.
<!--#button bgcolor="#e9703e" color="#000000" align="center" text="Lees meer" #--><!--#/button#-->text="Klik hier! Standaard weergave tekst
href="http://example.url"
bgcolor="#e9703e" Definieert de achtergrondkleur
color="#ffffff" Bepaalt de kleur van het lettertype
align="center|left|right|block" verandert de uitlijning. Blok komt overeen met de volledige breedte
margin="10px 10xp 20px 20px" buitenmarge
SPACER
Maakt een bewerkbare tussenruimte.
<!--#spacer size="50px"#--><!--#/spacer#-->size="20px" stelt de standaardhoogte in op 20px
DIVIDER
Maakt een scheidingsteken tussen regels (zoals <hr>)
<!--#divider padding="40px" width="85%" align="center" height="2px" color="#888888" bgcolor="transparent"#--><!--#/divider#-->
opvulling = "20px" stelt de standaardhoogte van dit element in (niet van de rij zelf)
breedte = "20px" de breedte van de huidige regel
hoogte = "20px" de hoogte van de huidige regel
bgkleur = "#ffffff"
kleur = "#ffffff"
uitlijnen = "links|centraal|rechts|blok"
UNSUBSCRIBE
Hiermee kan de gebruiker kiezen uit vooraf gedefinieerde afmeldberichten.
Opmerking: Moet vooraf worden ingevuld met tekst.
<!--#unsubscribe#--> <a href="{UNSUBSCRIBE}">unsubscribe</a> me!<!--#/unsubscribe#-->OVER ONS
Dit voegt een gebied toe waarin de gebruiker kan kiezen uit vooraf gedefinieerde afdrukken.
Opmerking: Deze inhoud wordt overschreven zodra u de sjabloon in de editor laadt. Als je dit niet wilt, gebruik dan HTML.
<!--#aboutus#--><!--#/aboutus#-->
ONLINEVERSIE
Een andere sectie voor het weergeven van een tekst en een link naar de online versie (browser).
Opmerking: Moet vooraf worden gevuld met tekst.
<!--#onlineversion#-->Als dit bericht niet goed wordt weergegeven, <a href="{ONLINE_VERSION}">klik hier</a> aub.<!--#/onlineversie#-->CSS en ontwerp
Deze instellingen richten zich op design en CSS om de gebruiker meer en volledig aangepaste stylingopties te bieden.
THEMA'S
Dit zoekt naar <style data="cr/theme"></style> en biedt vervolgens een tabblad Theming onder het tabblad Design aan de zijkant. Alle hier gedefinieerde klassen worden ook inline toegevoegd voor maximale compatibiliteit.
Het werkt in wezen net als SASS, maar vervangt alleen variabelen.
Opmerking: Alles onder "*/" wordt vervangen, omdat dit de gerenderde CSS-uitvoer is.
<style data="cr/theme">
/*
$my_var: 15px;
$slider-Max_width: 600px;
$quad-Text_to_display: 12px 12px 24px 24px;
$color-use_me: #ffffff;
$image-Background_image: https://example.com/batman.png;
.mytest {
width: $my_var;
margin: $quad-Text_to_display;
background-color: $color-use_me
}
.background {url($image-Achtergrond_afbeelding);}
*/
...
</stijl>We bieden een reeks voorinstellingen en voorvoegsels die je kunt gebruiken om het type invoerveld te regelen.
$slider- gebruikt een schuifregelaar in plaats van een invoer
$quad- geeft vier invoervelden weer (bijv. voor marges en opvullingen)
$color- resulteert in een kleurenkiezer
$image- geeft een afbeeldingsselector terug
$my_var resulteert in een invoerveld met de naam Mijn var. De "_" wordt meestal vervangen door " " (spatie)
Door de gebruiker gedefinieerde editorinstellingen
Dit bestuurt de editor zelf en geeft je de mogelijkheid om sommige instellingen te tonen en te verbergen.
Opmerking: Dit zou idealiter in de eerste regel moeten staan, maar werkt ook overal elders.
<##template css="false" settings="false" #-->
css = "false" Verbergt het tabblad Ontwerp in de hoofdzijbalk
settings = "false" Verbergt het tabblad Instellingen in de zijbalk.
default-elements = "false" Verbergt alle elementen in de zijbalk
user-elements = "false" Verbergt alle gebruikerselementen in de zijbalk
agency-elements = "false" Verbergt alle agentschapselementen in het paginabereik
custom-elements = "false" Verbergt alle elementen behalve het sjabloon in de zijbalk
css-to-inline= "true|false" Forceert CSS/styles in de inline-modus
version = "2.0" Deactivering van oude fallback-functies voor sjablonen (bijv. automatische bewerking van de klassen "body", ".a", ".text")
hideplugins= "edithtml,conditional" Verzoekt om bepaalde plugins te verbergen. Dit wordt niet door alle plugins ondersteund
fix-top = "true" Voegt extra ruimte toe bovenaan (alleen in de editor) om de ontbrekende HTML-werkbalk te repareren
image-nowrap = "true" Deactiveert de tabelomhulling van afbeeldingen
image-nohref = "true" Deactiveert de linkinstellingen voor alle afbeeldingen
loops-collapsible = "true" Maakt alle knoppen in lusitems inklapbaar
Bewerkbare CSS / Stijl
Hiermee kun je CSS-blokken op het tabblad ontwerp bewerken, zodat gebruikers hun sjabloon naar wens kunnen aanpassen.
Plaats /* @title Display Name */ boven een CSS class om deze (en al zijn waarden) beschikbaar te maken op het tabblad Design.
<style>
/* @titel Weergavenaam */
.exampleclass {
background-color: #080708 !important;
color: #ffeeff;
padding: 5px;
marge: 10px 5px;
}
</stijl>Je kunt ook meerdere CSS definities combineren in een groep door @group mygroupname toe te voegen aan het commentaar.
<style>
/* @title margins and paddings
@group Mijn aangepaste groep
*/
.exampleclass1 {
padding: 5px;
margin: 10px 5px;
}
/* @title vooral kleuren
@group Mijn aangepaste groep
*/
.exampleclass2 {
background-color: #080708 !important;
color: #ffeeff;
}
</stijl>.bewerkbaar
Als je een van je HTML-elementen toevoegt binnen een <!--#loop#--><!--#/loop#-->, worden alle stijlen vrijgegeven voor bewerking.
Standaard krijgen deze de naam "Element #", waarbij # een getal is dat afhangt van het aantal bewerkbare elementen dat je hebt. Je kunt deze naam wijzigen door data-name toe te voegen .
Optioneel: U kuntdata-limit-to gebruiken om alleen de opgesomde CSS stijlen (gescheiden door komma's) bewerkbaar te maken en de rest ongemoeid te laten.
Optioneel: Je kunt data-style gebruiken om de gebruiker te voorzien van extra stijlen zonder deze waarden daadwerkelijk in style te schrijven, zolang ze niet verschillen van de originele waarde. Hier zou het alleen worden geschreven als background-color iets anders was dan inherit.
<td style="padding: 10px 20px;text-direction:ltr;" data-style="background-color:inherit;" data-limit-to="padding,background-color" class="editable" data-name="Container">Verlaagde tags
De volgende tags zijn verouderd en worden automatisch geconverteerd naar hun nieuwere tegenhangers.
-
<!--#link#--><!--#/link#-->wird<!--#html mode="link"#--><!--#/html#--> -
<!--#html_line#--><!--#/html_line#-->wird<!--#html inline="true"#--><!--#/html#--> -
<><!--#text_line#-->wird<!--#html inline="true" mode="textonly"#--><!--#/html#--> -
<><!--#text#-->wird<!--#html mode="textonly"#--><!--#/html#--> -
<!--#loopsplit#-->wird<!--#loopitem#--><!--#/loopitem#-->
Help & Ondersteuning
Als je vragen hebt of hulp nodig hebt, kun je contact opnemen met ons serviceteam. Ze zullen er voor je zijn.