Design av en mappsida med sidredigeraren (Page Editor) i Kontainer

Skapa design, guider och landningssidor i era mappar för att på ett bättre sätt presentera innehållet för kollegor, partner och kunder.

Visa en elegant och användarvänlig plattform som är anpassad efter behoven hos alla ni bjuder in. Bara användare med åtkomst till mapparna ser den design ni skapar.

I sidredigeraren (Page editor) kan ni kombinera:

  • Bilder
  • Text
  • GIF-animationer
  • Video
  • Avgränsare
  • Inbäddningskod

👉 INSPIRATION: Klicka här

👉 FLER DESIGNALTERNATIV: Klicka här

👉 NYHET: SIDDESIGN PÅ FLERA SPRÅK: Klicka här

Om ni har frågor eller vill ha en presentation, kontakta support@kontainer.com.


Skapa snygg design i era mappar

Vad vill ni att era användare ska se när de öppnar Kontainer? Med egna landningssidor visar ni upp er identitet och ger åtkomst till filerna. Våra kunder använder egna landningssidor till exempelvis:

  • Brand- och designguider
  • Produktlanseringar
  • Presskit och pressmeddelanden
  • Instruktionsguider
  • Utbildningsmaterial

Det är bara några exempel. Ni vet själva bäst hur landningssidor kan ge era användare en smidigare upplevelse. Hör av er om ni har frågor.


Steg-för-steg-guide

1. Öppna sidredigeraren

Gå till den mapp/sida som ni vill redigera.

Observera att ni behöver Delete-rättigheter till en mapp för att kunna redigera dess designelement i sidredigeraren.

Klicka på More uppe till höger i mappvyn och klicka sedan på Page Editor.

En Kontainer-mapp med More-menyn öppen uppe till höger med alternativen Page Editor, View Details, Configure Folder, Archive, Copy, Move, Download och Delete.

2. Lägg till sektioner

När sidredigeraren är öppen kan ni lägga till sektioner med innehållsrutor.

Varje sektion har ett antal innehållsrutor som kan innehålla:

  • Bilder
  • Text
  • GIF-animationer
  • Avgränsare
  • Videor
  • Inbäddade element

Lägg till en innehållssektion i sidredigeraren i Kontainer

👉 NYHET: Fler typer av sektioner

Olika typer av sektioner i sidredigeraren

3. Typer av innehåll

De sex innehållstyperna har olika formateringsalternativ, som beskrivs nedan.

Bilder

Bilder kan läggas till externt från er dator eller internt från Kontainer.

  • Om ni lägger till internt kan ni importera via en nedladdningsmall (läs mer om nedladdningsmallar).
  • Bilderna skalas automatiskt, om ni inte stänger av det
  • Ni kan lägga till interna eller externa länkar på bilderna

Ladda upp bilder i sidredigeraren i Kontainer

GIF-animationer

Lägg till GIF-animationer i er design.

Formateringsalternativ:

  • GIF-animationer skalas automatiskt, om ni inte stänger av det
  • Ni kan lägga till interna eller externa länkar
  • Länkar kan öppnas i en ny flik

Lägg till en GIF-animation i sidredigeraren

Text

Lägg till text på sidan.

Alternativ:

  • Egen formatering av texten
  • Använd formateringsförinställningar (från Settings/Appearance/Text editor)
  • Lägg till länkar i texten
  • Lägg till knappar (call to action) i texten
  • Infoga mappdata som platshållare i texten
  • Lägg till utfyllnad (padding)
  • Lägg till bakgrundsfärg eller bakgrundsbild
  • Välj textens placering

Lägg till text i sidredigeraren i Kontainer

👉 NYHET: Knappar (call to action) i text

Lägg till knappar i ett textelement för att leda användarna vidare, till exempel till en annan mapp, en extern webbplats eller en fil som de kan ladda ner.

Så här lägger ni till en knapp:

  1. Öppna textelementet i sidredigeraren.
  2. Klicka på ikonen Add button i textverktygsfältet, bredvid länkikonerna.
  3. Skriv knappens text i Button text.
  4. Välj knappens mål i Button destination:
    • Extern: ange en URL. Ni kan också ange en e-postadress, som då öppnar ett nytt e-postmeddelande.
    • Intern: välj en mapp i er Kontainer.
    • Download: välj en fil eller en mapp som användarna kan ladda ner direkt från knappen.
  5. Markera Öppna i ny flik om det behövs (inte tillgängligt för nedladdningsknappar).
  6. Klicka på Add button.

Observera: med en nedladdningsknapp kan alla som kan se sidan ladda ner den valda filen eller mappen, även om de inte själva har nedladdningsrättigheter. Nedladdningen använder behörigheterna hos den person som lade till knappen.

Om ni inte ser ikonen Add button, spara först textelementet och öppna det igen.

Ge era knappar en egen stil

Alla knappar som läggs till i sidredigeraren delar en stil per varumärke. Ni ställer in den under Settings/Appearance/Design i sektionen Page editor buttons. Knappar på andra ställen i Kontainer påverkas inte, och fält som ni lämnar tomma behåller standardstilen. En förhandsvisning visar resultatet medan ni redigerar.

Ni kan välja mellan två flikar:

  • Settings: ange bakgrundsfärg, textfärg, kantfärg, typsnitt, teckenstorlek, kantbredd, hörnradie samt vertikal och horisontell utfyllnad.
  • Custom CSS: skriv er egen CSS för knappen. Första gången ni öppnar fliken är den förifylld med knappens nuvarande stil, så att ni kan justera den. Nästlade regler fungerar, till exempel &:hover { opacity: 0.7; } för en hovringseffekt.

Sektionen Page editor buttons under Settings ></picture> Appearance > Design i Kontainer, med en förhandsvisning av knappen, flikarna Settings och Custom CSS samt fält för bakgrundsfärg, textfärg, kantfärg, typsnitt, teckenstorlek, kantbredd, hörnradie och utfyllnad.

Kom ihåg att spara era ändringar.

👉 NYHET: Mappdata i text

Om era mappar är taggade med mappdata kan ni infoga mappdatafält som platshållare i ett textelement. När sidan visas ersätts varje platshållare med värdet som är taggat på just den mappen.

Det betyder att ni kan bygga en sidmall och använda den i många mappar. Varje mapp visar då automatiskt sina egna data, till exempel kund, segment, bransch och år, utan att ni behöver skriva in dem på varje sida.

Läs mer om att tagga mappar i Mapptaggning.

Video

Observera att det kan ta en liten stund innan en tillagd video kan förhandsvisas online.

Formateringsalternativ:

  • Spela upp videon i designen (i stället för i ett popup-fönster)
  • Stäng av ljudet
  • 👉 NYHET: Automatisk uppspelning (bara utan ljud)
  • Spela upp i slinga
  • Dölj videokontrollerna
  • Ladda upp en miniatyr-/förhandsvisningsbild

Lägg till video i sidredigeraren i Kontainer

Avgränsare

Lägg till mer avstånd eller avgränsande linjer mellan sektionerna.

Formateringsalternativ:

  • 3 storlekar (Small, Medium, Large)
  • Visa avgränsande linje
  • Välj linjens färg

Lägg till en avgränsare i sidredigeraren i Kontainer

👉 NYHET: Inbäddning

Bädda in videor, Google Maps-element eller annat.

OBS: Kontainer har ett eget verktyg för videostreaming. Läs mer här.

Formateringsalternativ:

  • Välj placering

Lägg till inbäddat innehåll i sidredigeraren i Kontainer

Ta bort marginaler

Ta bort avståndet mellan elementen där ni inte vill ha marginaler.

Marginalinställningar i sidredigeraren i Kontainer

Exempel: marginaler på/av

Marginaler på och av i sidredigeraren i Kontainer

🌐 Siddesign på flera språk

Om er Kontainer används på flera språk kan ni ge er siddesign en version per språk. Användarna ser då automatiskt sidan på det systemspråk de har valt.

När sidredigeraren är öppen byter ni språk med språkväljaren uppe till höger. En liten prick bredvid ett språk visar att sidan fortfarande har innehåll som behöver översättas.

Text, bilder, GIF-animationer, videor och länkar kan alla ha en egen version per språk, medan layouten och inställningar som utfyllnad, bakgrund och placering är desamma för alla språk. Mappnamn kan också översättas.

Sidredigeraren i en Kontainer-mapp med språkväljaren öppen. English är valt, och en liten prick bredvid de andra språken visar att de fortfarande behöver översättas.

Läs hela guiden i Mappar och siddesigner på flera språk.

Maximal bredd för innehållet

Ange en maximal bredd för sidan/mappvyn om ni inte vill att bilder och text ska dras ut. Som standard anpassas innehållet efter webbläsarens storlek.

Förhandsvisning av en mapp i Kontainer med responsiv design och maximal bredd för innehållet

Inställningen finns under Settings/Appearance/General.

Ange maximal bredd för siddesign/mappvy i Kontainer DAM


Det var allt. Berätta gärna hur det går.