Gå till innehållet

Hur du avslöjar ditt bildgalleri med en rullande effekt på Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Bildgallerier är en favoritdestination på de flesta webbplatser. Och i många fall kan det vara bäst att hålla dessa bildgallerier glada och statiska, så att bilderna fungerar sin magi.

 Men lägg till en glidande pusselrullningseffekt till ett bildgalleri (som vi kommer att göra i den här tutorialen), kan ge en uppfriskande touch till en tidlös klassiker.

I denna handledning visar vi dig hur du bygger en enkel layout som avslöjar ett bildgalleri med en glidande pusselrullningseffekt på Divi. 

Nyckeln är att förstå hur storleken på bilderna relaterar till de vertikala och horisontella förskjutningsvärdena för varje rullningseffekt för att flytta bilden exakt en punkt. Men när den är klar är den resulterande rörelseeffekten skarp och exakt när den gradvis monteras och avslöjar ett bildgalleri på ett unikt sätt.

Möjligt resultat

Här är en översikt över bildgallerilayouten med den glidande pusselbläddringseffekten som vi ska skapa i denna handledning.

Möjliga resultat divi

Skapa rubriksektionen

För att komma igång, låt oss bygga ett snabbt rubrikavsnitt som berättar för användaren att bläddra på sidan för att visa galleriet och med de fantastiska rullningseffekterna.

Lägg till en rad

Lägg till en rad med en kolumn i standardavsnittet.

Enstaka kolumnrad

Lägg till en textmodul

Inuti kolumnen / raden lägger du till en ny textmodul.

Uppdatera kroppsinnehållet i textinställningarna med följande:

<h1>Image Gallery</h1>

Lägg till textmodul

Inställningar för textmodul

På fliken Design uppdaterar du textdesignen enligt följande:

  • Titel typsnitt: Roboto
  • Titel typsnitt vikt: fetstil
  • Titelstilsstil: TT
  • Rubriktextjustering: Mitt
  • Rubriktextstorlek: 50 pixlar (skrivbord), 40 pixlar (surfplatta och telefon)
  • Titelbokstavsavstånd: 4px
Modifierad textstil

Lägg till en modulikon för oskärpa

När texten är på plats lägger du till en ny presentationstextmodul under textmodulen.

Sammanfattningsmodul för Divi

Ta sedan bort all titel och huvudtext från standardinnehållet och välj att använda nedåtpilen.

Divi sammanfattningsmodul

Inställningar för presentationstekst

Uppdatera sedan presentationstextinställningarna med en ny färg och en upprepad bildanimering.

  • Ikonfärg: # ffb500
  • Animeringsstil: Bild
  • Animeringsriktning: ner
  • Animationsintensitet: 20%
  • Upprepning av animering: loop
Divi-animeringssammanfattningsmodul

Avsnitt stoppning

För att ge avsnittet utrymme för rullning uppdaterar du polstret på följande sätt:

  • Polstring: 20vh ovan, 50vh nedan

Här använder vi den längdenhet vh som är relativt höjden på webbläsarfönstret så att avståndet passar konsekvent över alla webbläsarstorlekar.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Konfigurera divi-modulavstånd

Skapande av bildgalleri med rullningseffekter

Nu när vår rubriksektion är klar är vi redo att bygga det faktiska bildgalleriet med de glidande pusseleffekterna. Hela galleriet består av tre rader med fyra bilder / kolumner i varje rad för att göra totalt 4 bilder. Du kan dock enkelt lägga till fler rader och bilder i layouten när den är klar.

Skapa avsnitt och rad

Lägg till en ny sektion

Låt oss börja med att lägga till ett nytt vanligt avsnitt under titelavsnittet.

Urvalsdel divi

Lägg till en rad

Lägg sedan till en rad med fyra kolumner i avsnittet.

Avsnittet har fyra kolumner divi

Linjeinställningar

Uppdatera följande under radinställningarna:

  • Rännbredd: 1
  • Bredd: 100%
  • Maximal bredd: 1200 px (skrivbord), 600 px (surfplatta), 300 px (telefon)
Divi line parameter
Hur linjebredden avgör bildstorlek

Bredden på raden är mycket viktig för denna design eftersom den kommer att diktera bredden på var och en av de fyra kolumnerna. När vi väl har satt takrännans bredd till 1 kommer det inte att finnas mer marginal mellan bilderna. 

Och när vi ställer in maximal bredd till 1200px kommer fyra kolumnlayout att göra var och en av kolumnerna / bilderna exakt 300px breda (1200px / 4 = 300px). 

Eftersom var och en av bilderna är kvadratisk vet vi också att höjden på varje bild också kommer att vara 300 pixlar. Vi behöver inte hålla det så om vi inte vill. 

Till exempel kan vi också välja att ha en tre kolumnlayout med bilder på 400 x 400 pixlar. Att känna till bildbredden (300px) och höjden (även 300px) är nyckeln till att skapa rullningseffekten senare.

Lägga till bilder

Lägg till bild 1

Lägg till bildmodul div

Bild 1 Ruleffekter

Divi rullningseffekt
Förhållandet mellan bildstorlek och rullningseffektförskjutningar

När du använder den vertikala och horisontella rullningseffekten är det viktigt att förstå vad det angivna numeriska värdet representerar. I det här exemplet har vi en vertikal flyttningsförskjutning på -3. Denna -3 är faktiskt -300px (eller 300px ner) vilket är bredden på bilden. 

Offset når sedan 0 (hempositionen) när användaren rullar. Det är detta som skapar rullningseffekten som flyttar bilden till exakt ett block / ram. Horisontell rörelse börjar vid 3 (300 pixlar från höger) och stannar i sin standardposition. Dessa två effekter kombineras för att skapa en unik tvådelad rullningseffekt.

Lägg till bild 2

Efter att rullningseffekter har lagts till i bilden 1. Lägg till en ny bild i kolumn 2.

Vi kommer att lämna denna statiska bild utan någon rullande effekt.

Lägg till bild 3

Lägg sedan till en annan bildmodul i kolumn 3 och uppdatera modulen med en ny bild.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Bild 3 Ruleffekter

Uppdatera följande rullningseffekter under bildinställningar:

Under fliken Horisontell rörelse ...

  • Aktivera horisontell rörelse: JA
  • Start offset: -3 (vid 0% av fönstret)
  • Genomsnittlig förskjutning: 0 (vid 15% av visningsområdet)
  • Slutförskjutning: 0 (vid 100% av visningsområdet)
Bildmodul divi rullningseffekt

Lägg till bild 4

För att skapa den sista bilden, kopiera bild 1 och klistra in den i kolumn 4.

Ladda upp en ny bild i bildinställningarna.

Ladda upp en ny divi-bild

Bild 4 Ruleffekter

Uppdatera sedan följande rullningseffekter:

Under fliken Vertikal rörelse ...

  • Aktivera vertikal rörelse: YES
  • Start offset: 3 (vid 0% av fönstret)
  • Genomsnittlig förskjutning: 0 (vid 15% -28% av visningsområdet)
  • Slutförskjutning: 0 (vid 40% av visningsområdet)

Under fliken Horisontell rörelse ...

  • Aktivera horisontell rörelse: JA
  • Start offset: 3 (vid 0% av fönstret)
  • Genomsnittlig förskjutning: 3 (vid 28% av visningsområdet)
  • Slutförskjutning: 0 (vid 40% av visningsområdet)
Alternativ för divi-rullning

Duplicera raden

Nu när bildrullningseffekterna är klara för den första raden behöver vi bara duplicera raden för att skapa fler bilder och deras motsvarande rullningseffekter. För det här exemplet, låt oss duplicera raden två gånger för att skapa totalt tre rader.

Byt ut och ordna om bilder efter behov

Sedan kan vi flytta bilderna med hjälp av dra-och-släpp-funktionen vart vi vill. Det är här du kan bli kreativ och se hur bilderna rör sig kommer att rulla. Och när bilderna är på plats kan du ersätta innehållet i bildmodulen med nya bilder som tillgodoser webbplatsens behov.

Total bilddelning

Sista touch-ups

Sektionens synlighet

Eftersom våra bilder förmodligen sträcker sig utanför avsnittet / fönstret, låt oss dölja överflödet för att rensa upp det lite. Öppna sektionsinställningar och uppdatera följande:

  • Horisontellt överflöde: dold
  • Vertikalt överflöde: dold
Synlighet divi

Avsnitt stoppning

Vi vill att den vertikala rullningseffekten av toppbilden (som sträcker sig ovanför avsnittet) ska vara synlig trots det dolda överflödet. Så låt oss lägga till topp och botten vaddering lika med bildhöjden (300 pixlar).

Divi vaddering

Resultat hittills

Just nu kan vi stanna här om du vill behålla galleridesignen utan något avstånd mellan bilderna. Så här ser resultatet ut hittills. Lägg märke till hur bilderna rör sig vertikalt och horisontellt exakt ett block / ram.

Lägger till utrymme mellan bilder

Eftersom vi ställer in rännbredden till 1 har vi inte längre en marginal mellan våra kolumner eller bilder. För att återskapa liknande avstånd kan vi lägga till fyllning i varje ram.

 Detta gör det möjligt för oss att skapa det avstånd vi behöver utan att kompromissa med funktionaliteten för rullningseffekterna. Detta är möjligt eftersom att lägga till stoppning till bilden inte ökar bildbehållarens bredd eller höjd. Du kan också ha en liknande effekt genom att använda gränser också.

Polstring av bild 1

Öppna inställningarna för bild 1 och uppdatera följande:

  • Polstring: 10 pixlar längst upp, 10 pixlar längst ner, 10 pixlar till vänster, 10 pixlar till höger
Lägg till divi marginal

Förläng fyllningen till alla bilder

Högerklicka på stoppningsalternativet och välj "Förläng padding" innan du sparar. I popup-fönstret Expand Styles klickar du på knappen Extend för att utöka denna fyllning till alla bilder på sidan.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Förläng divi-marginalerna

Slutresultat

Här är resultatet av allt arbete vi har gjort hittills.

Divi desktop slutresultat

Avslutande tankar

Den glidande pusselrullningseffekten som visas i den här artikeln gör mer än att ge oss en unik design för ett bildgalleri. Det påpekar också att horisontella och vertikala rörelseförskjutningar kan användas för mer exakta rullningseffekter.

 Utforska gärna olika variationer av denna layout genom att ändra förskjutningarna och blanda samman platsen för bilderna. 

Du kan också ändra antalet kolumner så länge du förstår hur kolumnen / bildstorleken kommer att ändras och sedan hur du uppdaterar rullningseffekterna med motsvarande värde.

Några rekommenderade resurser

Du kommer förmodligen att hitta dessa resurser intressanta eftersom de också låter dig skapa fotogallerier på din WordPress-blogg.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
1 aktier
del1
tweet
Enregistrer