Da de nye størrelsesmuligheder af Divi er blevet udgivet, er der et par tutorials, der viser dig, hvordan du opretter hover-afsløringer. I disse tutorials er indhold maskeret blev placeret lodret. Men i nogle tilfælde vil du måske oprette en vandret afsløring. I denne vejledning viser vi dig, hvordan du afslører billeder ved hjælp af svævegitteret og overløbsmuligheder. Divi. At udføre dette job kræver en lidt anden tilgang. Vi skal bruge en række med en kolonne og placere alle modulerne under hinanden. Når du svæver, forvandler vi kolonnen til et vandret gitter. Du kan også downloade JSON-filen gratis!
Lad os gå.
undersøgelse
Før vi dykker ned i vejledningen, skal vi se hurtigt på, hvordan vi ser på forskellige skærmstørrelser.
Lad os begynde at genskabe!
Tilføj en ny sektion
Start med at tilføje et nyt regelmæssigt afsnit til den side, du arbejder på.
Tilføj en ny linje
Kolonne struktur
Fortsæt med at tilføje en ny række ved hjælp af følgende kolonnestruktur:
Standard gradient baggrund
Uden at tilføje flere moduler skal du åbne linjeparametrene og tilføje følgende gradientbaggrund:
- 1 farve: #b1ffc4
- 2 farve: #ffffff
- Gradienttype: Radial
- Radial retning: Center
- Startposition: 28%
- Slutposition: 28%
Flyver over gradient baggrunden
Skift gradientbaggrund ved at holde musepekeren.
- 1 farve: #b1ffc4
- 2 farve: #ffffff
- Gradienttype: Radial
- Radial retning: venstre
- Startposition: 5%
- Slutposition: 5%
afstand
Gå til afstandsindstillingerne, og skift derefter polstrings- og margenværdierne.
- Top polstring: 0px
- Bundpolstring: 0px
- Øvre margen: 50px
- Nederste margin: 50px
Standardgrænse
Tilføj en kantradius på 50 pixels i øverste højre og nedre højre hjørne.
Hold markøren væk
Bring hjørnerne til "0px", hvor du holder musen.
Standard skygge
Tilføj derefter en subtil boksskygge ved hjælp af følgende parametre:
- Box Shadow Blur Force: 50px
- Skygge farve: rgba (0,0,0,0.09)
Hover Box Shadow
Fjern skyggen fra kassen, når du flyver over, og skift farven på skyggen med en helt gennemsigtig farve.
- Skygge farve: rgba (0,0,0,0)
Føj et tekstmodul til en kolonne
Tilføj H2 indhold
Det er tid til at begynde at tilføje moduler, begyndende med et tekstmodul. Gå ind i indhold H2 efter eget valg.
H2 tekstindstillinger
Skift til fanen Design, og rediger H2-tekstindstillingerne i overensstemmelse hermed:
- Titel 2 Skrifttype: Acme
- Titel 2 Skrifttype: Understreg
- Titel 2 Understreg farve: #00ff3f
- Titel 2 Tekstfarve: #000000
- Titel 2 Tekststørrelse: 3vw
afstand
Tilføj derefter tilpassede udfyldningsværdier.
- Bedste polstring: 6vw
- Bundpolstring: 7vw
- Venstre polstring: 2vw
Føj billedmodul til kolonne
Upload billede
Det andet modul, vi har brug for i denne kolonne, er et billedmodul. Upload et landskabsbillede efter eget valg.
Lys kasse
Aktiver derefter lysboksindstillingen i linkindstillingerne.
- Åben i fremviseren: ja
dimensionering
Og tving billedet i fuld bredde i størrelsesindstillingerne. Dette vil sikre, at billedet forbliver følsomt i alle skærmstørrelser.
- Tving fuldbredde: Ja
Clone Image Module to gange
Når du har afsluttet det første billedmodul, kan du kopiere det to gange.
Skift billeder
Skift billederne i de to dubletter. Sørg for, at de billeder, du uploader, har samme størrelse som det første billede.
Føj rollover-effekten til rækken
dimensionering
Nu hvor vi har gennemført de grundlæggende række- og modindstillinger, er det tid til at oprette svæveeffekten! Vi starter med at ændre linjens højde og bredde og skjule overløb. Åbn rækkeindstillingerne for række, og foretag følgende ændringer:
- Brug en brugerdefineret tagrendebredde: Ja
- Tagrendebredde: 1
- Bredde: 20%
- Maksimal bredde: 100%
- Højde: 15.9vw
svæver
Reducer bredden til "100%", mens du svæver. Dette gør det muligt for billederne at blive vist, når linjen er svævet.
- Bredde: 100%
synlighed
Skift til den næste avancerede fane og skjul overløbene. Dette vil sikre, at billederne er maskeret før besøgende svæv (desktop) eller klik (tablet/mobil) på tekstmodulet.
- Vandret overløb: skjult
- Lodret overløb: skjult
Overgange
Vi ændrer også varigheden af overgangen i overgangsparametrene.
- Overgangs varighed: 0ms
Hoved søjle rollover element
For at oprette et svævningsgitter åbner vi kolonneindstillingerne, går til fanen Avancerede indstillinger og placerer følgende linjer med CSS-kode i hoved svæverelementet:
display: gitter; gitter-skabelonkolonner: 20% 25% 25% 25%; gitter-gap: 10px;
Klon linjen to gange
Når du har afsluttet den første række, kan du klone den så mange gange, som du vil. For dette særlige designeksempel kloner vi rækken to gange.
Rediger gradientbaggrunden for linje 1
Skift farve på den første gradient i gradientbaggrunden på den anden linje.
- 1 farve: # ffdc96
Skift gradientbaggrund for linje 2
Gør det samme for den tredje række.
- 1 farve: # b7c7ff
Skift kopien af tekstmodulet og understregningsfarven på de to duplikater
Fortsæt ved at ændre den understregede farve på duplikaterne af tekstmodulet med kopien, og du er færdig!
- Understreget farve # 1: # ffaa00
- Understreget farve # 2: # 0037ff
endelige tanker
I denne øvelse viste vi dig, hvordan du viser billeder i vandrette svævegitter ved hjælp af overløbsmulighederne. Divi. Billeder blev afsløret, når de svævede på skrivebordet og klikkede på tablet/telefon. Selvom vi har afsløret billeder, kan du afsløre indhold efter eget valg ved at ændre parametrene i generatoren. Vi håber, at denne tutorial inspirerer dig til at skabe dine egne alternative hover-gitterdesigns! Hvis du har spørgsmål eller forslag, skal du sørge for at efterlade en kommentar i kommentarfeltet nedenfor!
