Nederste skuffer er nyttige tilføjelser til evt Websted, da de gemmer ekstra indhold, der er let tilgængeligt for brugere. Sidefodskuffer er webindholdsbeholdere (som en Divi-sektion), der kan åbnes og lukkes ved at klikke på en knap eller holde musen over dem. Det er som at have lidt gemmer til premium-indhold.
I denne tutorial vil vi designe en svævende footer-skuffe i Divi. Vi tilføjer sidefodskuffen til det globale sidefodsområde i hjemmeside skabelon så sidefodskuffen er tilgængelig for hele webstedet med normalt sidefodindhold.
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 model vil erstatte hjemmeside skabelon som standard (hvis du har en) på din Divi-side. Vi foreslår, at du tilføjer det til en testside, så du ikke roder noget ud på et live-websted.
For at importere skabelonen til den faste sidefodskuffe på egen hånd Websted, udpak download-zip-filen 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 før import", bare hvis du tidligere har haft noget i hjemmeside skabelon standard, som du ikke ønskede at tilsidesætte.
Klik derefter på knappen Importer.
Til sidst skal du gemme ændringerne i temageneratoren og vise en live side for at se den faste sidefodsbjælke.
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.
Vælg derefter indstillingen "Build Global Footer" fra rullelisten.
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".
I pop op-vinduet Indlæs fra bibliotek skal du finde layoutet til landingsside til papirvarer. Klik derefter på "Brug dette layout".
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.
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.
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.
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.
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.
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
Sektion polstring
Åbn derefter indstillingerne i afsnittet "Footer skuffe", og opdater polstret som følger:
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.
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.
Blurb-design
Giv derefter præsentationsteksten som følger:
- Baggrundsfarve: # 081540
Opdater derefter designparametrene som følger:
- Ikonfarve: #eeeeee
- Cirkelikon: JA
- Cirkelfarve: # 081540
- Brug ikonets skriftstørrelse: JA
- Ikonets skriftstørrelse: 17 pixels
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.
Blurb position
Giv derefter præsentationsteksten en absolut position øverst i midten af sektionen.
- Position: Absolut
- Placering: Top Center
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
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
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.
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
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
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.
Å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.
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.
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 );
Gem ændringer
Husk at gemme layoutet, før du afslutter editoren.
Gem også ændringerne i temageneratoren.
Endelig resultat
Nu kan vi gå til enhver side på din Websted for at se det endelige resultat.
endelige tanker
Håber den svævende footer-skuffe vil hjælpe dig fremme indhold på en sjov og tilgængelig måde. Som enhver skuffe kan du fylde den med stort set 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.
- Sådan opretter du en temaværktøjskasse på Divi
- Sådan opretter du et animeret salgsfremmende afsnit om Divi
- Sådan tilpasses gitre på Divi
Oversat fra: Elegant Temaer
