Wilt u achtergrondovergangen tussen elementen maken? Divi ?
Creëer naadloze achtergrondontwerpovergangen tussen elementen Divi is een geweldige manier om het ontwerp van uw Site web Divi.
Hiermee kunt u op een creatieve manier een verloop, patroon en achtergrondmasker naadloos overzetten tussen een lijn en een sectie.
U kunt bijvoorbeeld een patroon- of maskerovergang in verschillende kleuren hebben zonder de algehele uitlijning en het symmetrische uiterlijk van het ontwerp te verliezen.
In deze zelfstudie gebruiken we Divi's ingebouwde achtergrondontwerpopties om een naadloze achtergrondontwerpovergang te creëren tussen een Divi-sectie en -lijn. De toepassing en veelzijdigheid van dit ontwerp is grenzeloos, waardoor Divi's achtergrondontwerpopties naar een geheel nieuw niveau worden getild!
Laten we beginnen.
overzicht
Hier is een korte blik op het ontwerp dat we in deze zelfstudie zullen bouwen.
Hier zijn enkele andere voorbeeldontwerpen die mogelijk zijn met slechts een paar eenvoudige wijzigingen aan maskers en achtergrondpatronen.
Maak een nieuwe pagina met Divi Builder
Om te beginnen, moet u het volgende doen:
Ga vanuit het WordPress-dashboard naar Pagina's> Nieuwe toevoegen om een nieuwe pagina te maken.
Geef het een titel die voor jou logisch is en klik op Gebruik Divi Builder
klik vervolgens op Begin met bouwen (Bouw vanaf het begin)
Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.
Een naadloze overgang op de achtergrond creëren tussen een Divi-sectie en een lijn
Een koptekst maken als tijdelijke aanduiding-inhoud
Voordat we erin springen, moeten we een header toevoegen als inhoud fictief. Voeg om te beginnen een rij van één kolom toe aan het standaardgedeelte van de pagina.
Voeg vervolgens een tekstmodule toe aan de regel.
Tekst in H1-formaat toevoegen.
Onder het tabblad Design, werk het koptekstontwerp naar wens bij.
- Lettertype: Roboto Condensed
- Lettergewicht: Vet
- Stijl: TT
- Tekstuitlijning: gecentreerd
- Tekstkleur: #000000
- Koptekstgrootte: 4vw
- Letterafstand: 0.1em
- Lijnhoogte: 1.3em
Sectie achtergrondontwerp
Opvulling toegevoegd aan de sectie
Zodra de nep-header op zijn plaats is, opent u de sectie-instellingen en werkt u de afstand als volgt bij:
- Vulling (boven en onder): 15vw
Het achtergrondverloop toegevoegd aan de sectie
Nu we meer ruimte hebben om mee te werken, zijn we klaar om ons achtergrondontwerp aan de sectie toe te voegen. Onder het tabblad Achtergrond verloop, voeg de volgende verlooppunten toe:
- Gradiëntstops:
- 0%: #4f0f75 (bij 0%)
- 25%: #2843c9 (bij 25%)
- 50%: #4ae2e0 (bij 50%)
- 75%: #3881ff (bij 75%)
- 100%: #4f0f75 (bij 100%)
Een achtergrondpatroon aan de sectie toevoegen
Onder het tabblad Achtergrondpatroon, werk het volgende bij:
- Patroon: diagonale strepen
- Patroonkleur: rgba (79,15,117,0.23)
- Transformeren: Roteren
- Patroongrootte: aangepast formaat
- Breedte: 7vw
- Hoogte: 5vw
- Herhaling patroon Oorsprong: Midden
Let op: Zorg ervoor dat u de VW-lengte-eenheid gebruikt voor de breedte en hoogte van het patroon. En zorg er ook voor dat u de herhaalde oorsprong instelt op "midden". Hierdoor blijft het achtergrondpatroon op dezelfde plaats als het achtergrondpatroon dat we later aan de rij zullen toevoegen.
Een achtergrondmasker aan de sectie toevoegen
Onder het tabblad Achtergrondmasker, voeg het volgende toe:
- Achtergrondmasker: Laag-blob
- Maskerkleur: rgba (0,0,0,0.7)
- Maskerbreedte: 100vw
- Positie: Midden
Let op: Net als bij het patroon, moeten we het masker op maat maken met behulp van de VW-lengte-eenheid. We moeten het masker ook een centrale positie geven.
Lijn achtergrondontwerp
Kopieer en plak sectie-achtergrond naar rij-achtergrond
Kopieer de sectie-achtergrondinstellingen om het ontwerpproces van de lijnachtergrond te versnellen.
Plak vervolgens de achtergrond op de bestaande regel.
Op dit punt kun je al zien hoe het achtergrondpatroon en het masker op de lijn een naadloze overgang maken naar de achtergrond van de sectie.
Het lijkt alsof de lijn een transparante achtergrond heeft, maar het is eigenlijk hetzelfde patroon en masker dat in de sectie wordt gebruikt met dezelfde grootte en positie.
Pas de rijgrootte en opvulling aan met VW
Vervolgens moeten we onze rij een aangepaste breedte geven met behulp van de VW-lengte-eenheid. Werk het volgende bij:
- Breedte: 75vw
- Maximale breedte: 75vw
- Vulling (boven, onder, links en rechts): 10vw
Verloopstops online aanpassen
Vervolgens moeten we de verloopstops op de lijnachtergrond aanpassen voor een naadloze overgang naar het achtergrondverloop van de sectie.
Onder het tabblad Achtergrond verloop, we behouden de drie middelste verlooppunten die zijn overgenomen van de sectie-achtergrond) en verwijderen de eerste en laatste verloopstops.
Stel vervolgens de eerste stop in op 0% en de derde stop op 100%. Als u klaar bent, zou u de volgende verlopen moeten hebben.
- Verloop stopt
- 0%: #2843c9
- 50%: #4ae2e0
- 100%: #3881ff
Schaduw toevoegen aan lijn
Om het ontwerp een beetje op te tillen en de naadloze overgang van de achtergrond te benadrukken, kunnen we een kaderschaduw aan de rij toevoegen.
- Box Shadow: zie screenshot
- Verticale positie: 0px
- Doos Schaduwvervaging Sterkte: 4vw
- Schaduwkleur: rgba(0,0,0,0.5)
Pas de kleur van het achtergrondpatroon van de lijn aan
Nu we alle achtergrondelementen op hun plaats hebben, kunnen we beginnen met het aanpassen van de kleuren voor een creatiever ontwerp.
Onder de optie Achtergrondpatroon rij, werk het volgende bij:
- Patroonkleur: rgba (255,255,255,0.23)
Pas de kleur van het achtergrondmasker van de lijn aan
We kunnen ook de maskerkleur voor de lijn bijwerken om het ontwerp echt te laten opvallen.
Onder het tabblad Achtergrondmasker, werk het volgende bij:
- Maskerkleur: #ffffff
- Maskertransformatie: omgekeerd
Eindresultaat
Laten we het eindresultaat bekijken.
Download DIVI nu!!!
Meer mogelijkheden
Hier zijn enkele andere voorbeeldontwerpen die mogelijk zijn met slechts een paar eenvoudige wijzigingen aan maskers en achtergrondpatronen.
Zie ook: Divi: Hoe gebruik je de "Gradient Builder" om je afbeeldingen mooier te maken
Download DIVI nu!!!
Conclusie
De sleutel tot het creëren van naadloze achtergrondontwerpovergangen in Divi is om deze VW-lengte-eenheden verstandig te gebruiken.
Eerst moeten we een sectie-achtergrondontwerp maken dat past bij de breedte van de browserviewport (vanuit een gecentreerde positie op de pagina). Als we klaar zijn, kunnen we hetzelfde eenregelige achtergrondontwerp gebruiken. Daarna hebben we alleen wat verloop- en kleuraanpassingen voor een geweldig ontwerp.
Hopelijk voegt deze techniek nog een nuttige ontwerpvaardigheid toe voor toekomstige projecten.
We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren.
Aarzel niet om ook onze gids te raadplegen over de 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.
...
