Menu

HTML - Designskabelon

Ønsker man at lave en lidt anderledes mailskabelon, så kan man via HTML kode selv skabe sit eget udtryk i de mails som sendes ud fra klubben.

Det anbefales at oprette en ny almindelig email skabelon i KlubOffice, hvor man så laver sin grundlæggende HTML kode. Når man så efterfølgende skal lave en ny email skabelon, hvor man vil bruge HTML designet, så starter man med lige at gå ind og kopiere koden fra HTML skabelonen og så efterfølgende indsætter og redigerer den fra den nye skabelon man skal oprette.

Herover er et eksempel på en HTML email skabelon, som benyttes i Stubbekøbing Boldklub. De steder hvor der i koden er markeret med gul baggrund, er der hvor I styrer farverne og teksten i header og footer på skabelonen. Kender man lidt til HTML, så kan man ligeledes tilpasse den øvrige kode eller tilføje helt andre koder.

Marker og kopier koden (fra ovenstående skabelon) som er angivet herunder og indsæt den som HTML kode på jeres email skabelon. Rediger herefter i koden derfra, så I får tilpasset både sidehoved og sidefod til jeres egen klubs informationer og farver.


<table style="width: 100%; background-color: #f6f6f6;">
<tbody>
<tr>
<td align="center">
<table cellspacing="0" border="0" style="text-align: center; margin: 0px auto; padding: 0px; table-layout: fixed; max-width: 800px;">
<tbody>
<tr>
<td style="padding: 30px; width: 100%;" align="center">
<div style="overflow: hidden; border-radius: 5px; width: 800px; text-align: left; margin: 0px auto;">
<table width="100%" style="background-color: #c00000;">
<tbody>
<tr>
<td style="padding: 30px; width: 100px;"><span style="font-family: Verdana;"><img alt="" src="http://sb-boldklub.dk/media/1122/logo-3981x4586.png?width=500&amp;mode=max&amp;animationprocessmode=first" style="width: 100px;" width="100" /></span></td>
<td style="padding: 30px 0px;">
<div style="display: inline-block; vertical-align: middle;">
<div style="margin-left: 10px; font-family: Verdana; font-size: 38px; line-height: 38px; font-weight: 700; color: #ffffff;">Stubbek&oslash;bing BK</div>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" style="background-color: #ffffff;">
<tbody>
<tr>
<td style="padding: 30px;">
<div style="padding: 30px; background-color: #ffffff; font-family: Verdana; font-size: 14px; font-weight: 400; color: #222222 !important;">
K&aelig;re ##Medlemsnavn##<br />
<br />
S&aring; er der nye fordele p&aring; dit medlems- og fordelskort...<br />
<br />
L&aelig;s mere p&aring; kortet i din DBU Wallet i Fodbold app'en.<br />
<br />
Med sportslig hilsen<br />
<strong>Stubbek&oslash;bing Boldklub</strong><br />
<br />
<span style="font-size: 12px;"><span style="text-decoration: underline;">Eventuelle sp&oslash;rgsm&aring;l kan rettes til:</span><br />
Johnny Brincker (Kasserer)<br />
Tlf: 27 11 93 38<br />
E-mail: kasserer@sb-boldklub.dk</span>
</div>
</td>
</tr>
</tbody>
</table>
<table style="background-color: #c00000;" width="100%">
<tbody>
<tr>
<td style="padding: 30px; width: 100%;">
<div style="background-color: #c00000;">
<div style="font-family: Verdana; font-size: 12px; font-weight: 400; text-decoration: none; color: #ffffff !important;">
<p style="text-align: center;">Stubbek&oslash;bing Boldklub<br />
<a href="https://www.sb-boldklub.dk" style="color:white;">Hjemmeside</a> | <a href="https://facebook.com/sbboldklub" style="color:white;">SB p&aring; Facebook</a>&nbsp;<span style="font-size: 12px; text-align: center; background-color: #c00000; font-family: Verdana; color: #ffffff;">| </span><a href="https://www.instagram.com/sbboldklub/" style="color:white;">SB p&aring; Instagram</a>&nbsp;<span style="font-size: 12px; text-align: center; background-color: #c00000; font-family: Verdana; color: #ffffff;">| </span><a href="https://www.facebook.com/oefhaandbold" style="font-family: Verdana; font-size: 12px; text-align: center; background-color: #c00000; color: white;">&Oslash;FH p&aring; Facebook</a>&nbsp;</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>