Slik legger du til en dynamisk nettstedstittel og -logan i en global Divi-overskrift

Slik legger du til en dynamisk nettstedstittel og -logan i en global Divi-overskrift

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {bakgrunnsfarge: # f8f6f6! viktig;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0p ! viktig; kant-bunn-bredde: 0px! viktig; polstring-bunn: 0px! viktig;} "] [vc_column_text]

Divi: det enkleste WordPress-temaet som skal brukes

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Å vite hvordan du legger til en dynamisk sidetittel og et slagord i en Divi global overskrift, vil være nyttig når du oppretter Divi-nettsteder. Og det er noen få gode grunner til å gjøre det. På den ene siden har ikke alle nettsteder en logo. En tittel på nettstedet er en god logoerstatning. En annen grunn er å øke merkevaren din ved å ta med viktig informasjon på nettstedet ditt der alle vil se det.

I denne opplæringen viser vi deg hvordan du legger til en dynamisk tittel på nettstedet og et slagord i en global Divi-overskrift. Denne løsningen vil dynamisk trekke ut nettstedstitel og tagline fra WordPress-backend. I tillegg har du alle Divis kraftige designalternativer for å tilpasse tittelen og slagordet slik du vil!

Mulig utfall

Her er en forhåndsvisning av designet vi skal bygge i denne opplæringen.

Dynamisk nettstedstittel global toppmal 6

Legg merke til nettstedets tittel og tagline øverst i midten av overskriften som vises dynamisk.

Divi tittel modifikasjon eksempel

Gratis nedlasting

Bli med på Divi Newlsetter, så sender vi deg en kopi av Ultimate Divi Landing Page Layout Pack, sammen med mange andre gratis og fantastiske Divi-ressurser, tips og triks. Følg den, så blir du Divi-mester på kort tid. Hvis du allerede er abonnert, kan du bare skrive inn e-postadressen din nedenfor og klikke på nedlasting for å få tilgang til layoutpakken.LAST NED

For å importere malen, gå til Divi> Temagenerator.

Klikk på bærbarhetsikonet øverst til høyre på siden.

I popup-vinduet for portabilitet velger du importfanen og velger nedlastingsfilen fra datamaskinen din.

Klikk deretter på importknappen.

Velg en divi-mal

Når den er fullført, vil den overordnede toppmalen være tilgjengelig i Divi Theme Builder.

Endre global divi header

I det følgende vil vi gå videre til designen.

Tittelen på nettstedet og slagordet på WordPress

Hvert WordPress-nettsted har en tittel og en tagline. Nettstedets tittel er i utgangspunktet navnet på nettstedet, og tagline er en kort setning som vanligvis forklarer hva det er.

Det er ikke uvanlig å legge til tittelen på nettstedet når du installerer WordPress og glemme det.

Tilpass divi-tittelen

Og noen mennesker er ikke engang klar over at tagline eksisterer, enn si ta deg tid til å oppdatere den. I tillegg, når du bruker Divi-temaet, vil ikke tittelen på nettstedet og slagordet være synlig på nettstedet ditt som standard, så det er lett å ignorere dem. Nettstedets tittel og tagline er imidlertid viktige deler av nettstedet og vil bli gjenkjent av søkemotorer.

Du kan når som helst finne og oppdatere nettstedets tittel og tagline i WordPress ved å gå til WordPress-dashbordet og navigere til Innstillinger> Generelt.

Eller du kan ta en annen rute ved å bruke tematilpasseren for å oppdatere nettstedets tittel under de generelle innstillingene.

Tilpass wordpress-identitet

Nå som vi vet hvor nettstedstittelen og slagordet er på WordPress-backend, la oss undersøke hvordan vi kan legge dem til en Divi-topptekst!

Slik legger du til en dynamisk nettstedstittel og slagord til en global topptekst i Divi

Importerer den forhåndsdesignede globale toppmalen

For denne opplæringen skal vi fokusere på hvordan du legger til den dynamiske nettstedstittelen og taglinjen til en eksisterende topptekst i stedet for å lage en full topptekst fra bunnen av. Det vil spare deg for tid og forbedre klarheten. Så for å starte denne topptekstdesignen, skal vi importere en forhåndsdefinert global topptekstmal fra vår fjerde tema generator pakke .

Når du har det lastet ned pakken med opprettelse av tema , pakker ut filen, og finn den vanlige JSON-filen for nettstedsmalen.

Gå deretter til Divi> Theme Builder.

Klikk på bærbarhetsikonet øverst til høyre. I popup-vinduet for bærbarhet velger du standard nettstedmal JSON-fil og klikker på Importer-knappen.

Import av Divi-modell

Når malen er lagt til temabyggeren, sletter du bunntekstmalen og klikker for å redigere den samlede overskriften.

Fjern malen fra bunnteksten

Legge til en dynamisk nettstedstittel og tagline i overskriften

Inne i maloppsettredigereren vil du se den forhåndsinnstilte overskriften allerede er designet. Vi kan begynne å tilpasse oss med en gang.

Flytt logo

For å starte, dra bildemodulen som viser logoen (dynamisk) fra den midterste kolonnen på den øverste raden til den venstre kolonnen på den øverste raden.

Legg til en oppfordringsmodul for å vise nettstedets tittel og tagline

Deretter legger du til en ny Call to Action-modul i den midterste kolonnen på øverste rad (der logoen var).

Tilpass oppfordringen til handling

Vi vil bruke Call to Action-modulen til å vise nettstedets tittel og tagline.

Men før du begynner å legge til innhold, må du først velge NEI for å bruke bakgrunnsfargen.

Konfigurer handlingsfremmende handlinger

Legg til en dynamisk nettstedstittel

Hold deg over inntaksboksen under innholdsinnstillinger, og klikk på ikonet "Bruk dynamisk innhold". Velg deretter "Site Title" fra listen.

Legg til et dynamisk nettstedslogan

Hold deretter musen over kroppsområdet og velg ikonet "Bruk dynamisk innhold". Velg deretter "Site Tagline" fra listen.

Legg til et slagord for divisider

Legg til en dynamisk hjemmesidekobling

Det er vanlig at nettstedstittelen omdirigeres til hjemmesiden ved å klikke, spesielt hvis du bytter ut logoen. For å omdirigere hele kurset til hjemmesiden, legg til hjemmesidekoblingen som dynamisk innhold i kurslinkens URL.

Legg til en lenke til hjemmesiden

Design av teksten til tittelen og slagordet til nettstedet

Nå vises nettstedets tittel og tagline dynamisk på overskriften. Alt vi trenger å gjøre nå er å legge til litt styling. Husk at vi må tilpasse tittelteksten for å designe nettstedets tittel og brødteksten for å designe taglinjen.

Hopp over til designfanen, og oppdater følgende:

  • Tittel Font: Heebo
  • Tittel Skriftvekt: Fet
  • Tittel Font Style: TT
  • Tittel Tekststørrelse: 32px (stasjonær), 24px (nettbrett og telefon)
  • Tittelbrevavstand: 0.3 em
  • Body font: Roboto
  • Body Font Style: kursiv
  • Tekstfarge:
  • Tekststørrelse på kroppen: 13px
  • Body Letter Avstand: 0.1em
  • Kroppslinjehøyde: 1em
Tilpass divi-tittelfont

For å hjelpe med sentrering, ta ut standard polstring under brødteksten ved å legge til følgende tilpassede CSS i Kampanjebeskrivelsen:

polstring-bunn: 0px
Legg til tilpasset divi css-kode

Ytterligere designjusteringer

For denne siste delen av opplæringen skal vi gjøre noen ytterligere designjusteringer av overskriften for å sikre at elementene forblir vertikalt sentrert i hver kolonne og for å gi knappen en unik design. Vi vil også legge til en før og etter en krøllete linje i taggen (bare for spark).

Sentrering av kolonnene / innholdet vertikalt

Akkurat nå er den øverste raden aktiv "Equalize Column Heights" som bruker flex-egenskapen. Vi kan utnytte dette ved å legge til et lite css-utdrag for å sikre at alle kolonnene forblir vertikalt sentrert i raden. For å gjøre dette, åpner du innstillingene for den øverste raden og legger følgende CSS til hovedelementet:

align-items: sentrum;

Oppdatering av kolonnen med knappen

Deretter åpner du innstillingene for kolonne 3 i øverste rad og tar ut bakgrunnsfarge og polstring.

Tilpass divi-kontaktknappen

Oppdatering av knappbakgrunnen

Åpne deretter knappmodulinnstillingen og oppdater bakgrunnen med en ny bakgrunnsgradient som følger:

  • Gradient bakgrunn Venstre farge: #ffffff
  • Farge på høyre bakgrunnsgradient: # 1dbf73
  • Gradientretning: 135deg
  • Startposisjon: 10%
  • Sluttposisjon: 0%
Tilpass bakgrunnen til divi-knappen

Legger før og etter tegn til slagordet

Hvert element av dynamisk innhold kan endres ved å klikke på tannhjulikonet. For å legge til før og etter tegn i slagordet, åpne innstillingene til oppfordringsmodulen som inneholder slagordet og klikk på redigeringsikonet på det dynamiske innholdet i nettsteds slagordet. Deretter legger du til tegnene i oppføringene før og etter.

Vis divi-slagordet

Endelig resultat

For å se resultatet, åpne en hvilken som helst side på nettstedet ditt. Du bør se den dynamiske nettstedstittelen og tagline vises vakkert!

Sluttresultat divi

avslutt~~POS=TRUNC tanker

Det er veldig hyggelig at du kan tilpasse et overordnet overskrift med en dynamisk tittel på nettstedet og tagline. Dette virker som noe som vil være nyttig for mange nettsteder. Jeg liker også ideen om å inkludere nettstedets tittel og tagline i tillegg til logoen for en enda sterkere representasjon av merkevaren.

kilde: Elegant tema

Hvordan lage en sømløs overgang med rulleeffekter på Divi

Hvordan lage en sømløs overgang med rulleeffekter på Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {bakgrunnsfarge: # f8f6f6! viktig;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0p ! viktig; kant-bunn-bredde: 0px! viktig; polstring-bunn: 0px! viktig;} "] [vc_column_text]

Divi: det enkleste WordPress-temaet som skal brukes

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Når du designer tjenestesiden din, vil du forsikre deg om at de besøkende legger merke til alle de forskjellige tjenestene du tilbyr. I mange tilfeller vil dette bare være en bestemt tjeneste de ser etter, men hvis du gir en strømlinjeformet måte i tjenestestrukturen, er det mer sannsynlig at de besøkende behandler dem alle. 

I denne veiledningen viser vi deg hvordan du kan bli kreativ med Divis rulleeffekter og skape en sømløs tjenesteovergang. Du kan også laste ned JSON-filen gratis!

La oss gå.

Mulig utfall

Før vi dykker inn i opplæringen, la oss ta en titt på resultatet på forskjellige skjermstørrelser.

Overgang mellom seksjon divi

1, gjenskape strukturen til elementene

Legg til del 1

avstanden

Start med å legge til en ny seksjon på siden du jobber med. Åpne seksjonsinnstillingene og endre polstringsverdiene på forskjellige skjermstørrelser.

  • Øvre polstring: 80px (stasjonær og nettbrett), 0px (telefon)
  • Bunnpolstring: 80px
Divi parameter seksjon

Legg til en ny linje

Kolonne struktur

Fortsett å legge til en ny rad ved å bruke følgende kolonnestruktur:

dimensjonering

Uten å legge til flere moduler, åpne linjeparametrene og bruke følgende endringer på dimensjoneringsparametrene:

  • Bruk en tilpasset rennebredde: Ja
  • Rennesteinsbredde: 1
  • Bredde: 90%
  • Maks bredde: 1580px
Divi avstandskonfigurasjon

avstanden

Legg deretter til en tilpasset topp- og bunnmargin.

  • Øvre margin: 200px
  • Bunnmargin: 200px
Divi linjeavstandskonfigurasjon

Legg til en tekstmodul i 1-kolonnen

Legg til H2-innhold

Det er på tide å legge til moduler, startende med en tekstmodul i kolonne 1. Skriv inn H2-innhold du ønsker.

Våre tjenester som tilbys av eksperter for øyeblikket

H2 tekstinnstillinger

Gå til moduldesignfanen og endre H2-tekstinnstillingene som følger:

  • Tittel 2 Politi: kvart år
  • Header 2 Tekststørrelse: 80px (stasjonær), 50px (nettbrett), 40px (telefon)
  • Høyden på hodet på linje 2: 1.2em
Leder divi-politiet

avstanden

Legg deretter til en lavere margin på nettbrettet og telefonen.

  • Bunnmargin: 50 piksler (bare nettbrett og telefon)
Divi-tekstavstandskonfigurasjon

Legg til en tekstmodul i 2-kolonnen

Legg til innhold

La oss gå videre til den andre kolonnen. Der er den første modulen vi trenger, en tekstmodul med noe beskrivelsesinnhold.

Innhold divi tekstboks

Tekstinnstillinger

Bytt til moduldesignfanen og endre tekstinnstillingene deretter:

  • Tekst font: hytte
  • Tekst font stil: store bokstaver
  • Tekstfarge: # 000000
  • Tekststørrelse: 18px (stasjonær), 15px (nettbrett), 13px (telefon)
  • Tekstbokstavavstand: 3px (stasjonær), 1px (nettbrett og telefon)
  • Høyde på tekstlinjen: 3em
Divi tekstparameter

Legg til en skillemodul i kolonne 2

synlighet

Den neste og siste modulen vi trenger i denne kolonnen er en separasjonsmodul. Forsikre deg om at alternativet "Vis separator" er aktivert.

  • Vis separator: Ja
Synlig skillelinje

Ligne

Endre deretter linjefargen på modulen.

  • Linjefarge: # 000000
Divider farge bakgrunn

dimensjonering

Gjør deretter noen endringer i dimensjoneringsparametrene.

  • Divider vekt: 3px
  • Bredde: 28%
Divi separator størrelse

avstanden

Vi legger også til en toppmargin.

  • Øvre margin: 10px
Divi separator modul avstand

Legg til del 2

avstanden

La oss gå videre til neste vanlige del. Fjern standard topp padding fra seksjonen.

  • Øvre polstring: 0px
Seksjon 2 divi avstand

overløp

Skjul også overløpene.

  • Horisontalt overløp: skjult
  • Vertikal overløp: skjult
Skjul divi-modul overløp

Legg til en ny linje

Kolonne struktur

Fortsett å legge til en første rad ved å bruke følgende kolonnestruktur:

Velg et divi-oppsett

dimensjonering

Uten å legge til flere moduler, åpne linjeparametrene, få tilgang til dimensjoneringsparametrene og gjøre følgende modifikasjoner:

  • Bruk en tilpasset rennebredde: Ja
  • Rennesteinsbredde: 1
  • Utjevne kolonnehøyder: Ja
  • Bredde: 90%
  • Maks bredde: 1580px
Divisjonsseksjon for takrenner

avstanden

Fjern deretter all standard øvre og nedre polstring.

  • Øvre polstring: 0px
  • Bunnpolstring: 0px
Avstandsinnstillinger for Divi 1 linjemodul

Innstillinger for kolonne 1

Bakgrunnsfarge

Åpne deretter innstillingene for kolonne 1 og endre bakgrunnsfargen.

  • Bakgrunnsfarge: # f7f7f7
Divi line modul bakgrunnskonfigurasjon

avstanden

Fullfør kolonneinnstillingene ved å legge til egendefinerte polstringsverdier på forskjellige skjermstørrelser.

  • Øvre polstring: 200px (skrivebord), 100px (nettbrett og telefon)
  • Bunn polstring: 200 px (skrivebord), 100 px (nettbrett og telefon)
  • Venstre polstring: 8%
  • Høyre polstring: 8%
Radmodulkolonneinnstillinger

Innstillinger for kolonne 2

avstanden

Fortsett ved å åpne innstillingene i kolonne 2. Gå til den avanserte kategorien og legg til egendefinerte polstringsverdier på forskjellige skjermstørrelser.

  • Topp polstring: 100px (stasjonær), 50px (nettbrett og telefon)
  • Bunnpolstring: 200px
  • Venstre polstring: 150 px (skrivebord), 0 px (nettbrett og telefon)
Avstandsinnstillinger for divi-modul

Legg til en skillemodul i kolonne 1

synlighet

I den første kolonnen er den første modulen vi trenger en separasjonsmodul. Forsikre deg om at alternativet "Vis separator" er aktivert.

  • Vis separator: Ja
Vis skillelinje divi 1

Ligne

Endre deretter linjefargen på modulen.

  • Linjefarge: # 000000
Divi separator innstillinger

dimensjonering

Gjør også endringer i dimensjoneringsparametrene.

  • Divider vekt: 3px
  • Bredde: 50%
Divi separator størrelse

Legg til en tekstmodul i 1-kolonnen

Legg til H3-innhold

Den neste modulen vi trenger i kolonne 1 er en tekstmodul med H3-innhold.

Divi innhold seksjon innstilling

H3 tekstinnstillinger

Bytt til moduldesignfanen og endre H3-tekstinnstillingene:

  • Tittel 3 Politi: kvart år
  • Tekstfarge på element 3: # 000000
  • Element 3 Tekststørrelse: 50px (stasjonær), 40px (nettbrett), 35px (telefon)
  • Høyden på hodet på linje 3: 1.1em

Legg til en tekstmodul i 2-kolonnen

Legg til innhold

I den andre kolonnen er den første modulen vi trenger en tekstmodul med noe beskrivelse av innholdet.

Divi tekstmodulinnstilling

Tekstinnstillinger

Endre modulens tekstinnstillinger som følger:

  • Tekst font: hytte
  • Tekst font stil: store bokstaver
  • Tekststørrelse: 18px (stasjonær), 15px (nettbrett), 13px (telefon)
  • Tekstbokstavavstand: 3px (stasjonær), 1px (nettbrett og telefon)
  • Høyde på tekstlinjen: 3em
Divi tekst mold justering

Legg til en knappmodul i 2-kolonnen

Legg til en kopi

Den neste og siste modulen vi trenger er en knappmodul. Skriv inn en kopi av ditt valg.

Innstilling for tekstmodulinnhold

Knappinnstillinger

Stiler deretter knappen.

  • Bruk egendefinerte stiler for knappen: Ja
  • Knapptekststørrelse: 20 piksler
  • Knapptekstfarge: #ffffff
  • Knappens bakgrunnsfarge: # 000000
  • Knappens bredde: 0px
Innstilling av Divi-knappstil
  • Knappeskrift: Kvart
  • Knappens skriftvekt: fet
Divi-knappens fargeinnstillinger

avstanden

Legg også til tilpasset polstring.

  • Øvre polstring: 50px
  • Bunnpolstring: 50px
  • Venstre polstring: 100px
  • Høyre polstring: 100px
Avstandsinnstillinger for divi-modulknapp

Stilling

Og flytt knappen deretter:

  • Posisjon: Absolutt
  • Sted: nederst til venstre
Divi-knappmodulposisjonsjustering

Klone linjen så mange ganger som nødvendig

Når du har fullført hele linjen og alle modulene, kan du klone hele linjen tre ganger.

Klon divi-modul

Endre alt innhold

Sørg for å redigere alt innholdet i dupliserte linjer.

Rediger innholdet i divisjonen

2. Bruk rulleeffekter

Første rad rulleeffekter

Horisontal bevegelse

Når du har fullført alle linjene i seksjonen din, er det på tide å legge til rulleeffektene. Åpne den første raden i seksjonen og legg til vannrett bevegelse.

  • Aktiver horisontal bevegelse: Ja
  • Start offset: -5
  • Gjennomsnittlig forskyvning: 0 (ved 26%)
  • Sluttforskyvning: 0
  • Trigger bevegelseseffekt: midten av elementet
Bruk divi-rulleeffekter

Fade inn og ut

Bruk også en innkommende og utgående falming.

  • Aktiver fade inn og ut: Ja
  • Opprinnelig opacitet: 100%
  • Gjennomsnittlig opacitet: 100% (ved 50%)
  • Endelig opacitet: 0% (til 53%)
  • Trigger bevegelseseffekt: midten av elementet
Konfigurer deleavdelingen for fade-animasjon

Rulleeffekter på midterste rad

Vertikal bevegelse

Deretter vil vi legge til rulleeffekter til alle linjene mellom første og siste linje i seksjonen. Bruk først en vertikal bevegelse:

  • Aktiver vertikal bevegelse: Ja
  • Start offset: -4
  • Gjennomsnittlig forskyvning: 0 (ved 26%)
  • Sluttforskyvning: 0
  • Bevegelsesutløsereffekt: midten av elementet
Divi scrolling aniation konfigurasjon

Fade inn og ut

Aktiver også en inn- og ut-blekningseffekt.

  • Aktiver fade inn og ut: Ja
  • Opprinnelig opacitet: 0%
  • Gjennomsnittlig opacitet: 100% (fra 27% til 50%)
  • Sluttforskyvning: 0 (ved 53%)
  • Trigger bevegelseseffekt: midten av elementet
Divi line fade animasjon

Siste linje rulleeffekter

Vertikal bevegelse

Åpne deretter den siste linjen i seksjonen og legg til følgende vertikale bevegelse:

  • Aktiver vertikal bevegelse: Ja
  • Start offset: -4
  • Gjennomsnittlig forskyvning: 0 (ved 26%)
  • Sluttforskyvning: 0
  • Trigger bevegelseseffekt: midten av elementet
Divi linjemodul rulle animasjon

Fade inn og ut

Med en innkommende og utgående falming, og du er ferdig!

  • Aktiver fade inn og ut: Ja
  • Opprinnelig opacitet: 0%
  • Gjennomsnittlig opacitet: 100% (fra 27% til 50%)
  • Endelig opacitet: 100% (til 53%)
  • Trigger bevegelseseffekt: midten av elementet
Divi linjemodulens utseende animasjonsinnstillinger

Endelig resultat

Nå som vi har gått gjennom alle trinnene, la oss ta en endelig titt på hvordan det ser ut på forskjellige skjermstørrelser.

Endelig demo

avslutt~~POS=TRUNC tanker

I denne artikkelen har vi vist deg hvordan du lager en vakker tjenesteovergang med de rulleeffektene av Divi. Allerede før en servering forsvinner, begynner den andre å dukke opp, noe som gir en fin overgang behagelig for øyet. Denne tilnærmingen vil hjelpe deg med å markere hver tjeneste på individuelt nivå. Du kan også laste ned JSON-filen gratis! Hvis du har spørsmål eller forslag, er du velkommen til å legge igjen en kommentar i kommentarfeltet nedenfor.

Hvordan lage et teammedlem som ruller karusell med Divi

Hvordan lage et teammedlem som ruller karusell med Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {bakgrunnsfarge: # f8f6f6! viktig;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0p ! viktig; kant-bunn-bredde: 0px! viktig; polstring-bunn: 0px! viktig;} "] [vc_column_text]

Divi: det enkleste WordPress-temaet som skal brukes

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Når du oppretter About-siden din, vil du sannsynligvis også introdusere teammedlemmene dine. Når du gjør det, lar du besøkende samhandle med menneskene bak virksomheten din. Hvis du leter etter en måte å oppleve teammedlemmene dine på rullen, kan denne opplæringen være for deg. Vi oppretter en karusell til et teammedlem for automatisk rulling som beveger seg når de besøkende blar gjennom siden. 

Demonstrasjon

Før vi dykker inn i opplæringen, la oss ta en titt på resultatet på forskjellige skjermstørrelser.

Rull divi-teammedlem

Begynnelsen av unnfangelsen

Legg til en ny seksjon

avstanden

Start med å legge til en ny vanlig seksjon på siden du jobber med. Åpne seksjonsinnstillinger og legg til tilpasset polstring på forskjellige skjermstørrelser.

  • Øvre polstring: 200px (skrivebord), 100px (nettbrett og telefon)
  • Bunn polstring: 200 px (skrivebord), 100 px (nettbrett og telefon)
Parameterkonfigurasjon

overløp

For å sikre at ingen horisontale rullefelt vises i vårt design, vil vi skjule seksjonsoverløp i den avanserte fanen.

  • Horisontalt overløp: skjult
  • Vertikal overløp: skjult
Overløpskonfigurasjon

Legg til linje 1

Kolonne struktur

Fortsett å legge til en ny linje til seksjonen ved hjelp av følgende kolonnestruktur:

Velg divi-layout

dimensjonering

Uten å legge til noen moduler ennå, åpne radinnstillingene, bytt til designfanen og endre bredden og maksimal bredde i størrelsesinnstillingene.

  • Bredde: 90%
  • Maks bredde: 1580px
Divi line parameter

avstanden

Vi legger også til tilpasset øvre og nedre polstring.

  • Øvre polstring: 100px
  • Bunnpolstring: 100px
Linjeavstandskonfigurasjon

Legg til en tekstmodul i kolonnen

Legg til H2-innhold

Det er på tide å legge til moduler, og starte med en første tekstmodul. Skriv inn H2-innholdet du ønsker.

Møt teamet

H2 tekstinnstillinger

Gå til moduldesignfanen og endre H2-tekstinnstillingene som følger:

  • Fonttittel 2: Quicksand
  • Skrifttittel 2: halvfet
  • Tekstfarge på element 2: # 000000
  • Header 2 Tekststørrelse: 70px (stasjonær), 50px (nettbrett), 40px (telefon)
Avstand mellom divi-tekst

Legg til en skillemodul i kolonnen

synlighet

Deretter legger du til en separasjonsmodul. Forsikre deg om at alternativet "Vis separator" er aktivert.

  • Vis separator: Ja
Vis diviseparator

Ligne

Gjør deretter noen endringer i linjeinnstillingene.

  • Linjefarge: # edf000
  • Linestil: solid
  • Linjeposisjon: Topp
Divi avstandsstil

dimensjonering

Og fullfør modulparametrene ved å endre dimensjoneringsparametrene tilsvarende:

  • Divider vekt: 20px
  • Bredde: 11%
  • Justering av modulen: venstre
  • Høyde: 20px
Dimensjonerende divi linjemodul

Legg til en linje nr. 2

Kolonne struktur

Til neste rad! Bruk følgende kolonnestruktur:

Divi kolonnekonfigurasjon

dimensjonering

Uten å legge til flere moduler, åpne linjeparametrene og endre dimensjoneringsparametrene som følger:

  • Bruk en tilpasset rennebredde: Ja
  • Rennesteinsbredde: 2
  • Bredde: 100%
  • Maks bredde: 100%
Takrennekonfigurasjon

avstanden

Legg deretter til venstre og høyre polstring på de mindre skjermene.

  • Venstre polstring: 5% (bare nettbrett og telefon)
  • Høyre polstring: 5% (bare nettbrett og telefon)
Konfigurasjon av linjeavstandstil

Kolonneparametere (5x)

Nå, i de neste tre trinnene i denne opplæringen, skal vi gjøre noen endringer i kolonnene. Bruk de tre trinnene på hver av kolonnene i raden din.

Divi-parameterlinjekonfigurasjon

Gradient bakgrunn

Først legger du til en gradientbakgrunn i hver kolonne.

  • 1-farge: rgba (255,255,255,0)
  • 2-farge: rgba (0,0,0,0,84)
  • Gradienttype: lineær
  • Startposisjon: 25%
  • Sluttposisjon: 86%
  • Plasser stigning på bakgrunnen: Ja
Divi bakre kolonnekonfigurasjon

Bakgrunnsbilde

Last deretter opp et bakgrunnsbilde du ønsker. Dette bakgrunnsbildet representerer hvert teammedlem, så bruk et annet bilde for hver kolonne.

  • Bakgrunnsbildestørrelse: Omslag
  • Bakgrunnsbildets plassering: Senter
Legg til divi kolonne bakgrunnsbilde

Hovedelement

Fullfør kolonneinnstillingene ved å legge til tilpasset CSS til hovedtavleelementet i hver kolonne. Disse linjene med CSS-kode hjelper oss å plassere kolonnene under hverandre på nettbrettet, i stedet for å ha to side om side.

bredde: 100%! viktig; margin: 50px 0px 50px 0px! viktig;
Kode css divi kolonne

Legg til en personmodul i kolonnen

Legg til innhold

For å dele informasjon om teammedlemmer, vil vi bruke en Person-modul. Legg til den første personmodulen i kolonne 1, og bruk innholdet du vil ha.

Divi personnavn

Slett bildet

Slett deretter bildet. Vi bruker i stedet bakgrunnsbildet til kolonnen.

Fjern divi-bilde

Bakgrunnsbilde

Vi vil deretter legge til et bildeoverlegg som bakgrunnsbilde av modulen. Du finner den vi bruker ved å laste ned mappen i begynnelsen av denne opplæringen.

  • Bakgrunnsbildestørrelse: Omslag
  • Bakgrunnsbildets plassering: Senter
Konfigurasjon av personmodulbakgrunn

Tekstinnstillinger for tittel

Gå til moduldesignfanen og endre titteltekstinnstillingene som følger:

  • Tittelnivå: H3
  • Tittel font: Quicksand
  • Tittel skriftvekt: fet skrift
  • Tittel tekstfarge: #ffffff
  • Tittelstørrelse: 230%
Divi-modul titteltilpasning

Innstillinger for brødtekst

Endre også innstillinger for brødtekst.

  • Kropps skrifttype: Åpen sans
  • Tekstfarge på kroppen: #ffffff
  • Linjehøyde: 2,2 em
Divi kroppstilpasning

Innstillinger for plasseringstekst

Gjør deretter noen endringer i innstillingene for posisjonstekst.

  • Font Position: Open Sans
  • Tekstfarge på plassering: # edf000
Divi posisjon

avstanden

Og fullfør modulinnstillingene ved å legge til tilpassede polstringsverdier i avstandsinnstillingene.

  • Øvre polstring: 70%
  • Nedre polstring: 10%
  • Venstre polstring: 10%
  • Høyre polstring: 10%
Divi personmodulavstand

Dupliser Person-modulen 4 ganger

Når du har fullført Person-modulen, kan du klone hele modulen fire ganger.

Plasser duplikater i de resterende kolonnene

Plasser duplikatmoduler i de resterende fire kolonnene på raden. Sørg også for å redigere innholdet.

Gjør Row til en automatisk rullekarusell

Endre størrelsen på linje 2

Nå, for å gjøre denne raden til en automatisk rulling av teammedlemskarusellen, må vi åpne radinnstillingene på nytt og endre bredden og maksimal bredde i størrelsesinnstillingene.

  • Bredde: 180%
  • Maksimal bredde: 220% (skrivebord), 100% (nettbrett og telefon)
Avstand for modifikasjon av linjedivi

Legg til horisontal bevegelse av linje nr. 2

Fullfør linjeinnstillingene ved å legge til vannrett bevegelse til rulleeffektinnstillingene i den avanserte kategorien, og du er ferdig!

  • Aktiver horisontal bevegelse: Ja
  • Start forskyvning:
    • Kontor: 2,5
    • Nettbrett og telefon: 0
  • Gjennomsnittlig forskyvning: 0 (ved 40%)
  • Slutt forskyvning:
    • Kontor: -25 (62%)
    • Nettbrett og telefon: 0
  • Trigger bevegelseseffekt: midten av elementet
Divi rullende animasjonskonfigurasjon

undersøkelsen

Nå som vi har gått gjennom alle trinnene, la oss ta en endelig titt på hvordan det ser ut på forskjellige skjermstørrelser.

kontor

Rull divi-teammedlem

avslutt~~POS=TRUNC tanker

I denne veiledningen har vi vist deg hvordan du kan bli kreativ med Divis innebygde rulleeffekter. Spesielt har vi gjenskapt en vakker, automatisk rullende teammedlemskarusell. Når besøkende blar nedover på siden, vises en annen del av karusellen.

Slik legger du til flere sosiale medieikoner til Divi

Slik legger du til flere sosiale medieikoner til Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {bakgrunnsfarge: # f8f6f6! viktig;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0p ! viktig; kant-bunn-bredde: 0px! viktig; polstring-bunn: 0px! viktig;} "] [vc_column_text]

Divi: det enkleste WordPress-temaet som skal brukes

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Divi lar deg kontrollere og designe alle detaljer på nettstedet ditt, fra topptekst til bunntekst. Et av de mest klikkte elementene på et nettsted er ikoner for sosiale medier. Et engasjert publikum vil finne deg andre steder og bli kjent med deg. Åpenbart vil du gjøre dette så enkelt som mulig. 

Så vi viser deg hvordan du aktiverer flere sosiale medieikoner i Divis temaalternativer, hvordan du bruker Divi Builder til å sette inn sosiale medieikoner hvor som helst på en side eller et innlegg, og hvordan du kan utnytte kraften. av Divi Builder-temaet for å legge til sosiale medier-ikoner til alle kroker og kroker på nettstedet ditt.

Hvordan du enkelt aktiverer flere sosiale medieikoner i Divis bunntekst

Den enkleste måten å legge til flere ikoner på sosiale medier på Divi-nettstedet ditt, er å gå til panelet Temaalternativer , aktivere alternativene for Facebook, Twitter, Instagram og RSS. Så er alt du trenger å gjøre å legge inn nettadressene til profilen din i feltene. Når du gjør dette, ser du dem vises som ikonkoblinger i sidens bunntekst:

Sosiale ikoner divi

Naviger til i WordPress-dashbordmenyen Divi - Temaalternativer og klikk på fanen Generelt . Rull ned for å se nettverksbryteren. Sørg også for å skrive inn nettadressene for hvert Divi sosiale ikon som du aktiverer, like under disse byttene. Ellers vises ikonet, men hvis du klikker på det, får brukeren ingen steder. Bruker en # i stedet for en URL vil brukeren holde brukeren på siden i stedet for å potensielt omdirigere dem til en side 404 .

Tema divi alternativer

Bla til slutten av temaalternativene og klikk Lagre endringer . Nå kan du gå til sidens bunntekst og klikke på sosiale ikoner for å teste dem!

Hvis du ikke ser ikonene i bunnteksten, må du huske å sjekke tematilpasseren din under Utseende - Tilpass og sørg for det Vis sosiale ikoner er sjekket under bunntekstalternativene.

Divi wordpress

Hvis du imidlertid vil ha enda flere alternativer for sosiale bunntekstikoner, fortsett å bla ned til delen vår om Divi Theme Builder, hvor vi diskuterer både tilpassede maler og generelle standarder.

Hvordan bruke Divi Builder til å legge til sporingsmoduler på sosiale medier på en side eller legge ut innhold

Noen ganger kan det være veldig fornuftig å legge til ekstra sosiale medier-ikoner mellom tekstblokker, bilder eller annet innhold i sidene eller innleggene. Destinasjonssiden eller About-siden, for eksempel, vil være et godt sted å legge til flere sosiale ikoner for å la besøkende få vite hvordan de kan få kontakt med deg. De vil definitivt skille seg ut mer enn bare å koble til dine sosiale profiler ved hjelp av vanlig tekst. I tillegg leter folk etter gjenkjennelige ikoner.

Du kan bruke Divi Builder til å sette inn sosiale medier ikoner direkte på sidene eller innleggene dine ved hjelp av sosiale mediesporing .

Hver gang du oppretter eller åpner en eksisterende side eller innlegg i WordPress-oversikten, vil du se en stor lilla knapp som spør deg om du vil bruke Divi Builder eller ikke.

Divi artikkeloppretting

Og det gjør det selvfølgelig. Bare klikk Bruk Divi Builder for å begynne å bygge siden din eller legge ut innlegg fra bunnen av (eller fra en av våre forhåndsdefinerte oppsett ). I tillegg kan du inkludere Divi sosiale medier-ikoner hvis du bruker standard WordPress-editor. Alt du trenger å gjøre er å sette inn en blokk med Divi-oppsett og følg de samme trinnene som vi følger nedenfor.

Divi gutenberg layout

Du kan bruke verktøyet til å designe siden din eller innlegget ditt etter eget ønske ved å bruke de tilgjengelige sidebygningsmodulene. Hvis dette er første gang du bruker Divi Builder, vil du kanskje sjekke ut denne oversikten først for å få en klar forståelse av hvordan den fungerer.

Når du er klar til å legge til sosiale medieikoner på siden din, klikker du på den sorte sirkelen + i delen der du vil plassere ikonene for sosiale medier og bla til boksen med sosiale mediesporing vises.

Innføring av modul følger på sosiale medier

Du blir bedt om å velge de sosiale nettverkene du vil ha før du kan begynne å tilpasse dem. Klikk på Legg til et nytt sosialt nettverk .

Legg til sosialt nettverk sosial modul divi

Velg deretter en fra rullegardinlisten.

Legg til et nytt sosialt nettverk

Når det er valgt, legg til profil-URL-en din. Eventuelt kan du velge farge, gradient, bakgrunn osv. spesifikt for ikonet.

Tilpass sosiale nettverk-knappen

Når du har lagt til ditt første sosiale nettverk, kan du fortsette å legge til andre nettverk ved å følge de samme trinnene. De vil alle bli oppført under fanen Innhold des sporingsinnstillinger for sosiale medier . Du kan redigere, kopiere eller omorganisere dem ved å dra og slippe dem på plass.

Tilpass sosiale ikoner

Når du har lagt til dine sosiale nettverk, bytt til kategoriene Innhold et Conception for å spille med andre tilpasningsalternativer. Du kan endre alt fra skyggen av boksen, radiusen på grensen, avstanden, filtrene og til og med intro-animasjonen for ikonmodulen. Du har også muligheten til å inkludere en knapp Følg for at alle ikonene dine skal få mer oppmerksomhet mot dem. Når du er ferdig, klikker du den grønne flåtten .

Følg oss på knappen divi

Deretter kan du flytte ikonene rundt siden din, og jobbe med avstanden og utformingen slik du vil. (De Divi transformasjonsalternativer er forresten fantastisk for det.) Når du er fornøyd med alle beslutningene dine, treffer du grønn Lagre (eller Publiser) -knappen nederst til høyre for å registrere den nye ikonet for sosiale medier. Hvis du ikke ser publiser / lagre-knappen, trykker du på lilla ellipsis (tre prikker) nederst på midten av skjermen for å utvide menyen.

Divi-knappen følger oss

Etter det vil ikonene dine for sosiale medier være live på nettstedet ditt.

Bruk Divi Theme Builder for å legge til sosiale medieikoner

Som vi nevnte ovenfor, er Divi Theme Builder et kraftig verktøy som gir deg full kontroll over omtrent alle aspekter av nettstedet ditt. Så hvis du ønsker å legge til sosiale medier ikoner hvor som helst, har temegeneratoren deg dekket.

Gå til for å komme i gang med temabyggeren Divi - Temegenerator i WordPress dashbordet.

Divi byggherre

Dette handler veldig mye om å legge til sosiale medier-ikoner til et eksisterende Divi-tema generatoroppsett. Eller til en ny! Det spiller ingen rolle om du legger til topptekst, bunntekst eller hoveddel av nettstedet ditt - eller til og med visse kategorier eller andre spesialiserte sidetyper. Du vil følge den samme prosessen.

Først finner vi delen vi vil legge til. Igjen, det kan være globalt eller personlig. Hvis du aldri har brukt temabyggeren før, er det enkelt. Vi legger til sosiale medier ikoner til individuelle innlegg. Du kan derfor starte med å klikke på Legg til en ny mal og velge Alle innlegg ou Innlegg i spesifikke kategorier . Sjekk deretter kategoriene du vil inkludere. Klikk deretter på Lag en mal .

Legg til en divi-modell

Hvis du allerede har konfigurert modeller, klikker du bare på Rediger blyant eller dobbeltklikk på delen du vil endre.

Divi layout

Prosessen med å legge til sosiale medier ikoner her er den samme som beskrevet ovenfor i generatoren. Siden du bruker temabyggeren i stedet for bare å redigere en enkelt side, vil ikonene imidlertid ikke vises akkurat der du velger. Maler kan legges til topptekster, bunntekster og globale maler. Og du kan velge hvordan og når de skal vises uten å måtte konfigurere dem en gang. Ikke side for side, som du ville gjort ovenfor.

For eksempel, hvis vi vil inkludere ikonene for sosiale medier under innleggets tittel, men over innholdet på innlegget på hvert blogginnlegg vi publiserer, legger vi bare til en modul til overvåkning sosiale nettverk. Klikk på sirkelen Noir + og velg det i dialogboksen Sett inn en modul .

Velg den sosiale modulen

Så er det bare å dra modulen dit du vil at ikonene for sosiale medier skal vises. (Vi bruker trådrammemodus for denne plasseringen). Da trenger du bare å legge til de sosiale nettverkene du vil vise. Deretter tilpasser du størrelsen og fargen som du gjorde ovenfor.

Sosial ikon media modul divi

Og akkurat slik la du til noen sosiale medier ikoner til Divi temegenerator. De vil vises på ethvert blogginnlegg du oppretter (i dette eksemplet).

Utseende på divi med delingsknapp

Og hvis du ikke liker hvordan de ser ut, er temageneratoren enkel å tilpasse. Bare dra dem til et annet sted, for eksempel toppen av sidefeltet.

Divi sosial delingsmodul trekk

Forsikre deg om at du klikker på den grønne knappen Enregistrer i hjørnet. Nå vil hvert blogginnlegg med denne malen på nettstedet lastes opp med ikonene dine for sosiale medier øverst i sidefeltet.

sidefeltikoner

Legge til sosiale medier ikoner i topptekst og bunntekst med Divi Theme Builder

Kanskje fungerte ikke standard sosiale ikoner i Divi-innstillingene for deg eller tilbød ikke nok tilpasning. I så fall kan du alltid bruke temabyggeren til å tilpasse den mer fullstendig. 

I hvilken som helst mal kan du legge til en tilpasset bunntekst. Dette erstatter standard Divi. Enhver mal uten en tilpasset mal vil vise standard temaelement. Sosiale medieikoner kan variere fra innlegg til sidearkiv, avhengig av brukernes behov.

Personalisering tema divi layout

Du kan også legge til en global bunntekst som vil erstatte alt andre bunntekster du opprettet. (Dette gjelder også globale organer og overskrifter). 

Hvis du har designet 4 egendefinerte bunntekster for innlegg, sider, prosjekter og kategorier, men deretter oppretter en global bunntekst, vil bare den globale bunnteksten vises. 

Globale maler er ypperlige for ikoner for sosiale medier på nettsteder for kanskje en avis eller et merke. Mens tilpassede maler med sosiale ikoner kan være best for individuelle skapere som er en del av et nettverk.

Legg til en global divi bunntekst

Ved å bruke Divi Builder for topptekster, bunntekster og egendefinerte kroppsmaler kan du legge til sosiale medier-ikoner til nesten hvilken som helst del av Divi du ønsker. Du er ikke begrenset til standard design eller trenger å grave i WordPress-filsystemet. I tillegg, med temegeneratoren, kan du bruke hvilket som helst av Divis designalternativer for å pusse opp sosiale medieikoner og få dem til å skille seg ut på riktig måte for hvert enkelt publikum.

konklusjonen

Når du har standardalternativene Divi bunntekst, Divi Builder-verktøyet for innlegg og sider, kraften til Divi Theme Builder, er det ingen grunn til at du trenger å installere et plugin for å legge til sosiale medier-ikoner på nettstedet ditt. Divi gir deg full kontroll over hvordan dine sosiale ikoner ser ut og hvor de er. 

Enten du trenger å markedsføre et merke, en gjesteforfatter, en stab av innholdsskapere eller bare stedene der du kan bli funnet online, har Divi en måte å gjøre det på. Vi er ensidige, men vi tror det er den enkleste, enkleste og stiligste måten å legge til sosiale medier-ikoner på nettstedet ditt.

Oppretting av et dynamisk fordelernett for WooCommerce-produkter

Oppretting av et dynamisk fordelernett for WooCommerce-produkter

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {bakgrunnsfarge: # f8f6f6! viktig;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0p ! viktig; kant-bunn-bredde: 0px! viktig; polstring-bunn: 0px! viktig;} "] [vc_column_text]

Divi: det enkleste WordPress-temaet som skal brukes

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Måten du designer produktsiden på, har en umiddelbar innvirkning på oppførselen til de besøkende. Et godt utformet og personlig produktsidedesign kan gjøre det lettere for besøkende å bestemme om de vil kjøpe produktet ditt. Hvis du leter etter en måte å gjøre produktsiden mer engasjerende, vil du sannsynligvis like denne veiledningen. 

Vi viser deg hvordan du inkluderer et dynamisk rutenett for produktfordeler i designet ditt ved hjelp av Divi og plugin-programmet Advanced Custom Fields. Vi begynner med å opprette en gruppe felt for fordeler. Vi vil deretter fylle ut de tilpassede feltene på produktsiden vår og inkludere det dynamiske innholdet i produktsidemalen vår. 

Mulig utfall

Før vi dykker ned i opplæringen, la oss ta en rask titt på resultatet på forskjellige skjermstørrelser.

Mulig resultat divi

1. Installer plugin-modulen ACF-plugin og produktfordel

Installer avanserte tilpassede felt-plugin

For å vise de forskjellige produktfordelene i backend av produktene våre, bruker vi det gratis Advanced Custom Fields-pluginet. Få tilgang til din WordPress-backend> Plugins> Legg til ny> Finn ACF-plugin> Installer> Aktiver .

Installer avansert tilpasset feltplugin

Gå til tilpassede felt og legg til en ny gruppe felt

Når du har installert og aktivert ACF-plugin, vil du kunne få tilgang til dine tilpassede felt og legge til en ny gruppe felt.

Lag ACF-felt

Innstillinger for feltgruppe

Gi den nye feltgruppen en tittel, og la den bare vises på produktsidene.

  • "Meldingstype" tilsvarer "Produkt"
Legg til regler

Legg til et første felt

Fortsett med å legge til et nytt felt for tittelen på den første produktfordelen.

  • Feltetikett: Tittel på fordel 1
  • Felttype: tekst
Legg til AC-felt
Divi felttilpasning

Gjenta trinnet for de gjenværende feltene

Gjør det samme for de andre fordelene med produktet og beskrivelsene av dem. Alle disse feltene krever "Tekst" -feltypen som er tildelt dem.

  • Tittel på tjenesten 1
  • Beskrivelse av fordelene 1
  • Tittel på tjenesten 2
  • Beskrivelse av fordelene 2
  • Tittel på tjenesten 3
  • Beskrivelse av fordelene 3
  • Tittel på tjenesten 4
  • Beskrivelse av fordelene 4
Konfigurer ACF-felt

2. Legg fordeler til produktene

Åpne eller legg til et nytt produkt

Når feltgruppen og feltene er opprettet, kan du legge til produktfordelene i produktene dine på individuelt nivå. Åpne et produkt du ønsker, eller lag et nytt.

Divi produktoppretting

Fullfør produktfordelene

Og oppfylle fordelene med produktet.

Fyll ut divi fordeler felt

3. Lag en produktsidemal i Divi Theme Builder

Gå til Divi Theme Builder og legg til en ny mal

Det er på tide å starte med Divi! For å opprette en ny mal, gå til Divi Theme Builder og klikk på "Legg til en ny mal".

Divi temabygger

Bruk en mal på alle produktene

Vi bruker denne malen på alle produkter, men velg gjerne produkter med en bestemt kategori eller etikett i stedet.

Legg til alle woocommerce-produkter

Gå inn i modellens kroppsredigeringsprogram

Skriv deretter inn kroppen på modellen ved å klikke på "Legg til et tilpasset organ" og velge "Opprett et tilpasset organ".

Bygge divi kropp

Rediger seksjon 1

Bakgrunnsfarge

Når du er inne i maleditoren, vil du legge merke til en seksjon. Åpne den delen og endre bakgrunnsfargen til svart.

  • Bakgrunnsfarge: # 000000
Divi seksjon bakgrunn konfigurasjon

avstanden

Gå videre til seksjonens designfane og legg til noe tilpasset topp- og bunnpolstring.

  • Topp polstring: 10px
  • Bunn polstring: 10px
Konfigurasjon av avstand mellom divisjoner

Legg til en ny linje

Kolonnestruktur

La oss fortsette med å legge til en ny linje til delen som har følgende struktur:

Konfigurasjon av linjemoduloppsett

avstanden

Uten å legge til noen mods, la oss åpne radinnstillingene og gjøre noen avstandsjusteringer.

  • Bruk personlig takrenne: Ja
  • Rennebredde: 1
  • Bredde: 90%
  • Maksimal bredde: 100%
Innstillinger for linjemodulavstand

avstanden

Fjern alt topp- og bunnavstand.

  • Høy intern margin: 0px
  • Lav intern margin: 0px
Avstandsinnstillinger for divi-linjemodul

Legg til Woo Cart Notice-modulen i kolonnen

Dynamisk innhold

Den eneste modulen vi trenger på denne linjen og delen er Woo Cart Notice-modulen. Forsikre deg om at “Dette produktet” er valgt i den dynamiske delen.

  • Produkt: Dette produktet
Innstillinger woo cart varselmodul divi

Fargebakgrunn

Åpne deretter modulinnstillingene og bruk en gjennomsiktig bakgrunn.

  • Bakgrunnsfarge: rgba (0,0,0,0)
Woo cart modul divi innstillinger

Tekstinnstillinger

Bytt til "Design" -fanen og endre tekstfonten.

  • Tekstskrift: Karla
Divi-modul skriftinnstillinger

Knappinnstilling

Fullfør plugin-innstillingene ved å definere stilinnstillingene:

  • Bruk egendefinerte stiler for knapp: Ja
  • Knapptekststørrelse: 20px
  • Tekstfarge på knapp: # 000000
  • Knappbakgrunn: # ffd623
  • Knappens bredde: 0px
  • Avrundet kantknapp: 0px
Woo cart varsel modul fargeinnstillinger
  • Knappefont: Oswald
  • Knapp Font Style: Shift
Woo cart varselmodul fargedesignjustering
  • Høy intern margin: 20px
  • Lav intern margin: 20px
  • Venstre indre margin: 50px
  • Intern høyre marg: 50px
Konfigurasjonsdesignmodul woo-varsel

Legg til del 2

Gradient bakgrunn

Legg til en annen vanlig seksjon under den forrige. Åpne deretter innstillingene og bruk en gradientbakgrunn som følger:

  • Farge 1: # 000000
  • Farge 2: #ffffff
  • Startposisjon:
    • Skrivebord: 30%
    • Nettbrett: 57%
    • Telefon: 54%
  • Sluttposisjon:
    • Skrivebord: 30%
    • Nettbrett: 57%
    • Telefon: 54%
Divi linjemodul bakjustering

avstanden

La oss gå til Design-fanen og legge til en høy intern margin.

  • Topp polstring: 150px
Divi line modulavstandskonfigurasjon

Legg til en ny linje

Kolonnestruktur

Fortsett med å legge til en ny linje med samme struktur som vist nedenfor:

Divi linjestil konfigurasjon

dimensjonering

Uten å legge til noen mods ennå, åpner vi innstillingene og endrer avstanden på følgende måte:

  • Bruk egendefinerte takrenner: Ja
  • Rennestein: 1
  • Bredde: 95%
  • Maksimal bredde: 2560px
  • Line Alignment: Center
Divi-modul for takrennekonfigurasjon

Mellomrom

Vi fjerner også den øverste indre marginen.

  • Topp polstring: 0px
Divi-modulavstandskonfigurasjon

Hovedelement

Og for å sentrere innholdet i kolonnen på skrivebordet, skal vi bruke to linjer med CSS-kode i hovedelementet i radmodulen.

Desktop:

display: flex; align-items: center;

Nettbrett og telefon:

skjerm: blokk;
Innstillinger for stillinjemodulstil

Legg til Woo Image-modulen i kolonne 1

Dynamisk innhold

Det er på tide å legge til moduler. Vi starter med Woo Images-modulen i kolonne 1. Kontroller at “Dette produktet” er valgt.

  • Produkt: Dette produktet
Woocommerce produktbildemodulinnstillinger

Vertikal rullende animasjonseffekt

Vi legger til subtil bevegelse i bildet ved å bruke den horisontale bevegelsesrulleeffekten i den avanserte fanen.

  • Aktiver vertikal bevegelse: Ja
  • Start forskyvning:
    • Kontor: -4
    • Nettbrett og telefon: 0
  • Gjennomsnittlig offset: 0
  • Sluttforskyvning: 0
  • Trigger bevegelseseffekt: midten av elementet
Divi image module justering

Legg til Woo-tittelmodulen i kolonne 2

Dynamisk innhold

I kolonne 2 er den første moden vi trenger en Woo title mod. Forsikre deg om at "Dette produktet" er valgt i området for dynamisk innhold.

  • Produkt: Dette produktet
produktfordeler nett

Tekstinnstillinger for tittel

Gå deretter til designfanen og stil tittelteksten slik:

  • Tittel font: Oswald
  • Tittel font stil: store bokstaver
  • Tekstfarge på tittelen: # ffd623
  • Tittelstørrelse: 80px
Divi tittelmodul designjustering

avstanden

Fullfør Woo-tittelmodulen ved å legge til venstre og høyre marg.

  • Venstre margin: 5%
  • Høyre margin: 5%
Divi title module setting

Legg til Woo-beskrivelsesmodulen i kolonne 2

Dynamisk innhold

La oss gå videre til neste modul, som er en Woo-beskrivelsesmodul. Vi bruker følgende dynamiske innhold til dette:

  • Produkt: Dette produktet
  • Beskrivelsestype: Kort beskrivelse
Produktbeskrivelse modulinnstillinger

Tekstinnstillinger

Bytt til moduldesignfanen og endre tekstinnstillingene deretter:

  • Tekstskrift: Karla
  • Tekstfarge: #dbdbdb
  • Tekststørrelse: 17 px (stasjonær og nettbrett), 15 px (telefon)
  • Tekstlinje høyde: 1,9 em
Fargejusteringsmodul beskrivelse div

dimensjonering

Endre deretter bredden på forskjellige skjermstørrelser.

  • Bredde: 59% (stasjonær), 82% (nettbrett og telefon)
Divi sammendragsmodul breddejustering

avstanden

Fullfør Woo-beskrivelsesmodulen ved å legge til egendefinerte marginverdier i avstandsinnstillingene.

  • Øvre margin: 50px
  • Bunnmargin: 100px
  • Venstre margin: 5%
  • Høyre margin: 5%
Divi produktbeskrivelsesmodul

Legg til Blurb-modulen i 2-kolonnen

Dynamisk innhold

For å vise produktfordelene som vi la til i den første delen av denne opplæringen, bruker vi Blurb-modulene. Legg til en første Blurb-modul og bruk det dynamiske innholdet i den første fordelen som er produsert for tittelen og kroppen.

  • Tittel: Fordel Tittel 1
  • Kropp: Fordel Beskrivelse 1
Divi sammendrag modul tekstinnstilling

Last opp bilde

Last opp et bilde eller bruk et ikon etter eget valg. Du kan finne de vi har brukt gjennom denne opplæringen i nedlastingsmappen du kunne laste ned i begynnelsen av denne opplæringen.

Bildemodul sammendrag divi konfigurasjon

Innstillinger for bilde / ikon

Gå videre til modulens designfane og endre innstillingene for bilde / ikon som følger:

  • Bilde / ikonplassering: Topp
  • Bilde / ikon Justering: Venstre
Divi justeringsmodul

Innstillinger for titteltekst

Vi endrer innstillingene for titteltekst neste.

  • Tittel Font: Oswald
  • Tittel Font Style: Store bokstaver
  • Tittel Tekststørrelse: 25px
Konfigurer font for divi-sammendragsmodul

Innstillinger for kroppstekst

Sammen med tekstinnstillingene.

  • Body font: Karla
  • Tekststørrelse: 17 px (stasjonær og nettbrett), 15 px (telefon)
  • Linjehøyde: 1,9 em
Konfigurer tekstmodul sammendrag div i

dimensjonering

Gå deretter til størrelsesinnstillingene og endre bredden. Det er viktig å bruke en hovedbredde på mindre enn 50%, slik at vi kan vise to Blurb-moduler side om side i de neste trinnene.

  • Bildebredde: 25%
  • Bredde: 49%
Konfigurer størrelsen på divi-sammendragsmodulen

avstanden

Vi vil også legge til mellomrom rundt Blurb-modulen ved å bruke egendefinerte polstringsverdier på forskjellige skjermstørrelser.

  • Øvre polstring: 8%
  • Nedre polstring: 8%
  • Venstre polstring: 8% (stasjonær og nettbrett), 2% (telefon)
  • Høyre polstring: 8% (stasjonær og nettbrett) 2% (telefon)
Konfigurer avstand for divi-sammendragsmodul

Hovedelement

Nå skal vi sørge for at Sammendrag-modulen viser teksten ved siden av hverandre, i to trinn. Først skal vi sørge for at modulbredden er mindre enn 50% (som vi gjorde i forrige trinn). Deretter bruker vi eiendommen på raden. Vi vil legge til denne CSS-egenskapen på hovedelementet i den avanserte delen.

display: inline-block;
Legg til CSS-divi-modul

Klone sammendragsmodulen 3 ganger

Når du har fullført den første Blurb-moden, kan du klone den tre ganger. Du vil automatisk merke at Blurb-modulene vises i et rutenett.

Produktnavn diviseksjon

Rediger Blurb-modulbildene

Rediger bildet i hver dupliserte Blurb-pod. Du finner dem i nedlastingsmappen du kanskje har lastet ned i begynnelsen av denne artikkelen.

Divi sammendragsmodulbilde

Endre det dynamiske innholdet i Blurb-modulen

Endre også det dynamiske innholdet i hver dupliserte Blurb-modul.

  • Tittel: Tittel på tjenesten (2,3 eller 4)
  • Karosseri: beskrivelse av fordelene (2,3 eller 4)
Divi oppsummeringsmodul regler

Legg grenser til Blurb-moduler hver for seg

Blurb-innstillinger for modul 1

Nå, for å fullføre utformingen av rutenettet vårt, skal vi legge til grenser til Blurb-modulene på et individuelt nivå. Åpne den første Blurb mod og bruk en rett kant.

  • Høyre kantbredde: 1px
  • Høyre kantfarge: # ffd623
Avrundet modul for avrundede rammekonfigurasjonsdivisjoner

Legg også til en bunnkant til den første Blurb-modulen.

  • Nederste kantbredde: 1px
  • Nedre kantfarge: # 000000
Konfigurer divi bunnmargen
Blurb-innstillinger for modul 2

Åpne deretter den andre Blurb-modulen og bruk en bunnkant.

  • Nederste kantbredde: 1px
  • Nedre kantfarge: # 000000
Sammendrag divi for konfigurasjonsgrensemodul
Blurb-innstillinger for modul 3

Fullfør rutenettet ved å legge til en rett kant til den tredje Blurb-modulen.

  • Høyre kantbredde: 1px
  • Høyre kantfarge: # ffd623
produktfordeler nett

Legg til Woo Legg i kurv Modul i kolonne 2

Dynamisk innhold

Den siste modulen vi trenger i vårt design er en Woo Add to Cart-modul. Forsikre deg om at "Dette produktet" er valgt i området for dynamisk innhold.

  • Produkt: Dette produktet
Legg til kortinndelingsmodulinnstillinger

Feltinnstillinger

Gå til neste designfane og endre feltinnstillingene.

  • Feltets bakgrunnsfarge: #ffffff
  • Felttekstfarge: # 000000
Konfigurer fargestil legg til divi-modulen i handlekurven
  • Avrundede felt: 0px (alle hjørner)
  • Bredde på nedre grense av felt: 1px
  • Farge på feltets nedre kant: # 000000
Konfigurer avstand mellom divisjoner

Knappinnstillinger

Stiler deretter knappen tilsvarende:

  • Bruk egendefinerte stiler for knappen: Ja
  • Knapptekststørrelse: 20 piksler
  • Tekstfarge på knapp: # 000000
  • Bakgrunnsfarge på knappen: # ffd623
  • Knappens bredde: 0px
  • Knappens radius: 0px
Konfigurer divi-knappdesign
  • Knappefont: Oswald
  • Knapp font stil: store bokstaver
Konfigurer divi-knappen
  • Øvre polstring: 20px
  • Bunnpolstring: 20px
  • Venstre polstring: 50px
  • Høyre polstring: 50px
Konfigurer størrelsen på divi-modulen

avstanden

Og fullfør modulparametrene ved å legge til tilpassede marginverdier.

  • Øvre margin: 100px
  • Venstre margin: 5%
Konfigurer divi-avstand

3. Lagre endringene av temageneratoren og forhåndsvis resultatet

Når du er ferdig med å designe produktsidemalen, kan du lagre alle endringene i Theme Builder og vise resultatene på produktene dine!

Lagre divi-design
Lagre divi-modifikasjoner

undersøkelsen

Nå som vi har gått gjennom alle trinnene, la oss ta en endelig titt på hvordan det ser ut på forskjellige skjermstørrelser.

Demoresultat

avslutt~~POS=TRUNC tanker

I denne artikkelen har vi vist deg hvordan du kan bli kreativ med din neste Divi-produktsidesmal. Spesielt har vi vist deg hvordan du inkluderer et dynamisk produktnett for å legge til ekstra fordeler på produktsiden din. Vi opprettet denne opplæringen ved hjelp av Divi i kombinasjon med plugin-programmet Advanced Custom Fields. Du kan også laste ned JSON-filen gratis! Hvis du har spørsmål eller forslag, er du velkommen til å legge igjen en kommentar i kommentarfeltet nedenfor.

Slik implementerer du mørk modus på nettstedet ditt med Divi

Slik implementerer du mørk modus på nettstedet ditt med Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {bakgrunnsfarge: # f8f6f6! viktig;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0p ! viktig; kant-bunn-bredde: 0px! viktig; polstring-bunn: 0px! viktig;} "] [vc_column_text]

Divi: det enkleste WordPress-temaet som skal brukes

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Dark Mode fortsetter å bli populært som et praktisk alternativ for brukere å oppleve nettet med mindre belastning på øynene. La oss innse det, vi pleier alle å bruke mer tid på å stirre på skjermene enn vi sannsynligvis burde, så enhver ekstra bekvemmelighet for brukeropplevelsen (som mørk modus) kan komme langt. 

Operativsystemer, programmer og nettlesere inkluderer vanligvis innebygde muligheter for mørk modus, men noen utviklere tar det til et annet nivå ved å inkludere en tilpasset mørk modusopplevelse for nettstedet deres. Ideen er å ta mer kontroll over hvordan nettstedet deres ser ut i mørk modus uten å måtte gå på akkord med merkevarebygging og / eller design.

I denne opplæringen viser vi deg hvordan du oppretter en tilpasset mørk modus som veksles i Divi fra bunnen av uten et plugin. Med denne funksjonen for mørk modus kan du kontrollere kontrollen over mørk modus og få en bedre brukeropplevelse skreddersydd for merkevaren din.

La oss begynne!

undersøkelsen

Her er en forhåndsvisning av designet vi skal bygge i denne opplæringen.

Her er den egendefinerte mørke modus-vekslingen vi skal lage.

Bytt mørk modus

Og her er før og etter for mørk modus brukt på en av våre forhåndsdefinerte oppsett.

Og her er den mørke modusbryteren lagt til en global overskrift. Legg merke til hvordan lys / mørk modus forblir når du surfer på nettstedet.

Del 1: Bygg bryteren fra mørk modus

I denne første delen av opplæringen skal vi bygge en mørk modusbryter med en side i Divi. Når bryteren er opprettet med koden, vil du kunne lagre den i Divi-biblioteket og legge den til hvor som helst på nettstedet ditt.

For å komme i gang, legg til en rad i en kolonne til standarddelen når du bygger fra bunnen av med Divi i frontenden.

Divi-seksjon

Legg til sammendragsmodul

For å bygge den tilpassede vekslingen, skal vi designe en Blurb-modul med litt tilpasset CSS.

Legg til en ny presentasjonstekstmodul på linjen.

Innhold

Fjern standardinnhold for tittel og brødtekst. Deretter legger du til kvadratikonet i stedet for bildet.

Divi oppsummeringsmodul

Conception

Gå til designinnstillingene og oppdater følgende:

  • Ikonfarge: # 666666
  • Justering av bilde / ikon: venstre
  • Ikonets skriftstørrelse: 22 piksler
Divi-ikonkonfigurasjon
  • Bredde: 50px
  • Justering av modulen: senter
  • Høyde: 25px
Divi dimensjonering konfigurasjon
  • Margin: 0px lav
  • Avrundede hjørner: 4px
  • Kantbredde: 2px
  • Kantfarge: # 666666
Divi border konfigurasjon

Tilpasset CSS

Når designen er på plass, bytter du til den avanserte fanen. Under tilpasset CSS, legg til følgende tilpassede CSS til hovedelementet for å sikre at overløpet ikke blir skjult av utformingen av de avrundede hjørnene.

overløp: synlig! viktig;

Deretter legger du til følgende tilpassede CSS i After-elementet:

innhold: "lett"; posisjon: absolutt; venstre: -35px; topp: 0px;

Dette legger til en etikett til Blurb-modulen som vi vil endre fra "lys" til "mørk" på klikk.

Divi vippeknapp

Tekstdesign

Siden post-pseudo-elementteksten arver brødtekststilene, kan vi legge til kroppstekststiler ved hjelp av Divi-alternativene som følger:

  • Body font: Roboto
  • Tekstfarge på kroppen: # 666666
  • Kropps tekststørrelse: 13px
  • Spacing av kroppens bokstaver: 1px
Veksleknapp for font

Legge til tilpasset kode med en kodemodul

For å legge til nødvendig kode (CSS / JQuery) for å betjene den mørke modusen, vil vi bruke en kodemodul.

Lag en ny kodemodul under Blurb-modulen i samme kolonne.

Legg til kodemodul

Lim deretter inn følgende kode i kodeområdet:

/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});

Legger til tilpassede CSS-klasser

Tilpasset kode krever at du har en tilpasset CSS-klasse lagt til Blurb-modulen eller bryteren. Dette vil gjøre det mulig for utløseren å utløse funksjonen for å slå av og på i mørkt modus.

Blurb modulklasse

Åpne Blurb-modulinnstillingene og legg til en tilpasset CSS-klasse som følger:

  • CSS-klasse: et-dark-toggle
Kode css divi

Klasse i stand til mørk modus

Vi må også legge til en egendefinert CSS-klasse til hvert Divi-element som vi vil ha muligheten for mørk modus. Når elementet har CSS-klassen, vil det elementet arve den egendefinerte "mørke modusen" CSS i koden vi la til etter at mørk modus ble aktivert. Denne metoden gir oss mer kontroll over vårt mørke modus design, da noen elementer kanskje ikke trenger styling i mørk modus.

For å starte, kan vi legge til mørk modus til delen som inneholder vår mørke modus.

Åpne seksjonsparametrene og legg til følgende CSS-klasse:

  • CSS Class: et-dark-mode-stand
Divisjonsseksjon for CSS-velger

Del 2: Legge til funksjoner i mørk modus på en diviside

Nå som vi har CSS-koden og klassene på plass, er vi klare til å bruke Dark Mode-funksjonalitet og design på en hel side i Divi. For å gjøre dette bruker vi Premade-oppsettet av landingssiden for mobilappen.

For å legge til oppsettet, åpner du innstillingsmenyen nederst i den visuelle byggeren og klikker på ikonet Legg til nytt layout.

Velg deretter oppsettet til mobilappens destinasjonsside fra Forhåndsdefinerte oppsett-fanen.

Forsikre deg om at alternativet “Erstatt eksisterende innhold” IKKE er valgt. Du vil ikke slette seksjonen med mørk modus.

Velg divi 1-oppsett

Siden mørk modusstil bare vil gjelde for elementer med CSS-klassen "i stand og mørk modus", kan vi velge å legge til siden på forskjellige måter.

  1. Vi kan legge CSS-klassen til hvert element på siden hver for seg.
  2. Vi kunne utvide CSS-klassen til elementer over hele siden (det ville være raskere enn å gjøre det manuelt). For eksempel kan vi åpne seksjonsinnstillingene for toppseksjonen og utvide CSS-klassen for den delen til alle seksjoner på siden.
  3. Vi kan legge til CSS-klassen i elementets globale standardinnstillinger. Dette vil bruke CSS-klassen på alle elementene på hele nettstedet, og legge til mulighet for mørk modus på hele nettstedet. For eksempel kan vi åpne seksjonsinnstillinger og klikke på det globale standardikonet for å endre standardinnstillingene for global seksjon. Deretter kan vi legge til CSS-klassen og registrere den som en CSS-klasse for alle seksjoner av nettstedet.

Legge til CSS-klassen til sideelementer

For dette eksemplet vil vi oppdatere sideelementene ved å legge til CSS-klassen i globale standardinnstillinger i seksjoner og tekstmoduler. Og vi vil også gjøre noen tillegg til andre sideelementer mens vi går.

Alle seksjoner

Hvis du vil legge til CSS-klassen i alle seksjoner, åpner du innstillingene til toppseksjonen som inneholder mørk modus. Endre deretter seksjonen globale standarder og legg til følgende CSS-klasse i seksjonen globale standarder:

  • CSS Class: et-dark-mode-stand

Alle spesialiserte seksjoner

Legg også CSS-klassen til de globale standardverdiene i den spesialiserte delen.

Legg til i alle spesialiserte seksjoner

Tekstmoduler

Åpne deretter innstillingene for en av tekstmodulene på siden, og legg til den samme CSS-klassen i de globale tekststandardene.

Legg til tekstmoduler

For å teste resultatet, gå til direktesiden og klikk på den mørke modusen for å bytte øverst på siden.

Slik skal siden se ut i klar modus.

Fjern modus

Og her er hvordan siden skal se ut i mørk modus.

Mørk modus

Ytterligere ressurser

Her er noen andre ressurser som kan være av interesse for deg.

avslutt~~POS=TRUNC tanker

Å utstyre Divi-nettstedet ditt med en tilpasset bryter for mørk modus kan være en fin måte å øke brukeropplevelsen og skape et helt nytt design som både gleder og lindrer øyet. Jeg håper dette vil være nyttig for deg.