Kunne du tænke dig at lave et gitter med Divi at være flydende på svæven?
Hvis du elsker at bygge websteder med brugerinteraktion i tankerne, vil du elske denne tutorial.
I dag skal vi vise dig, hvordan du opretter et gennemsigtigt gitter, hvis baggrundsbillede afsløres, så snart nogen svæver over et af elementerne. Designet er i starten enkelt og rent. Dette resulterer i en dejlig svævende oplevelse.
I denne vejledning fører vi dig gennem oprettelsesprocessen trin for trin.
Lad os gå.
undersøgelse
Før vi dykker ned i selvstudiet, lad os tage et hurtigt kig på resultatet på forskellige skærmstørrelser.
kontor
Mobil
Lad os starte skabelsesprocessen i Divi
Tilføj et nyt afsnit
Baggrundsfarve
Tilføj et nyt afsnit til den side, du arbejder på.
Åbn først sektionsindstillingerne og anvend en hvid baggrundsfarve.
- Baggrund: #ffffff
Tilføj linje #1
Struktur af søjlen
Fortsæt ved at tilføje en ny række ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje nogen moduler endnu, åbn linjeindstillingerne, gå til fanen Design, træk indstillingen ned dimensionering og ændre størrelsesparametrene som følger:
- Brug tilpasset tagrendebredde: JA
- Tagrende med: 1
- Bredde: 100 %
- Maks. bredde: 100 %
afstand
Træk derefter indstillingen ned Mellemrum og ændre følgende indstillinger:
- Polstring (top og bund): 0px
grænse
Foretag også følgende ændringer i indstillingen Border:
- Border Styles (top og bund): 1px
- Kantfarve (øverst og nederst): #d3d3d3
Indstillinger for kolonne 1
Hover baggrund
Lad os derefter tilpasse indstillingerne for kolonne 1. Anvend en gradientbaggrund til svævefeltet.
- Farve 1: rgba(255,255,255,0)
- Farve 2: #000000
- Gradienttype: Lineær
- Positionsfarve 1: 30 %
- Placer gradient over gradientbillede: JA
Baggrundsbillede på hover
Upload også et baggrundsbillede, der vises, når du svæver.
- Baggrundsbillede Størrelse: Cover
- Baggrundsbillede Position: Center
CSS klasse
Og fuldfør kolonneindstillingen ved at tildele følgende CSS-klasse på fanen Avanceret :
- CSS-klasse: hover-kolonne
Tilføj tekst #1-modul til kolonne 1
Tilføj tekst i H3-størrelse (overskrift 3)
Det er tid til at tilføje moduler, begyndende med et første tekstmodul i kolonne 1. Indsæt en tekst efter eget valg.
H3 tekstindstillinger
Skift derefter til fanen Design af modulet og modificere H3-tekstparametrene som følger:
- Skrifttype: Oswald
- Skriftvægt Skriftvægt: ultra let
- Overskrift 3 Skrifttype: TT
- Tekstfarve: #0a0a0a
- Overskrift 3 Tekststørrelse:
- Desktop: 3vw
- Tablet: 7vw
- Telefon: 14vw
- Overskrift 3 Bogstavafstand: -2px
dimensionering
Skift bredden på forskellige skærmstørrelser i størrelsesindstillingerne.
- bredde:
- Desktop: 44 %
- Tabletter: 48 %
- Telefon: 50 %
afstand
Lad os også ændre følgende parametre i indstillingen Mellemrum.
- Margin (bund): 25vh
- Polstring (top og bund): 5 %
- Polstring (venstre og højre): 4 %
grænse
Dernæst tilføjer vi grænser til højre og nedenfor.
- Kantbredde (højre og nederst): 1px
- Kantfarve (højre og nederst): #d3d3d3
CSS klasse
Og vi vil også fuldføre modulindstillingerne ved at tildele følgende CSS-klasse til tekstmodulet:
- CSS-klasse: hover-titel
Tilføj tekst #2-modul til kolonne 1
Tilføj indhold
Tilføj endnu et tekstmodul lige under det forrige med indhold beskrivelse af dit valg.
Tekstindstillinger
Skift til fanen Design af modulet og modificere tekstparametrene i overensstemmelse hermed:
- Tekstskrifttype: Karla
- Tekstfarve: #ffffff
- Størrelse:
- Desktop: 0,8 vw
- Tablet: 2vw
- Telefon: 3.6vw
- Linjehøjde: 2,2 em
afstand
Anvend også tilpassede margenværdier.
- Polstring (bund): 10 %
- Polstring (venstre og højre): 9 %
CSS klasse
Og fuldfør modulparametrene ved at bruge følgende CSS-klasse for modulet:
- CSS-klasse: hover-tekst
Tilføj et "Knap"-modul til kolonne 1
Tilføj en beskrivelse
Det næste og sidste modul, vi skal bruge, er et modul Button. Indtast en beskrivelse af dit valg.
Knapindstillinger
Rediger modulparametrene som følger:
- Brug brugerdefinerede stilarter til knap: JA
- Knaptekststørrelse:
- Desktop: 1vw
- Tablet: 2,5 vw
- Telefon: 4vw
- Knapkantbredde: 0px
- Kantradius: 0px
- Knapskrifttype: Karla
- Vis knapikon : JA
- Knapikonplacering: Højre
- Vis kun ikon til Over for knap: NEJ
afstand
Tilføj også brugerdefinerede afstandsværdier.
- Margin (bund): 8 %
- Margin (venstre og højre): 9 %
- Polstring (bund): 5 %
- Polstring (højre): 20 %
kasse skygge
Påfør derefter en kasseskygge.
- Box Shadow Horisontal Position: 0px
- Box Shadow Lodret position: 2px
- Skyggefarve: #000000
CSS klasse
Og fuldfør modulindstillingerne ved at tildele følgende CSS-klasse til knappen:
- CSS-klasse: hover-knap
Genbrug kolonne 1
Slet kolonne 2, 3 og 4
Nu hvor vi har konstrueret den første kolonne, kan vi genbruge den. Den første ting, vi skal gøre, er at fjerne de tomme kolonner fra vores række.
Klon kolonne 1 tre gange
Vi genbruger kolonne 1 ved at klone den tre gange.
Skift baggrundsbilleder, når du svæver over dublerede kolonner
Skift derefter de dublerede kolonnebaggrundsbilleder i hver dubletkolonne.
Rediger dubletindhold
Skift også indhold af modulet i hver dubletkolonne.
Unikke kolonnekanter
Kolonne 1
Vi bliver nødt til at anvende unikke kantindstillinger til hver kolonne, begyndende med kolonne 1.
- Kantbredde (højre):
- Desktop: 1px
- Tablet: 1px
- Telefon: 0px
- Farve (højre): #d3d3d3
- Kantbredde (bund):
- Desktop: 0px
- Tablet: 1px
- Telefon: 1px
- Kantfarve (bund): #d3d3d3
Kolonne 2
Dernæst har vi kolonne 2.
Kantbredde (højre):
- Desktop: 1px
- Tablet: 1px
- Telefon: 0px
Farve (højre): #d3d3d3Border Width (Bund):
- Desktop: 0px
- Tablet: 1px
- Telefon: 1px
Kantfarve (bund): #d3d3d3
Kolonne 3
Og vi vil bruge følgende kantindstillinger for kolonne 3:
- Kantbredde (højre):
- Desktop: 1px
- Tablet: 1px
- Telefon: 0px
- Farve (højre): #d3d3d3
- Kantbredde (bund):
- Desktop: 0px
- Tablet: 1px
- Telefon: 1px
- Kantfarve (bund): #d3d3d3
Tilføj tilpasset CSS til sideindstillinger
Åbn sideindstillinger
Nu hvor hele designet er på plads, er der kun tilbage at tilføje noget tilpasset CSS-kode for at hjælpe med at udløse hover-effekter på modulerne. For at gøre dette skal du åbne sideindstillingerne.
Læs også vores vejledning om: Divi: Sådan opretter du en klæbrig sidefod med "Reveal"-effekt
Tilføj CSS-kode
Og copy-paste følgende linjer med CSS-kode:
.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;
}
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.
kontor
Mobil
Download DIVI nu!!!
Konklusion
I denne artikel viste vi dig, hvordan du skaber et smukt svævedesign.
Specifikt har vi skabt et kolonnegitter, der starter enkelt og rent. Så snart besøgende Hold markøren over et bestemt gitterelement, baggrundsbilledet afsløres, og modulstile ændres.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...