Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

Bunntekstskuffer er nyttige tillegg til ethvert nettsted, da de lagrer ekstra innhold som er lett tilgjengelig for brukere. Bunntekstskuffer er nettinnholdsbeholdere (som en Divi-seksjon) som kan åpnes og lukkes ved å klikke på en knapp eller sveve over den. Det er som å ha litt stash for premiuminnhold.

I denne opplæringen skal vi designe en flytende bunntekstskuff i Divi. Vi legger til bunntekstskuffen i det generelle bunntekstområdet for nettstedsmal, slik at bunntekstskuffen er tilgjengelig på nettstedet med det vanlige bunntekstinnholdet.

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 malen erstatter standardnettmalen (hvis du har en) på Divi-nettstedet. Vi foreslår at du legger det til på et testnettsted, slik at du ikke ødelegger noe på et live nettsted.

Hvis du vil importere den faste bunntekstmodellen til ditt eget nettsted, pakker du ned 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 velger du JSON-filen du nettopp pakket ut, og velger alternativet "Last ned sikkerhetskopi før import", i tilfelle du tidligere hadde noe i standardnettmalen du ikke hadde. ikke ønsket å erstatte.

Klikk deretter på Import-knappen.

Importer modell divi

Til slutt lagrer du endringene i temageneratoren og viser en direkteside for å se den faste bunntekstlinjen.

Lagre endringene i divi-oppsettet

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.

Valg av Divi-editor

Velg deretter alternativet "Bygg global bunntekst" fra rullegardinlisten.

Legg til en bunntekst for divi-modell

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".

Velg forhåndskonstruert modell divi

I popup-vinduet Last fra bibliotek, finn layoutet for destinasjonssiden for skrivesaker. Klikk deretter på "Bruk dette oppsettet".

Bruk en divi-modell

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.

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg lage Enkelt og gratis ethvert nettsted eller bloggdesign med et profesjonelt utseende. Slutt å betale mye for et nettsted du kan gjøre selv.

Slett unødvendig seksjon

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.

Divi bunntekst

Endre ordlyden i den nedre delen for å lese "Bunntekstskuff". Dette vil være delen vi vil bruke som innhold i bunntekstskuffen vår.

Endre etiketten på bunntekst

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.

fast fot skuff

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.

Utvalg layout divi

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
Avstand mellom konfiurasjonsdeler

Seksjonspolstring

Åpne deretter innstillingene i delen "Bunntekstskuff" og oppdater polstring som følger:

Konfigurasjon av avstand mellom divisjoner

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.

Bunntekst divi
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.

Velg ikon bunntekst skuff divi
Blurb-design

Gi deretter presentasjonsteksten som følger:

  • Bakgrunnsfarge: # 081540
Endre divi bakgrunn

Ønsker du å selge produktene dine på internett?

Last ned WooCommerce gratis, de beste e-handelspluginene for å selge dine fysiske og digitale produkter på WordPress og enkelt lage din nettbutikk. Perfekt for nybegynnere.

Oppdater deretter designparametrene som følger:

  • Ikonfarge: #eeeeee
  • Sirkelikon: JA
  • Sirkelfarge: # 081540
  • Bruk ikonstørrelse på ikonet: JA
  • Ikonets skriftstørrelse: 17 piksler
Tilpass blurb divi-knapp
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.

Rediger design av divi-knappen
Uthevet posisjon

Gi deretter presentasjonsteksten en absolutt plassering øverst i midten av delen.

  • Posisjon: Absolutt
  • Sted: Top Center
Endre divisjonsknappens posisjon
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
Returner divi-knappen

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
Definer en divi-velger

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.

Transformer seksjon divi

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
Legg til klasse har transformasjonsdivi

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
Endre posisjon på divi-hjørnet

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.

Skjul seksjonen på mobilen

Å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.

Kontroller sikt diviseksjonen

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.

Legg til modulkode

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 );   
Legg til divi-kodemodul

Lagre endringer

Husk å lagre oppsettet før du avslutter redaktøren.

Lagre divi-modifikasjoner

Lagre også endringene i temageneratoren.

Lagre endringer

Endelig resultat

Nå kan vi gå til hvilken som helst side på nettstedet ditt for å se sluttresultatet.

avslutt~~POS=TRUNC tanker

Håper den flytende bunntekstskuffen hjelper deg med å markedsføre innholdet på en morsom og tilgjengelig måte. Som en hvilken som helst 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.

Oversatt fra: Elegant Temaer

0 aksjer
del
tweet
Enregistrer