Nederste skuffer er nyttige tillegg til evt nettstedet Web, ettersom de lagrer tilleggsinnhold lett tilgjengelig for brukere. Bunntekstskuffer er nettinnholdsbeholdere (som en Divi-seksjon) som kan åpnes og lukkes ved å klikke på en knapp eller holde musepekeren over dem. Det er som å ha litt stash for premium-innhold.
I denne opplæringen vil vi designe en flytende bunntekstskuff i Divi. Vi vil legge til bunntekstskuffen til det globale bunntekstområdet i nettstedsmal slik at bunntekstskuffen er tilgjengelig for hele nettstedet med normalt bunntekstinnhold.
Med prosessen vi skal bruke, kan hvilken som helst Divi-seksjon (og innholdet) konverteres til en bunntekstskuff på få minutter.
Slik legger du til bunntekstmalen på ditt Divi-nettsted
Å legge til denne modellen vil erstatte nettstedsmal som standard (hvis du har en) på Divi-siden din. Vi foreslår at du legger den til på en testside slik at du ikke roter til noe på en live-side.
For å importere malen for den faste bunnteksten på egen hånd nettstedet Web, pakk ut den nedlastede zip-filen for å få tilgang til JSON-filen.
Gå deretter til WordPress-dashbordet og gå til Divi> Theme Builder.
Klikk deretter på bærbarhetsikonet øverst til høyre på siden.
I portabilitetsvinduet, velg JSON-filen du nettopp pakket ut og velg alternativet "Last ned sikkerhetskopi før import", i tilfelle du tidligere hadde noe i nettstedsmal standard som du ikke ønsket å overstyre.
Klikk deretter på Import-knappen.
Til slutt lagrer du endringene i temageneratoren og viser en direkteside for å se den faste bunntekstlinjen.
Nå videre til veiledningen, ok?
Del 1: Legge til en global bunntekst
Divi-temageneratoren lar deg erstatte standard bunntekst med en ny ved å oppdatere standard nettstedsmalen.
For å lage en global bunntekst, gå til WordPress-dashbordet og gå til Divi> Theme Builder. Klikk deretter på "Legg til global bunntekst" -feltet inne i standard nettstedmal.
Velg deretter alternativet "Bygg global bunntekst" fra rullegardinlisten.
Legg til et forhåndsdefinert oppsett i en global bunntekstlayout
Dette vil distribuere Model Layout Editor hvor du umiddelbart blir bedt om de tre valgene for hvordan du vil begynne å bygge. Velg alternativet "Velg et forhåndsdefinert oppsett".
I popup-vinduet Last fra bibliotek, finn layoutet for destinasjonssiden for skrivesaker. Klikk deretter på "Bruk dette oppsettet".
Fjern uønsket innhold fra forhåndsinnsatt layout
Når oppsettet er lastet inn i redigeringsprogrammet, utvider du popup-boksen Lag ved å klikke på lagikonet i innstillingsmenyen. Slett deretter alle deler av oppsettet unntatt de to siste.
Flytt og merk de to seksjonene
Når seksjonene er fjernet, bør du ha to seksjoner, en med tittelen "Bunntekst" og den andre med tittelen "Hvordan det fungerer". Flytt "Bunntekst" -delen til toppen av oppsettet.
Endre ordlyden i den nedre delen for å lese "Bunntekstskuff". Dette vil være delen vi vil bruke som innhold i bunntekstskuffen vår.
Del 2: Lage den faste bunntekstskuffen
Nå som vi har utpekt en av seksjonene som bunntekst og den andre som bunntekstskuff, er vi klare til å begynne å bygge vår faste bunntekstskuff. La oss starte med å lage blurb-ikonet som vi bruker til å veksle bunntekstskuffen.
Opprettelse av bunntekstknappen
Legg til en ny linje
I den nederste bunntekstdelen legger du til en ny rad i en kolonne.
Merk den nye raden "Skuffeknapp" fordi dette er raden som inneholder knappen som brukes til å veksle skuffen åpen og lukket. Flytt deretter linjen til toppen av seksjonen.
Polstring av rad
Før du legger til en modul, åpner du radinnstillingene og oppdaterer polstringen som følger:
- Polstring: 0px høy, 0px lav
Seksjonspolstring
Åpne deretter innstillingene i delen "Bunntekstskuff" og oppdater polstring som følger:
For å lage den klikkbare knappen som bytter bunntekstskuffen, skal vi bruke en blurb-modul med et ikon. Og vi skal gi den en unik vanndråpeform ved å kombinere den firkantede formen på Blurb pod-beholderen med sirkelikonet.
Slik gjør du det.
Legg til en Blurb-modul
Legg til en presentasjonstekstmodul til linjen "Skuffeknapp" øverst i seksjonen.
Unngå innhold / ikon
Fjern deretter standard tittel og kroppsinnhold og velg pilikonet som peker mot øverste venstre hjørne (se skjermbilde). Vi bruker det delvis roterte ikonet fordi vi skal rotere det senere.
Blurb-design
Gi deretter presentasjonsteksten som følger:
- Bakgrunnsfarge: # 081540
Oppdater deretter designparametrene som følger:
- Ikonfarge: #eeeeee
- Sirkelikon: JA
- Sirkelfarge: # 081540
- Bruk ikonstørrelse på ikonet: JA
- Ikonets skriftstørrelse: 17 piksler
Presentasjonens tekststørrelse
Gi nå modulen en høyde og en bredde som følger:
- Bredde: 30px
- Høyde: 30px
Dette vil føre til at sirkelikonet flyter over i tekstbeholderen for å skape vanndråpeformen.
Uthevet posisjon
Gi deretter presentasjonsteksten en absolutt plassering øverst i midten av delen.
- Posisjon: Absolutt
- Sted: Top Center
Innflyt transformasjonsinnstillinger
Nå kan vi bruke transformasjonsalternativene til å rotere uklarheten / ikonet opp og plassere den rett over seksjonsbeholderen. Nå når vi skjuler delen under nettleservinduet, vil ikonet forbli synlig / klikkbart.
Oppdater følgende elementer:
- Transformer Translate X-akse: -50%
- Transformer Y-akse oversettelse: -250%
- Transformer Z-aksens rotasjon: -45 grader
Fjern deretter standardikonanimasjonen:
- Bilde / ikonanimasjon: Ingen animasjon
Vi skal bruke JQuery til å veksle skuffen, så vi må målrette teksten / ikonet som et klikkbart element med en CSS-klasse som vi bruker senere i koden. Legg til følgende CSS-klasse:
- CSS-klasse: målskuff
Innstillinger for bunntekstskuff
Nå skal vi skjule delen "Bunntekstskuff" ved hjelp av alternativet translate transform. Åpne seksjonsinnstillinger og oppdater følgende:
- Transformer Translate Y-akse: 100%
Det fine med å bruke transformasjonen her er at prosentverdiene er basert på den faktiske størrelsen på varen. Dermed vil 100% på Y-aksen være direkte i forhold til høyden på seksjonen (nomatter hva den er til enhver tid). Med andre ord vil elementet bli flyttet ned den nøyaktige avstanden som sin egen høyde.
For å bringe bunntekstskuffen tilbake til syne, trenger vi å reversere transformasjonsoversettelsen vi nettopp la til i delen. For å gjøre dette må vi målrette elementet med en CSS-klasse og deaktivere transformasjonstransformasjonen ved å klikke på ikonet (bringe hele delen tilbake til sin opprinnelige posisjon).
Legg til en CSS-klasse i bunntekstdelen
Under den avanserte fanen legger du til følgende CSS-klasse:
- CSS-klasse: has-transform
Bunntekstseksjon Fast stilling
For det siste trinnet, må vi fikse bunntekstskuffen slik at den (med ikonet) flyter nederst i nettleservinduet.
Oppdater plasseringen til bunntekstdelen som følger:
- Posisjon: fast
- Sted: nederst til venstre
- Z-indeks: 13
Slå av mobilinnhold
Fordi du vil ha en begrenset mengde bunntekstskuffinnhold som passer til både nettbrett og telefon (på grunn av begrenset skjermhøyde), må du deaktivere / skjule ikke-viktige gjenstander fra skjermen. I dette eksemplet skal vi skjule den midterste raden i seksjonsoppsettet.
Åpne innstillingene fra andre til siste rad i delen "Bunntekstskuff". Under den avanserte fanen oppdaterer du synlighetsalternativet for å slå av linjen på telefonen og nettbrettet.
Legger til tilpasset kode
For å legge til klikk- og vekselfunksjonaliteten i bunntekstskuffen, må vi legge til tilpasset CSS og JQuery på siden. For å gjøre dette, opprett en ny kodemodul under Blurb-modulen som brukes til knappen.
Lim deretter inn 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 );
Lagre endringer
Husk å lagre oppsettet før du avslutter redaktøren.
Lagre også endringene i temageneratoren.
Endelig resultat
Nå kan vi gå til hvilken som helst side på din nettstedet Web for å se det endelige resultatet.
avslutt~~POS=TRUNC tanker
Håper den flytende bunntekstskuffen vil hjelpe deg fremme innhold på en morsom og tilgjengelig måte. Som enhver skuff kan du fylle den med omtrent alt du kan tenke deg.
Andre ressurser
Her er en liste over opplæringsprogrammer som kan hjelpe deg med å oppnå mer med de interne funksjonene i Divi.
- Hvordan lage en verktøykasse for tema på Divi
- Hvordan lage en animert salgsfremmende seksjon om Divi
- Hvordan tilpasse rutenett på Divi
Oversatt fra: Elegant Temaer
