Tilpas HTML skabelonen

Contents

    Under menupunktet Skabeloner finder du de HTML skabeloner, der er oprettet i Heyloyalty.

    I denne guide lærer du, hvordan du tilpasser logoet i en eksisterende HTML skabelon. Hvis du først skal oprette en skabelon, kan du læse vores guide til standard HTML skabeloner.

    Bemærk: Hvis du vil lave mere komplekse ændringer i HTML skabelonen, anbefaler vi, at du får hjælp fra en udvikler. Du bør kun selv foretage større ændringer, hvis du har erfaring med HTML kode.

    Billeder til denne guide vil komme senere.

    Justér logo i din skabelon

    Før du kan ændre logoet i din skabelon, skal du uploade det nye logo til mediearkivet i Heyloyalty. Upload logoet, og kopiér derefter URL’en til billedet. Du skal bruge URL’en, når du redigerer HTML koden i skabelonen.

    Gå til Skabeloner i Heyloyalty. Find den skabelon, du vil tilpasse. Klik på de tre prikker ud for skabelonen, og vælg Rediger skabelon.

    Vi anbefaler, at du kopierer hele indholdet fra skabelonen og indsætter det i et tekst/notes program, hvor du nemmere kan søge i HTML koden. Søg efter ordet logo. Find følgende kommentar i koden: <!-- start logo -->. Under denne kommentar finder du det img tag, der indeholder logoet. Her skal du finde src attributten, som indeholder URL’en til det nuværende logo. I eksemplet nedenfor er det URL’en efter src=", du skal erstatte med URL’en til dit nye logo. (Er markeret med fed)

    <!-- start logo -->            
    <table width="720" cellpadding="0" cellspacing="0" border="0" class="fullWidth" bgcolor="#FFFFFF">
                    <tr>
                          <td height="25" style="font-size:25px; line-height:25px; height:25px;"> </td>
                        <!-- Spacer -->
                    </tr>
                    <tr>
                        <td width="720" class="wrapper" align="center">
                            <a href="https://heyloyalty.com/" target="_blank">
                                <img src="https://images.heyloyalty.dk/uploads/media_image/18011/image/Heyloaylty_logo_orange.png" width="180" style="margin:0; padding:0; border:none; display:block;" border="0" alt="heyloyalty" />

    Bemærk: Sørg for kun at erstatte URL’en mellem anførselstegnene. Undgå at ændre resten af img tagget, medmindre du har erfaring med HTML.

    Når du har udskiftet URL’en til logoet, anbefaler vi, at du opretter en ny skabelon med den tilpassede HTML kode. På den måde undgår du at overskrive din eksisterende skabelon.

    Når du har gemt den nye skabelon, kan du kontrollere ændringen i previewet og sikre dig, at det nye logo vises korrekt.

    Tilpasning af sociale ikoner i skabelon

    Du kan også tilpasse de sociale ikoner i din HTML skabelon. Du kan både udskifte selve ikonerne og ændre de links, som modtageren sendes videre til, når der klikkes på dem.

    Start med at uploade de ikoner, du vil bruge, til mediearkivet i Heyloyalty. Kopiér URL’en til hvert ikon, så du har dem klar, når du skal tilpasse HTML koden.

    Gå til Skabeloner i Heyloyalty. Find den skabelon, du vil tilpasse. Klik på de tre prikker ud for skabelonen, og vælg Rediger skabelon.

    Vi anbefaler, at du kopierer hele indholdet fra skabelonen og indsætter det i et tekst/notes program, hvor du nemmere kan søge i HTML koden. Søg efter navnet på det sociale medie, du vil tilpasse, for eksempel Facebook eller Twitter. Tæt på f.eks. <!– Facebook link finder du både linket til det sociale medie og URL’en til det ikon, der vises i skabelonen. I eksemplet nedenfor er det URL’en efter src=", du skal erstatte med URL’en til ikonet og efter href=” skal du tilføje den url modtageren skal sendes hen på, når de klikker. Begge urler er markeret med fed.

    <!-- Facebook link: Change "href" to the url of your Facebook page -->
                                            <a href="https://www.facebook.com/" target="_blank">
                                                <!-- Facebook image: Change "src" if you want a different image -->
                                                <img src="https://img.heyloyalty.com/heyloyalty1/system%2Ffacebook" width="50" style="margin:0 auto; padding:0; border:none; display:block;" border="0" alt="facebook" />
                                            </a>
                                        </td>
                                        <td width="300" class="mobile50" style="font-family:arial; font-size:12px; line-height:18px;" align="center">
                                            <!-- Twitter link: Change "href" to the url of your Twitter page -->
                                            <a href="https://twitter.com/" target="_blank">
                                                <!-- Twitter image: Change "src" if you want a different image -->
                                                <img src="https://img.heyloyalty.com/heyloyalty1/system%2Fx" width="50" style="margin:0 auto; padding:0; border:none; display:block;" border="0" alt="twitter" />
    

    Bemærk: Udskift kun URL’en mellem anførselstegnene. Ændr ikke resten af src og href tagget, medmindre du har erfaring med HTML.

    Når du har udskiftet URL’en til ikonet anbefaler vi, at du opretter en ny skabelon med den tilpassede HTML kode. På den måde undgår du at overskrive din eksisterende skabelon.

    Når du har gemt den nye skabelon, kan du kontrollere ændringen i previewet og sikre dig, at det nye ikonet vises korrekt.

    Ændre USPer i skabelonen

    Hvis din HTML skabelon indeholder 1 til 3 USPer, kan du ændre teksten på dem direkte i skabelonens HTML kode. Det gør du ved at gå til Skabeloner i Heyloyalty. Gå til Skabeloner i Heyloyalty, og find den skabelon, du vil tilpasse. Klik på de tre prikker ud for skabelonen, og vælg Rediger skabelon.

    Vi anbefaler, at du kopierer hele HTML koden fra skabelonen og indsætter den i et tekstprogram eller noteprogram. Her kan du nemmere søge efter den tekst, du vil ændre. Søg efter et par ord fra den USP, du vil ændre. På den måde kan du finde den relevante tekst i HTML koden. Hvis der for eksempel står Gratis fragt over 499 i din USP, kan du søge efter denne tekst i programmet.

    Når du har fundet teksten, erstatter du den med den nye tekst, du ønsker at vise. I eksemplet nedenfor er de tre USPer, der skal ændres i skabelonen, markeret med fed:

    <!-- Start USPs -->
    							<table width="760" cellpadding="0" cellspacing="0" border="0" class="fullWidth" bgcolor="#ffffff">
    								<tr>
    									<td align="center">
    										<!-- Start Container -->
    										<table width="660" cellpadding="0" cellspacing="0" border="0" class="fullWidth">
    											<tr>
    												<th width="220" class="mobileFull" style="font-family:  Georgia, 'Times New Roman', Times, serif, Arial, sans-serif; color:#000000;font-size:14px;text-decoration:none; font-weight:normal;" align="center">
    										✔ Gratis fragt over 499,-
    												</th>
    												<th width="220" class="mobileFull paddingTop10" style="font-family:  Georgia, 'Times New Roman', Times, serif, Arial, sans-serif; color:#000000;font-size:14px;text-decoration:none; font-weight:normal;" align="center">
    											✔ Dag til dag levering
    												</th>
    												<th width="220" class="mobileFull paddingTop10" style="font-family:  Georgia, 'Times New Roman', Times, serif, Arial, sans-serif; color:#000000;font-size:14px;text-decoration:none; font-weight:normal;" align="center">
    									✔ Afhent i butik inden for 2 timer
    												</th>
    											</tr>
    										</table>

    Bemærk: Udskift kun selve teksten på USPen. Du bør ikke ændre indholdet i < >, medmindre du har erfaring med HTML.

    Når du har udskiftet teksten på USPerne anbefaler vi, at du opretter en ny skabelon med den tilpassede HTML kode. På den måde undgår du at overskrive din eksisterende skabelon.

    Når du har gemt den nye skabelon, kan du kontrollere ændringen i previewet og sikre dig, at det nye ikonet vises korrekt.

    Tilpas adresse i footeren i skabelonen

    Hvis adressen i footeren på din HTML skabelon skal ændres, kan du rette den direkte i skabelonens HTML kode. Gå til Skabeloner i Heyloyalty, og find den skabelon, du vil tilpasse. Klik på de tre prikker ud for skabelonen, og vælg Rediger skabelon.

    Vi anbefaler, at du kopierer hele HTML koden fra skabelonen og indsætter den i et tekstprogram eller noteprogram. Her kan du nemmere søge efter den nuværende adresse og finde det relevante sted i HTML koden.

    Søg efter hele eller dele af den adresse, der vises i footeren. Hvis der for eksempel står Nyvej 89, kan du søge efter denne tekst i programmet. Når du har fundet adressen, erstatter du den med den nye adresse, der skal vises i footeren. I eksemplet nedenfor er adressen, der skal ændres, markeret med fed:

    <br style="display: none;" class="mobileOn" /> <a href="https://heyloyalty.com" style="font-family: Georgia, 'Times New Roman', Times, serif, Arial, sans-serif; color:#000000; font-size:14px; font-weight:normal; line-height:18px; text-decoration:none;">Nyvej 89</a>

    I ovenstående eksempel skal Nyvej 89 erstattes med den nye adresse.

    Bemærk: Udskift kun selve adressen. Du bør ikke ændre den øvrige HTML kode eller indholdet i < >, medmindre du har erfaring med HTML.

    Når du har ændret adressen, anbefaler vi, at du opretter en ny skabelon med den tilpassede HTML kode. På den måde undgår du at overskrive din eksisterende skabelon.

    Når du har gemt den nye skabelon, kan du kontrollere ændringen i previewet og sikre dig, at den nye adresse vises korrekt i footeren.

    Gør din HTML skabelon til din egen

    Med få tilpasninger kan du få din HTML skabelon til at passe bedre til din virksomhed og dit visuelle udtryk. Når logo, sociale medier, USPer og kontaktoplysninger er på plads, har du en skabelon, som er klar til at danne grundlag for dine kommende udsendelser.

    Husk altid at kontrollere dine ændringer i previewet, inden du tager skabelonen i brug. Derudover anbefaler vi, at du tester skabelonen både på desktop og på mobil for at se om skabelonen viser layoutet korrekt på forskellige devices. Når du tester din skabelon, er du sikker på, at indholdet vises, som du ønsker.