Ønsker du at skabe et responsivt billedgitterlayout med DIVI ?
Byggmesteren Divi har fantastiske indbyggede moduler, der bruger gittervisninger,
Men nogle gange vil du måske oprette dit eget tilpassede billedgitterlayout med CTA-links. Dette giver dig mere kontrol over designet og indhold som du ønsker at vise for hvert gitterelement uden at skulle ty til et plugin.
I dag viser vi dig, hvordan du opretter et responsivt billedgitterlayout med CTA-links ved hjælp af de indbyggede designmuligheder i Divi.
Lad os starte!
undersøgelse
Her er en kort oversigt over det resultat, vi får i slutningen af denne tutorial.
Opret en side med Divi Theme Builder
Fra WordPress Dashboard skal du oprette en ny webside ved at gå til Sider >> Tilføj
Se også: Hvordan opretter man en glidende og push-menu i DIVI?
Giv derefter en titel til din side og klik på " Brug Divi Builder ".
Klik derefter på " begynde at bygge«
Oprettelse af specialsektionslayout
Tilføj et nyt afsnit "Specialitet". venstre sidebjælke layout en tredjedel to tredjedele.
Vælg layoutet af kolonnerne som vist på skærmbilledet nedenfor:
Slet standardafsnittet, så kun det nye specialiserede afsnit forbliver.
Åbn sektionsindstillingerne og skift baggrundsfarven som følger:
- Baggrund: #84dbda
Under fanen stil, opdater følgende muligheder:
- Udlign kolonnehøjder: JA
- Brug tilpasset tagrendebredde: JA
- Rendebredde: 1
- Indvendig bredde: 100%
Læs også: Hvordan flyder jeg blogindlæg i DIVI?
- Maksimal indvendig bredde: 1px (desktop), 080px (tablet og telefon)
- Intern margin (top og bund): 12vh
- Kolonne 1 polstring (top og bund): 0px
Med sektionsstilene på plads skal du tilføje en række med én kolonne til sektionen.
Linieindstillinger
Opdater linjeparametrene som følger:
- Brug tilpasset tagrendebredde: JA
- Kolonneafstand: 1
- Harmoniser søjlehøjder: JA
- Intern margen (øverst og nederst): 0px
Opret en anden linje ved at duplikere den første.
Skift derefter dubletrækken til et layout med to kolonner.
Tilføjelse af billeder som kolonnebaggrundsbilleder
Nu hvor alle rækker og kolonner er på plads, er vi klar til at tilføje vores billeder til vores gitterlayout.
For at sikre, at billederne er lydhøre i gitterlayoutet, tilføjer vi hvert af vores billeder som baggrundsbilleder til hver af de fire kolonner i afsnittet.
Da hvert baggrundsbillede vil have en baggrundsstørrelse på " dække over ", vil billedet altid fylde hele kolonnen, når du justerer browserstørrelsen.
Øverste række kolonne baggrundsbillede
For at komme i gang skal du åbne kolonneindstillingerne i den øverste række.
Tilføj derefter et baggrundsbillede til kolonnen.
Baggrundsbilleder for kolonnen i nederste række
Åbn derefter indstillingerne for kolonne 1 i den anden (nederste) række og tilføjer også et baggrundsbillede til denne kolonne.
Tilføj derefter et baggrundsbillede til kolonne 2 i samme række.
Sektion kolonne 1 baggrundsbillede
Og endelig skal du åbne sektionsindstillingerne "speciale" og tilføje et baggrundsbillede til kolonne 1.
Tilføjelse af "Call to Action"-modulet overlejret på billederne til hver kolonne
Nu hvor vores baggrundsbilleder er blevet tilføjet til hver kolonne i gitterlayoutet, tilføjer vi et "Call to Action"-modul til hver kolonne.
Ved at bruge en "Call to Action"-moduloverlejring på kolonnebaggrundsbilledet kan du nemt tilføje tilpassede baggrundsoverlejringsstile og svæveeffekter til kolonnebaggrundsbilledet.
Til dette eksempel vil vi blot bruge knapelementet fra Action Call-modulet, men du kan nemt tilføje til indhold af titlen eller brødteksten over knappen.
Vi tilføjer det første "Call to Action"-modul i kolonnen i øverste række.
Indhold
Opdater indstillingerne for "Call to Action"-modulet som følger:
- fjern titeltekst
- slette brødtekst
- Knap Link URL: #
BEMÆRKNING: Tilføjelse af et "#" for knappens link-URL er kun et fyldstof for nu, for at knappen skal vises. Tilføjelse af den semi-transparente baggrundsfarve på hover vil give dig en flot tilpasset overlejringsfarve, når du svæver over modulet (og billedet bagved).
- Baggrundsfarve: gennemsigtig (skrivebord), rgba (255,235,77,0.5) (hover)
Knapstile
Gå til fanen stil og ændre knapindstillingerne for modulet "Call to action" som følger:
- Brug brugerdefinerede stilarter til knap: JA
- Knaptekststørrelse: 22px
- Knaptekstfarve: #ffeb4d
- Baggrundsknap: #000000 (skrivebord), #ec5f00 (hover)
- Knapkantbredde: 0 pixels
- Knapkantradius: 100 px
- Knapskrifttype: Kviksand
- Dæmpet lys knap: Semi fed
- Polstringsknap: 0,5 cm øverst, 0,5 cm nederst, 2 cm til venstre, 2 cm til højre
Størrelse, polstring og kant
Dernæst skal vi sørge for, at vores modul har en vis højde for at eksponere baggrundsbilledet af søjlen bagved.
For at gøre dette tilføjer vi interne marginer (øverst og nederst) til modulet.
Vi vil også tilføje en subtil kant til modulet for at give det en lille adskillelse fra andre billeder i gitterlayoutet.
Anvend følgende indstillinger:
- Bredde: 100%
- Intern margin (top og bund): 15vh
- Nederste kantbredde: 5px
- Venstre kantbredde: 5px
- Kantfarve: rgba (255,255,255,0.5)
BEMÆRKNING: Brug af længdeenheden vh til udfyldning vil gøre udfyldningsværdien i forhold til højden af browserens visningsport. Så dine billedgitterelementer vil vokse og skrumpe i højden i forhold til browservinduet.
Lodret centrering af indholdet af modulet "Call to action".
For at sikre, at indhold af "Action Call"-modulet forbliver lodret centreret, kan vi tilføje et lille udsnit af tilpasset CSS ved hjælp af flex-egenskaben.
Under fanen avanceret skal du tilføje følgende CSS til hovedelementet:
display:flex;
flex-direction:column;
justify-content:center;
Tilføjet overlejring af opfordring til handling til andre kolonner
Nu hvor det første "Call to Action"-modul er tilpasset, kopier og indsæt modulet i de andre 3 kolonner i layoutet, inklusive de 2 kolonner i nederste række og kolonne 1 i sektionen.
For at sikre, at modulet "Call to Action" dækker hele højden af kolonne 1 i den specialiserede sektion, skal du indstille minimumshøjden til 100%.
- Minimum højde: 100%
Det er overstået ! Lad os se slutresultatet.
Endelig resultat
Her er slutresultatet af det responsive billedgitterlayout på en webside med svæveeffekterne.
Og det er sådan, gitteret reagerer, når du justerer browserstørrelsen.
Download DIVI nu!!!
Konklusion
Responsive billedgitterlayouts er fortsat et populært aspekt på mange websteder. Den visuelle appel fra baggrundsbilledet kombineret med call-to-action-overlayet kan virkelig vise de vigtige navigationslinks.
Den responsive karakter af billedgitterets layout vil også se godt ud på alle enheder, hvilket altid er en nødvendighed.
Vi håber, at denne guide vil være nyttig for dig i dine fremtidige skabelsesprojekter Websted. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan dog også konsultere vores ressourcer hvis du har brug for flere elementer for at fuldføre dine hjemmesideoprettelsesprojekter.
Du kan også følge vores guide på WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
