user Created with Sketch.
Group 2 Created with Sketch.

Drag & släpp Startpaket

En lista över alla de block som ingår i alla paket från start med Vendre.

Hoppa fram till...

I verktyget har vi skapat och optimerat ett urval av block för att du enkelt ska kunna hantera ditt innehåll. Blocken ger dig i det närmaste oändliga möjligheter att bygga upp dina sidor i butiken. I denna guide går vi igenom alla block i vårt startpaket med beskrivning av funktion och tips. 


 

Kolumner

För bilder och text som redigeras via formateringsvektyget.

I blocket Kolumner kan du lägga in både text och bild, du väljer själv hur många kolumner som ligger i bredd på desktop respektive mobil och ipad. Välj först hur många kolumner du vill ha i bredd på desktop, ställ sedan in samma inställning för iPad och mobil. Kom ihåg att kolumnerna blir väldigt smala mobilt och det är ofta snyggt att då lägga kolumnerna under varandra om de inte innehåller väldigt lite information samt korta ord eller bilder som inte är så detaljerade.

För att skriva text i blocket klickar du direkt i blocket och får upp formateringsverktyget. För att lägga till en bild kan du använda bildikonen i formaterings verktyget eller ändra placeholder-bilder genom att dubbelklicka på den.

Det som skiljer sig mest med att lägga in bilder via formateringsverktyget från att lägga in bilder via inställningar och pennan på andra block är att bilderna som du lägger in behåller sina dimensioner oavsett bredd på enhet. Det innebär att bilden kan skala och fortfarande visa hela motivet även i mindre enheter.

Tips! Du har väl koll på att du i formateringsverktyget längst till höger har en symbol som ser ut såhär: < > ? Via den kan du kopiera hela innehållet i kolumnen med all formattering och klistra in i nästa kolumn. Detta är bra om du vill behålla samma formatering och bara ändra text och bild. 

Viktigt! Det som är viktigt att tänka på med detta block är att inte lägga in för stora bilder då det bildscript som finns i din butik inte fungerar på bilder som läggs in via formateringsverktyget. Max 2 ggr så stor som användaren ska se bilder men gärna mindre än så om du kan behålla bilden skarpt. 

 
Inspireras

Detta block fungerar superbra med ikoner då dimensionerna på bilder inte ändras. Använd det för att lista dina uspar (unique selling points) med ikoner. Tricket här är att lägga in dina ikoner i rutor som är exakt lika stora för att det ska bli enhetligt. Storleken på bilden styr du direkt när du lägger in bilden och sätter alla ikoner till samma bredd. 

På samma sätt kan du använda blocket tillsammans med ikoner och länka till dina kategorier, i detta exempel ligger det 6 kolumner per rad i desktop, 3 i rad ipad och 2 i sar mobilt samt en svag grå bakgrund. Ikoner och text länkas enkelt via formateringsverktyget och 🔗-ikonen.


 

Marginaler och avdelare

För att skapa luftiga och välstrukturerade sidor är marginaler och avdelare avgörande. 

Marginal

Blocket för marginal är troligtvis det viktigaste blocket för att skapa snygga landningssidor, men i många det mest underskattade och bortglömda blocket. För att skapa en helhet och bra design på dina sidor är det viktigt att det finns luft och marginaler mellan alla element. Dina bilder och texter får mer uppmärksamhet om de inte är för nära varandra. Testa gärna att överdriva med dina marginaler, det krävs ofta mer luft än du tror för att få till det. 

Detta block ger dig möjlighet att välja höjd på en skala 1-10 eller så kan du välja att ställa in exakta pixlar för marginalen. I blocket har du också möjlighet att ställa in annan höjd för mobila enheter om du t.ex. skulle vilja ha en tunnare marginal mobilt.

Kom ihåg! Systemet lägger alltid till lite extra marginal när du har redigeringsläget aktivt. Detta för att du lätt ska kunna dra in block mellan olika element. För att se det riktiga resultatet stänger du av redigeringsläget eller kikar på din sida inkognito efter att du har sparat. Ett tips är att hålla en flik med inkognito-fönster öppet, så att du kommer ihåg att kika på hur användaren kommer se ditt innehåll

Avdelare linje

När du behöver en avdelare mellan dina element på sidan är detta block perfekt. Du kan genom inställningar (pennan) på blocket styra både tjocklek och färg på din linje. 

Avdelare text och linje
Detta block låter dig skriva text i mitten av en linje. Avdelaren med text och linje är fin att använda över produkter liksom över blocket för blogg. Du skriver texten direkt vid linjen med formateringsverktyget och kan välja färg och tjocklek på linjen via inställningarna på pennan.

 

Produkter

Sy enkelt in den röda tråden till konvteringen på alla butikens sidor. 

Produkter välj tagg/kategori eller välj enskild produkt

Detta block ger dig möjlighet att dra ut produkter som visas i en lisnting på alla sidor med Vendres drag & släpp-funktion. Blocket tillåter dig att välja ut produkter genom att söka på taggar, kategorier eller att lägga till specifika produkter. Du kan även styra hur många produkter som ska visas i bredd, detta styrs unikt på mobil, surfplatta och desktop. I blocket kan du också ställa in om produkterna ska läggas under varandra vid fler än en rad eller om slider ska användas. 

Tips! Välj att visa totalt 4 produkter sedan väljer du 4 per rad i desktop och 2 per rad i mobil. Väljer du nu att använda slider så används sliderfunktionen mobilt. 


 

Texter

Lägg in texter via formateringsverktyget, du kan även att styra bredder och lägga in bakgrunder.  

Rubrik

Blocket för rubrik ger dig möjlighet att skriva en rubrik eller text som har lika mycket marginal upp- som nedtill. Du kan till exempel använda blocket ovanför en rad av produkter för att beskriva vad produkterna är valda från t.ex. “Vi rekommenderar” eller liknande. 

Det går också att i detta block lägga till marginal upp- och nedtill samt lägga till en bakgrundsfärg i blocket. På detta sätt kan du skapa en tunn banner i färg. Om du väljer att även ha bakgrund under dina produkter blir detta ett snyggt avbrott i elementen på din sida. 

Inspireras

Skapa enkelt banners på din startsida högst upp under headern, välj en utstickande färg så att dina kunder inte missar din rabattkod!

 

Skärmdump

Ge rubriken bra med luft upp och nertill och använd den vänsterställd eller centrerad över kategorier eller produkter. Inspirera med dina rubriker.  

Skärmdump

Textstycke

Detta block är främst till för att skriva texter. Du kan i detta block välja bredd på texten vilket gör det optimalt för t.ex. blogginlägg där du vill ha en mer centrerad känsla och text som är enklare för en användare att läsa. 

Tips! Eftersom du med detta block använder vårt formateringsverktyg kan du även lägga in bild samt länkar i detta block. Läs mer under sidan formateringsverktyget.

Tips nr 2! Sätt en smalare bredd än vanligt, det blir enklare att läsa på större skärmar när texten är mer samlad på mitten. 


 

Bilder & video

Bilder som du lägger in via inställningar istället för formatteringsverktyget. Och videor som du länkar direkt från källan

Bilder med text ovanpå

Blocket finns i följande utföranden: 1 bild, 2 bilder, 3 bilder, 4 bilder, 2 kolumner kollektion

Dessa block ger dig möjlighet att lägga in bilder eller bakgrunder samt skriva text ovanpå dessa. Bilder och bakgrund ändras genom inställningar på pennan, texten redigerar du sedan genom formatering verktyget genom att klicka på den placeholder text som ligger i blocket.

I blocken har du möjlighet att för varje bild välja om du vill ha en platta bakom texten, detta kan vara bra om du t.ex. har en plottrig bild med olika färger och att både svart eller vit text får en dålig kontrast mot bakgrunden. Du kan här styra färg och opacitet på plattan bakom texten. Du har även möjlighet att ändra färg på texten till svart eller vit.

Du kan välja att lägga in knappar och länkar i texten på blocket samt att länka hela blocket genom inställningar på pennan. Kom ihåg att ta bort länken för hela bilden när du vill redigera texten i hela blocket.

Tips! Genom att använda text ovanpå bilden så möjliggör du att texten syns/bidrar till ranking i sökmotorer (vilket inte är möjligt om texten istället skulle vara en del av bilden) 💡

Kom ihåg! Till skillnad från när du lägger in bilder via formateringsverktyget i t.ex. blocket kolumner så kommer detta block att ändra hur bilden visas i olika bredd. Bilden kommer att fylla ut enl de inställningar du gör för höjden och sedan skala ner samt zooma in för att hela tiden anpassa sig till ytan i blocket. Det innebär att om du har något på vänstersidan av bilden som ska vara i fokus kommer detta inte synas mobilt. 

Inspireras 🧚‍♂️

Här används blocket 4 bilder med text ovanpå, textplattan ligger i fullbredd och är vit med 0.8 i opacitet. textpositionen är inställd på botten center. Ovanför blocket ligger block för rubrik. 

Skärmdump

Slider

Detta block använder du som vill ha en slider i din butik. Blocket ger dig möjlighet att lägga in flera bilder som dina kunder kan bläddra mellan. Det finns även möjlighet att lägga in unika bilder för mobila enheter, vilket innebär att du helt kan anpassa ditt innehåll beroende på enhet. I detta block kan du inte skriva någon text, denna begränsning har gjorts i syftet att samtliga användare för detta block skapar sina bilder med texterna i dem. Detta för att kunna anpassa innehållet så bra som möjligt för olika enheter. 

Tips! Det fungerar faktiskt på alla våra bildblock att lägga in .gif för rörligt material! Testa dig fram för se vilket bildblock som passar dina gifar bäst. I slider blocker har du möjlighet att som med bilder lägga in olika bilder med olika mått för mobilt och desktop. 

Inspireras

Hämta inspiration från vår kund Printworks som skapar olika mått för dina herobilder mobilt/desktop. Det innebär att användaren får herobild i fullhöjd mobilt vilket verkligen skapar en wow-känsla!

Video

Med videoblocket har du möjlighet att länka in filmer från både Youtube och Vimeo. Du kan välja bredd samt höjd i pixlar på blocket eller välja att ha blocket i fullbredd. Vill du så kan du även välja att skriva en text till höger eller vänster om filmen. 

Kom ihåg! Element till vänster hamnar överst i mobilen så vill du att filmen ska komma först i mobilt väljer du att lägga texten till höger i desktop. 


 

Sociala medier

Levande innehåll och marknadsföring, två flugor i en smäll!

Flöde för Facebook

Detta block hämtar ert flöde från facebook. På inställningar anger du en länkadress till det flöde du vill hämta. Du kan ställa in vilket flöde du vill hämta samt välja om du skulle vilja ha text till antingen höger eller vänster om facebookflödet.

Instagramflödet

För att visa Instagramflödet behövs sedan facebooks upptatering av API en extern partner. Du kan läsa mer om Snapwidget och andra partners under Appar & Integration


 

Formulär

Kontaktformulär

Detta block är skapat för att du på de sidor du önskar ska kunna göra det enkelt för dina kunder att ta kontakt. Kunden kan i blocket fylla i för- och efternamn, telefonnummer, e-post och ett meddelande. 

Du kan på inställningar för blocket välja om kunden också ska fylla i ett företagsnamn, hur många rader meddelandet max får vara, samt vad det ska stå för tackmeddelande när kunden har skickat ett meddelande. Du kan också ställa in ämnesraden för mailet som kommer till er med kundens meddelande. Meddelandet från kunden skickas som ett mail till den mail som är angiven i Administrationen under Allmän butiksinformation: /Admin/configuration/?gID=1 

Logga in 

Du kan vart som helst på sidorna för drag & släpp lägga in blocket för inloggning. Kunden kan här logga in på mitt konto och såklart även begära ett nytt lösenord. Om du vill anpassa inloggningssidan i din butik kan du dra in de block du önskar. Det innehåll som ligger på denna sida som standard kommer då att försvinna. 

Skapa eller ansök om konto

Blocket låter dina kunder registera sig eller ansöka om ett konto. Om du i Administrationen ställt in att kunder måste godkännas för att få ett konto skickas kunden till en tacksida. Om du låter vem som helst skapa konto och handla hos dig loggas istället kunden in direkt på mitt konto. 


 

Navigation mellan sidor

Ett sätt att presentera och länka till undersidor i butiken för att skapa t.ex. menyer och bloggar.

 

Meny med sidor

Detta block tillåter dig att söka upp sidor för att presentera dessa i en meny. Här kan du under sidor i Admin skapa en meny med sidor under för att sedan presentera denna i en horisontell meny. T.ex. så kan du skapa en meny för “Kundservice” denna kan sedan ha undersidor som “Kontakta oss”, “Köpvillkor” och “Vanliga frågor”. När du i blocket söker fram menyn Kundservice skrivs alla sidor därunder ut i menyn. 

Blogg/Artikel som kort

Detta block är speciellt anpassat för att skapa en blogg- eller inspirations-del. Blocket fungerar på liknande sätt som “meny med sidor”, även här skapar du en meny och lägger sidor under detta som då skrivs ut. Skillnaden är att detta block skriver ut sidorna som “kort” vilket innebär att en bild, rubrik och ingress visas i blocket. 

Kom igång med blogg här!


 

Kartor

Hitta till oss

Kartblocket tillåter dig att ange en adress för att dina kunder enkelt ska kunna lokalisera er. Detta block passar fint att använda på t.ex. kontakta oss eller om ni har en fysisk butik under “hitta butik”. Du kan i blocket även bestämma höjd, lägga in en parallax effekt och välja styling för kartan.