Wilt u een responsieve afbeeldingsrasterlay-out maken met TWO ?
De bouwer Divi heeft fantastische ingebouwde modules die rasterweergaven gebruiken,
Maar soms wilt u misschien uw eigen aangepaste afbeeldingsrasterindeling maken met CTA-links. Hierdoor heeft u meer controle over het ontwerp en inhoud die u voor elk rasteritem wilt weergeven zonder dat u een plug-in hoeft te gebruiken.
Vandaag laten we u zien hoe u een responsieve afbeeldingsrasterlay-out kunt maken met CTA-links met behulp van de ingebouwde ontwerpopties van Divi.
Laten we beginnen!
overzicht
Hier is een kort overzicht van het resultaat dat we aan het einde van deze tutorial zullen krijgen.
Maak een pagina met Divi Theme Builder
Maak vanuit het WordPress-dashboard een nieuwe webpagina door naar Pagina's >> Toevoegen
Geef vervolgens een titel aan uw pagina en klik vervolgens op " Gebruik Divi Builder ".
Klik dan op " begin met bouwen«
De speciale sectie-indeling maken
Een nieuwe sectie toevoegen "specialiteit". linker zijbalk lay-out een derde twee derde.
Kies de indeling van de kolommen zoals weergegeven in onderstaande schermafbeelding:
Verwijder de standaardsectie zodat alleen de nieuwe gespecialiseerde sectie overblijft.
Open de sectie-instellingen en wijzig de achtergrondkleur als volgt:
- Achtergrond: #84dbda
Onder het tabblad Style , werk de volgende opties bij:
- Kolomhoogten egaliseren: JA
- Gebruik aangepaste gootbreedte: JA
- Gootbreedte: 1
- Binnenbreedte: 100%
Lees ook: Hoe laat ik blogposts zweven in DIVI?
- Maximale binnenbreedte: 1px (desktop), 080px (tablet en telefoon)
- Interne marge (boven en onder): 12vh
- Kolom 1 opvulling (boven en onder): 0px
Voeg, met de sectiestijlen op hun plaats, een rij met één kolom toe aan de sectie.
Lijn instellingen
Werk de lijnparameters als volgt bij:
- Gebruik aangepaste gootbreedte: JA
- Kolomafstand: 1
- Kolomhoogten harmoniseren: JA
- Interne marge (boven en onder): 0px
Maak een tweede regel door de eerste te dupliceren.
Wijzig vervolgens de dubbele rij in een lay-out met twee kolommen.
Afbeeldingen toevoegen als kolomachtergrondafbeeldingen
Nu alle rijen en kolommen op hun plaats staan, zijn we klaar om onze afbeeldingen toe te voegen aan onze rasterlay-out.
Om ervoor te zorgen dat de afbeeldingen responsief zijn in de rasterlay-out, voegen we al onze afbeeldingen als achtergrondafbeeldingen toe aan elk van de vier kolommen in de sectie.
Aangezien elke achtergrondafbeelding een achtergrondgrootte heeft van " omslag ", zal de afbeelding altijd de hele kolom vullen bij het aanpassen van de browsergrootte.
Bovenste rij kolom achtergrondafbeelding
Open de kolominstellingen van de bovenste rij om aan de slag te gaan.
Voeg vervolgens een achtergrondafbeelding toe aan de kolom.
Achtergrondafbeeldingen van kolommen in de onderste rij
Open vervolgens de instellingen voor kolom 1 in de tweede (onderste) rij en voeg ook een achtergrondafbeelding toe aan deze kolom.
Voeg vervolgens een achtergrondafbeelding toe aan kolom 2 van dezelfde rij.
Sectie kolom 1 achtergrondafbeelding
En tot slot, open de sectie-instellingen "specialiteit" en voeg een achtergrondafbeelding toe aan kolom 1.
Toevoeging van de module "Call to Action" bovenop de afbeeldingen in elke kolom
Nu onze achtergrondafbeeldingen zijn toegevoegd aan elke kolom van de rasterlay-out, voegen we een "Call to Action"-module toe aan elke kolom.
Door een "Call to Action"-module-overlay op de kolomachtergrondafbeelding te gebruiken, kunt u eenvoudig aangepaste achtergrondoverlaystijlen en zweefeffecten toevoegen aan de kolomachtergrondafbeelding.
Voor dit voorbeeld gebruiken we alleen het button-element uit de Action Call-module, maar u kunt dit eenvoudig toevoegen aan de inhoud van de titel of hoofdtekst boven de knop.
We zullen de eerste "Call to Action" -module in de bovenste rijkolom toevoegen.
Inhoud
Werk de instellingen van de module "Call to Action" als volgt bij:
- titeltekst verwijderen
- hoofdtekst verwijderen
- Knop Link-URL: #
OPMERKING : Het toevoegen van een "#" voor de link-URL van de knop is voorlopig slechts een aanvulling om de knop weer te geven. Door de semi-transparante achtergrondkleur toe te voegen bij de muisaanwijzer, krijgt u een mooie aangepaste overlaykleur wanneer u de muisaanwijzer over de module (en de afbeelding erachter) beweegt.
- Achtergrondkleur: transparant (desktop), rgba (255,235,77,0.5) (hover)
Knopstijlen
Ga naar het tabblad Style en wijzig de knopinstellingen van de module "Oproep tot actie" als volgt:
- Gebruik aangepaste stijlen voor knop: JA
- Tekstgrootte knop: 22px
- Tekstkleur knop: #ffeb4d
- Achtergrondknop: #000000 (desktop), #ec5f00 (hover)
- Breedte knoprand: 0 pixels
- Knoprandstraal: 100 px
- Lettertype knop: Drijfzand
- Dimlichtknop: half vet
- Knopvulling: 0,5 em boven, 0,5 em onder, 2 em links, 2 em rechts
Grootte, vulling en randen
Vervolgens moeten we ervoor zorgen dat onze module een bepaalde hoogte heeft om de achtergrondafbeelding van de kolom erachter weer te geven.
Om dit te doen, zullen we interne marges (boven en onder) aan de module toevoegen.
We zullen ook een subtiele rand aan de module toevoegen om deze een beetje te scheiden van andere afbeeldingen in de rasterlay-out.
Pas de volgende instellingen toe:
- Breedte: 100%
- Interne marge (boven en onder): 15vh
- Breedte onderste rand: 5px
- Breedte linkerrand: 5px
- Randkleur: rgba (255,255,255,0.5)
OPMERKING : Als u de lengte-eenheid vh voor opvulling gebruikt, wordt de opvulwaarde relatief aan de hoogte van de browserviewport. Uw afbeeldingsrasterelementen zullen dus in hoogte groeien en krimpen in verhouding tot het browservenster.
Verticale centrering van de inhoud van de module "Call to action"
Om ervoor te zorgen dat de inhoud van de module “Action Call” verticaal gecentreerd blijft, kunnen we een klein stukje aangepaste CSS toevoegen met behulp van de flex-eigenschap.
Voeg op het tabblad geavanceerd de volgende CSS toe aan het hoofdelement:
display:flex;
flex-direction:column;
justify-content:center;
Call-to-action-overlay toegevoegd aan andere kolommen
Nu de eerste "Call to Action"-module is aangepast, kopieert en plakt u de module in de andere 3 kolommen van de lay-out, inclusief de 2 kolommen in de onderste rij en kolom 1 in de sectie.
Om ervoor te zorgen dat de module "Call to Action" de volledige hoogte van kolom 1 in de gespecialiseerde sectie dekt, stelt u de minimale hoogte in op 100%.
- Minimale hoogte: 100%
Het is voorbij ! Laten we het eindresultaat zien.
Eindresultaat
Hier is het eindresultaat van de responsieve afbeeldingsrasterlay-out op een webpagina met de zweefeffecten.
En dit is hoe het raster reageert bij het aanpassen van de browsergrootte.
Download DIVI nu!!!
Conclusie
Responsieve afbeeldingsrasterlay-outs blijven een populair aspect van veel websites. De visuele aantrekkingskracht van de achtergrondafbeelding in combinatie met de call-to-action-overlay kan die belangrijke navigatielinks echt laten uitkomen.
Het responsieve karakter van de afbeeldingsrasterlay-out ziet er ook geweldig uit op alle apparaten, wat altijd een noodzaak is.
We hopen dat deze gids nuttig voor u zal zijn bij uw toekomstige projecten om te creëren Site web. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt echter ook overleggen onze middelen als u meer elementen nodig heeft om uw projecten voor het maken van websites te voltooien.
U kunt onze gids ook volgen op WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
