Vil du lage en glidebryter for trekkspill Divi mottakelig?
En trekkspillglidebryter er en morsom og attraktiv måte å vise på innhold på en liten plass.
Trekkspillglidere består vanligvis av flere elementer (eller paneler) stablet horisontalt som foldene på en gardin. Og når du holder markøren over et av panelene, utvides det for å avsløre innhold mens de andre trekkspillpanelene trekker seg sammen. Det er her vi får trekkspilleffekten av ekspansjon og sammentrekning.
I denne opplæringen vil vi vise deg hvordan du lager en responsiv trekkspillglidebryter Divi bruker kun CSS. For å gjøre dette vil vi bruke flere moduler Divi å tjene som trekkspillpaneler.
undersøkelsen
Her er en rask oversikt over hva vi vil oppnå i denne opplæringen.
Last ned DIVI nå!!!
Opprette en ny side med Divi Builder
For å komme i gang må du gjøre følgende:
- Fra WordPress-dashbordet, gå til Sider> Legg til nye for å opprette en ny side.
- Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder
- deretter klikker du Begynn å bygge (Bygg fra bunnen av)
Etter det vil du ha et blankt lerret for å begynne å designe i Divi.
Oppretting av den responsive trekkspillglideren i Divi
Opprettelse av linjen
For å starte, legg til en rad med én kolonne i den vanlige delen.
Åpne deretter linjeinnstillinger og oppdater følgende:
- Bruk egendefinert takrennebredde: JA
- Rennebredde: 1
- Bredde: 100 %
- Maks bredde: 800px
- Høyde: 400px (skrivebord); 700px (nettbrett og telefon)
Verdiene for bredde og maksimal bredde kan endres for å passe dine behov. Trekkspillet vil passe og fungere i alle linjebredder.
Kolonneparametere
Nå som vi har en høyde definert for raden, åpne kolonneinnstillingene og legg til følgende CSS til hovedelementet:
desktop
display:flex;
flex-direction: row;
align-items:center;
height: 100%;
tablett
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
Opprette trekkspillpanelet med Blurb-moduler
Trekkspillglideren kan bygges ved hjelp av hvilken som helst type modul(er). Hvis vi ville, kunne vi bruke en kombinasjon av ulike moduler til å fungere som et trekkspillpanel. Men for dette designet skal vi bruke Blurb-moduler.
Start med å legge til en Blurb-modul på linjen.
Blurb Mod Design
Åpne presentasjonsmodulinnstillingene og oppdater følgende:
Behold den fiktive tittelen og innhold fra kroppen. Vi kan alltid endre dette senere.
Deretter oppdaterer du presentasjonsikonet som følger:
- Ikon (skrivebord): Horisontal pillinjeikon (se skjermbilde)
- Ikon (Hover): (se skjermbilde)
- Ikon (nettbrett og telefon): (se skjermbilde)
Bakgrunn
Deretter gir du blurben et bakgrunnsbilde og et gradientoverlegg ved sveving som følger:
- Legg til et bakgrunnsbilde som er minst 1000 piksler bredt
- Bakgrunnsbilde Posisjon: Senter til venstre
Legg deretter til et overliggende bakgrunnsoverlegg.
Sveve
- Bakgrunnsgradient venstre (svev): #3e215b
- Høyre (sveve) bakgrunnsgradient: rgba(0,0,0,0)
- Gradientretning: 90 grader
- Firkantet gradient over bakgrunnsbilde: JA
icon
- Ikonfarge: #ffffff
- Bilde/ikonplassering: Høyre
Deretter bytter du til Design-fanen og oppdaterer følgende:
Tekstens tittel og kropp
- Tittelfont: Poppins
- Skriftvekt: halvfet
- Tittel Tekstfarge: gjennomsiktig (Skrivebord), #ffffff (Hover)
- Tittel Tekststørrelse: 22px
- Brødtekstfarge: gjennomsiktig (skrivebord), #ffffff (hover)
Bokshøyde og skygge
Når teksten er tilpasset, gi modulen en høyde på 100 % og en boksskygge som følger:
- Høyde: 100 %
- Box Shadow: Se skjermbilde
- Horisontal posisjon: -12px
- Vertikal posisjon: 0px
Tilpasset CSS
For at trekkspillpanelene våre (eller Blurb-modulen) skal vokse og trekke seg sammen med resten av modulene, må vi legge til tilpasset CSS for å endre størrelsen på modulen med flex-grow.
Siden vi skal ha totalt 5 moduler som utgjør trekkspillet, legger vi til "flex:1" for standardtilstanden og endrer den til "flex:5" på hover-tilstanden.
Under kategorien Avansert legger du til følgende egendefinerte CSS til hoved Blurb-elementet:
kontor
flex:1;
position: relative !important;
transition: flex 800ms !important;
På sveve
flex:5;
position: relative !important;
transition: flex 800ms !important;
Legg deretter til følgende tilpassede CSS til Blurb-innholds-CSS:
kontor
position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
tablett
position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
Overløp og overgang
- Horisontalt overløp: Skjult
- Vertikal overløp: Skjult
- Overgangsvarighet: 400ms
- Overgangshastighetskurve: Lineær
Veldig bra! Det var en seriøs tilpasning av en Blurb-modul. Men den gode nyheten er at alt vi trenger å gjøre er å duplisere dem for å lage de gjenværende trekkspillpanelene.
Dupliserte oppsett for flere trekkspillpaneler
Hold musepekeren over presentasjonsmodulen og klikk på dobbeltikonet fire ganger for å lage totalt fem trekkspillpaneler (eller moduler).
Deretter oppdaterer du bakgrunnsbildene for hver av de nye blurbsene du dupliserte.
Endelig resultat
Nå som vi har gått gjennom alle trinnene, la oss se sluttresultatet.
Last ned DIVI nå!!!
konklusjonen
Denne responsive trekkspillglideren har virkelig noen unike elementer som gjør den morsom å bruke. Trekkspillpaneler utvides og trekker seg sømløst sammen ved museovergang uten uventede feil.
Og presentasjonsikoner endres ved sveving og på mobil for å øke brukeropplevelsen. Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
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.
...
