Innehållssliders är vanliga i WordPress nuförtiden, men de används vanligtvis bara i en mycket begränsad uppsättning omständigheter – vanligtvis finns de på hemsidor, för att visa de senaste inläggen eller bildgallerier. En ny trend utvecklas, där WordPress-webbplatser använder potentialen och flexibiliteten hos innehållssliders för att berätta fängslande historier som motiverar besökare att agera – det vill säga, i form av produktrundturer.
Att använda en innehållsskjutare för din WordPress-produktrundtur kan hjälpa dig att sälja produkter bättre genom att guida användare genom nyckelpunkterna i sin egen takt – detta är bättre än att bara använda en video, eftersom de kan hoppa bakåt/framåt till specifika, definierade punkter, istället för att behöva gissa en tidsstämpel. Dessutom utnyttjar användningen av en innehållsskjutare på detta sätt alla typer av webbmedia – vilket innebär att du kan inkludera interaktivt innehåll i bilderna, istället för att tvinga din användare att passivt titta på en video.
Fram till nyligen behövde du kunna koda för att skapa något annat än de mest enkla produktrundturerna med innehållsskjutreglage, men vi har använt ett fantastiskt skjutreglage-plugin som heter SlideDeck 2 som ändrar allt det där.
Detta kraftfulla plugin gör det superenkelt att skapa fantastiska sliders på några minuter, utan en enda kodrad krävs. Vi täckte en av SlideDeck 2:s andra robusta funktioner i ett tidigare inlägg, men deras senaste uppdatering gör det möjligt för dig att bygga anpassade innehållssiders och skräddarsy innehållet i varje slide för att skapa övertygande presentationer som motiverar dina besökare att agera. Vi har satt ihop den här snabbguiden för att visa dig hur du skapar en snygg produktvisning för din WordPress-webbplats med SlideDeck 2.
Köpa och installera plugin-programmet
Först och främst: Anpassade innehållsbilder är en premiumfunktion i SlideDeck 2, så du måste köpa den för att använda den på din webbplats. Vi rekommenderar att du går till SlideDeck-webbplatsen och köper plugin-programmet – 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 för anpassat innehåll måste du köpa antingen Professional- eller Developer-paketet, sedan installera pluginet plus ett 'tillägg' som låser upp de ytterligare funktionerna.
För att installera pluginet kan du följa vår praktiska Steg-för-steg-guide för att installera ett WordPress-plugin.
Terminologi
Innan vi börjar, finns det några termer vi bör förklara:
- Bildtyp – Det finns 4 olika typer av bilder, var och en utformad för att rymma en viss typ av innehåll: bild, video, text och HTML.
- Lins – Linser är som teman för din innehållsskjutare. De styr hur din skjutar ser ut och beter sig, samt hur innehållet presenteras på sidan. Precis som med WordPress-teman tar det bara några sekunder att applicera en annan lins på ditt innehåll, och det kan ge ett betydligt annorlunda utseende och känsla för din skjutar.
Okej, nu när jargongen är ur vägen, fortsätt och aktivera SlideDeck 2, så sätter vi igång!
Skapa en anpassad innehålls-SlideDeck
Vi ska visa dig hur du skapar en produktrundtur-innehållsskjutreglage som blandar fyra olika typer av innehåll, med hjälp av SlideDecks anpassade innehållsfunktion. Börja med att klicka på "Hantera" för att gå till huvudinstrumentpanelen. Den här skärmen låter dig skapa nya SlideDecks och sortera dina befintliga SlideDecks.
I sektionen Anpassat innehåll klickar du på den blå knappen “Skapa SlideDeck”. Du kommer att tas till skärmen Anpassad innehållsredigerare för att bygga din första bild. När du kommer till den anpassade innehållsredigeraren börjar du med att namnge din SlideDeck. Du kommer att märka att din första bild har skapats, och du har ett val mellan tre eller fyra olika bildtyper, beroende på vilket paket av SlideDeck 2 du använder – användare av professionella paket kommer att ha tillgång till bild-, video- och textbildtyper; användare av utvecklarpaket kommer att kunna välja HTML-bildtypen utöver dessa tre.
Under denna utfällbara meny finns en av SlideDeck 2:s mest unika funktioner – förhandsgranskningsfönstret i realtid (det är en av anledningarna till att SlideDeck 2 rekommenderas som WordPress-plugin i WPBeginners Blueprint). Här ser du ditt skjutreglage uppdateras i realtid medan du redigerar det.
Börja med en bildbild
Låt oss börja med en bildbild – något som ger våra besökare en snabb & visuellt engagerande överblick över den tur de är på väg att ta. Klicka på bildtypen ”Bildbild”. Utfällningsmenyn kommer att uppdateras för att visa dig alla alternativ som är relevanta för att skapa en bildbild:
Ladda upp en bild | Ange en URL – Välj om du vill ladda upp din bild till WordPress mediebibliotek, eller bara klistra in en URL om den finns lagrad någon annanstans.
Bildtext | Brödtext | Ingen – Tala om för SlideDeck om du vill ha en textbildtext som överlagrar bilden, eller ha lite kort brödtext som åtföljer den. Alternativt kan du bara visa hela bilden, utan någon associerad text.
Bildlänk – Ange en URL att besöka om användaren klickar någonstans på bilden.
Titel – Ge bilden en titel som ska visas i antingen bildtext- eller brödtextområdena.
Beskrivning – Ange beskrivningstexten för bilden. Du kan ange rik text här!
Bildtextens position – Bestämmer positionen för textöverlägget på bilden. Bildtexter kan placeras uppe/nere, och brödtext kan placeras till vänster/höger.
När du har ställt in din bild som du vill, trycker du helt enkelt på knappen “Verkställ”, och förhandsgranskningsområdet uppdateras för att visa dig din första bild. I vårt exempel har vi byggt vår bild genom att ange en URL, med en bildtext längst ner och ingen bildlänk.
Så det var vår första anpassade innehållsbild skapad – enkelt, eller hur? Nu lägger vi till en andra för att lägga till en video som visar vår produktdemo.
Skapa videosliden
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 ladda upp vår produkts demo-video till en av dessa tjänster och sedan klistra in URL:en till videons sida & klicka på "Uppdatera".
Precis som med bildbildtypen kan du välja att lägga till en titel och en kort bildtext eller text för att ge dina besökare en uppfattning om vad de kommer att se i videon. Som standard hämtar SlideDeck 2 in bildtextinnehållet som du har på din YouTube/Vimeo/Dailymotion-sida, men du kan anpassa det för att passa dina behov för produktturen.
Som tidigare, tryck på Apply och ta en snabb titt genom slidern – du kommer nu att kunna gå fram och tillbaka mellan dina bild- och videoslider.
Skapa en textbild
Ibland behöver du bara utrymme för lite text – för att visa en lista över funktioner, till exempel, eller för att dela ett citat från en lysande recension av produkten. I sådana fall kan vi använda textslidtypen.
Detta är en mycket enkel bildtyp, med bara några få alternativ att överväga:
Layout – Den grundläggande layouten placerar helt enkelt titeln högst upp på bilden, med texten flödande under. Flera kolumner ger mer av ett tidningsliknande format genom att automatiskt bryta texten i två kolumner. Block Citat låter dig markera ett kort utdrag av text med stor, fet typografi. Som tidigare, tryck på Apply för att lägga till bilden i din SlideDeck.
Omorganisera bilder
Vid det här laget kanske du tänker att du vill börja med din videoslide istället för bilden, så att du kan få dina användare att interagera och engagera sig i rundturen direkt. SlideDeck låter dig göra detta omedelbart – i sidhuvudet, klicka och dra videosliden och släpp den i det lysande utrymmet till vänster om bildsliden. Superenkelt!
Vidareutveckling – användning av HTML-bildtypen
HTML-bildtypen är ett kraftfullt tillägg till utvecklarpaketet för SlideDeck 2, som låter dig ange din egen HTML-kod i en bild. Det är perfekt för mer komplexa layouter av ditt innehåll, eller för att lägga till kraftfullare interaktioner i ditt innehållsskjutreglage. Du kan till exempel bädda in ett registreringsformulär, så att kunder kan välja att få ett e-postnyhetsbrev i slutet av produktrundturen – en kraftfull uppmaning till handling, om någon!
Välj HTML-bildtypen för att visa HTML-redigeraren i flyout-menyn.
I fältet Infoga HTML kan du klistra in din anpassade kod. Du kommer att märka att den automatiskt färglägger de olika taggarna för att hjälpa dig att säkerställa att den är korrekt strukturerad. Ett par viktiga punkter att notera:
- Du kan inkludera CSS-stilar för bildinnehållet mellan <style></style>-taggar, och de kommer att gälla för alla bilder i SlideDeck.
- Eftersom SlideDecks Live Preview inte kan förutsäga hur din temas stilar kan interagera med din innehållsskjutare, får du för komplex styling en mer exakt förhandsgranskning om du visar den på sidan där du tänker publicera din SlideDeck.
Med koden på plats, tryck på Apply, och bilden läggs till i rotationen.
Konfigurera linsen
Du har nu skapat din första anpassade innehålls-SlideDeck! Fortsätt och ta några minuter att klicka igenom bilderna i förhandsgranskningen och njut av känslan av ett väl utfört arbete.
Nu är det dags att få det att se sömlöst ut med din webbplats genom att konfigurera din Lens. SlideDeck innehåller en enorm mängd alternativ för att styra utseendet på din nya produktrundtur genom att anpassa Lens.
Spara & publicera din SlideDeck
Fantastiskt innehåll? Klart. Snyggt tema valt och anpassat? Klart. Det verkar som att du är helt redo att publicera din nya produktrundtur och konvertera dina besökare till kunder!
SlideDeck erbjuder tre sätt att bädda in dina sliders i din WordPress-webbplats – genom att infoga den i innehållet på en befintlig sida eller inlägg, skapa en ny sida eller ett nytt inlägg med den inbäddade slidern, och slutligen infoga den i din sidmall, vilket troligen är ditt bästa alternativ om du vill lägga till produktvisningen på din startsida.
Avslutning
Även om innehållssiders vanligtvis bara används för bildgallerier eller utvalda inlägg, ger SlideDeck 2 dig massor av flexibilitet att utforska potentialen hos innehållssiders för att skapa övertygande upplevelser som håller dina besökare engagerade och återkommande. Vi på WPBeginner rekommenderar starkt att du kollar in det! Ett liveexempel på hur vi använder en anpassad SlideDeck kan ses på vår Gratis WordPress-blogginstallationssida.
Har du ett exempel på SlideDeck som du vill dela? Låt oss veta i kommentarerna! Kolla också in del ett av den här serien, där vi visar dig hur du skapar dynamiska käll-SlideDecks.
Pekstyrda reglage ä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.