Hur man enkelt skapar en responsiv slider i WordPress

Har du någonsin landat på en webbplats och blivit imponerad av ett vackert, glidande galleri på startsidan? Det är ett utmärkt sätt att visa upp ditt bästa innehåll, men att få det att se bra ut på alla enheter kan vara en riktig huvudvärk.

Vi vet hur frustrerande det är när en slider ser perfekt ut på din dator men är klumpig eller trasig på en smartphone. En dålig mobilupplevelse kan lätt driva bort besökare.

Efter att ha testat dussintals verktyg på våra egna webbplatser har vi hittat de enklaste sätten att skapa sliders som fungerar felfritt överallt. Du behöver inga kodningskunskaper för att bygga en som kommer att fånga dina besökares uppmärksamhet.

I den här artikeln visar vi dig några enkla metoder för att lägga till en responsiv slider på din WordPress-webbplats.

Varför lägga till ett responsivt WordPress-bildspel på din webbplats?

En innehållsserver eller bildspel är ett utmärkt sätt att lyfta fram dina mest populära WooCommerce-produkter, de senaste YouTube-videorna, kundrecensioner och mer.

Vissa sliders är självgående, vilket innebär att de flyttar sig mellan bilder automatiskt. Detta gör att du kan visa mycket information på en liten yta, vilket lämnar gott om utrymme för annat innehåll.

Kom bara ihåg att nyckeln till ett bra bildspel är att använda högkvalitativa men väloptimerade bilder. Detta kommer att hålla ditt bildspel skarpt utan att sakta ner din webbplats. 👍

Av denna anledning använder många webbplatser reglage på sina viktigaste sidor, som en landningssida, startsida eller försäljningssida.

Även om en slider är inställd på att spela automatiskt, kan besökare vanligtvis flytta mellan bilder manuellt med hjälp av navigeringsknappar. På så sätt uppmuntrar en slider besökare att interagera med din webbplats, vilket gör den mer engagerande.

Du kan se i GIF:en nedan hur dynamisk en videoslider kan göra en sida.

Med det sagt, låt oss se hur du enkelt kan skapa ett responsivt bildspel i WordPress. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda.

• Metod 1. Skapa en responsiv WordPress-slider med ett plugin (snabbt och enkelt)
• Metod 2. Skapa ett responsivt bildspel med en sidbyggare (mer anpassningsbart)
• Metod 3. Skapa en slider med Smash Balloon (bäst för sociala inlägg och recensioner)
• Vanliga frågor om responsiva reglage
• Ytterligare resurser

Metod 1. Skapa en responsiv WordPress-slider med ett plugin (snabbt och enkelt)

Om du vill skapa en enkel slider som ser bra ut på både dator och mobil, rekommenderar vi att du använder pluginet Soliloquy.

Detta WordPress-bildspelplugin låter dig skapa bildspel med bilder från ditt mediebibliotek och kan även visa videor som finns på tredjepartsplattformar som YouTube.

Du kan också lägga till alt-text och bildtexter till varje bild, vilket är utmärkt för att skapa SEO-vänligt innehåll.

Först måste du registrera dig för ett Soliloquy-konto. Därefter kan du installera och aktivera Soliloquy-pluginet på din webbplats. För mer information, följ vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till Soliloquy » Inställningar i WordPress instrumentpanel och ange din licensnyckel.

Nyckeln kan hittas genom att logga in på ditt konto på Soliloquy-webbplatsen. Efter att ha angett denna information, klicka på knappen 'Verify Key'.

När det är klart kan du lägga till ett nytt bildspel till din WordPress-webbplats genom att gå till Soliloquy » Lägg till nytt.

Du kan börja med att skriva in en titel. Detta är bara för din referens, så du kan använda vad som helst som hjälper dig att identifiera slidaren i din WordPress-instrumentpanel.

Därefter är det dags att lägga till bilder och videor i bildspelet. Du kan antingen dra och släppa filer i redigeraren eller klicka på 'Välj filer från andra källor'.

Om du vill använda bilder kan du lägga till dessa filer på samma sätt som du lägger till bilder i WordPress blockredigerare.

Om du vill inkludera videor, rekommenderar vi att du laddar upp dem till en videohostingplats som YouTube eller Vimeo. Att ladda upp videor direkt till din webbplats är ingen bra idé, eftersom det kan sakta ner din webbplats och ta upp mycket lagringsutrymme.

Samtidigt är plattformar som YouTube optimerade för video, så du kan visa videor med hög upplösning i dina bildspel utan att negativt påverka din webbplats.

Efter att ha valt en videohostingplattform måste du ladda upp alla videor du vill inkludera i WordPress-slidern. Om du är osäker på hur du laddar upp videor, rekommenderar vi att du läser den officiella dokumentationen eller användarhandboken för din valda videoplattform.

När det är klart, klicka helt enkelt på knappen 'Välj filer från andra källor' och välj sedan 'Infoga videoslide'.

Du kan nu klistra in videons URL i fältet 'Video URL'.

Soliloquy visar alla stödda länkformat längs höger sida, så se till att din länk använder ett av dessa format.

När det är gjort kan du skriva en titel i fältet 'Titel'. Detta är bara för din referens, så du kan använda vad du vill. Du kan också lägga till alt-text, vilket hjälper sökmotorer att förstå vad den här bilden handlar om.

Därefter kan du skriva in en valfri bildtext i fältet 'Bildtext'. Denna kommer att visas i en grå stapel längst ner på videon innan besökaren trycker på 'Spela'.

Om du inte vill visa den här stapeln, lämna helt enkelt fältet ‘Bildtext’ tomt.

När du är nöjd med informationen du har angett kan du skapa fler bilder genom att klicka på 'Lägg till en video till'.

För att konfigurera detta nya diabild, följ helt enkelt samma process som beskrivs ovan.

När du har skapat alla dina bilder, klicka på 'Infoga i bildspel'.

Du kommer nu att se alla dina bilder i avsnittet 'För närvarande i din slider'.

Därefter kan du klicka på fliken 'Konfiguration' och använda sliderinställningarna för att anpassa den. Du kan till exempel välja ett nytt slider-tema, ändra bildstorlek och ändra positionen för slidern och bildtexterna.

Du kan också anpassa bildspelets pilar och paus/spela-knappen, justera övergångshastigheten, ändra fördröjningstiden och mer.

Därefter vill du se till att din slider ser lika bra ut på mobila enheter som den gör på datorer och bärbara datorer.

Med det sagt, klicka på fliken 'Mobil' och markera rutan bredvid 'Skapa mobilsliderbilder'.

Du kan sedan skriva in de storlekar du vill använda för bilder och videor på mobila enheter. När du fattar dessa beslut kan det vara bra att visa mobilversionen av din WordPress-webbplats på en stationär dator.

Som standard döljer Soliloquy bildtexter för mobilanvändare. Ofta hjälper detta bilderna att passa bekvämare på de mindre skärmarna som vanligtvis används av smartphones och surfplattor.

Av den anledningen rekommenderar vi att du lämnar den här inställningen inaktiverad, men du kan markera rutan bredvid 'Visa bildtexter på mobilen' om du föredrar det.

När det är gjort, klicka på fliken 'Misc'. Här kan du lägga till anpassad CSS till din slider, redigera sliderns titel och slug, och exportera slidern.

När du är nöjd med bildspelets konfiguration klickar du på knappen 'Publicera'.

Soliloquy skapar automatiskt en kortkod som du kan lägga till på vilken sida, inlägg eller widget-redo område som helst.

För mer information om hur du placerar kortkoden, se vår guide om hur man lägger till en kortkod i WordPress.

För avancerade användare tillhandahåller Soliloquy även kodavsnitt som kan läggas till direkt i dina WordPress-temafiler. Denna metod erbjuder mer exakt kontroll men rekommenderas endast om du är bekväm med att redigera kod. För de flesta användare är det enklaste och säkraste sättet att hålla sig till blocket eller kortkoden!

För steg-för-steg-instruktioner, se vår guide om hur man enkelt lägger till anpassad kod i WordPress.

Det enklaste sättet att lägga till slidern på din webbplats är att använda Soliloquy-blocket i Gutenberg-redigeraren. Gå helt enkelt till sidan eller inlägget där du vill visa slidern och klicka sedan på '+' -knappen.

I popup-fönstret som visas, skriv in 'Soliloquy'.

När rätt block visas, klicka för att lägga till det på din WordPress-blogg eller webbplats.

Öppna sedan Soliloquy-blocket och välj den slider du precis skapade.

Du kan nu klicka på knappen 'Uppdatera' eller 'Publicera' för att göra bildspelet live.

Metod 2. Skapa ett responsivt bildspel med en sidbyggare (mer anpassningsbart)

Om du vill skapa ett enkelt video- eller bildspel är en plugin som Soliloquy ett utmärkt val. Men om du vill integrera ett bildspel sömlöst i en helt anpassad siddesign, som en landningssida eller startsida, rekommenderar vi att du använder en sidbyggarplugin istället.

SeedProd är den bästa dra-och-släpp WordPress sidbyggaren. Den låter dig designa anpassade landningssidor och till och med skapa ett anpassat WordPress-tema utan att behöva skriva en enda rad kod.

Den har också ett Image Carousel-block som du kan använda för att skapa fantastiska sliders.

Du kan helt enkelt släppa detta färdiga block var som helst på en sida och sedan anpassa det med hjälp av den kraftfulla dra-och-släpp-redigeraren.

Först måste du installera och aktivera pluginet SeedProd. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter att ha aktiverat pluginet kommer SeedProd att be om din licensnyckel.

Du hittar den här licensnyckeln under ditt konto på SeedProd-webbplatsen. Efter att ha angett informationen klickar du på knappen 'Verifiera nyckel'.

När det är gjort, gå till Seed પ્રોડ » Landningssidor i din WordPress-instrumentpanel.

1. Välj en sidmall

SeedProd levereras med över 180 professionellt utformade mallar som är grupperade i kategorier. Längst upp ser du kategorier som låter dig skapa vackra kommande sidor, aktivera underhållsläge, skapa en anpassad inloggningssida för WordPress och mer.

Alla SeedProds mallar är lätta att anpassa, så du kan använda vilken design du vill. När du hittar en mall du gillar, hovra bara med musen över den och klicka på bockikonen.

Du kan nu skriva ett namn för din landningssida i fältet 'Sidnamn'. SeedProd kommer automatiskt att skapa en 'Sid-URL' baserat på sidnamnet.

Det är smart att inkludera relevanta nyckelord i denna URL där det är möjligt, eftersom detta hjälper sökmotorer att förstå vad sidan handlar om. Detta kan ofta förbättra din WordPress SEO.

För att ändra sidans automatiskt genererade URL, skriv helt enkelt in text i fältet 'Sid-URL'.

När du är nöjd med informationen du har angett, klicka på ‘Spara och börja redigera sidan.’ Detta laddar Seed પ્રોડ sidbyggargränssnitt.

2. Anpassa din sidlayout

SeedProds dra-och-släpp-byggare visar en liveförhandsgranskning av din sidadesign till höger. Till vänster finns en meny med alla olika block och sektioner du kan lägga till på sidan.

När du hittar ett block du vill lägga till, dra och släpp det helt enkelt på din mall.

För att anpassa ett block, klicka bara för att välja det blocket i Seed પ્રોડ-redigeraren. Menyn till vänster uppdateras nu för att visa alla inställningar du kan använda för att anpassa det.

När du bygger sidan kan du flytta runt block i din layout genom att dra och släppa dem. För mer detaljerade instruktioner, se vår guide om hur man skapar en landningssida med WordPress.

3. Lägg till och designa ditt responsiva bildspel

För att skapa en responsiv slider med SeedProd, leta helt enkelt upp blocket Bildkarusell i menyn till vänster och dra det sedan till din layout.

Klicka sedan för att välja blocket Bildkarusell i sidredigeraren.

Du kan nu fortsätta och lägga till alla bilder du vill visa i slidern. För att börja, klicka på 'Bild 1'-objektet som SeedProd skapar som standard.

Du kan nu antingen använda ett foto från Seed પ્રોડ's inbyggda bibliotek eller klicka på ‘Använd din egen bild’ och välja en fil från WordPress mediebibliotek.

Efter att ha valt en bild kan du lägga till en bildtext som visas under bilden. SeedProd visar inte bildtexter som standard, men vi visar dig hur du aktiverar dem senare i det här inlägget.

När du är nöjd med hur bilden är konfigurerad, klicka på knappen 'Lägg till bilder' för att skapa en annan bild.

För att lägga till fler bilder, följ bara samma process som beskrivs ovan.

Efter att ha lagt till alla bilder i din slider är det dags att anpassa hur din slider ser ut och beter sig.

I menyn till vänster, klicka för att expandera avsnittet 'Karusellinställningar'.

För att börja kan du växla mellan ljusa och mörka lägen för bildspelets navigeringsknappar.

För att prova dessa olika lägen, klicka på knapparna bredvid 'Navigationsfärgläge'. Förhandsgranskningen uppdateras automatiskt så att du kan se vilket läge du gillar bäst.

Som standard visar karusellen en enda bild, och besökare kommer att behöva använda navigeringskontrollerna för att se mer innehåll.

Du kanske dock vill visa flera bilder samtidigt genom att öppna rullgardinsmenyn 'Slide to Show' och välja ett nummer från listan. Detta kan vara användbart om slidern har mycket innehåll och du är orolig för att besökare kanske inte klickar igenom alla bilder.

Som standard måste besökare klicka för att se nästa bild. Med det i åtanke kan du vilja aktivera autospelning, eftersom detta ofta ökar antalet bilder en besökare ser.

För att göra detta, klicka för att aktivera omkopplaren ‘Autoplay’ och ange sedan hur länge varje bild ska visas på skärmen genom att skriva ett nummer i ‘Autoplay Speed’.

Om du har lagt till bildtexter till dina bilder, se då till att du klickar på ‘Visa bildtext’-reglaget för att ändra det från ‘Nej’ till ‘Ja.’

Du kan också ändra justeringen av bildtexten.

Beroende på bakgrundsfärgen kan du behöva ändra textfärgen innan de är synliga för besökare.

För att göra detta, klicka på fliken ‘Avancerat’ och använd sedan inställningarna för ‘Bildtextfärg’.

Du kan ytterligare styla texten genom att klicka på knappen 'Redigera' bredvid 'Bildtexttypografi'.

Detta lägger till några inställningar där du kan ändra teckenstorlek, radhöjd, avstånd och mer.

När du är nöjd med hur bildtexterna ser ut kan du lägga till olika skuggor till bilderna med rullgardinsmenyn ‘Slider Image Styles’.

Dessa skuggor kan verkligen få bilderna att sticka ut, så det är värt att prova olika skuggor för att se om de passar din siddesign.

I fliken ‘Avancerat’ hittar du även inställningar som låter dig lägga till en ram, ändra avståndet och till och med skapa en ingångsanimation.

Utforska gärna dessa avancerade inställningar för att se alla olika effekter du kan skapa. Du kan till exempel lägga till en ram för att få din slider att sticka ut eller använda animationer för att fånga besökarens öga! ✨

4. Publicera din landningssida

När du är nöjd med hur slidern ser ut kan du fortsätta att arbeta med resten av sidan. Dra helt enkelt block till din design och anpassa dem sedan med hjälp av inställningarna i den vänstra menyn.

Om du vill ta bort ett block, hovra bara över det och klicka sedan på papperskorgsikonen när den visas.

När du blir ombedd, klicka på 'Ja, ta bort det'.

När du är nöjd med sidans utseende, klicka på knappen 'Spara' för att göra den live. Slutligen, välj 'Publicera' för att göra din slider live.

Metod 3. Skapa en slider med Smash Balloon (bäst för sociala inlägg och recensioner)

Vi är mer benägna att prova saker som vi ser andra köpa, använda eller rekommendera. Det är därför det är en bra idé att visa social proof på din webbplats, inklusive kundrecensioner, vittnesmål eller till och med positiva kommentarer på sociala medier.

Det enklaste sättet att visa sociala bevis på din webbplats är genom att använda Smash Balloon. Smash Balloon har plugins som låter dig bädda in innehåll från Instagram, Facebook, Twitter och YouTube.

Den har också ett Reviews Feed-plugin som du kan använda för att visa recensioner från Facebook, Tripadvisor, Yelp, Trustpilot, WordPress.org och Google.

Att visa många positiva kommentarer och recensioner på din webbutik eller webbplats kan dock ta upp mycket utrymme.

Därför kommer Smash Balloon med inbyggda karusell-layouter och mallar som du kan använda för att skapa responsiva bildspel. Detta gör att du kan skapa bildspel med sociala medier och recensioner med bara några få klick.

Ännu bättre, Smash Balloon hämtar nytt innehåll automatiskt så att slidern alltid visar de senaste inläggen.

Ett annat alternativ är att visa innehåll från dina egna sociala medier-konton.

Om besökare gillar det de ser, kanske de bestämmer sig för att följa dig på sociala medier.

För att hjälpa dig att få fler följare, levereras Smash Balloon med färdiga knappar för uppmaning till handling som du kan lägga till i dina bildspel.

För detaljerade steg-för-steg-instruktioner, se våra guider om hur man lägger till sociala medieflöden till WordPress, och hur man visar Google-, Facebook- och Yelp-recensioner i WordPress.

Vanliga frågor om responsiva reglage

Vårt team får många frågor om att använda bildspel i WordPress. Nedan finns svar på några av de vanligaste frågorna vi hör från våra läsare.

Vad är en responsiv WordPress-bildspel?

En responsiv slider är en bildspelkomponent som automatiskt justerar sin storlek och layout för att passa alla skärmar. Detta säkerställer att den ser bra ut och är lätt att använda på stationära datorer, surfplattor och smartphones.

Är sliders dåliga för SEO?

Även om dåligt kodade sliders kan sakta ner din webbplats och skada SEO, är moderna plugins byggda med prestanda i åtanke. Till exempel använder en plugin som Soliloquy lazy loading och korrekt HTML-struktur för att vara SEO-vänlig.

Det är också viktigt att lägga till beskrivande alt-text till dina bildbilder. Detta hjälper sökmotorer att förstå ditt innehåll.

Saknar bildspel ner din webbplats?

Bildreglage kan påverka sidinläsningstider om de innehåller stora, ooptimerade bildfiler. De bästa WordPress-reglagepluginsen är dock lätta och optimerade för hastighet.

För att säkerställa att din slider inte saktar ner din webbplats, rekommenderar vi att komprimera dina bilder innan du laddar upp dem till WordPress. Detta minskar deras filstorlek utan att offra kvalitet.

Vilket är det bästa responsiva slider-pluginet för WordPress?

Det bästa pluginet beror på dina specifika behov. Vi rekommenderar Soliloquy som det bästa övergripande valet för dess användarvänlighet och snabba prestanda.

Om du vill bygga anpassade sidlayouter, erbjuder SeedProds bildkarusellblock mer designflexibilitet. För att visa sociala medieflöden eller kundrecensioner i ett bildspel är Smash Balloon det perfekta verktyget.

Ytterligare resurser

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt skapar ett responsivt reglage i WordPress. Du kanske också vill kolla in dessa andra guider på vår webbplats:

• Hur man skapar en video- och bildslider i WordPress (det enkla sättet)
• Bästa PDF-plugins för WordPress (visare, inbäddning och nedladdningar)

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.