Gå til hovedindhold

Sådan opretter du animerede skuffer på 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]

Sidefodskuffer er nyttige tilføjelser til ethvert websted, da de gemmer yderligere indhold, der er let tilgængeligt for brugerne. Sidefodskuffer er webindholdsbeholdere (som et Divi-afsnit), der kan åbnes og lukkes ved at klikke på en knap eller svæve over den. Det er som at have en lille smule til premium-indhold.

I denne vejledning skal vi designe en flydende fodskuffe i Divi. Vi vil føje sidefodsskuffen til det overordnede webstedsskabelonfodområde, så sidefodsskuffen er tilgængelig overalt med det normale sidefodsindhold.

Med den proces, vi skal bruge, kan ethvert Divi-afsnit (og dets indhold) konverteres til en sidefodskuffe på få minutter.

Sådan føjes skabelon til sidefodsskuffe til dit Divi-sted

Tilføjelse af denne skabelon erstatter standardwebsite-skabelonen (hvis du har en) på dit Divi-sted. Vi foreslår, at du føjer det til et testwebsted, så du ikke ødelægger noget på et live websted.

Hvis du vil importere den faste sidefods-skuffemodel til dit eget websted, skal du pakke den downloadede zip-fil ud for at få adgang til JSON-filen.

Gå derefter til WordPress-dashboardet, og gå til Divi> Theme Builder.

Klik derefter på bærbarhedsikonet øverst til højre på siden.

I portabilitetsvinduet skal du vælge den JSON-fil, du lige har pakket ud, og vælge 'Download backup inden import', bare hvis du tidligere havde noget i standardwebsite-skabelonen, som du ikke havde. ikke ville erstatte.

Klik derefter på knappen Importer.

Importer model divi

Til sidst skal du gemme ændringerne i temageneratoren og vise en live side for at se den faste sidefodsbjælke.

Gem ændringer i divi-layout

Nu videre til vejledningen, okay?

Del 1: Tilføjelse af en global sidefod

Divi-temegeneratoren giver dig mulighed for at udskifte standardfoden med en ny ved at opdatere standardwebstedskabelonen.

For at oprette en global sidefod skal du gå til WordPress-dashboardet og gå til Divi> Theme Builder. Klik derefter på "Tilføj global sidefod" plads inde i standardwebsite skabelon.

Valg af Divi-editor

Vælg derefter indstillingen "Build Global Footer" fra rullelisten.

Tilføj en divi-modelfod

Føj et foruddefineret layout til et globalt sidefodslayout

Dette vil implementere Model Layout Editor, hvor du straks bliver bedt om de tre valg for, hvordan du vil begynde at bygge. Vælg indstillingen "Vælg et foruddefineret layout".

Vælg forudkonstrueret divi-model

I pop op-vinduet Indlæs fra bibliotek skal du finde layoutet til landingsside til papirvarer. Klik derefter på "Brug dette layout".

Brug en divi-model

Fjern uønsket indhold fra forhåndsindstillet layout

Når layoutet er indlæst i editoren, skal du udfolde pop op-boksen Lag ved at klikke på lagikonet i indstillingsmenuen. Slet derefter alle sektioner af layoutet undtagen de sidste to.

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]

Slet unødvendigt afsnit

Flyt og mærk de to sektioner

Når sektionerne er fjernet, skal du have to sektioner, en med titlen "Sidefod" og den anden med titlen "Sådan fungerer det". Flyt afsnittet "Sidefod" til toppen af ​​layoutet.

Divi sidefod

Skift ordlyden i det nederste afsnit for at læse "Fodskuffe". Dette vil være det afsnit, vi vil bruge som indholdet af vores sideskuffe.

Rediger etiket på sidefodsfod

Del 2: Oprettelse af den faste sidefodsskuffe

Nu hvor vi har udpeget en af ​​sektionerne som sidefod og den anden som sidefodskuffe, er vi klar til at begynde at bygge vores faste fodskuffe. Lad os starte med at oprette blurb-ikonet, som vi bruger til at skifte sidefodsskuffen.

Oprettelse af knap til bundtekst

Tilføj en ny linje

I den nederste fodsektion skal du tilføje en ny række til en kolonne.

fast fodskuffe

Mærk den nye række "Skuffeknap", fordi dette er rækken, der indeholder den knap, der bruges til at skifte skuffen åben og lukket. Flyt derefter linjen til toppen af ​​sektionen.

Division til valg af layout

Polstring i række

Inden du tilføjer et modul, skal du åbne rækkeindstillingerne og opdatere polstringen som følger:

  • Polstring: 0px høj, 0px lav
Konfiuration divi afstand

Sektion polstring

Åbn derefter indstillingerne i afsnittet "Footer skuffe", og opdater polstret som følger:

Konfiguration af afstand for divisektion

For at oprette den klikbare knap, der skifter sidefodsskuffen, skal vi bruge et blurb-modul med et ikon. Og vi giver det en unik vanddråbeform ved at kombinere den firkantede form af Blurb-podebeholderen med cirkelikonet.

Sådan gør du.

Tilføj et Blurb-modul

Føj et præsentationstekstmodul til linjen "Skuffeknap" øverst i sektionen.

Sidefod skuffedivi
Blæs indhold / ikon

Fjern derefter standardtitlen og kropsindholdet, og vælg pilikonet, der peger på øverste venstre hjørne (se skærmbillede). Vi bruger det delvist roterede ikon, fordi vi skal rotere det senere.

Vælg ikon sidefod skuffedivi
Blurb Design

Giv derefter præsentationsteksten som følger:

  • Baggrundsfarve: # 081540
Rediger divi baggrund

Opdater derefter designparametrene som følger:

  • Ikonfarve: #eeeeee
  • Cirkelikon: JA
  • Cirkelfarve: # 081540
  • Brug ikonets skriftstørrelse: JA
  • Ikonets skriftstørrelse: 17 pixels
Tilpas blurb divi-knap
Præsentationstekststørrelse

Giv modulet nu en højde og en bredde som følger:

  • Bredde: 30px
  • Højde: 30px

Dette får cirkelikonet til at løbe over i tekstbeholderen for at skabe vanddråbeformen.

Rediger design af divi-knap
Blurb position

Giv derefter præsentationsteksten en absolut position øverst i midten af ​​sektionen.

  • Position: Absolut
  • Placering: Top Center
Rediger divi-knapposition
Indstil transformationsindstillinger

Nu kan vi bruge transformeringsindstillingerne til at rotere blurb / ikonet op og placere det lige over sektionsbeholderen. Når vi nu skjuler sektionen under browservinduet, forbliver ikonet synligt / klikbart.

Opdater følgende punkter:

  • Transformer Translate X-akse: -50%
  • Transform Y-akse translation: -250%
  • Transformer Z-aksens rotation: -45 grader

Fjern derefter standardikonanimationen:

  • Billede / ikonanimation: Ingen animation
Retur divi-knap

Vi bruger JQuery til at skifte skuffe, så vi er nødt til at målrette mod teksten / ikonet som et klikbart element med en CSS-klasse, som vi bruger senere i koden. Tilføj følgende CSS-klasse:

  • CSS-klasse: målskuffe
Definer en divi-vælger

Indstillinger for sidefodsskuffesektion

Nu skal vi skjule afsnittet "Sidefodsskuffe" ved hjælp af indstillingen translate transform. Åbn sektionsindstillinger, og opdater følgende:

  • Transformer Translate Y-akse: 100%

Det smukke ved at bruge transformationen her er, at procentværdierne er baseret på elementets faktiske størrelse. Således vil 100% på Y-aksen være direkte i forhold til sektionens højde (nomatter hvad den er til enhver tid). Med andre ord flyttes elementet ned den nøjagtige afstand som sin egen højde.

Transform sektionsdel

For at bringe "Footer Drawer" tilbage til syne, bliver vi nødt til at vende den transformationsoversættelse, vi lige har tilføjet til sektionen. For at gøre dette skal vi målrette elementet med en CSS-klasse og deaktivere oversættelsestransformationen ved at klikke på ikonet (bringe hele sektionen tilbage til sin oprindelige position).

Føj en CSS-klasse til sidefodsskuffesektionen

Under den avancerede fane skal du tilføje følgende CSS-klasse:

  • CSS-klasse: has-transform
Tilføj klasse har transformation divi

Sidefodsskuffe Fast position

For det sidste trin er vi nødt til at lave sidefodsskuffen fast, så den (med ikonet) flyder i bunden af ​​browservinduet.

Opdater placeringen i afsnittet "Sidefodsskuffe" som følger:

  • Position: fast
  • Placering: nederst til venstre
  • Z-indeks: 13
Rediger position på divi-hjørnet

Sluk for mobilindhold

Da du har en begrænset mængde sidefodsskuffeindhold, der passer til både tablet og telefon (på grund af begrænset skærmhøjde), bliver du nødt til at slå fra / skjule ikke-væsentlige emner fra skærmen. I dette eksempel skal vi skjule den midterste række i sektionslayoutet.

Skjul sektionen på mobil

Åbn indstillingerne fra anden til sidste række i afsnittet "Sidefodskuffe". Under den avancerede fane skal du opdatere synlighedsindstillingen for at slukke for linjen på telefonen og tabletten.

Kontrol af synlighedsafsnit

Tilføjelse af tilpasset kode

For at tilføje klik- og skiftefunktionaliteten i sidefodsskuffen skal vi tilføje tilpasset CSS og JQuery til siden. For at gøre dette skal du oprette et nyt kodemodul under Blurb-modulet, der bruges til knappen.

Tilføj modulkode

Indsæt derefter følgende kode i kodeområdet:

.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;}  .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation');      $('.has-transform').toggleClass('toggle-drawer-animation');   });    });})( jQuery );   
Tilføj divi-kodemodul

Gem ændringer

Husk at gemme layoutet, før du afslutter editoren.

Gem divi-ændringer

Gem også ændringerne i temageneratoren.

Gem ændringer

Endelig resultat

Nu kan vi gå til en hvilken som helst side på dit websted for at se slutresultatet.

endelige tanker

Håber, at den flydende sideskuff hjælper dig med at promovere indhold på en sjov og tilgængelig måde. Som enhver skuffe kan du fylde den med næsten alt, hvad du kan tænke på.

Andre ressourcer

Her er en liste over tutorials, der kan hjælpe dig med at udføre mere med Divi's interne funktioner.

Oversat fra: Elegant Temaer

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
0 aktier
andel
tweet
Tilmeld