Med WordPress är det enkelt att skapa en webbplats. Att skapa en fängslande, iögonfallande webbplats är en annan vattenkokare av fisk, och bara text gör det inte när det inte finns någon brist på vackert designade grafiska element att välja mellan. I den här handledningen kommer vi att visa dig en av dem: bildreglaget.
Det är enkelt att skapa en bildreglage i WordPress, och vi kommer att visa dig hur du gör det med bara en av de 60 vackra och funktionella widgets som kommer med vår alldeles egna Qi Addons för Elementor-plugin. Men innan vi visar dig hur du skapar en fängslande bildreglage vill vi ta lite tid att diskutera själva reglagen och några användningsfall du kanske vill överväga. Här är vad vi kommer att prata om.
Inom webbdesign är en bildskjutare ett bildspel med bilder som används på en webbsida. De består av flera bilder som flyttar positioner i en övergångsanimation antingen automatiskt eller som ett svar på användaråtgärder som ett klick, en rullning eller, på mobila enheter, ett svep. Oavsett om de är automatiska eller användarutlösta, tenderar de att väcka uppmärksamhet.
Förutom det rent estetiska kan en reglage också utföra navigeringsfunktioner och förmedla viktig information till besökare.
En bildreglage används vanligtvis som en del av en portföljwebbplats eller en företagswebbplats, men det finns ingen verklig gräns för när ett reglage kan användas.
En väldesignad bildreglage innehåller vanligtvis det mesta viktig information en webbplats vill förmedla till en användare paketerad i attraktiv grafik. För en företagswebbplats kan det vara det en uppdragsbeskrivning, till exempel. För en bokhandel eller en webbplats för filmrecension kan det vara det en uppvisning av nya releaser. Och vilken butik som helst kan använda den till annonsera ett helt nytt tidsbegränsat erbjudande eller liknande affär.
Alternativt kan du ta ett minimalistiskt tillvägagångssätt: helt enkelt förse din webbplats med vackra foton eller grafik för dina besökare att njuta av – en lösning som kanske passar bäst för fotowebbplatser, gallerier, konstnärsportföljer eller museer.
Det finns en nackdel med bildreglage: deras storlek. Ett skjutreglage innehåller vanligtvis många högkvalitativa högupplösta bilder, vilket kan orsaka långsam laddning och långsam drift av din webbplats, vilket kan leda till dåliga användarupplevelser, ökade avvisningsfrekvenser och sämre SERP-rankningar.
Om du använder högupplösta bilder, överdriv inte. Och om nackdelarna överväger de möjliga fördelarna, gör du bäst i att undvika skjutreglage helt och hållet.
En annan sak att tänka på är mobila enheter. Om funktionen hos ditt reglage är beroende av storformatsgrafik med många fina detaljer, kan det vara värdelöst på mobila enheter och bör förmodligen uteslutas eller modifieras för den mobila versionen av din webbplats.
Vi kommer att skapa ett bildreglage med Qi Addons för Elementor, en gratis plugin vi har utvecklat för att utöka Elementors redan imponerande utbud av widgets. Innan du börjar använda det måste du dock installera den senaste versionen av Elementor och sedan installera och aktivera Qi Addons för Elementor.
Qi-tillägg kommer att fungera med gratisversionen av Elementor, så hela kitet och caboodle behöver inte kosta dig ett öre. Allt som spelar roll är att din version av Elementor är uppdaterad. Vi kommer också att använda vårt gratis Qi-tema, som vi varmt rekommenderar, men Qi Addons kommer att fungera med alla teman.
När du har gjort det är det enkelt att lägga till en bildreglage på din WordPress-webbplats och det tar några minuter. Du kan se hur det går till i videon nedan:
Men om du föredrar en steg-för-steg-texthandledning, har vi dig täckt. Läs vidare.
Vi kommer att lägga till ett bildreglage i ett inlägg, men du kan lika gärna lägga till det på en sida. Att lägga till bildreglagets widget fungerar som med alla andra Elementor-element: hitta den helt enkelt i menyn till vänster och dra den dit du vill ha den.
Du har nu elementet på plats, men det innehåller inga bilder. För att lägga till bilder, klicka på plus ikonen i Bilder avsnitt av Innehåll/Allmänt flik.
Du kan nu välja bilder från ditt mediebibliotek eller ladda upp några nya. När du har gjort ditt val klickar du Skapa galleri.
Du kan nu granska eller redigera det här galleriet innan du infogar det. Du kan också ändra ordningen på dina bilder när de visas i skjutreglaget genom att dra dem. När du är nöjd med ditt galleri, klicka Infoga Galleri.
Du bör nu kunna se din bildreglage i förhandsgranskningsdelen.
Går vidare till Allmänna/skjutreglageinställningar sektionen, hittar vi kontrollerna för beteendet hos vår bildreglage.
Aktivera Slider Loop kan ställas in på Ja eller Nej, och det gör att skjutreglaget går tillbaka runt sig själv. Vi vill att våra bilder ska fortsätta röra sig av sig själva, så vi lämnar det på Ja, vilket är standard. De Aktivera centrerade bilder kontroll används för att centrera asymmetriska bilder, medan Aktivera Slider Autoplay gör att reglaget fungerar utan användarinteraktion.
De Bildlängd och den Varaktighet för bildanimering används för att ställa in tiden för vilken en bild är på plats och varaktigheten för övergångsanimeringen. Enheten som används är millisekunder. Vi kommer att ställa in vår Bildlängd till 2000, men vi kommer inte att röra Animationens varaktighetskontroll.
De Aktivera skjutreglage navigering kontroll gör det möjligt för användaren att använda pilar för att navigera i skjutreglaget, medan Aktivera skjutreglage paginering styr skjutreglagets pagineringspunkter. Vi kommer inte att använda prickarna för det här reglaget vi skapar, så vi byter till det Av.
Nästa ner, den Bildproportioner control har en rad alternativ som du kan använda för att få dina bilder att se mer enhetliga ut om de inte är det, som t.ex. Miniatyrbild, fyrkant, porträtt, och andra. Vi lämnar det som standard Original, behåller bildernas ursprungliga proportioner.
Aktivera partiell kolumn låter dig visa den del av slutkolumnen du ställer in Delvis kolumnvärde för. De Antal kolumner menyn låter dig välja antalet kolumner i reglaget. Vi kommer att ställa in vår till Ett.
De Kolumner Responsive menyn låter dig ställa in olika antal kolumner för olika enhetsstorlekar, vilket vanligtvis innebär färre kolumner på mindre enheter. Eftersom vi bara har en bild som visas åt gången (enligt vår Antal kolumner inställning), kan vi lämna den på Fördefinierad eftersom det inte finns något sätt att visa färre än en kolumn.
De Mellanrum mellan föremål skjutreglaget låter dig ange ett pixelvärde mellan varje bild. Vi kommer att ställa in vår till 0, eftersom vi inte vill ha något mellanslag mellan bilderna. De Slideffekt menyn låter dig välja mellan Glida och Blekna övergångsanimationer. Vi lämnar vårt kl Glida.
Nästa ner hittar vi Aktivera Lightbox Popup. Om det är aktiverat, som är standard, öppnas en klickad bild i en överlagring. De Bild Hover menyn kontrollerar skjutreglagets beteende av användaren när musen svävar. Du kan välja mellan Zooma in, Zooma ut, Ingen, och Flytta. Vi lämnar vårt kl Ingen.
De Överläggsfärg och den Överlägg Hover Color inställningar ger dig möjlighet att välja en färgöverlagring för dina bilder, antingen som standard eller när du håller muspekaren. Vi kommer inte att använda den för vår demonstration.
Går vidare till Stil flik. Du kommer att se två avsnitt: den Skjutreglage Navigeringsstil, som handlar om navigeringspilarna, och Skjutreglage pagineringsstil, vilket har att göra med paginering. För den här designens syfte har vi stängt av pagineringen, så vi kommer inte att använda dessa inställningar.
I den Skjutreglage Navigeringsstil avsnittet det första alternativet upp är Navigeringsposition meny. Här kan du välja placeringen av pilarna som gör att skjutreglaget byter bilder. Vi kommer att placera dem Utanför, men du kan också välja standard Inuti och Tillsammans, vilket kommer att placera dem under bilden.
Nästa ner hittar vi Dölj navigering alternativet, som låter dig dölja navigeringspilarna för enheter under en viss skärmbredd. Vi kommer att göra dem osynliga för enheter Under 768 pixlar bred.
Förskjutningsreglagen (Navigation Vertikal Offset och Navigering horisontell offset) låter dig flytta navigeringspilarna från deras standardpositioner. Du kan skjuta dem själv eller mata in värden i pixlar, ems eller procent. Vi kommer inte att använda reglaget för vertikal offset, men vi kommer att ställa in Navigering horisontell offset till 6,5 %.
De nästa två alternativen är Navigeringspil Föregående (vänsterpil), och Navigeringspil Nästa (högerpil) låter dig ändra standardnavigeringspilarna. Du kan välja en från ditt ikonbibliotek eller så kan du ladda upp en SVG. Vi gillar pilarna som de är, så vi kommer inte att ändra dem.
Därefter kan du ändra beteendet för dina navigeringspilar med hjälp av Normal/Hover växla. Ställa in pilarnas attribut i Vanligt läget ändrar pilarna så som de visas för användaren, medan Sväva läget styr deras beteende när du svävar musen.
De två första alternativen är Navigeringspilens färg och Bakgrundsfärg för navigeringspil. Här kan du välja eller mata in färgen för dina navigeringspilar eller deras bakgrund. Vi kommer inte att använda färgalternativen för denna design.
De tre sista reglagen styr måtten på själva pilen och dess hållare. De Navigeringspilstorlek låter dig styra storleken på pilen, medan ”hållaren” in Navigationspilhållarens bredd och Navigationspil Hållare Höjd hänvisar till pilens bakgrund. Om du har valt en färg för Navigationspilbakgrund, kan du använda dessa reglage för att ändra dess dimensioner. Vi kommer att öka storleken på våra pilar till 45 pixlar.
Byter till Sväva avsnitt av växeln kan vi se ytterligare en kontroll: Aktivera Hover Arrow Move. Som standard animerar den pilen när en användare håller musen över den. Vi kommer att byta till Nej.
De Skjutreglage pagineringsstil sektionen erbjuder en liknande uppsättning alternativ: färger, offset, ramar och storlek, men vi gillar vårt bildreglage som det är, med endast navigeringspilar, så vi kommer inte att använda sideringsalternativen.
Som sagt, vår bildreglage är klar.
Anta nu att du vill ha ett reglage med full bredd. Med Qi Addons för Elementor kan du göra det också.
Det första du behöver göra är att gå till inställningar avsnittet genom att klicka på Redskap ikonen längst ned i menyn till vänster. Hitta Sidlayout menyn och välj Elementor full bredd som din layout. Om du använder vårt Qi-tema kan du också välja Qi full bredd.
Klicka sedan på mittikonen på den blå sektionsfliken för att redigera den.
Du borde se Layout fliken i ditt avsnitt. Den första menyn upp är Innehållsbredd. Den är inställd på Boxad, men du måste ändra det till Full bredd. När du har valt det, bör nästa meny ner vara Kolumner Gap meny. Väljer Inget gap i det kommer det inte att lämna något mellanrum mellan elementet och kanterna på skärmen.
Men även om du arbetar med Boxad layout kan du fortfarande använda Bredd reglaget för att ändra bredden på din widget. Om du drar den hela vägen till höger, eller om du matar in bredden på din layout i pixlar, får du också en bildreglage i full bredd.
Sammanfattningsvis
Som du kan se är det enkelt att sätta upp ett vackert, gripande bildreglage i WordPress och det tar bara ett par minuter. Med Qi Addons för Elementor kan det också vara helt gratis. Widgeten kommer sprudlande med användarvänliga stylingalternativ med effekterna omedelbart synliga i Elementors förhandsvisningssektion. Nu vet du allt du behöver veta för att skapa vackra bildskjutare för din WordPress-webbplats, oavsett stil.
Stöd vårt arbete ❤️
Om du gillade den här artikeln, överväg att lämna dricks för att hjälpa oss fortsätta publicera bra innehåll.
