Wilt u een raster maken met Divi om vloeiend te zijn op hover?
Als je het leuk vindt om websites te bouwen met gebruikersinteractie in gedachten, zul je deze tutorial geweldig vinden.
Vandaag laten we je zien hoe je een transparant raster maakt waarvan de achtergrondafbeelding wordt onthuld zodra iemand over een van de elementen zweeft. Het ontwerp is in eerste instantie eenvoudig en strak. Dit resulteert in een mooie zweefervaring.
In deze zelfstudie leiden we u stap voor stap door het creatieproces.
Laten we gaan.
overzicht
Laten we, voordat we in de tutorial duiken, even kijken naar het resultaat op verschillende schermformaten.
Bureau
Mobile
Laten we beginnen met het creatieproces in Divi
Een nieuwe sectie toevoegen
Achtergrond kleur
Voeg een nieuwe sectie toe aan de pagina waaraan u werkt.
Zie ook: Divi: een aangepaste voettekst maken
Open eerst de sectie-instellingen en pas een witte achtergrondkleur toe.
- Achtergrond: #ffffff
Voeg regel #1 . toe
Structuur van de kolom
Ga verder door een nieuwe rij toe te voegen met behulp van de volgende kolomstructuur:
sizing
Zonder nog modules toe te voegen, open de regelinstellingen, ga naar het tabblad Design, trek de optie naar beneden Afmetingen en wijzig de maatparameters als volgt:
- Gebruik aangepaste gootbreedte: JA
- Goot met : 1
- Breedte: 100%
- Maximale breedte: 100%
tussenruimte
Trek vervolgens de optie naar beneden Spacing en wijzig de volgende instellingen:
- Opvulling (boven en onder): 0px
grens
Breng in de optie Rand ook de volgende wijzigingen aan:
- Randstijlen (boven en onder): 1px
- Randkleur (boven en onder): #d3d3d3
Kolom 1 instellingen
Beweeg achtergrond
Laten we vervolgens de instellingen voor kolom 1 aanpassen. Pas een verloopvulling toe op de muisaanwijzer.
- Kleur 1: RGB (255,255,255,0)
- Kleur 2: #000000
- Gradiënttype: Lineair
- Positie Kleur 1: 30%
- Plaats verloop boven verloopafbeelding: JA
Achtergrondafbeelding bij hover
Upload ook een achtergrondafbeelding die bij de muisaanwijzer verschijnt.
- Grootte achtergrondafbeelding: omslag
- Positie achtergrondafbeelding: midden
CSS-klasse
En voltooi de kolominstellingen door de volgende CSS-klasse op het tabblad toe te wijzen: Geavanceerd :
- CSS-klasse: hover-kolom
Voeg Tekst #1 module toe aan kolom 1
Tekst in H3-formaat toevoegen (kop 3)
Het is tijd om modules toe te voegen, te beginnen met een eerste Tekstmodule in kolom 1. Voeg een tekst naar keuze in.
H3 tekstinstellingen
Ga dan naar het tabblad Design van de module en wijzig de H3-tekstparameters als volgt:
- Lettertype: Oswald
- Lettergewicht Lettergewicht: ultralicht
- Kop 3 Lettertypestijl: TT
- Tekstkleur: #0a0a0a
- Kop 3 Tekstgrootte:
- Bureaublad: 3vw
- Tablet: 7vw
- Telefoon: 14vw
- Kop 3 Letterafstand: -2px
sizing
Wijzig de breedte op verschillende schermformaten in de formaatinstellingen.
- Breedte:
- Bureaublad: 44%
- Tabletten: 48%
- Telefoon: 50%
tussenruimte
Laten we ook de volgende parameters in de optie wijzigen: Spacing.
- Marge (onder): 25vh
- Vulling (boven en onder): 5%
- Vulling (links en rechts): 4%
grens
Vervolgens voegen we rechts en onder randen toe.
- Randbreedte (rechts en onder): 1px
- Randkleur (rechts en onder): #d3d3d3
CSS-klasse
En we zullen ook de module-instellingen voltooien door de volgende CSS-klasse toe te wijzen aan de tekstmodule:
- CSS-klasse: hover-titel
Voeg Tekst #2 module toe aan kolom 1
Voeg inhoud toe
Voeg nog een tekstmodule toe net onder de vorige met de inhoud beschrijving van uw keuze.
Tekst instellingen
Overschakelen naar tabblad Design van de module en wijzig de tekstparameters dienovereenkomstig:
- Tekst lettertype: Karla
- Tekstkleur: #ffffff
- Grootte:
- Bureaublad: 0,8 vw
- Tablet: 2vw
- Telefoon: 3.6vw
- Lijnhoogte: 2,2 em
tussenruimte
Pas ook aangepaste margewaarden toe.
- Vulling (onderkant): 10%
- Vulling (links en rechts): 9%
CSS-klasse
En voltooi de moduleparameters met behulp van de volgende CSS-klasse voor de module:
- CSS-klasse: hover-tekst
Voeg een "Knop"-module toe aan kolom 1
Voeg een beschrijving toe
De volgende en laatste module die we nodig hebben is een module Knop. Vul een omschrijving naar keuze in.
Knop instellingen
Wijzig de moduleparameters als volgt:
- Gebruik aangepaste stijlen voor knop: JA
- Tekstgrootte knop:
- Bureaublad: 1vw
- Tablet: 2,5 vw
- Telefoon: 4vw
- Breedte knoprand: 0px
- Grensstraal: 0px
- Lettertype knop: Karla
- Knoppictogram weergeven: JA
- Plaatsing van knoppictogram: Rechts
- Alleen pictogram weergeven op Over voor knop: NEE
tussenruimte
Voeg ook aangepaste afstandswaarden toe.
- Marge (onder): 8%
- Marge (links en rechts): 9%
- Vulling (onderkant): 5%
- Vulling (rechts): 20%
doos schaduw
Breng vervolgens een doosschaduw aan.
- Doosschaduw Horizontale positie: 0px
- Box Shadow Verticale Positie: 2px
- Schaduwkleur: #000000
CSS-klasse
En voltooi de module-instellingen door de volgende CSS-klasse toe te wijzen aan de knop:
- CSS-klasse: hover-knop
Hergebruik kolom 1
Verwijder kolommen 2, 3 en 4
Nu we de eerste kolom hebben gemaakt, kunnen we deze opnieuw gebruiken. Het eerste dat we gaan doen, is de lege kolommen uit onze rij verwijderen.
Kolom 1 drie keer klonen
We zullen kolom 1 hergebruiken door deze drie keer te klonen.
Achtergrondafbeeldingen wijzigen bij zweven van dubbele kolommen
Wijzig vervolgens de dubbele kolomachtergrondafbeeldingen in elke dubbele kolom.
Dubbele inhoud bewerken
Wijzig ook de inhoud van de module in elke dubbele kolom.
Unieke kolomranden
Kolom 1
We moeten unieke randinstellingen toepassen op elke kolom, te beginnen met kolom 1.
- Randbreedte (rechts):
- Bureaublad: 1px
- Tablet: 1px
- Telefoon: 0px
- Kleur (rechts): #d3d3d3
- Randbreedte (onder):
- Bureaublad: 0px
- Tablet: 1px
- Telefoon: 1px
- Randkleur (onder): #d3d3d3
Kolom 2
Vervolgens hebben we kolom 2.
Randbreedte (rechts):
- Bureaublad: 1px
- Tablet: 1px
- Telefoon: 0px
Kleur (rechts): #d3d3d3Border Breedte (onder):
- Bureaublad: 0px
- Tablet: 1px
- Telefoon: 1px
Randkleur (onder): #d3d3d3
Kolom 3
En we zullen de volgende randinstellingen gebruiken voor kolom 3:
- Randbreedte (rechts):
- Bureaublad: 1px
- Tablet: 1px
- Telefoon: 0px
- Kleur (rechts): #d3d3d3
- Randbreedte (onder):
- Bureaublad: 0px
- Tablet: 1px
- Telefoon: 1px
- Randkleur (onder): #d3d3d3
Aangepaste CSS toevoegen aan pagina-instellingen
Pagina-instellingen openen
Nu het hele ontwerp op zijn plaats is, hoeft u alleen nog wat aangepaste CSS-code toe te voegen om zweefeffecten op de modules te activeren. Open hiervoor de pagina-instellingen.
Lees ook onze gids over: Divi: Hoe maak je een sticky footer met "Reveal" effect
CSS-code toevoegen
En kopieer en plak de volgende regels CSS-code:
.hover-column:hover .hover-title {
background-color: #000000;
}
.hover-column:hover .hover-title h3 {
color: white !important;
}
.hover-button {
color: black;
}
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
.hover-column:hover::before {
opacity: 0;
}
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.
Bureau
Mobile
Download DIVI nu!!!
Conclusie
In dit artikel hebben we je laten zien hoe je een mooi hover-ontwerp maakt.
We hebben met name een kolomraster gemaakt dat eenvoudig en schoon begint. Zo snel als de bezoekers beweeg over een bepaald rasteritem, de achtergrondafbeelding wordt onthuld en modulestijlen veranderen.
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.
...
