En harmonika-skyder er en sjov og attraktiv måde at vise på indhold i et begrænset rum. Harmonikaskydere består normalt af flere elementer (eller paneler) stablet vandret, som folderne på et gardin. Og når du holder markøren over et af panelerne, udvides det for at afsløre indhold mens de andre harmonikapaneler trækker sig sammen. Det er her harmonikaeffekten af ekspansion og sammentrækning opnås.
I denne tutorial vil jeg vise dig, hvordan du opretter en lydhør harmonika-skyder ind Divi bruger kun CSS. For at gøre dette vil vi bruge flere moduler Divi til at fungere som harmonikapaneler. Ethvert modul kan bruges, men i dette eksempel vil vi bruge blurb-moduler på en meget kreativ måde til at skabe en smuk harmonika-skyder, der ser (og fungerer) godt ud både på skrivebordet og på mobilen.
Tjek det ud!
undersøgelse
Her er en oversigt over, hvad vi vil bygge i denne tutorial.
Lad os starte selvstudiet
Hvad du behøver for at komme i gang
For at begynde skal du gøre følgende:
- Hvis du ikke allerede har gjort det, skal du installere og aktivere Divi-tema installeret (eller plugin'et Divi Builder, hvis du ikke bruger Divi-tema).
- Opret en ny side i WordPress og brug Divi Builder til at redigere siden i front-end (visuel konstruktør).
- Download omkring 5 forskellige billeder i biblioteket til brug som baggrundsbilleder, der er nødvendige til tutorial.
Derefter har du et tomt lærred til at begynde at designe i Divi.
Opret en skyder med en lydhør harmonika på Divi
Oprettelse af linjen
For at begynde skal du tilføje en række af en kolonne til det almindelige afsnit.
Åbn derefter indstillingerne for linjen, og opdater følgende:
- Tagrendebredde: 1
- Bredde: 100%
- Maksimal bredde: 800px
- Højde: 400 px (desktop); 700 pixel (tablet og telefon)
Værdierne for bredde og maksimal bredde kan ændres efter dine behov. Harmonikaen skaleres og fungerer i enhver rækkebredde. At indstille en fast højde er også meget vigtigt for designet at arbejde. Underordnede elementer (kolonne og moduler) har en højde på 100%. Derfor, hvis du ikke indstiller den faste højde på rækken, har de underordnede elementer ikke en højde.
Kolonneparametre
Nu hvor rækkehøjden er indstillet, skal du åbne kolonneindstillingerne og tilføje følgende CSS-kode til hovedelementet:
kontor
display:flex;flex-direction: row;align-items:center;height: 100%;
tablet
flex-direction: column;
Flex-egenskaben justerer harmonika-paneler vandret på skrivebordet og lodret på tablet og telefon. Højden på 100% gør det også muligt for de moduler, som vi skal tilføje, at bruge højdeværdien på 100%.
Oprettelse af trekantpanel med modulerne Oversigt
Harmonika-skyderen kan bygges ved hjælp af enhver type modul. Hvis vi ville, kunne vi bruge en kombination af forskellige moduler til at fungere som et harmonika-panel. Men til dette design bruger vi Blurb Mods.
Start med at tilføje et præsentationsmodul til linjen.
Abstrakt moduldesign
Åbn indstillingerne for oversigtsmodulet, og opdater følgende:
Hold titlen fiktiv og indhold fra kroppen. Vi kan altid ændre dette senere.
Opdater derefter præsentationsikonet som følger:
- Ikon (desktop): ikon, der repræsenterer en vandret pilelinje (se skærmbillede)
- Ikon (svæver): afkrydsningsikon (se skærmbillede)
- Ikon (tablet og telefon): ikon, der repræsenterer en lodret pilelinje (se skærmbillede)
contexte
Giv derefter blurb et baggrundsbillede og en gradientoverlay som følger:
- Tilføj et baggrundsbillede, der er mindst 1000 pixels bredt
- Baggrundsbilledets placering: midt til venstre
Derefter tilføjes en gradient baggrundsoverlay.
float
- Baggrund med venstre gradient (hover): # 3e215b
- Baggrundsgradient til højre Farve (hover): rgba (0,0,0,0)
- Gradientretning: 90deg
- Placer gradienten over baggrundsbilledet: YES
ikon
- Ikonfarve: #ffffff
- Billede / placering af ikoner: venstre
Gå derefter til fanen Design og opdater følgende:
Tekstens titel og krop
- Titeltype: Poppins
- Skrifttitel: Semi fed
- Teksttitel Farve: gennemsigtig (desktop), #ffffff (hover)
- Tekst Titel Størrelse: 23px
- Tekstfarve på krop: gennemsigtig (desktop), #ffffff (hover)
Højde og kasse skygge
Når teksten er stilfuld, skal du tildele modulet en højde på 100% og en skyggekasse som følger:
- Højde: 100%
- Box Shadow: Se skærmbillede
- Kassens skygge Vandret position: -12px
- Skygge af boksen Lodret position: 0px
Blurb tilpasset CSS
For at vores harmonika-paneler (eller præsentationsmodul) skal udvides og trækkes sammen med resten af modulerne, er vi nødt til at tilføje tilpasset CSS for at ændre størrelsen på modulet med flex-grow. Da vi vil have i alt 5 moduler, der udgør harmonikaen, tilføjer vi "flex: 1" for standardtilstanden, så ændrer vi den til "flex: 5" i svævetilstanden.
Under fanen Avanceret skal du tilføje følgende tilpassede CSS, det vigtigste Blurb-element:
kontor
flex:1;position: relative !important;transition: flex 800ms !important;
tablet
flex:5;
Føj derefter følgende brugerdefinerede css til CSS Blurb Content:
kontor
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
tablet
width: 100%;height: 100%;position: relative !important;
Overløb og overgang
- Vandret overløb: skjult
- Lodret overløb: skjult
- Overgangs varighed: 400ms
- Overgangshastighedskurve: lineær
Godt! Det var en seriøs tilpasning af et præsentationsmodul. Men den gode nyhed er, at alt, hvad vi skal gøre, er at duplikere dem for at skabe de resterende harmonikapaneler.
Dupliker Blurbs for flere harmonika paneler
Hold markøren over præsentationsmodulet, og klik på duplikatikonet fire gange for at oprette i alt fem harmonikapaneler (eller moduler).
Opdater derefter baggrundsbillederne for hver af de nye blurbs, du duplikerede.
Endelig resultat
endelige tanker
Denne lydhøre harmonika skyder har virkelig nogle unikke elementer, der gør det sjovt at bruge. Harmonika-paneler udvides og trækker sig sammen, mens de svæver uden uventede problemer. Og præsentationsikoner ændres i svæve og mobil for at øge UX. Håber dette design vil være nyttigt til dit næste projekt.
