Billedgallerier er en favoritdestination på de fleste websteder. Og i mange tilfælde kan det være bedst at holde disse billedgallerier glade og statiske, så billederne virker deres magi.
Men tilføj en glidende puslespilrulleeffekt til et billedgalleri (som vi vil gøre i denne tutorial), kan give et forfriskende strejf til en tidløs klassiker.
I denne vejledning viser vi dig, hvordan du bygger et simpelt layout, der afslører et billedgalleri med en glidende puslespil, der ruller på Divi.
Nøglen er at forstå, hvordan størrelsen på billederne er relateret til de lodrette og vandrette forskydningsværdier for hver rulleeffekt for at flytte billedet nøjagtigt et punkt. Men når den er afsluttet, er den resulterende bevægelseseffekt skarp og præcis, da den gradvist samles og afslører et billedgalleri på en unik måde.
Muligt resultat
Her er en oversigt over billedgalleriets layout med den glidende puslespil-rulleeffekt, som vi skal skabe i denne vejledning.
Oprettelse af overskriftsafsnittet
For at komme i gang, lad os bygge et hurtigt overskriftsafsnit, der fortæller brugeren at rulle siden for at se galleriet og med de fantastiske rulleeffekter.
Tilføj en række
Føj en række med en kolonne til standardsektionen.
Tilføj et tekstmodul
Inde i kolonnen / rækken tilføj et nyt tekstmodul.
I tekstindstillingerne skal du opdatere kropsindholdet med følgende:
<h1>Image Gallery</h1>
Indstillinger for tekstmodul
Under fanen Design skal du opdatere tekstdesignet som følger:
- Titeltype: Roboto
- Vægt på titeltype: fed
- Titel skrifttype: TT
- Overskriftstekstjustering: Center
- Overskriftstekststørrelse: 50 px (desktop), 40 px (tablet og telefon)
- Afstand mellem bogstaver: 4px
Tilføj et Blurb-modulikon
Når teksten er på plads, tilføj et nyt præsentationstekstmodul under tekstmodulet.
Fjern derefter al titel og brødtekst fra standardindholdet, og vælg at bruge ikonet pil ned.
Præsentationstekstindstillinger
Opdater derefter præsentationstekstindstillingerne med en ny farve og en gentagen diasanimation.
- Ikonfarve: # ffb500
- Animationsstil: Slide
- Animationsretning: ned
- Animationsintensitet: 20%
- Gentagelse af animation: loop
Sektion polstring
For at give sektionsrummet til rulle skal du opdatere polstret som følger:
- Polstring: 20vh over, 50vh nedenfor
Her bruger vi den længdeenhed vh, der er relativ til højden på browservinduet, så afstanden passer konsekvent på tværs af alle browserstørrelser.
Oprettelse af billedgalleri med rulleeffekter
Nu hvor vores header-sektion er færdig, er vi klar til at opbygge det aktuelle billedgalleri med de glidende puslespil-rulleeffekter. Hele galleriet vil bestå af tre rækker med 4 billeder / kolonner i hver række for at lave i alt 12 billeder. Du kan dog nemt tilføje flere linjer og billeder til layoutet, når det er færdigt.
Oprettelse af sektionen og linjen
Tilføj en ny sektion
Lad os starte med at tilføje en ny regelmæssig sektion under titelsektionen.
Tilføj en række
Tilføj derefter en række med fire kolonner til sektionen.
Linieindstillinger
Opdater følgende under linieindstillingerne:
- Tagrendebredde: 1
- Bredde: 100%
- Maksimal bredde: 1200 px (desktop), 600 px (tablet), 300 px (telefon)
Hvordan linjebredde bestemmer billedstørrelse
Bredden på rækken er meget vigtig for dette design, da det vil diktere bredden af hver af de fire kolonner. Når vi først har sat tagrendebredden til 1, er der ikke mere margen mellem billederne.
Og når vi indstiller den maksimale bredde til 1200px, vil de fire kolonnes layout gøre hver af kolonnerne / billederne nøjagtigt 300px bred (1200px / 4 = 300px).
Da hvert af billederne er firkantede, ved vi også, at højden på hvert billede også vil være 300 pixels. Vi behøver ikke at holde det sådan, hvis vi ikke ønsker det.
For eksempel kunne vi også vælge at have et tre kolonnelayout med billeder på 400 x 400 pixels. At kende billedbredden (300 pixel) og højden (også 300 pixel) vil være nøglen til at skabe rulleeffekten senere.
Tilføjelse af billeder
Tilføj billede 1
Billede 1 Rulleeffekter
Forholdet mellem billedstørrelse og forskydning af rulleeffekt
Når du bruger den lodrette og vandrette rulleeffekt, er det vigtigt at forstå, hvad den indtastede numeriske værdi repræsenterer. I dette eksempel har vi en vertikal bevægelsesstartforskydning på -3. Denne -3 er faktisk -300px (eller 300px nede), hvilket er bredden på billedet.
Offset når derefter 0 (startpositionen), når brugeren ruller. Dette skaber rulleeffekten, der flytter billedet til nøjagtigt en blok / ramme. Vandret bevægelse starter ved 3 (300 pixels fra højre) og stopper i sin standardposition. Disse to effekter kombineres for at skabe en unik todelt rulleeffekt.
Tilføj billede 2
Efter tilføjelse af rulleeffekter til billede 1. Føj nyt billede til kolonne 2.
Vi forlader dette statiske billede uden nogen rulleeffekt.
Tilføj billede 3
Føj derefter et andet billedmodul til kolonne 3, og opdater modulet med et nyt billede.
Billede 3 Rulleeffekter
Opdater følgende rulleeffekter under billedindstillinger:
Under fanen Vandret bevægelse ...
- Aktivér vandret bevægelse: YES
- Start offset: -3 (ved 0% af vinduet)
- Gennemsnitlig forskydning: 0 (ved 15% af visningen)
- Afslut offset: 0 (ved 100% af visningen)
Tilføj billede 4
For at oprette det sidste billede skal du kopiere billede 1 og indsætte det i kolonne 4.
Upload et nyt billede i billedindstillingerne.
Billede 4 Rulleeffekter
Opdater derefter følgende rulleeffekter:
Under fanen Lodret bevægelse ...
- Aktivér lodret bevægelse: YES
- Start offset: 3 (ved 0% af vinduet)
- Gennemsnitlig forskydning: 0 (ved 15% -28% af visningen)
- Afslut offset: 0 (ved 40% af visningen)
Under fanen Vandret bevægelse ...
- Aktivér vandret bevægelse: YES
- Start offset: 3 (ved 0% af vinduet)
- Gennemsnitlig forskydning: 3 (ved 28% af visningen)
- Afslut offset: 0 (ved 40% af visningen)
Dupliceret linje
Nu hvor billedrullningseffekterne er færdige i den første række, er alt, hvad vi skal gøre, at duplikere rækken for at oprette flere billeder og deres tilsvarende rulleeffekter. Lad os i dette eksempel duplikere rækken to gange for at oprette i alt tre rækker.
Udskift og omarranger billeder efter behov
Så kan vi flytte billederne ved hjælp af træk og slip-funktionen, hvorhen vi vil. Det er her, du kan være kreativ og se, hvordan de levende billeder vil rulle. Og når først billederne er på plads, kan du erstatte indholdet af billedmodulet med nye billeder, der opfylder behovene hos Websted.
Endelige touch-ups
Sektionens synlighed
Da vores billeder sandsynligvis strækker sig uden for sektionen / vinduet, lad os skjule overløbet for at rydde det op lidt. Åbn sektionsindstillinger, og opdater følgende:
- Vandret overløb: skjult
- Lodret overløb: skjult
Sektion polstring
Vi ønsker, at den lodrette rulleeffekt af det øverste billede (som strækker sig over sektionen) skal være synlig på trods af det skjulte overløb. Så lad os tilføje top- og bundpolstring svarende til billedhøjden (300 pixels).
Resultat indtil videre
Lige nu kan vi stoppe her, hvis du vil beholde galleriets design uden afstand mellem billederne. Sådan ser resultatet ud indtil videre. Bemærk, hvordan billederne bevæger sig lodret og vandret nøjagtigt en blok / ramme.
Tilføjer plads mellem billeder
Fordi vi har indstillet tagrenden til 1, har vi ikke længere en margen mellem vores søjler eller billeder. For at genskabe lignende mellemrum kan vi tilføje fyld til hver ramme.
Dette giver os mulighed for at oprette den afstand, vi har brug for, uden at gå på kompromis med funktionerne i rulleeffekterne. Dette er muligt, fordi tilføjelse af polstring til billedet ikke øger bredden eller højden på billedbeholderen. Du kan også have en lignende effekt ved også at bruge grænser.
Billede 1 Polstring
Åbn indstillingerne for billede 1, og opdater følgende:
- Polstring: 10 pixels øverst, 10 pixels i bunden, 10 pixels til venstre, 10 pixels til højre
Udvid udfyldning til alle billeder
Før du gemmer, skal du højreklikke på polstringsindstillingen og vælge "Udvid polstring". I pop op-vinduet Udvid stilarter skal du klikke på knappen Udvid for at udvide denne udfyldning til alle billeder på siden.
Endelig resultat
Her er resultatet af alt det arbejde, vi har udført indtil videre.
endelige tanker
Den glidende puslespil-rulleeffekt, der er omtalt i denne artikel, gør mere end at give os et unikt design til et billedgalleri. Det påpeger også, at vandrette og lodrette bevægelsesforskydninger kan bruges til mere præcise rulleeffekter.
Du er velkommen til at udforske forskellige variationer af dette layout ved at ændre forskydningerne og blande placeringen af billederne.
Du kan også ændre antallet af kolonner, så længe du forstår, hvordan kolonne / billedstørrelse vil ændre sig, og hvordan du opdaterer rulleeffektforskydningerne med den tilsvarende værdi.
Nogle anbefalede ressourcer
Du vil sikkert finde disse ressourcer interessant, fordi de også giver dig mulighed for at oprette fotogallerier på din WordPress blog.
- 10 plugins til at oprette fotogallerier på WordPress
- Sådan opretter du et fotogalleri med Envira-pluginet
- 5 WordPress plugins til at oprette fotogallerier
- Sådan bruges billedgallerimodulet på Divi
