Helpdesk

Så arbetar du med layouteditorn

Denna guide kommer gå igenom layout- & sideditorns funktioner samt deras responsivitet i den nya mallen.

1. Först om responsivitet

När en sida är responsiv betyder det att den anpassar sig efter enheten som besökaren använder. Olika versioner används för mobil, tablet, eller en vanlig dator. Layouteditorn och sideditorn tillåter dig nu som butiksägare att anpassa hur butiken ska se ut, i alla versioner av butiken. 

2. Flikar

De olika flikarna i layout- och sideditorn korresponderar till olika delar i butiken.

2.1 Layouteditorn

Layouteditorn gäller delar som visas på alla sidor i butiken, oavsett om det är en produktsida, inloggningssida eller framsidan.

2.1.1 Header

Headern i layouteditorn syfter till det som finns överst på sidan. Detta kan t.ex vara toppmenyn eller en företagslogga. När den responsiva mallen är aktiv, delas denna flik upp i två delar: Header large, som visas när webbsidan är i fullstorlek, och Header small/medium, som visas när besökaren använder en mobil eller tablet.

2.1.2 Left column

Left column syftar till vänstra spalten i butiken. Om ingenting läggs in i spalten, så kommer den inte att ta upp någon plats i butiken. Som standard så visas den heller inte i small eller medium versionerna av butiken, utan endast i fullversionen.

2.1.3 Middle column

Middle column syftar till mittenspalten. Alla block som läggs in här kommer visas på alla sidor i mittenspalten, utom kassan, oavsett small, medium eller large version.

2.1.4 Right column

Right column syftar till butikens högra spalt. Likt vänsterspalten så visas den inte om den inte innehåller något. Den kommer heller aldrig att visas i small och medium versionerna av butiken.

2.1.5 Footer

Footer syftar till botten av butiken. Den kommer alltid att visas längst ned i butiken, så länge den inte är tom.

 

2.2 Sideditorn

De olika filkarna i sideditorn gäller specifika sidor i butiken.

2.2.1 Produktsidan

Denna flik syftar till layouten på själva produktsidan, och hanterar produktinformation så som varubilder, artikellistor, länkade varor, osv.

2.2.2 Varugruppssidan

Denna flik syftar till hur visningen på en varugruppssida ska vara strukturerad, som t.ex varugruppens namn, visningen av produkter som ingår i varugruppen, eller vargruppens beskrivning.

2.2.3 Fabrikatssidan

Denna flik syftar till hur layouten på fabrikatssidan ska vara strukturerad, och inluderar möjligheten att placera ut visningen av produkter som har fabrikatet, relevanta beskrivningar eller dokument, osv.

 


3. Mallhantering

imageopenedit.png

Direkt under flikarna för de olika editorerna finner du mallhanteringen. Här kan du välja vilken mall du vill ändra, och sköta övergripande inställningar för dina olika mallar.

 

3.1 Hantera befintliga mallar

Här redigerar du inställningar för mallarna, samt skapar nya. Att mallens namn är grön betyder att den är aktiv i butiken.

mallhantering1.png

delete.gifRadera: Raderar mallen. Går inte att genomföra på en aktiv mall.
copy.gifKopiera: Kopierar den befintliga mallen och alla dess inställningar, inklusive giltighetsbegränsningar.
props.gifRedigera: Här kan du redigera namn på mallen, om den ska vara nedladdningsbar och dess giltighetsbegränsningar.
opentofront.pngFörhandsgranskning: Gör en förhandsgranskning av mallen i form av en pop-up, baserat på en vald vara eller varugrupp.
dl-file.gifLadda ner: Ladda ner mallen som fil, som man kan ladda upp i en annan butik. 

 

Under "Meny" vid listans botten finns en mängd alternativ.

imageopenmenuedit.png

Skapa ny mall från grunden: Skapar en ny mall, utan innehåll.

Generera och aktivera valda mallar i butiken: De valda mallarna kommer att aktiveras samtidigt på sidan. *VARNING* Detta kan skapa konflikter mellan mallarna, så var försiktiga om ni aktiverar detta.

Ladda upp mall: Laddar upp en mall från en befintlig mallfil.

 

3.2 Välj den mall du vill redigera

mallhantering2.png

Här väljer du vilken mall du vill redigera. Notera att mallen du väljer sätts inte som aktiv i butiken, utan gäller endast redigering av mallen.

 

3.3 Hantera vald mall

Längst ned i varje editor finns upp till tre knappar som påverkar mallen som håller på att redigeras.

3.3.1 Spara

Sparar alla ändringar som gjorts i mallen som håller på att redigeras. Inga ändringar görs i butiken, även om mallen är aktiv, utan den sparar mallen i sig.

3.3.2 Genomför ändring i butik

Aktiverar mallen som ni håller på att redigera i butiken, och sparar också alla befintliga ändringar. Alla tidigare ändringar som gjorts i butiken kommer ersättas.

3.3.3 Förhandsgranskning

I sideditorn finns alternativet att förhandsgranska sidan. När du trycker på knappen så får du välja det du ska förhandsgranska, varpå ett nytt fönster visas med förhandsgranskningen. Förhandsgranskning är inte möjligt i layouteditorn.

 

4. Block

Då man skapar en sida, görs det med hjälp av block. Varje block är ett eget element i editorn, och varje typ av block är unikt, med egna inställningar och funktioner.

Det finns två olika typer av block: behållare och icke-behållare. Behållare är block vars huvuduppgift är att hålla andra block, inklusive andra behållare. Olika behållare håller block på olika sätt. De olika behållarna är vertikalt blockhorizontellt block och flikar

Icke-behållare är block som inte kan hålla andra block, och har oftast egenskaper som inte finns hos andra blocktyper.

Om ett block inte innehåller någon information kommer det inte synas i butiken. Sidan kommer att ha formateringen som om blocket inte finns.

4.1 Symboler på blocken

9.png

arrow_left.gifarrow_right.gifarrow_down.gifarrow_up.gif Navigering: Klicka på pilarna för att flytta blocket. Blocket kommer att byta plats med blocket man flyttar det emot.
props.gif Redigera blocket: Här kan man ställa in giltighetsbegränsningar, designinställningar och andra inställningar för blocket.
delete.gifRadera blocket: Raderar blocket och alla block det innehåller.
additem.gifLägga till ett nytt block. Denna kan endast behållare använda, och öppnar en lista med blocktyper.

Tänk på att inga ändringar slår igenom tills ni Genomför ändringarna i butiken.

 

4.2 Generella inställningar

Utöver alla blockens unika inställningar, finns det även inställningar som kan appliceras på alla block och mallar.

4.2.1 Giltighetsbegränsningar

Då man redigerar mallar och block kan man välja att ändra på dess giltighetsbegränsningar.

10a.png

Dessa tillåter dig att begränsa ett blocks synlighet baserat på en mängd faktorer, som t.ex extrafält eller kundkategorier. Kryssar man i "Invertera", kommer det istället gälla för alla utom den man valt. Man kan även använda egen SBscript kod.

10.png

 *NOTERA* Frågetecknet (help.png) ger mycket goda tips om hur de olika inställningarna fungerar.

4.2.2 Generella designinställningar

Om man håller på mycket med CSS, kan man bestämma vilken klass blocket eller mallen ska använda. Läs mer om CSS och WebDAV i vår manual.

11.png

 

4.3 Blockspecifika inställningar

Dessa inställningar finns tillgängliga på olika block beroende på vilken flik de ligger i, eller om de ligger i en behållare.

4.3.1 Padding runt block

En ny inställning för alla block är att man nu kan ställa in mängden padding runt blocket. Padding betecknar den mängd pixlar som ett block ska ha som avstånd mot en kant, eller andra block. Som standard så får alla nyskapade block en padding på 20 pixlar nedåt. Detta är för att skapa ett mellanrum mot andra block som läggs in i mallen.

Padding kan ställas in för alla storlekar av responsiva butiken. Om inställningen saknas för en storlek, så betyder det att fliken som ni har lagt blocket i inte syns i den storleken, eller att blocket inte innehåller inställningar för den storleken.

4.3.2 Placering per visning

De flesta blocks placering kan justeras till att antingen vara vänster-, center- eller högerjusterade. Denna inställning finns för alla block som inte är fullbredd per automatik, och finns för alla storlekar av responsiva butiken. Om inställningen saknas för en storlek, så betyder det att fliken som ni har lagt blocket i inte syns i den storleken, eller att blocket inte innehåller inställningar för den storleken.

4.3.3 Full bredd

Vissa block kan ställas in att de ska vara fullbredd i butiken. Detta gör att istället för att begränsas av webbutikens bredd, så tar de alltid upp webbläsarens fulla bredd. Notera att denna inställning finns endast för block satta i flikarna Header och Footer.

Vissa block sätts som full bredd per automatik, som till exempel Valutaväljare, eller Toppmenyn. För att dessa inte ska vara fullbredd, lägg in dem i en horizontell eller vertikal behållare.

4.3.4 Ange blockets bredd i antal delar av 12

Alla block som läggs in i ett horizontellt block kan ställas in att de ska ta en viss mängd utrymme. Alla horizontella block är uppdelade i tolv delar, där varje block tar sin del av utrymmet. Vanligtvis om man inte ändrar denna inställning, delar de inlagda blocken upp utrymmet mellan sig jämlikt. Om man har till exempel tre block som delar plats har de alla en bredd på fyra, eftersom totalen ska vara tolv och tolv delat på tre är lika med fyra.

Inställningen tillåter dig istället att själv välja antal delar av tolv som blocket ska ta upp. Till exempel så kanske man vill att ett block ska ta upp åtta delar, och resterade ska ta upp två. Om alla block tillsammans tar upp för mycket plats (till exempel tretton totalt), så skjuts det sista blocket ner en rad.

Antal delar som tas upp kan ställas in för alla storlekar av responsiva butiken. Om inställningen saknas för en storlek, så betyder det att fliken som ni har lagt blocket i inte syns i den storleken, eller att blocket inte innehåller inställningar för den storleken. 

4.3.5 Visning av block

Headern i medium (tablet),
där kundvagn syns

Headern i small (mobile),
där kundvagnen har blivit dold

Om du inte vill att ett block ska visas för mobilanvändare, eller att ett block endast ska synas om man använder en tablet, kan man ställa in det här. Om man döljer ett block, så kommer det inte att visas för den storleken i butiken. I exemplet ovan har kundvagnen blivit dold i mobil-versionen, men syns fortfarande i medium (tablet) versionen.

Tänk på att om inställningen saknas för en storlek, så betyder det att fliken som ni har lagt blocket i inte syns i den storleken, eller att blocket inte innehåller inställningar för den storleken. 

 

 

 

 

 

Har du fler frågor? Skicka en förfrågan

1 Kommentarer

  • 0
    Avatar
    Cathy Dillner

    Footer 2,1,5

    Här finns ingen  bra förklaring hur man ändra foot . 

    Bara står: "Footer syftar till botten av butiken. Den kommer alltid att visas längst ned i butiken, så länge den inte är tom."

     

    MVH

    Cathy Dillner

    Smadi Design

logga in för att lämna en kommentar.
Powered by Zendesk