Gå til hovedindhold

Sådan opretter du en lydhør harmonikaslider i Divi

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

En harmonika-skyder er en sjov og engagerende måde at vise indhold på et lille rum. Harmonika skyderne består normalt af flere elementer (eller paneler) stablet vandret, som foldene på et gardin. Og når du svæver over et af panelerne, udvides det til at afsløre indholdet, når de andre harmonika-paneler trækker sig sammen. Det er her, harmonikaeffekten af ​​udvidelse og kontrahering opnås.

I denne vejledning viser jeg dig, hvordan du opretter en lydhør harmonika-markør i Divi ved kun at bruge CSS. For at gøre dette bruger vi flere Divi-moduler til at fungere som harmonika-paneler. Enhver mod kan bruges, men til dette eksempel skal vi bruge blurb mods på en meget kreativ måde til at skabe en smuk harmonika-skyder, der ser godt ud (og fungerer) på både desktop og desktop. på mobil.

Tjek det ud!

undersøgelse

Her er en oversigt over, hvad vi vil bygge i denne tutorial.

Opret en skyder med et harmonika på divi

Lad os starte selvstudiet

Hvad du behøver for at komme i gang

For at begynde skal du gøre følgende:

  1. Hvis du endnu ikke har gjort det, skal du installere og aktivere det installerede Divi-tema (eller Divi Builder-pluginnet, hvis du ikke bruger Divi-temaet).
  2. Opret en ny side i WordPress og brug Divi Builder til at redigere siden i front-end (visuel konstruktør).
  3. 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.

Vælg et divi-layout

Å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%;

Tilføj en divi css-kode

tablet

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

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.

Tilføj et divi-opsummeringsmodul

Abstrakt moduldesign

Åbn indstillingerne for oversigtsmodulet, og opdater følgende:

Behold den fiktive titel og kropsindhold. Vi kan altid ændre det senere.

Opdater derefter præsentationsikonet som følger:

  • Ikon (desktop): ikon, der repræsenterer en vandret pilelinje (se skærmbillede)
Konfigurationsikoner divi
  • Ikon (svæver): afkrydsningsikon (se skærmbillede)
Brug ikoner, når du svæver over divi
  • Ikon (tablet og telefon): ikon, der repræsenterer en lodret pilelinje (se skærmbillede)
skyderen trekkspil divi lydhør

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
Abstrakt konfiguration af divi baggrund

Derefter tilføjes en gradient baggrundsoverlay.

float

Leder du efter de bedste WordPress-temaer og plugins?

Download de bedste plugins og WordPress-temaer på Envato og nemt oprette dit websted. Allerede mere end 49.720.000 downloads. [EXCLUSIVE]

  • Baggrund med venstre gradient (hover): # 3e215b
  • Baggrundsgradient til højre Farve (hover): rgba (0,0,0,0)
  • Gradientretning: 90deg
  • Placer gradienten over baggrundsbilledet: YES
skyderen trekkspil divi lydhør

ikon

  • Ikonfarve: #ffffff
  • Billede / placering af ikoner: venstre
Rediger divi-ikonmodulet

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)
Divi resume modul skrifttypekonfiguration

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
Rediger størrelsen på divi-opsummeringsmodulet

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;

Divi-opsummeringsparameter

Føj derefter følgende brugerdefinerede css til CSS Blurb Content:

kontor

position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;

Rediger typografien for divi-tekstmodulet

tablet

width: 100%;height: 100%;position: relative !important;

Opret nemt din online butik

Download gratis WooCommerce, de bedste e-handels-plugins til at sælge dine fysiske og digitale produkter på WordPress. [Anbefalet]

CSS-kode til opsummerende modulindhold

Overløb og overgang

  • Vandret overløb: skjult
  • Lodret overløb: skjult
  • Overgangs varighed: 400ms
  • Overgangshastighedskurve: lineær
Divi opsummeringsmodul overløbskonfiguration

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

Opret en skyder med et harmonika på divi

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.

Denne artikel indeholder kommentarer 0

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen
1 aktier
andel1
tweet
Tilmeld