Vil du lage et rutenett med Divi å være flytende når du svever?
Hvis du elsker å bygge nettsteder med brukerinteraksjon i tankene, vil du elske denne opplæringen.
I dag skal vi vise deg hvordan du lager et gjennomsiktig rutenett hvis bakgrunnsbilde avsløres så snart noen svever over et av elementene. Designet er i utgangspunktet enkelt og rent. Dette resulterer i en fin sveveopplevelse.
I denne opplæringen vil vi lede deg gjennom opprettelsesprosessen trinn for trinn.
La oss gå.
undersøkelsen
Før du dykker inn i opplæringen, la oss ta en rask titt på resultatet på forskjellige skjermstørrelser.
kontor
Mobil
La oss starte skapelsesprosessen i Divi
Legg til en ny seksjon
Bakgrunnsfarge
Legg til en ny seksjon på siden du jobber med.
Åpne først seksjonsinnstillingene og bruk en hvit bakgrunnsfarge.
- Bakgrunn: #ffffff
Legg til linje #1
Struktur av kolonnen
Fortsett ved å legge til en ny rad ved å bruke følgende kolonnestruktur:
dimensjonering
Uten å legge til noen moduler ennå, åpne linjeinnstillingene, gå til fanen utforming, trekk ned alternativet Størrelse og endre størrelsesparametrene som følger:
- Bruk egendefinert takrennebredde: JA
- Takrenne med: 1
- Bredde: 100 %
- Maks bredde: 100 %
avstanden
Trekk deretter ned alternativet Mellomrom og endre følgende innstillinger:
- Polstring (øverst og bunn): 0px
grensen
I Border-alternativet gjør du også følgende endringer:
- Kantstiler (øverst og nederst): 1px
- Kantfarge (øverst og bunn): #d3d3d3
Innstillinger for kolonne 1
Hover bakgrunn
La oss deretter tilpasse innstillingene for kolonne 1. Bruk en gradientbakgrunn på pekeren.
- Farge 1: rgba(255,255,255,0)
- Farge 2: #000000
- Gradienttype: Lineær
- Posisjonsfarge 1: 30 %
- Plasser gradient over gradientbilde: JA
Bakgrunnsbilde ved sveving
Last også opp et bakgrunnsbilde som vises når du peker.
- Bakgrunnsbildestørrelse : Cover
- Bakgrunnsbilde Posisjon: Senter
CSS klasse
Og fullfør kolonneinnstillingen ved å tilordne følgende CSS-klasse i fanen Avansert :
- CSS-klasse: hover-kolonne
Legg til tekst #1-modul i kolonne 1
Legg til tekst i H3-størrelse (overskrift 3)
Det er på tide å legge til moduler, og starter med en første tekstmodul i kolonne 1. Sett inn en tekst etter eget valg.
H3 tekstinnstillinger
Bytt deretter til fanen utforming av modulen og endre H3-tekstparameterne som følger:
- Font: Oswald
- Skriftvekt Skriftvekt: ultralett
- Overskrift 3 Skriftstil: TT
- Tekstfarge: #0a0a0a
- Overskrift 3 Tekststørrelse:
- Desktop: 3vw
- Nettbrett: 7vw
- Telefon: 14vw
- Overskrift 3 Bokstavavstand: -2px
dimensjonering
Endre bredden på forskjellige skjermstørrelser i størrelsesinnstillingene.
- Bredde:
- Desktop: 44 %
- Nettbrett: 48 %
- Telefon: 50 %
avstanden
La oss også endre følgende parametere i alternativet Mellomrom.
- Margin (bunn): 25vh
- Polstring (øverst og bunn): 5 %
- Polstring (venstre og høyre): 4 %
grensen
Deretter legger vi til kantlinjer til høyre og nedenfor.
- Kantbredde (høyre og bunn): 1px
- Kantfarge (høyre og bunn): #d3d3d3
CSS klasse
Og vi vil også fullføre modulinnstillingene ved å tilordne følgende CSS-klasse til tekstmodulen:
- CSS-klasse: hover-tittel
Legg til tekst #2-modul i kolonne 1
Legg til innhold
Legg til en annen tekstmodul rett under den forrige med innhold beskrivelse av ditt valg.
Tekstinnstillinger
Bytt til fane utforming av modulen og endre tekstparametrene tilsvarende:
- Tekstfont : Karla
- Tekstfarge: #ffffff
- Størrelse:
- Desktop: 0,8 vw
- Nettbrett: 2vw
- Telefon: 3.6vw
- Linjehøyde: 2,2 em
avstanden
Bruk også egendefinerte margverdier.
- Polstring (bunn): 10 %
- Polstring (venstre og høyre): 9 %
CSS klasse
Og fullfør modulparametrene ved å bruke følgende CSS-klasse for modulen:
- CSS-klasse: hover-tekst
Legg til en "Button"-modul i kolonne 1
Legg til en beskrivelse
Den neste og siste modulen vi trenger er en modul Button. Skriv inn en beskrivelse av ditt valg.
Knappinnstillinger
Endre modulparametrene som følger:
- Bruk egendefinerte stiler for knapp: JA
- Knappens tekststørrelse:
- Desktop: 1vw
- Nettbrett: 2,5 vw
- Telefon: 4vw
- Knappekantbredde: 0px
- Kanteradius: 0px
- Knappeskrift: Karla
- Vis knappikon: JA
- Plassering av knappikon: Høyre
- Vis bare ikon på Over for knapp: NEI
avstanden
Legg også til egendefinerte avstandsverdier.
- Margin (bunn): 8 %
- Margin (venstre og høyre): 9 %
- Polstring (bunn): 5 %
- Polstring (høyre): 20 %
boksskygge
Påfør deretter en boksskygge.
- Box Shadow Horisontal Posisjon: 0px
- Box Shadow Vertikal posisjon: 2px
- Skyggefarge: #000000
CSS klasse
Og fullfør modulinnstillingene ved å tilordne følgende CSS-klasse til knappen:
- CSS-klasse: sveveknapp
Gjenbruk kolonne 1
Slett kolonne 2, 3 og 4
Nå som vi har konstruert den første kolonnen, kan vi gjenbruke den. Det første vi skal gjøre er å fjerne de tomme kolonnene fra raden vår.
Klone kolonne 1 tre ganger
Vi vil gjenbruke kolonne 1 ved å klone den tre ganger.
Endre bakgrunnsbilder når du peker på dupliserte kolonner
Endre deretter bakgrunnsbildene for dupliserte kolonner i hver dupliserte kolonne.
Rediger duplisert innhold
Endre også innhold av modulen i hver duplikatkolonne.
Unike kolonnekanter
Kolonne 1
Vi må bruke unike kantinnstillinger på hver kolonne, og starter med kolonne 1.
- Kantbredde (høyre):
- Desktop: 1px
- Nettbrett: 1px
- Telefon: 0px
- Farge (høyre): #d3d3d3
- Kantbredde (bunn):
- Desktop: 0px
- Nettbrett: 1px
- Telefon: 1px
- Kantfarge (bunn): #d3d3d3
Kolonne 2
Deretter har vi kolonne 2.
Kantbredde (høyre):
- Desktop: 1px
- Nettbrett: 1px
- Telefon: 0px
Farge (høyre): #d3d3d3Rammebredde (bunn):
- Desktop: 0px
- Nettbrett: 1px
- Telefon: 1px
Kantfarge (bunn): #d3d3d3
Kolonne 3
Og vi vil bruke følgende kantinnstillinger for kolonne 3:
- Kantbredde (høyre):
- Desktop: 1px
- Nettbrett: 1px
- Telefon: 0px
- Farge (høyre): #d3d3d3
- Kantbredde (bunn):
- Desktop: 0px
- Nettbrett: 1px
- Telefon: 1px
- Kantfarge (bunn): #d3d3d3
Legg til tilpasset CSS i sideinnstillingene
Åpne sideinnstillinger
Nå som hele designet er på plass, gjenstår det bare å legge til litt egendefinert CSS-kode for å utløse sveveeffekter på modulene. For å gjøre dette, åpne sideinnstillingene.
Les også vår guide om: Divi: Hvordan lage en klebrig bunntekst med "Reveal"-effekt
Legg til CSS-kode
Og kopier og lim inn 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økelsen
Nå som vi har gått gjennom alle trinnene, la oss ta en endelig titt på hvordan det ser ut på forskjellige skjermstørrelser.
kontor
Mobil
Last ned DIVI nå!!!
konklusjonen
I denne artikkelen viste vi deg hvordan du lager et vakkert svevedesign.
Spesielt har vi laget et kolonnenett som starter enkelt og rent. Så snart Besøkende Hold musepekeren over et bestemt rutenettelement, bakgrunnsbildet avsløres, og modulstiler endres.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
