Wilt u een achtergrondverloop in? Divi dat verandert bij het zweven?
Bij het bouwen van websites gaat het erom ervoor te zorgen dat elk detail klopt. Door aandacht te besteden aan de kleine details van uw ontwerp zal de kwaliteit van uw ontwerp snel toenemen Site web.
Met de nieuwe hover-opties van Divi, kunt u eenvoudig kleine interacties toevoegen aan uw Site web. Hover-opties zijn van toepassing op bijna alle ontwerpparameters. U kunt bijvoorbeeld indirect een verloopachtergrond wijzigen bij zweven om een mooie overgang te creëren.
Dit is precies wat we u in deze tutorial gaan laten zien. Naast het maken van de verloopovergang, zullen we ook vanaf het begin een verbluffend ontwerpvoorbeeld maken dat u vrij kunt gebruiken voor elk type ontwerp. Site web die je creëert.
Laten we gaan!
overzicht
Laten we, voordat we in de tutorial duiken, eens kijken naar het eindresultaat.
Laten we beginnen met ontwerpen met Divi
Zie ook: Divi: een responsieve accordeonschuifregelaar maken
Voeg sectie # 1 toe
tussenruimte
Het eerste dat u hoeft te doen, is een nieuwe pagina maken of een bestaande openen en er een nieuwe reguliere sectie aan toevoegen. Open de instellingen en voeg aangepaste boven- en ondermarges toe.
- Opvulling (boven en onder): 100px
Voeg regel 1 . toe
Structuur van de kolom
Ga verder door een nieuwe rij toe te voegen met behulp van de volgende kolomstructuur:
Standaard achtergrondkleur (bureaublad) van kolom 1
Open de rij-instellingen zonder nog modules toe te voegen en voeg de volgende standaard achtergrondkleur toe aan kolom 1:
- Achtergrond (bureaublad): #e7ffa0
Achtergrondkleur kolom 1 bij zweven
Verander deze achtergrondkleur bij de muisaanwijzer.
- Achtergrond: #00020c
Achtergrondverloop in kolom 1
Voeg ook een achtergrondkleur met kleurovergang toe aan kolom 1. Merk op dat we een volledig transparante kleur gebruiken. Deze kleur zorgt ervoor dat de achtergrondkleur doorschijnt, die op zijn beurt verandert bij de muisaanwijzer.
- Kleur 1 (20%): rgba (255,255,255,0)
- Kleur 2 (100%): rgba (16,0,201,0.8)
- Gradiënttype: Lineair
- Gradiëntrichting: 50 graden
Kolom 2 achtergrondkleur
Voeg ook een achtergrondkleur toe aan kolom 2.
- Achtergrond: #ffffff
sizing
Ga dan naar het tabblad Design en verander de formaatinstellingen in de optie Afmetingen.
- Gebruik aangepaste gootbreedte: JA
- Gootbreedte: 1
- Breedte: 2000px
tussenruimte
Ga verder door aangepaste opvulwaarden toe te voegen in de afstandsinstellingen.
- Opvulling (boven en onder): 0px
Afstand (kolom 2)
- Opvulling (boven en onder): 6vw (desktop), 120px (tablet en telefoon)
- Opvulling (links en rechts): 5vw (desktop), 80px (tablet), 50px (telefoon)
box Shadow
En geef de rij ook een subtiele doosschaduw.
- Doos Schaduwvervaging Sterkte: 100px
- Box Shadow Spread-sterkte: -10px
Transitions
Ten slotte zullen we een vloeiende overgang op de achtergrond maken door de duur van de overgang op het tabblad te verlengen Geavanceerd.
- Overgangsduur: 1100 ms
Voeg een afbeeldingsmodule toe aan kolom 1
Upload een afbeelding
Het is tijd om modules toe te voegen! Voeg een afbeeldingsmodule toe aan de eerste kolom.
Achtergrond met kleurovergang
Ga naar de achtergrondinstellingen van deze Afbeeldingsmodule en voeg een verloopachtergrond toe. We gebruiken opnieuw een volledig transparante kleur om de andere kleuren door te laten komen.
- Kleur 1 (57%): rgba (50,217,255,0.66)
- Kleur 2 (100%): rgba (255,255,255,0)
- Gradiënttype: circulair
- Gradiëntpositie: Boven
tussenruimte
Voeg vervolgens aangepaste topvulling toe aan de module.
- Vulling (bovenkant): 14vw
Tekstmodule toevoegen aan kolom 2
Voeg inhoud toe
Laten we verder gaan naar de tweede kolom! De eerste module die we nodig hebben is een tekstmodule voor de titel. Ga je gang en voeg een inhoud titel naar keuze.
Instellingen koptekst
Ga vervolgens naar de instellingen voor koptekst en breng enkele wijzigingen aan.
- Lettertype: Abril Fatface
- Tekstkleur: #000000
- Tekstgrootte: 4 vw (desktop), 60 px (tablet), 40 px (telefoon)
Voeg een tweede tekstmodule toe aan kolom 2
Voeg inhoud toe
De tweede module die we nodig hebben is een andere tekstmodule. Voeg wat toe inhoud naar keuze.
Tekst instellingen
Ga vervolgens naar tekstinstellingen en wijzig de tekstuitlijning.
- Tekstuitlijning: Uitgevuld
sizing
Pas ook de breedte aan in de maatinstellingen.
- Breedte: 73% (desktop), 100% (tablet en telefoon)
tussenruimte
Voeg ten slotte aangepaste boven- en ondermarges toe aan de module om spaties te maken.
- Marge (boven en onder): 2,5 vw (desktop), 50 px (tablet en telefoon)
Knopmodule toevoegen aan kolom 2
Voeg een beschrijving toe
De derde en laatste module die we in de tweede kolom nodig hebben, is een Button-module. Voeg een kopie naar keuze toe.
Knop instellingen
Wijzig vervolgens de knopinstellingen.
- Gebruik aangepaste stijlen voor knop: JA
- Tekstgrootte knop: 1,2 vw (desktop), 14 px (tablet en telefoon)
- Tekstkleur knop: #ffffff
- Verloop stopt 1 (0%): #9ea6ff
- Gradiëntstops 2 (100%): rgba (16,0,201,0.8)
- Besturing: 78 graden
- Breedte knoprand: 0 pixels
- Grensstraal: 30px
- Letterafstand: -1px
- Lettergewicht: Ultra Bold
- Lettertypestijl: TT - (hoofdletters)
tussenruimte
Voeg ook aangepaste vulwaarden toe.
- Opvulling (boven en onder): 10px
- Opvulling (links en rechts): 40px
box Shadow
En pas een subtiele kaderschaduw toe op de knop.
- Doos Schaduwvervaging Sterkte: 40px
Voeg sectie # 2 toe
tussenruimte
Nu we het eerste deel hebben voltooid, gaan we verder met het volgende. Voeg een nieuwe reguliere sectie toe met behulp van de volgende aangepaste opvulwaarden:
- Opvulling (boven en onder): 100px
Een rij toevoegen aan twee kolommen
Structuur van de kolom
Ga verder door een nieuwe rij aan de sectie toe te voegen met behulp van de volgende kolomstructuur:
Kolom 1 achtergrond
Open de rij-instellingen zonder nog modules toe te voegen en voeg de volgende achtergrondkleur toe aan kolom 1:
- Achtergrond: #ffffff
Kolom 2 Achtergrond (Desktop)
Voeg de volgende achtergrondkleur toe aan kolom 2.
- Achtergrond (bureaublad): #ffffff
Achtergrondkleur kolom 2 bij zweven
En verander deze achtergrondkleur bij de muisaanwijzer.
- Achtergrond (zweven): #3d02ff
Achtergrond met 2 kolommen met kleurovergang
Voeg ook een verloopachtergrond toe aan de kolom.
- Gradiëntstops 1 (20%): rgba (255,255,255,0)
- Gradiëntstops 2 (100%): #ff7700
sizing
Ga vervolgens naar de maatinstellingen en breng enkele wijzigingen aan.
- Gebruik aangepaste gootbreedte: JA
- Gootbreedte: 1
- Breedte: 2000px
Afstand (Lijn)
Ga verder door aangepaste opvulwaarden toe te voegen in de afstandsinstellingen.
- Opvulling (boven en onder): 0px
Afstand (kolom 1)
Afstandsinstellingen voor kolom 1 wijzigen
- Opvulling (boven en onder): 6vw (desktop), 120px (tablet en telefoon)
- Opvulling (links en rechts): 5vw (desktop), 80px (tablet), 50px (telefoon)
box Shadow
En voeg ook een subtiele doosschaduw toe aan deze rij.
- Doos Schaduwvervaging Sterkte: 100px
- Box Shadow Spread-sterkte: -10px
Transitions
Maak tot slot een soepele overgang door de duur van de overgang op het tabblad te verlengen Geavanceerd.
- Overgangsduur: 1100 ms
Dubbele lijn 1 modules
Omdat we alle modules die we nodig hebben in de vorige sectie al hebben, zullen we tijd besparen door ze te klonen.
Plaats duplicaten in rij 2 kolommen
En plaats de duplicaten als volgt in de nieuwe regel:
Bewerk inhoud
Zorg ervoor dat u de inhoud van uw modules.
Achtergrond met kleurovergang van knop wijzigen
Verander ook het verloop van de achtergrond van de knop.
- Verloop stopt 0%: #ff653f
- Verloop stopt 100%: #0066ff
- Besturing: 39deg
Verander afbeelding
Vervang de afbeelding.
Achtergrondverloop wijzigen
Pas ten slotte het achtergrondverloop van de afbeeldingsmodule aan.
- Gradiënt stopt 0%: rgba(0,2,12,0.66)
- Gradiënt stopt 57%: rgba(255,255,255,0)
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken naar het eindresultaat.
Download DIVI nu!!!
Conclusie
In dit artikel hebben we u laten zien hoe u een verloopachtergrond tijdens het zweven kunt wijzigen met behulp van Divi. We hebben ook een geweldig voorbeeld vanuit het niets gemaakt waarin deze aanpak wordt gebruikt.
U bent vrij om het ontwerp en de illustraties te gebruiken voor elk type website dat u maakt.
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, raadpleeg onze gids op 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.
...
