En trekkspillglidebryter er en morsom og attraktiv måte å vise på innhold på et begrenset sted. Trekkspillglidere er vanligvis laget av flere elementer (eller paneler) stablet horisontalt, som brettene 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 trekkspilleffekten av ekspansjon og sammentrekning oppnås.
I denne opplæringen vil jeg 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. Enhver modul kan brukes, men for dette eksemplet skal vi bruke blurb-moduler på en veldig kreativ måte for å lage en vakker trekkspill-glidebryter som ser (og fungerer) bra ut både på skrivebordet og på mobilen.
Sjekk det ut!
undersøkelsen
Her er en oversikt over hva vi skal bygge i denne opplæringen.
La oss starte opplæringen
Hva du trenger for å komme i gang
For å begynne, må du gjøre følgende:
- Hvis du ikke allerede har gjort det, installer og aktiver Divi-tema installert (eller programtillegget Divi Builder hvis du ikke bruker Divi-tema).
- Lag en ny side i WordPress og bruk Divi Builder til å redigere siden i front-enden (visuell konstruktør).
- Last ned omtrent 5 forskjellige bilder i biblioteket for å bruke som bakgrunnsbilder som trengs for opplæringen.
Etter det vil du ha et blankt lerret for å begynne å designe i Divi.
Lag en glidebryter med et responsivt trekkspill på Divi
Opprettelse av linjen
For å begynne, legger du til en rad med en kolonne i den vanlige delen.
Åpne deretter innstillingene for linjen og oppdater følgende:
- Rennesteinsbredde: 1
- Bredde: 100%
- Maksimal bredde: 800px
- Høyde: 400 px (desktop); 700 px (nettbrett og telefon)
Verdiene for bredde og maksimal bredde kan endres i henhold til dine behov. Trekkspillet skaleres og fungerer i hvilken som helst radbredde. Å sette en fast høyde er også veldig viktig for at designet skal fungere. Barneelementer (kolonne og moduler) vil ha en høyde på 100%. Derfor, hvis du ikke angir den faste høyden på raden, vil ikke underelementene ha høyde.
Kolonneparametere
Nå som radhøyden er angitt, åpner du kolonneinnstillingene og legger til følgende CSS-kode i hovedelementet:
kontor
display:flex;flex-direction: row;align-items:center;height: 100%;
tablett
flex-direction: column;
Flex-egenskapen vil justere trekkspillpaneler horisontalt på skrivebordet og vertikalt på nettbrettet og telefonen. Høyden på 100% vil tillate at modulene vi skal legge til også bruke høyden på 100%.
Opprette trekkspillpanel med modulene Sammendrag
Trekkspillglidebryteren kan bygges med alle typer moduler. Hvis vi ønsket det, kunne vi bruke en kombinasjon av forskjellige moduler til å fungere som et trekkspillpanel. Men for dette designet skal vi bruke Blurb Mods.
Begynn med å legge til en presentasjonsmodul til linjen.
Abstrakt moduldesign
Åpne sammendragsmodulinnstillingene og oppdater følgende:
Hold tittelen fiktiv og innhold fra kroppen. Vi kan alltid endre dette senere.
Oppdater deretter presentasjonsikonet som følger:
- Ikon (skrivebord): ikon som representerer en horisontal pilelinje (se skjermbilde)
- Ikon (svever): sjekkikon (se skjermbilde)
- Ikon (nettbrett og telefon): ikon som representerer en loddrett pilelinje (se skjermbilde)
contexte
Gi deretter blurb et bakgrunnsbilde og en gradientoverlegg som følger:
- Legg til et bakgrunnsbilde som er minst 1000 piksler bredt
- Posisjon til bakgrunnsbilde: midt til venstre
Legg deretter til et overliggende bakgrunnsoverlegg.
float
- Bakgrunn for venstre gradient (svevet): # 3e215b
- Bakgrunnsgradient til høyre Farge (svevet): rgba (0,0,0,0)
- Gradientretning: 90deg
- Plasser overgangen over bakgrunnsbildet: JA
icon
- Ikonfarge: #ffffff
- Bilde / plassering av ikoner: venstre
Gå deretter til fanen Design og oppdater følgende:
Tekstens tittel og kropp
- Tittel Font: Poppins
- Fonttittel: Semi Bold
- Tekstens tittelfarge: gjennomsiktig (stasjonær), #ffffff (svevet)
- Tekst Tittel Størrelse: 23px
- Tekstfarge: gjennomsiktig (stasjonær), #ffffff (svevet)
Høyde og kasseskygge
Når teksten er stilig, tilordner du modulen en høyde på 100% og en skyggekasse som følger:
- Høyde: 100%
- Box Shadow: Se skjermbilde
- Skyggen av boksen Horisontal stilling: -12px
- Skygge av boksen Vertikal posisjon: 0px
Blurb tilpasset CSS
For at trekkspillpanelene (eller presentasjonsmodulen) skal utvides og trekkes 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, så endrer vi den til "flex: 5" i svevetilstanden.
Under kategorien Avansert, legg til følgende tilpassede CSS, det viktigste Blurb-elementet:
kontor
flex:1;position: relative !important;transition: flex 800ms !important;
tablett
flex:5;
Legg deretter til følgende tilpassede css i CSS Blurb Content:
kontor
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
tablett
width: 100%;height: 100%;position: relative !important;
Overløp og overgang
- Horisontalt overløp: skjult
- Vertikal overløp: skjult
- Overgangs varighet: 400ms
- Overgangshastighetskurve: lineær
Vi vil! Det var en seriøs tilpasning av en presentasjonsmodul. Men den gode nyheten er at alt vi trenger å gjøre er å duplisere dem for å lage de gjenværende trekkspillpanelene.
Dupliser Blurbs for flere trekkspillpaneler
Hold markøren over presentasjonsmodulen og klikk på duplikatikonet fire ganger for å lage totalt fem trekkspillpaneler (eller moduler).
Oppdater deretter bakgrunnsbildene for hver av de nye uskarphetene du dupliserte.
Endelig resultat
avslutt~~POS=TRUNC tanker
Denne responsive trekkspillglidebryteren har virkelig noen unike elementer som gjør det morsomt å bruke. Trekkspillpaneler utvides og trekkes sammen mens de svever uten uventede problemer. Og presentasjonsikoner endres i svev og mobil for å øke UX. Håper dette designet vil være nyttig for ditt neste prosjekt.
