Content sliders är vanliga i WordPress nuförtiden, men de används vanligtvis bara i en mycket begränsad uppsättning omständigheter – vanligtvis är de placerade på hemsidor, för att visa upp senaste inlägg eller images galleries. En new trend håller på att utvecklas, där WordPress-webbplatser använder potentialen och flexibiliteten hos content sliders för att berätta övertygande stories som motiverar besökare att vidta action – det vill säga i form av produktturer.
Using a content slider for your WordPress product tour can help you sell products better by guiding users through the key points at their own pace – this is better than simply using a video, because they can skip backwards/forwards to specific, defined points, instead of having to guess at a timecode. Genom att använda en slider på det här sättet kan du dessutom dra nytta av all slags webbmedia – vilket innebär att du kan inkludera interaktivt innehåll i slides istället för att tvinga din användare att passivt titta på ett videoklipp.
Fram till senaste tiden behövde du veta hur man kodar för att skapa något annat än de mest enkla content slider produktturerna, men vi har använt ett fantastiskt slider tillägg som heter SlideDeck 2 som ändrar allt detta.
Detta kraftfulla plugin gör det superenkelt att skapa fantastiska sliders på några minuter, utan en enda rad kod obligatorisk. Vi täckte en av SlideDeck 2:s andra robusta funktioner i ett föregående inlägg, men deras senaste uppdatering aktiverar dig att bygga sliders med utvalt innehåll och skräddarsy innehållet i varje slide för att skapa övertygande presentationer som motiverar dina besökare att vidta action. Vi har satt ihop den här snabba guiden för att visa hur du gör en snygg produktturné för din WordPress-webbplats med SlideDeck 2.
Köpa och installera pluginet
Det viktigaste först: Customize Content slides är en premium funktion i SlideDeck 2 så du måste köpa det för att använda det på din site. Vi rekommenderar att du går till SlideDecks website och köper pluginet – för den kraft det innehåller är det ganska billigt och du kan enkelt uppgradera för att få bättre funktioner och använda det på fler webbplatser.
För att låsa upp funktionen Custom Content måste du köpa antingen Professional- eller Developer-paketet och sedan installera pluginet plus ett ”Addon” som låser upp de ytterligare funktionerna.
För att installera pluginet kan du följa vår praktiska Step-by-Step Guide till att installera ett WordPress-tillägg.
Terminologi
Innan vi börjar finns det några termer som vi bör förklara:
- Slide Type – Det finns 4 olika typer av slides, var och en utformad för att passa en viss typ av content: image, videoklipp, text och HTML.
- Lins – Linser gillar teman för din slider för content. They control how your slider looks and behaves, as well as how the content is presented on the page. Precis som med WordPress themes tar det bara några sekunder att Tillämpa en annan Lens på ditt content, och det kan ge ett helt annat utseende och känsla för din slider.
Ok, nu när jargongen är ur vägen, gå vidare och aktivera SlideDeck 2, och låt oss komma igång!
Skapa ett SlideDeck med customize content
Vi ska visa dig hur du skapar en produktturné innehåll slider som blandar ihop fyra olika typer av innehåll, med hjälp av SlideDecks utvalda funktion Custom Content. Börja med att clicka på ”Hantera” för att komma till huvudpanelen. På den här vyn kan du skapa new SlideDecks och sortera efter dina befintliga SlideDecks.
I sektionen Customize Content klickar du på den blå knappen ”Create SlideDeck”. Du kommer till vyn Custom Content Editor där du kan skapa din första slide. När du har landat på Custom Content Editor, börja med att namnge din SlideDeck. You’ll notice that your first slide has been created, and you have a choice between three or four different Slide Types, depending on which package of SlideDeck 2 you’re using – Professional package users will have access to Image, Video and Text Slide Types; Developer package users will be able to choose the HTML Slide Type in addition to those three.
Under denna flyout-meny finns en av SlideDeck 2:s mest unika funktioner – fönstret för live preview (det är en av anledningarna till att SlideDeck 2 är ett rekommenderat WordPress plugin i WPBeginner’s Blueprint). Här ser du din slider update i realtid när du editerar den.
Börja med en Image slide
Låt oss börja med en image slide – något som ger våra visitor en snabb och visuellt engagerande översikt över den tur de är på väg att ta. Klicka på slidetypen ”Image Slide”. Flyout-menyn uppdateras och visar dig alla alternativ som är relevanta för att skapa en image slide:
Upload an image | Specify a URL – Välj om du vill uploada din image till WordPress Media Gallery, eller helt enkelt klistra in en URL, om den är hosted någon annanstans.
Caption | Body Text | None – Berätta för SlideDeck om du vill ha en text som överläggs bilden, eller om du vill ha en kort brödtext till bilden. Alternativt kan du helt enkelt visa hela imagen utan tillhörande text.
Slide Link – Ange en URL som ska besökas om användaren klickar någonstans på bilden.
Rubrik – Ge slidesen en rubrik som visas i antingen caption- eller brödtext-area.
Description – Enter beskrivningen för slidesen. You can enter rich-text here!
Caption Position – Bestämmer positionen för överlägget på bilden. Captions kan placeras högst upp/ner och brödtexten kan placeras till vänster/höger.
När du har ställt in din bild som du gillar trycker du bara på knappen ”Tillämpa” så uppdateras Live Preview area för att visa din första bild. I vårt exempel har vi byggt upp vår slide genom att ange en URL, med en caption längst ner och ingen link till sliden.
Så det är vår första Customize Content-slide som skapats – enkelt eller hur? Nu ska vi lägga till en andra för att add to ett videoklipp som visar vår produktdemo.
Skapa bilden med videoklippet
SlideDeck 2 stöder videoinnehåll från tre källor – YouTube, Vimeo och Dailymotion – vilket innebär att allt vi behöver göra är att uploada vår produkts demovideo till en av dessa tjänster och sedan klistra in URL:en till videons page och trycka på ”Update”.
Som med Imagely Slide Type kan du välja att add to en titel och en kort caption eller ett stycke text för att ge dina besökare en uppfattning om vad de kommer att se i videoklippet. Som standard kommer SlideDeck 2 att hämta in det caption content som du har på din YouTube/Vimeo/Dailymotion page, men du kan justera det så att det passar dina behov för produktturnén.
Som tidigare, tryck på Tillämpa och ta ett snabbt click genom slidern – du kommer nu att kunna gå fram och tillbaka mellan dina images och videoklipp.
Skapa en slides med text
Ibland behöver du bara utrymme för lite text – till exempel för att visa en lista med funktioner eller för att dela ett citat från en lysande review av produkten. I fall som gillar detta kan vi använda typen Text Slide.
Det här är en mycket enkel slides-typ med bara några få alternativ att ta hänsyn till:
Layout – Den grundläggande layouten placerar helt enkelt rubriken högst upp på sliden, med texten flödad in under. Multi-column ger mer av ett tidningsliknande format genom att automatiskt radbyta texten till två kolumner. Block Quote allow you to highlight a short snippet of text with large, bold typography. Precis som tidigare trycker du på Tillämpa för att add to sliden till din SlideDeck.
Omorganisera slides
Vid det här laget kanske du tänker att du gillar att lead med din videoklipp istället för image, så att du kan få dina användare att interagera och engagera sig i turen direkt. SlideDeck låter dig göra detta omedelbar – i slide header area, click and drag the video slide, and drop it into the glowing space to the left of the image slide. Superenkelt!
Ta det vidare – med HTML Slide Type
HTML Slide Type är ett kraftfullt tillägg till paketet Developer i SlideDeck 2, som låter dig enter din egen HTML-kod i en slide. Den är perfekt för mer komplexa layouts av ditt content, eller för att lägga till mer kraftfulla interaktioner i din slider. Du kan t.ex. embedda en signup form, så att customers kan tacka ja till att få ett nyhetsbrev via email i slutet av produktturnén – en kraftfull call-to-action, om det någonsin funnits en!
Välj HTML Slide Type för att visa HTML editor i flyout-menyn.
I fältet Infoga HTML kan du klistra in din customize-kod. You’ll notice that it automatically color-codes the different tags to help you make sure that it’s structured correctly. Ett par viktiga punkter att obs/observera:
- Du kan inkludera CSS-stilregler för slidesens content mellan <style></style>-taggar, och de kommer att tillämpas på alla slides i SlideDeck
- Eftersom SlideDecks Live Preview inte kan förutsäga hur ditt temas stilar kan interagera med din slider för content, för komplex styling får du en mer exakt preview om du viewar den på den page du tänker publicera din SlideDeck på.
När koden är på plats trycker du på Tillämpa så läggs sliden till i rotationen.
Konfigurera linsen
Du har nu skapat din första Customize Content SlideDeck! Ta några minuter på dig att clicka igenom slidesen i Live Preview och njut av ett väl utfört arbete.
Nu är det dags att få det att se sömlöst ut med din site genom att konfigurera din lins. SlideDeck innehåller en enorm mängd alternativ för att kontrollera utseendet på din nya produktturné genom att customize linsen.
Save & Publicera din SlideDeck
Fantastiskt content? Kontrollerat. Snyggt theme valt och customize? Check. Låter som om du är all redo att få din nya produktturné publicerad och konvertera dina besökare till customers!
SlideDeck erbjuder tre sätt att bädda in dina sliders på din WordPress-webbplats – infoga den i en befintlig sidas eller posts content, skapa en ny page eller post med slidern inbäddad, och slutligen infoga den i din sidmall, vilket troligen är det bästa alternativet om du vill lägga till produktturnén på din homepage.
Omsluta
Även om content sliders vanligtvis bara används för gallerier med images eller utvalda inlägg, ger SlideDeck 2 dig massor av flexibilitet för att utforska potentialen hos content sliders för att skapa övertygande upplevelser som håller dina besökare engagerade och återkommande. Vi på WPBeginner rekommenderar starkt att du kontrollerar det! Ett live-exempel på hur vi använder en customize SlideDeck kan ses på vår gratis WordPress Blog Setup page.
Har du ett exempel på SlideDeck som du vill dela med dig av? Låt oss veta om det i kommentarerna! Kontrollera också del ett i den här serien, där vi visar dig hur du skapar SlideDecks med dynamisk källa.
Touch-interface sliders är framtiden för webbdesign. Skaffa SlideDeck nu. Använd kupongkoden: WPB-SD2 för att få 20% rabatt.
Har du en fråga eller ett förslag? Lämna gärna en kommentar för att starta diskussionen.