Inställningar för Stripos dra-och-släpp-redigerare för e-post

Published: 22 oktober 2024 · Last updated: 21 juli 2026 · By Marcus Biel

På höger sida i Maildroppas e-postredigerare hittar du kolumnen E-postinställningar, som innehåller verktyg för att strukturera och anpassa innehållet och utseendet på ditt e-postmeddelande. Kolumnen är indelad i två flikar: Innehåll och Utseende.

Fliken Innehåll

På fliken Innehåll utformar och organiserar du innehållet i ditt e-postmeddelande. Den innehåller två huvudavsnitt: Strukturer och Block.

1. Strukturer

Strukturer definierar layouten för ditt e-postmeddelande genom att ordna innehåll i rader och kolumner. Du kan välja bland olika fördesignade layouter, till exempel:

• En kolumn
• Två kolumner
• Flera kolumner

Du är inte begränsad till dessa alternativ – du kan kombinera flera block för att skapa valfri anpassad layout, vilket ger full flexibilitet för dina designbehov.

• Dra och släpp: Dra bara en struktur från det här avsnittet och släpp den i designområdet för e-postmeddelandet för att börja lägga till innehåll.
• Anpassning: När en struktur har lagts till kan du fylla den med olika innehållsblock, som bilder, text eller knappar.

2. Block

Block är innehållselementen som du placerar i strukturerna för att bygga ditt e-postmeddelande.

De tillgängliga blocktyperna är:

• Bild: Ladda upp bilder (PNG, JPG, GIF) och anpassa deras utseende.
• Text: Lägg till och formatera text för att förmedla ditt budskap.
• Knapp: Lägg till klickbara knappar med anpassningsbar text, länkar och stilar.
• Mellanrum: Infoga ett tomt utrymme för att justera layouten mellan andra block.
• Video: Bädda in videoinnehåll från plattformar som YouTube, Vimeo med flera.
• HTML: Lägg till anpassad HTML- och CSS-kod för avancerad anpassning av e-postinnehåll.

Varje block är flexibelt och anpassningsbart, så att du kan skapa ett e-postmeddelande som stämmer överens med ditt varumärkes utseende och känsla.

Detaljerad förklaring av innehållsblock

Bildblock

Bildblocket i Stripos dra-och-släpp-redigerare för e-post gör att du kan lägga till och anpassa bilder i din e-postkampanj.

Lägga till ett bildblock

Du kan lägga till ett bildblock i ditt e-postmeddelande på två sätt:

Alternativ 1

Håll muspekaren över området "Släpp innehåll här" i en struktur och klicka sedan på bildikonen. Då omvandlas den valda strukturen direkt till ett bildblock.

Alternativ 2

Gå till avsnittet Block under fliken Innehåll. Dra bildblocket till den önskade strukturen i e-postlayouten. Den här metoden ger dig större kontroll över exakt var bilden ska placeras.

Ladda upp en bild

När du har lagt till bildblocket finns det två sätt att ladda upp en bild:

Dra och släpp

Du kan dra och släppa en bildfil (PNG, JPG, GIF) direkt från datorn till uppladdningsrutan som visas i bildblocket.

Ladda upp från datorn

Du kan också klicka på molnikonen i bildblocket för att öppna filhanteraren och välja en bild från datorn (upp till 2 MB). När bilden har valts visas den både i blocket och på innehållsfliken till höger.

Byta bild

Använd alternativet Byt bild på innehållsfliken för att ersätta bilden. Klicka på den runda ikonen Byt bild för att ladda upp en ny bild eller länka till en bild från en extern URL.

Redigera bilden

Efter att du har laddat upp en bild kanske du vill göra ytterligare ändringar direkt på plattformen. Stripos inbyggda bildredigerare låter dig förbättra och justera bilder utan att lämna e-postredigeraren.

Öppna bildredigeraren

1. När en bild har laddats upp klickar du på knappen Redigera bild. Då öppnas bildredigeraren.
2. Redigeraren erbjuder ett brett utbud av verktyg som visas i den övre menyraden.

Tillgängliga verktyg för bildredigering

• Filter Använd olika filter med ett enda klick, till exempel:

  • Gråskala
  • Svartvitt
  • Skärpa
  • Invertera
  • Sepia
  • Ljusstyrka
  • Färg

• Ändra storlek Justera bildens mått. Du kan:

  • Ange en specifik bredd och höjd.
  • Behålla bildförhållandet.

• Beskär Välj den del av bilden som ska behållas och ta bort oönskade delar.

• Transformera Rotera eller vänd bilden:

  • Horisontellt
  • Vertikalt

• Rita Använd ritverktyget för att lägga till frihandselement, till exempel linjer eller egna former, ovanpå bilden.

• Text Lägg till text direkt i bilden. Anpassa:

  • Typsnitt
  • Storlek
  • Färg
  • Justering

• Former och klistermärken Förbättra bilden genom att lägga över:

  • Färdiga former
  • Roliga klistermärken

• Ramar Välj bland olika ramar för att ge bilden en stilfull kant.

• Hörn Justera hörnens stil för ett mer välpolerat utseende.

• Bakgrund Ta bort eller ersätt bildens bakgrund för ett renare utseende.

Spara ändringarna

När du har gjort önskade ändringar klickar du på knappen Spara längst upp till vänster i redigeraren. Den redigerade bilden ersätter automatiskt originalet i e-postlayouten.

Bildinställningar

När du har laddat upp bilden kan du anpassa den med alternativen för bildinställningar på innehållsfliken till höger.

Länk

Lägg till en länk till bilden. Du kan välja mellan olika länktyper, till exempel:

• Webbplats (HTTP, HTTPS)
• E-post (mailto:)
• Fil (ftp)
• Delning på sociala medier (Facebook, X (tidigare Twitter), LinkedIn, Pinterest)

Du hittar dessa alternativ i rullgardinsmenyn för länk­inställningar.

Alternativ text

Lägg till en alternativ text som visas om bilden inte laddas. Texten är också användbar för tillgängligheten eftersom skärmläsare kan beskriva bilden för mottagare med synnedsättning.

Justering

Välj hur bilden ska justeras i sin behållare. Du kan justera den till vänster, mitten eller höger.

Storlek

Justera bildens bredd och höjd manuellt med plus-/minusknapparna eller genom att ange önskade mått.

Du kan också aktivera alternativet "Anpassa till bredd" så att bilden automatiskt fyller behållarens hela bredd.

Responsiv bild

Aktivera alternativet "Responsiv bild" så att bilden anpassas till olika skärmstorlekar, särskilt på mobila enheter.

Utfyllnad

Anpassa utfyllnaden runt bilden för att styra hur mycket utrymme som visas mellan bilden och omgivande innehåll. Du kan använda samma utfyllnad överallt eller anpassa den för varje sida (överst, nederst, vänster, höger).

Ankarlänkar

Du kan tilldela bilden en ankarlänk så att mottagare kan hoppa till ett specifikt avsnitt i samma e-postmeddelande när de klickar på bilden. Observera dock att ankarlänkar kanske inte fungerar i vissa e-postklienter, som Gmail och Apple Mail.

Textblock

Förbättra dina textblock genom att anpassa deras utseende och funktion med följande inställningar. Varje alternativ låter dig finjustera hur texten visas så att den passar dina designpreferenser.

Textverktygsfält

När du klickar i ett textblock visas textverktygsfältet ovanför innehållsområdet och ger snabb åtkomst till många vanliga alternativ för textformatering. Här är funktionerna som finns i verktygsfältet:

1. Styckeformat

Ange styckestil genom att välja alternativ som Normal för vanlig text eller olika rubriknivåer (Rubrik 1 till Rubrik 6) för att skapa en strukturerad hierarki i e-postmeddelandet. Det gör innehållet mer lättläst och organiserat.

2. Typsnitt

Standardtypsnittet är Arial, men du kan välja bland olika typsnitt, inklusive vanliga alternativ som Georgia, Helvetica och Courier New. Det finns även en sökfunktion för att snabbt hitta ett visst typsnitt.

3. Teckenstorlek

Justera teckenstorleken från 8 pt till 72 pt. Standardvärdet är 14 pt, vilket fungerar bra för de flesta brödtexter i e-post. Använd rullgardinsmenyn för att snabbt välja önskad teckenstorlek.

4. Textformattering

Formatera texten med följande alternativ:

• Fet (B): Betonar text genom att göra den fet.
• Kursiv (I): Gör texten kursiv för ett mer stiliserat utseende.
• Understruken (U): Understryker text, vilket ofta används för hyperlänkar.
• Genomstruken (S): Drar en linje genom texten, användbart för ändringar eller borttaget innehåll.

5. Avancerad textformatering (menyn med tre punkter)

När du klickar på de tre punkterna i verktygsfältet visas ytterligare alternativ:

• Nedsänkt: Sänker text under baslinjen (användbart för fotnoter eller kemiska formler).
• Upphöjt: Höjer text över baslinjen (vanligt för exponenter eller ordningstal).
• Ta bort formatering: Tar bort all tillämpad formatering och återställer texten till standardstilen.

6. Text- och bakgrundsfärg

• Textfärg: Klicka på knappen för textfärg för att välja från en palett eller ange en hexkod för exakt kontroll över textfärgen.
• Bakgrundsfärg: Välj en bakgrundsfärg (markering) för texten.

7. Textjustering

Justera texten i blocket:

• Vänsterjustera: Justerar texten till vänster.
• Centrera: Centrerar texten.
• Högerjustera: Justerar texten till höger.
• Justera: Fördelar texten jämnt över blockets bredd.

8. Listor

Skapa ordnade (numrerade) och oordnade (punktlistor) listor:

• Infoga/ta bort punktlista: Lägger till eller tar bort punkter.
• Infoga/ta bort numrerad lista: Lägger till eller tar bort en numrerad lista.

9. Radbrytning

Aktivera eller inaktivera radbrytning i textblocket. När den är aktiverad flyttas långa textrader automatiskt till nästa rad.

10. Indrag

Justera indraget för texten:

• Öka indrag: Flyttar texten längre från marginalen, användbart för underpunkter eller citat.
• Minska indrag: Minskar indraget och flyttar texten närmare vänstermarginalen.

11. Infoga hyperlänk

Lär dig hur du lägger till, redigerar och hanterar hyperlänkar i e-postinnehållet.

Steg för att lägga till eller redigera en länk

a) Markera texten

Markera texten som du vill göra till en hyperlänk.

b) Klicka på länkikonen

Klicka på länkikonen i textverktygsfältet.

c) Redigera länken i inställningspanelen

Inställningspanelen till höger visas med länkalternativ:

• Länkfält: Ange URL:en eller välj bland fördefinierade alternativ.
• Tagg: Lägg till taggar för att märka prenumeranter eller utlösa automatiseringar.

Åtgärda länkar efter utskick

Det finns inget värre än att skicka en ny kampanj till dina 2 365 prenumeranter och sedan upptäcka att en av länkarna är trasig på grund av ett enkelt skrivfel. Hej då, Black Friday-försäljning!

Lyckligtvis har vi gjort det möjligt att åtgärda trasiga länkar även efter att e-postmeddelandet redan har skickats till dina prenumeranter.

a) Visa kampanj

Hitta den skickade kampanjen i översikten, klicka på de tre punkterna och välj Visa kampanj.

b) Ändra länkar eller taggar

Bläddra till länklistan i kampanjinformationen för att:

• Uppdatera länkmål: Åtgärda felaktiga URL:er.
• Hantera taggar: Lägg till eller ta bort taggar för automatiseringar.

Obs! Kontrollera att klickspårning är aktiverad i kampanjinställningarna för att kunna använda funktionen för att ändra länkmål.

Anpassa länkens utseende

I inställningspanelen till höger kan du justera länkens utseende:

• Länkfärg: Välj en färg eller ange en hexkod.

• Understryk länkar: Aktivera eller inaktivera understrykning för ett renare utseende.

12. Personaliseringstaggar

Använd personaliseringstaggar för att lägga till dynamiskt innehåll, till exempel mottagarens förnamn eller andra anpassade fält.

• Öppna rullgardinsmenyn personaliseringstaggar i verktygsfältet för att välja vanliga fält som Förnamn, E-post eller Land, eller definiera anpassade fält för att skräddarsy e-postmeddelanden för varje mottagare.

13. Emojier

Gör texten mer visuellt tilltalande genom att använda emojier.

• Klicka på emojiikonen i verktygsfältet för att öppna en kategoriserad lista med emojier som är lätt att bläddra i.
• Kompatibilitetsobs: Testa e-postmeddelanden i vissa klienter, till exempel Outlook, eftersom en del kanske inte visar emojier korrekt.

14. Tabeller och specialtecken

Klicka på de tre punkterna i slutet av verktygsfältet för att visa fler avancerade alternativ.

Infoga tabell

Skapa och anpassa tabeller för att förbättra e-postlayouten.

• Ange rader, kolumner, cellavstånd, utfyllnad och ramstorlek efter behov.

Infoga specialtecken

Förbättra texten med symboler, accenttecken och andra icke-standardiserade tecken.

• Öppna alternativet Specialtecken för att bläddra bland ett stort urval tecken.

Ytterligare inställningar för textblock (höger panel)

Den högra panelen ger omfattande kontroll över textblockens utseende och funktion. Nedan finns de tillgängliga inställningarna:

1. Textfärg

Definiera textens färg med färgväljaren eller genom att ange en hexkod.

2. Bakgrundsfärg

Ange en anpassad bakgrundsfärg för textblocket. Som standard är bakgrunden genomskinlig.

3. Länkspecifika inställningar

När textblocket innehåller länkar visas ytterligare inställningar:

• Länkfärg: Justera länkarnas färg med färgväljaren eller en hexkod.

• Understryk länkar: Växla understrykning på eller av för länkar i textblocket.

• Redigera länk: Markera en länk i innehållsområdet för att redigera dess URL i inställningspanelen. Du kan även tilldela eller uppdatera taggar för länken via rullgardinsmenyn märkt "Taggar".

4. Justering

Justera textblocket i behållaren: vänster, mitten eller höger.

5. Fast höjd

Ange en fast höjd för textblocket genom att aktivera detta alternativ. Du kan också styra vertikal textjustering: överst, mitten eller nederst.

6. Radavstånd

Styr utrymmet mellan textrader. Välj mellan tätt, normalt eller brett.

7. Utfyllnad

Justera utrymmet runt textblocket. Använd enhetlig utfyllnad eller anpassa varje sida: överst, nederst, vänster och höger.

8. Ankarlänkar

Skapa ankarlänkar så att läsare kan hoppa till specifika avsnitt i e-postmeddelandet. Observera att vissa e-postklienter inte stöder ankarlänkar.

Knappblock

Knappblocket gör att du kan lägga till en klickbar knapp i e-postmeddelandet med anpassningsbara inställningar för funktion och stil.

Länkinställningar

Alternativet Länk avgör vilken åtgärd som utlöses när en mottagare klickar på knappen.

Tillgängliga länktyper

• Vanlig webbplatslänk (HTTP eller HTTPS): Leder användaren till en webbsida.
• E-postlänk: Öppnar användarens e-postklient för att skriva ett nytt e-postmeddelande.
• Fillänk (FTP, FTPS): Länkar till en fil på en FTP-server.
• Skype: Startar ett Skype-samtal eller en chatt.
• Telefon (tel): Startar ett telefonsamtal på kompatibla enheter.
• SMS: Öppnar meddelandeappen med ett förifyllt mottagarnummer.
• Viber: Öppnar Viber-appen för meddelanden eller samtal.
• Annan protokolltyp: Ange ett eget protokoll som inte finns med ovan.

Alternativ för delning på sociala medier

Du kan också ställa in knappen för delning på sociala medier eller via e-post:

• Facebook
• X (tidigare Twitter)
• LinkedIn
• Pinterest
• E-postdelning

URL-fält

Bredvid länktypen kan du i URL-fältet (som vanligtvis börjar med https://) ange den specifika adress som motsvarar länktypen.

Knapptext

Anpassa knapptexten så att den återspeglar din uppmaning till handling. Standardtexten är "Knapp", men du kan ändra den till exempelvis "Läs mer", "Prenumerera nu" eller "Handla nu".

Textstil

Inställningarna för textstil låter dig justera knapptextens utseende.

Val av typsnitt

Välj bland olika standardtypsnitt, inklusive:

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

För icke-standardiserade typsnitt finns ytterligare alternativ:

• Arvo
• Lato
• Lora
• Merriweather
• Merriweather Sans
• Noticia Text
• Open Sans
• Playfair Display
• Roboto
• Source Sans Pro

Längst upp i typsnittslistan hjälper en sökruta dig att snabbt hitta ett specifikt typsnitt.

Teckenstorlek och formatering

• Teckenstorlek: Välj mellan 8 och 72, beroende på hur framträdande knapptexten ska vara.
• Textformatering: Använd fet eller kursiv stil med ikonerna "B" eller "I" för att betona knapptexten.

Färginställningar

Anpassa knappens utseende genom att justera färginställningarna.

1. Knappfärg: Ändra knappens bakgrundsfärg. Standardfärgen är grön (#31cb4b). Använd fältet för hexkod eller färgväljaren för att välja en ny färg.

2. Textfärg: Definiera knappens textfärg. Standardfärgen är vit (#ffffff). Välj en färg med god kontrast mot knappens bakgrund för bättre läsbarhet.

3. Bakgrundsfärg: Justera bakgrunden för knappens behållare. Som standard är den genomskinlig, men du kan ändra den för att få knappen att framträda mot e-postmeddelandets bakgrund.

Hörnradie

Styr rundningen på knappens hörn med inställningen Hörnradie.

• Standardvärde: 30 (måttligt rundade hörn).
• Intervall: 0 (fyrkantiga hörn) till 100 (pillerformad knapp).

Obs! För att säkerställa att rundade hörn visas korrekt i Microsoft Outlook aktiverar du alternativet "Stöd för Outlook" på fliken Utseende.

Justering

Placera knappen i innehållsområdet med inställningen Justering.

• Alternativ: vänster, mitten, höger.
• Vanlig användning: Mittjustering för betoning och vänster- eller högerjustering för en konsekvent design.

Fast höjd

Aktivera alternativet Fast höjd för att behålla konsekventa knappmått.

1. Standard: Inaktiverat.
2. Minimihöjd: 44 pixlar.
3. Vertikal justering av innehåll: När fast höjd är aktiverad kan du justera knappens innehåll till överst, mitten eller nederst för exakt placering.

Knapp med ikon

Alternativet Knapp med ikon gör att du kan lägga till en ikon bredvid knapptexten, vilket förbättrar det visuella intrycket och förstärker uppmaningen till handling. Funktionen är inaktiverad som standard.

• Format som stöds: Ladda upp ikoner i formatet PNG, JPG eller GIF, med en maximal filstorlek på 2 MB.
• Ikonplacering: Välj om ikonen ska visas till vänster eller höger om knapptexten.

Obs! Ikoner visas inte i vissa versioner av Microsoft Outlook för Windows, inklusive:

• Outlook 2002, 2007, 2010, 2013, 2016 och 2019. Begränsningen beror på hur dessa e-postklienter återger HTML-e-post. Ta hänsyn till detta om en stor del av din målgrupp använder dessa klienter.

Raminställningar

Anpassa knappens ramar för mer stil och betoning.

• Rambredd: Ange bredden för varje sida (vänster, höger, överst och nederst) individuellt, upp till 40 pixlar.
• Ramstil: Välj mellan heldragen, streckad eller prickad stil.
• Ramfärg: Använd färgväljaren eller ange en hexkod för att matcha ramfärgen med ditt varumärke eller designschema.

Intern utfyllnad

Justera utrymmet inuti knappen, mellan innehållet (text och ikon) och knappens ram.

• Anpassningsalternativ: Ange utfyllnadsvärden för sidorna vänster, höger, överst och nederst, upp till högst 99 pixlar.
• Effekt: Intern utfyllnad påverkar knappens totala storlek och innehållets placering i knappen.

Extern utfyllnad

Styr utrymmet utanför knappen för att justera dess position i förhållande till andra element i e-postlayouten.

• Anpassningsalternativ: Ange extern utfyllnad för sidorna vänster, höger, överst och nederst, upp till högst 40 pixlar.
• Användningsfall: Säkerställer att knappen inte hamnar för nära annat innehåll eller e-postmeddelandets kanter.

Lägg till ankarlänk

Använd ankarlänkar för att leda läsare till specifika avsnitt i samma e-postmeddelande och ge snabb navigering i längre nyhetsbrev.

• Ankarnamn: Definiera ett mål i e-postmeddelandet och länka knappen till ankaret. Vid klick rullar e-postmeddelandet till det angivna avsnittet, vilket förbättrar navigeringen.

Viktigt: Ankarlänkar stöds inte i vissa e-postklienter, inklusive:

• Gmail-appen för iOS
• Apple Mail för iOS
• Outlook-appen för Android
• Outlook-appen för macOS
• AMP-e-postmeddelanden

Testa e-postmeddelandet noggrant för att säkerställa funktionalitet i olika e-postklienter och avgöra om funktionen passar din målgrupp.

Mellanrumsblock

Mellanrumsblocket låter dig lägga till justerbart utrymme i e-postinnehållet och ger kontroll över storlek, justering, utseende och intern utfyllnad. Nedan finns information om de två typerna av mellanrum: normalt mellanrum och dynamiskt mellanrum.

1. Normalt mellanrum

Normalt mellanrum är ett linjeelement som visuellt avgränsar avsnitt i e-postmeddelandet.

Viktiga inställningar

1. Linjens tjocklek och stil Anpassa linjens tjocklek, stil och färg:

   • Tjocklek: Justera med knapparna + och - (från 1).
   • Stil: Välj mellan heldragen, streckad eller prickad.
   • Färg: Ange en egen färg med en hexkod eller färgväljaren (standard: #cccccc).

2. Bredd Definiera hur långt mellanrumslinjen sträcker sig över innehållet. Justera bredden i pixlar med knapparna + och -.

3. Justering Justera linjen till vänster, mitten eller höger så att den passar layouten.

4. Utfyllnad Styr det interna utrymmet runt mellanrummet:

   • Standard: Utfyllnaden är inställd på 20 på alla sidor.
   • Använd växeln Mer för att ange utfyllnad för enskilda sidor:
     • Överst
     • Höger
     • Nederst
     • Vänster

Användningsfall

Normalt mellanrum är idealiskt för att skapa tydliga visuella avgränsningar mellan avsnitt i e-postmeddelandet och säkerställa en välorganiserad och professionell layout.

2. Dynamiskt mellanrum

Dynamiskt mellanrum är ett osynligt block med tomt utrymme som är utformat för att skapa luft i e-postlayouten.

Viktiga funktioner

1. Höjdjustering Justera höjden direkt i innehållsområdet eller via kontrollpanelen med knapparna + och -. Höjden avgör hur mycket vertikalt utrymme som läggs till mellan avsnitt.

2. Bakgrundsfärg Som standard har mellanrummet en genomskinlig bakgrund, men du kan använda en egen bakgrundsfärg med en hexkod eller färgväljaren. Det gör att mellanrummet kan fungera som ett synligt block vid behov.

3. Responsivt beteende Alternativet Responsivt mellanrum säkerställer att mellanrummet anpassas dynamiskt till olika skärmstorlekar för en optimal layout på olika enheter. Funktionen är aktiverad som standard.

Viktiga skillnader mellan normala och dynamiska mellanrum

• Dynamiskt mellanrum: Lägger till tomt utrymme utan en synlig linje.
• Normalt mellanrum: Innehåller linjespecifika inställningar som:
  • Linje-bredd
  • Justering
  • Linje-stilar
  • Utfyllnad

Dynamiskt mellanrum stöder inte dessa funktioner och är enbart utformat för avgränsning utan visuella element.

3. Lägg till ankarlänk

Ankarlänkar kan användas med båda mellanrumstyperna och låter användare navigera direkt till mellanrummets plats från en annan del av e-postmeddelandet. Det är särskilt användbart för att skapa navigering i längre nyhetsbrev.

Obs! Ankarlänkar stöds inte av vissa e-postklienter, inklusive:

• Microsoft Outlook
• Gmail (på mobilen)

Videoblock

Videoblocket låter dig bädda in videor i e-postmeddelandet och anpassa deras utseende och beteende. Det stöder videolänkar från plattformar som YouTube och Vimeo, vilket ger flexibilitet och kontroll över hur videon presenteras.

1. Länk till video

Lägg till videons URL i fältet Länk till video. Plattformar som stöds omfattar YouTube, Vimeo och andra tjänster som kan bäddas in.

• Automatiskt beteende: När en giltig URL läggs till:

  • Genereras automatiskt en förhandsvisningsbild med videons miniatyrbild från plattformen.
  • Fylls fältet Alternativ text automatiskt i med videotiteln eller beskrivningen, om den är tillgänglig.

• Redigerbara fält: Du kan manuellt redigera eller ersätta den genererade förhandsvisningsbilden och texten vid behov.

2. Alternativ text

Fältet Alternativ text säkerställer tillgänglighet genom att visa en beskrivning av videon om den inte kan laddas.

• Fylls automatiskt i när en videoadress från en plattform som stöds läggs till.
• Kan anpassas efter ditt innehåll.

3. Anpassad miniatyrbild

Ladda upp en egen bild för att ersätta standardförhandsvisningen av videon.

• Så aktiverar du: Aktivera alternativet Anpassad miniatyrbild.
• Format som stöds: PNG, JPG eller GIF.
• När du ska använda det: Ersätt den genererade miniatyrbilden när den inte passar e-postmeddelandets design.

4. Uppspelningsknapp

Anpassa den överlagrade uppspelningsknappen för videominiatyrbilden.

• Tillgängliga alternativ:
  • Välj bland uppspelningsknappstilar från YouTube, Vimeo eller andra tjänster.
  • Välj ”Ingen” för att dölja uppspelningsknappen helt.

5. Storlek

Justera videons mått så att den passar e-postdesignen.

• Bredd och höjd: Använd knapparna + och - eller ange värden manuellt för att styra storleken.
• Responsiv design: Säkerställ att videon passar sömlöst på olika enheter.

6. Anpassa till bredd

Aktivera växeln Anpassa till bredd så att videon automatiskt anpassas till behållarens bredd. Detta säkerställer att videon behåller en responsiv design på olika enheter.

7. Responsiv bild

Växeln Responsiv bild säkerställer att videominiatyrbilden anpassas till skärmens bredd på mobila enheter.

• Obs! Responsiviteten beror på stöd från enheten och e-postklienten.

8. Justering

Använd inställningen Justering för att styra videons horisontella placering i blocket:

• Vänster: Justerar videon till vänster.
• Mitten: Centrerar videon.
• Höger: Justerar videon till höger.

9. Mobilspecifika alternativ

Anpassa videons beteende och utseende på mobila enheter:

1. Dölj element på mobilen Dölj videoblocket på mobila enheter vid behov.

   • Obs! Den här funktionen förlitar sig på stöd för mediefrågor och kanske inte fungerar i alla e-postklienter.

2. Mobil utfyllnad Justera utfyllnaden runt videon för mobilvisning.

   • Använd växeln Mer för att ange enskilda utfyllnadsvärden för:
     • Överst
     • Höger
     • Nederst
     • Vänster

10. Inkludera i AMPHTML eller HTML

Välj om videoblocket ska visas i specifika e-postversioner:

• Både AMPHTML och HTML
• Endast AMPHTML
• Endast HTML

Alternativet säkerställer att videon inkluderas på rätt sätt baserat på vilken e-postversion som levereras.

HTML-block

HTML-blocket låter dig infoga anpassad HTML- och CSS-kod i e-postmeddelandet och ger flexibilitet för avancerade anpassningar samtidigt som kompatibiliteten med e-postklienter beaktas. Oavsett om du lägger till ett enskilt HTML-element eller utformar ett helt e-postmeddelande är detta blocket ditt verktyg för skräddarsydd design.

1. Kodredigerarens gränssnitt

När du väljer HTML-blocket visas ett svart kodredigerarfönster i innehållspanelen. I redigeraren kan du skriva, klistra in eller ändra egen kod. Redigeraren innehåller två avsnitt:

• HTML-avsnitt: Lägg till eller redigera HTML-strukturen för e-postmeddelandet.
• CSS-avsnitt: Öppna en separat CSS-redigerare för att formge innehållet.

2. Justering av teckenstorlek

Justera teckenstorleken för koden i redigeraren för bättre läsbarhet:

• Använd knappen A+ för att öka teckenstorleken.
• Använd knappen A- för att minska teckenstorleken.

3. Justering av redigerarfönstrets storlek

Ändra storlek på kodredigerarfönstret så att det passar dina arbetsinställningar:

• Så justerar du:
  • Håll muspekaren över de tre punkterna högst upp i mitten av redigerarfönstret.
  • Dra skjutreglaget uppåt eller nedåt för att öka eller minska redigerarens storlek.

Funktionen är särskilt användbar när du arbetar med större eller mer detaljerade kodblock.

4. CSS-redigerare

Med CSS-redigeraren kan du hantera stilar för HTML-innehållet. Den är tillgänglig via en knapp i det övre högra hörnet av kodredigeraren.

Viktiga överväganden:

• Begränsat stöd: Många e-postklienter stöder inte avancerade CSS-funktioner som Flexbox, Grid eller mediefrågor.
• Håll dig till grunderna: Använd grundläggande inline-CSS för maximal kompatibilitet.
• Förkonfigurerade stilar: Undvik att ta bort förkonfigurerade stilar eftersom de säkerställer korrekt återgivning i större e-postklienter.

5. Kompatibilitet med e-postklienter

HTML för e-post kräver särskild uppmärksamhet på grund av föråldrade återgivningsmotorer i många e-postklienter.

Viktiga riktlinjer:

• Använd tabellbaserade layouter i stället för <div>-baserade layouter för bättre stöd.
• Undvik avancerade CSS-funktioner som animationer, Flexbox eller Grid.
• Räkna med inkonsekvent beteende för mediefrågor och mindre CSS-egenskaper.
• Testning: Testa alltid e-postmeddelanden i flera klienter (t.ex. Gmail, Outlook och Apple Mail) för att säkerställa korrekt återgivning.

6. Utfyllnad

Inställningen Utfyllnad justerar utrymmet runt HTML-innehållet:

• Standardutfyllnad: Anges som standard till 0.
• Anpassad utfyllnad: Aktivera växeln Mer för att justera individuell utfyllnad för:
  • Överst
  • Höger
  • Nederst
  • Vänster

Funktionen är idealisk för att justera HTML-innehåll inom e-postlayouten.

7. Lägg till ankarlänk

Funktionen Lägg till ankarlänk gör att du kan skapa en klickbar länk på en annan plats i e-postmeddelandet som navigerar till HTML-blocket.

Så här använder du den:

• Aktivera alternativet och ange ett ankarnamn i fältet.

Begränsningar:

• Ankarlänkar stöds inte av vissa e-postklienter, till exempel:
  • Gmail-appen för iOS
  • Apple Mail för iOS
  • Outlook-appen (Android och macOS)
  • AMP-e-postmeddelanden

8. Skriva anpassad HTML

HTML-redigeraren är utformad för att skriva eller klistra in den anpassade HTML-strukturen för e-postmeddelandet.

Bästa praxis:

• Använd enkel HTML med brett stöd.
• Undvik komplexa layouter eller funktioner som <div>-element.
• Håll dig till tabellbaserad design för bättre kompatibilitet.

9. Tips för att lyckas

1. Börja smått: Använd HTML-blocket för specifika avsnitt om du är ny inom e-postutveckling.
2. Validera koden: Kontrollera att HTML-koden uppfyller e-postklienternas krav.
3. Testa noggrant: Använd verktyg för att förhandsgranska och testa e-postmeddelandet i flera klienter och på olika enheter.