Si të shtoni një titull dinamik të faqes dhe sloganin në një Header Global Divi

Si të shtoni një titull dinamik të faqes dhe sloganin në një Header Global Divi

Njohja se si të shtoni një titull dinamik të faqes dhe një parullë në një kokë të përgjithshme të Divi do të jetë e dobishme kur krijoni faqet e internetit të Divi. Dhe ka disa arsye të mira për ta bërë këtë. Nga njëra anë, jo të gjitha faqet kanë një logo. Titulli i faqes është një zëvendësim i mirë i logos. Një arsye tjetër është të rrisni markën tuaj duke përfshirë informacione jetike në faqen tuaj ku të gjithë do ta shohin atë.

Në këtë udhëzim, ne do t'ju tregojmë se si të shtoni një titull dinamik të faqes dhe një slogan në një kokë globale të Divi. Kjo zgjidhje do të nxjerrë në mënyrë dinamike titullin dhe titullin e faqes nga faqja e WordPress. Plus, do të keni të gjitha opsionet e fuqishme të dizajnit të Divi-t për të personalizuar titullin dhe parullën, ashtu si dëshironi!

Rezultati i mundshëm

Këtu është një vrojtim i dizajnit që do të ndërtojmë në këtë tutorial.

Titulli dinamik i faqes modeli global i titullit 6

Vini re titullin dhe titullin e faqes në mesin e sipërm të kokës që shfaqet dinamikisht.

Shembull i modifikimit të titullit Divi

Shkarko falas

Bashkohuni në Divi Newlsetter dhe ne do t'ju dërgojmë me email një kopje të Paketës së Layout të Ultimate Divi Landing Page, së bashku me mijëra burime, këshilla dhe truke të tjera falas dhe të mahnitshme të Divi. Ndiqni atë dhe ju do të jeni një master Divi në asnjë kohë. Nëse jeni pajtuar tashmë, thjesht shkruani adresën tuaj të emailit më poshtë dhe klikoni në shkarkim për të hyrë në paketën e planit.SHKARKO

Për të importuar modelin, shkoni te Divi> Krijuesi i temave.

Klikoni në ikonën e transportueshmërisë në të djathtë të faqes.

Në dritaren pop-up të transportueshmërisë, zgjidhni skedën e importit dhe zgjidhni skedarin e shkarkimit nga kompjuteri juaj.

Pastaj klikoni në butonin e importit.

Zgjidhni një model divi

Pasi të përfundojë, modeli i përgjithshëm i kokës do të jetë i disponueshëm në Divi Theme Builder.

Modifikoni titullin global divi

Në atë që vijon do të kalojmë në modelim.

Titulli i faqes dhe slogani në WordPress

Çdo faqe WordPress ka një titull të faqes dhe një titull. Titulli i faqes është në thelb emri i faqes dhe etiketimi është një frazë e shkurtër që zakonisht shpjegon se çfarë është.

Nuk është e pazakontë të shtoni titullin e faqes kur instaloni WordPress dhe harroni atë.

Personalizo titullin divi

Dhe, disa njerëz as nuk e kuptojnë se etiketimi ekziston, e lëre më të marrin kohë për ta azhurnuar. Përveç kësaj, kur përdorni temën Divi, titulli i faqes dhe parulla nuk do të jenë të dukshme në faqen tuaj si parazgjedhje, kështu që është e lehtë t'i injorosh ato. Sidoqoftë, titulli i faqes dhe etiketimi janë pjesë thelbësore të faqes në internet dhe do të njihen nga motorët e kërkimit.

Ju mund të lokalizoni dhe azhurnoni titullin e faqes dhe etiketën në WordPress në çdo kohë duke shkuar në panelin e WordPress dhe duke naviguar te Settings> General.

Ose, ju mund të merrni një rrugë tjetër duke përdorur personalizuesin e temës për të azhurnuar titullin e faqes nën cilësimet e përgjithshme.

Personalizo identitetin e wordpress

Tani që e dimë se ku janë titulli i faqes dhe slogani në sfondin e WordPress, le të shqyrtojmë se si mund t'i shtojmë ato në një kokë Divi!

Si të shtoni një titull dinamik të faqes dhe parullën në një kokë globale në Divi

Importimi i modelit global të kokës së para-projektuar

Për këtë udhëzim, ne do të përqendrohemi në mënyrën e shtimit të titullit dinamik të faqes dhe etiketës në një titull ekzistues në vend që të krijojmë një titull të plotë nga e para. Kjo do t'ju kursejë kohë dhe do të përmirësojë qartësinë. Pra, për të filluar këtë dizajn të kokës, ne do të importojmë një model të paracaktuar global të kokës nga tonë pako gjeneruese e temave të katërt .

Pasi ta keni shkarkoi paketën e duke krijuar temë , unzip skedarin, dhe të gjetur modelin e paracaktuar faqen e internetit skedar JSON.

Pastaj shkoni te Divi> Theme Builder.

Klikoni në ikonën e transportueshmërisë lart djathtas. Në dritaren pop-up të transportueshmërisë, zgjidhni skedarin JSON të paracaktuar të faqes në internet dhe klikoni në butonin Import.

Importi i modelit Divi

Pasi shablloni të shtohet në ndërtuesin e temave, fshini modelin e faqes kryesore dhe klikoni për të redaktuar kokën e përgjithshme.

Hiq shabllonin nga faqja kryesore

Shtimi i titullit dinamik të faqes dhe etiketës në titull

Brenda redaktorit të faqosjes së shabllonit, ju do të shihni titullin premade të dizajnuar tashmë. Ne mund të fillojmë të bëjmë personalizimet tona menjëherë.

Leviz logon

Për të filluar, tërhiqni modulin e imazhit që shfaq logon (dinamikisht) nga kolona e mesit të rreshtit të sipërm në kolonën e majtë të rreshtit të sipërm.

Shtoni një modul thirrje për veprim për të shfaqur titullin e faqes dhe etiketën

Pastaj shtoni një modul të ri Thirrje për Veprim në kolonën e mesit të rreshtit të sipërm (aty ku ishte logoja).

Personalizoni thirrjen për veprim

Ne do të përdorim modulin Thirrje për Veprim për të shfaqur titullin dhe titullin e faqes.

Por, para se të filloni të shtoni përmbajtje, së pari zgjidhni JO për të përdorur ngjyrën e sfondit.

Konfiguroni veprimet e thirrjes për veprim

Shtoni një titull dinamik të sitit

Nën cilësimet e përmbajtjes, qëndroni mbi kutinë e hyrjes së titullit dhe klikoni në ikonën "Përdor përmbajtjen dinamike". Pastaj zgjidhni "Titulli i sitit" nga lista.

Shtoni një slogan dinamik të sitit

Pastaj, vendosni miun mbi zonën e trupit dhe zgjidhni ikonën "Përdor përmbajtjen dinamike". Pastaj zgjidhni "Site Tagline" nga lista.

Shto një slogan të faqes divi

Shtoni një lidhje dinamike të faqes kryesore

Commonshtë e zakonshme që titulli i faqes të ridrejtohet në faqen kryesore me klikim, veçanërisht nëse jeni duke zëvendësuar logon. Për të ridrejtuar të gjithë kursin në faqen kryesore, shtoni lidhjen e faqes kryesore si përmbajtje dinamike në URL-në e kursit.

Shtoni një lidhje në faqen kryesore

Hartimi i tekstit të titullit dhe slogani i faqes

Tani titulli i faqes dhe etiketa e faqes shfaqen në kokë në mënyrë dinamike. E tëra çka duhet të bëjmë tani është të shtojmë një stilim. Mos harroni, ne duhet të rregullojmë tekstin e titullit për të hartuar titullin e faqes dhe tekstin e trupit për të hartuar etiketën.

Kalo tek skedari i dizajnit dhe përditëso si vijon:

  • Font Titulli: Heebo
  • Pesha e shkronjave të titullit: Bold
  • Stili i fontit të titullit: TT
  • Madhësia e tekstit të titullit: 32px (desktop), 24 px (tabletë dhe telefon)
  • Hapësira e shkronjave të titullit: 0.3em
  • Font trupi: Roboto
  • Stili i fontit të trupit: italik
  • Ngjyra e Tekstit të trupit:
  • Madhësia e tekstit të trupit: 13px
  • Hapësira e shkronjave të trupit: 0.1em
  • Lartësia e vijës së trupit: 1em
Përshtat shkronjën e titullit divi

Për të ndihmuar në qendërzimin, nxirrni mbushjen e parazgjedhur nën tekstin e trupit duke shtuar CSS-në e mëposhtme me porosi në Përshkrimi Promo:

mbushje-fund: 0px
Shto kodin e personalizuar divi css

Rregullimet shtesë të projektimit

Për këtë pjesë të fundit të mësimit, ne do të bëjmë disa rregullime shtesë të projektimit në kokë për t'u siguruar që artikujt të qëndrojnë në qendër vertikale në secilën kolonë dhe t'i japin butonit një dizajn unik. Ne gjithashtu do të shtojmë një rresht para dhe pas shigjetave në etiketën (vetëm për shkelma).

Në mënyrë vertikale përqendrimi i kolonave / përmbajtjes

Tani për tani rreshti i lartë është aktivi "Barazoni lartësitë e kolonës" i cili përdor vetinë e përkuljes. Ne mund të përfitojmë nga kjo duke shtuar një copë të vogël css për tu siguruar që të gjitha kolonat të qëndrojnë vertikalisht në rresht. Për ta bërë këtë, hapni cilësimet për rreshtin e lartë dhe shtoni CSS-në e mëposhtme në Elementin kryesor:

pikat e rreshtit: qendra;

Përditësimi i kolonës me butonin

Tjetra, hapni cilësimet për kolonën 3 në rreshtin e lartë dhe nxirrni ngjyrën e sfondit dhe mbushjen.

Personalizoni butonin e kontaktit divi

Përditësimi i sfondit të butonit

Pastaj hapni cilësimin e modulit të butonit dhe azhurnoni sfondin me një gradient të ri të sfondit si më poshtë:

  • Sfondi i gradientit Ngjyra e majtë: #ffffff
  • Ngjyra e drejtuar e gradientit të sfondit: # 1dbf73
  • Drejtimi i gradientit: 135deg
  • Pozicioni i fillimit: 10%
  • Pozicioni i fundit: 0%
Personalizoni sfondin e butonit divi

Shtimi para dhe pas karaktereve në slogan

Çdo artikull dinamik i përmbajtjes mund të ndryshohet duke klikuar në ikonën e ingranazhit. Për të shtuar para dhe pas karaktereve në parullë, hapni cilësimet e modulit të thirrjes për veprim që përmban slloganin dhe klikoni në ikonën e redaktimit në përmbajtjen dinamike të sloganit të faqes. Pastaj shtoni karakteret në shënimet para dhe pas.

Shfaq parullën divi

Rezultati përfundimtar

Për të parë rezultatin, hapni çdo faqe në faqen tuaj. Ju duhet të shihni titullin dinamik të faqes dhe etiketën e shfaqur bukur!

Ndarja e rezultatit përfundimtar

Mendimet e fundit

Reallyshtë vërtet bukur që mund të personalizoni një titull të përgjithshëm me një titull dinamik të faqes dhe etiketim. Kjo duket si diçka që do të jetë e dobishme për shumë site. Më pëlqen gjithashtu ideja e përfshirjes së titullit dhe titullit të faqes përveç logos për një përfaqësim edhe më të fortë të markës.

Burimi: Elegant Theme

Si të krijoni një tranzicion pa probleme me efektet lëvizëse në Divi

Si të krijoni një tranzicion pa probleme me efektet lëvizëse në Divi

Kur dizajnoni faqen e shërbimeve tuaja, ju doni të siguroheni që vizitorët tuaj të vërejnë të gjitha shërbimet e ndryshme që ju ofroni. Në shumë raste, ky do të jetë vetëm një shërbim specifik që ata po kërkojnë, por nëse ofroni një mënyrë të efektshme në strukturën tuaj të shërbimit, vizitorët tuaj ka më shumë të ngjarë t'i trajtojnë të gjithë. 

Në këtë manual, ne do t'ju tregojmë se si të bëheni krijues me efektet e lëvizjes së Divi dhe të krijoni një tranzicion të përsosur të shërbimit. Ju gjithashtu mund të shkarkoni skedarin JSON falas!

Le të shkojnë.

Rezultati i mundshëm

Para se të zhyteni në tutorial, le të hedhim një vështrim në rezultatin në madhësi të ndryshme të ekranit.

Kalimi ndërmjet pjesës divi

1, rikrijoni strukturën e elementeve

Shtoni seksionin # 1

ndarje

Filloni duke shtuar një seksion të ri në faqen ku po punoni. Hapni cilësimet e seksionit dhe ndryshoni vlerat e mbushjes në madhësi të ndryshme të ekranit.

  • Mbushja e sipërme: 80px (desktop dhe tablet), 0px (telefon)
  • Mbushja e poshtme: 80px
Seksioni i parametrave Divi

Shto një rresht të ri

Struktura e kolonës

Vazhdoni të shtoni një rresht të ri duke përdorur strukturën e kolonës së mëposhtme:

sizing

Pa shtuar më shumë module, hapni parametrat e linjës dhe zbatoni ndryshimet e mëposhtme në parametrat e dimensionimit:

  • Përdorni një gjerësi të ulluqeve me porosi: Po
  • Gjerësia e zorrës së trashë: 1
  • Gjerësia: 90%
  • Gjerësia maksimale: 1580px
Konfigurimi i ndarjes së ndarjes

ndarje

Pastaj shtoni një diferencë të sipërme dhe të poshtme.

  • Marzhi i sipërm: 200px
  • Marzhi i poshtëm: 200px
Konfigurimi i ndarjes së vijës Divi

Shtoni një modul teksti në kolonën 1

Shto përmbajtje H2

Timeshtë koha për të shtuar module, duke filluar me një modul teksti në kolonën 1. Vendosni çdo përmbajtje H2 që dëshironi.

Shërbimet tona të ofruara nga ekspertët e momentit

Cilësimet e tekstit H2

Shkoni te skeda e modelit dhe ndryshoni cilësimet e tekstit H2 si më poshtë:

  • Titulli 2 Policia: Tremujori
  • Titulli 2 Madhësia e tekstit: 80px (desktop), 50 px (tabletë), 40px (telefon)
  • Lartësia e rreshtit 2 të kokës: 1.2em
Drejtori i policisë divi

ndarje

Pastaj shtoni një diferencë më të ulët në tabletë dhe telefon.

  • Marzhi i poshtëm: 50 pixel (vetëm tablet dhe telefon)
Konfigurimi i ndarjes së tekstit Divi

Shtoni një modul teksti në kolonën 2

Shto përmbajtje

Le të kalojmë në kolonën e dytë. Aty moduli i parë që na duhet është një modul teksti me disa përmbajtje përshkrimi.

Kuti për tekstin divi i përmbajtjes

Cilësimet e tekstit

Kaloni në skedën e dizajnit të modulit dhe ndryshoni rregullimet e tekstit në përputhje me rrethanat:

  • Shkronja e tekstit: kabina
  • Stili i shkronjave të tekstit: shkronja të mëdha
  • Ngjyra e tekstit: # 000000
  • Madhësia e tekstit: 18px (desktop), 15px (tabletë), 13px (telefon)
  • Hapësira e shkronjave të tekstit: 3px (desktop), 1px (tablet dhe telefon)
  • Lartësia e vijës së tekstit: 3em
Parametri i tekstit Divi

Shtoni një modul ndarjeje në kolonën 2

dukshmëri

Moduli tjetër dhe i fundit që na duhet në këtë kolonë është një modul i ndarjes. Sigurohuni që opsioni "Trego ndarësin" të jetë i aktivizuar.

  • Trego ndarësin: Po
Ndarës i dukshëm

Linjë

Pastaj ndryshoni ngjyrën e linjës së modulit.

  • Ngjyra e linjës: # 000000
Sfondi me ngjyra ndarëse

sizing

Pastaj bëni disa ndryshime në parametrat e madhësisë.

  • Pesha e ndarësit: 3px
  • Gjerësia: 28%
Madhësia e ndarësit të divit

ndarje

Ne gjithashtu shtojmë një diferencë të lartë.

  • Marzhi i sipërm: 10px
Hapësira e moduleve të ndarësit Divi

Shtoni seksionin # 2

ndarje

Le të kalojmë në seksionin tjetër të rregullt. Hiqni mbushjen e parazgjedhur të sipërme nga seksioni.

  • Mbushja e sipërme: 0px
Seksioni 2 ndarja e ndarjes

përplot

Fshihni edhe rrjedhjet e tejmbushura.

  • Rrjedhja horizontale: e fshehur
  • Vërshimi vertikal: i fshehur
Fshih mbingarkesat e modulit divi

Shto një rresht të ri

Struktura e kolonës

Vazhdoni të shtoni një rresht të parë duke përdorur strukturën e kolonës së mëposhtme:

Zgjidhni një paraqitje divi

sizing

Pa shtuar më shumë module, hapni parametrat e linjës, hyrni në parametrat e dimensionimit dhe bëni modifikimet e mëposhtme:

  • Përdorni një gjerësi të ulluqeve me porosi: Po
  • Gjerësia e zorrës së trashë: 1
  • Barazoni lartësitë e kolonave: Po
  • Gjerësia: 90%
  • Gjerësia maksimale: 1580px
Seksioni i ndarjes së konfigurimit të ullukut

ndarje

Pastaj hiqni të gjithë mbushjen e paracaktuar të sipërme dhe të poshtme.

  • Mbushja e sipërme: 0px
  • Mbushja e poshtme: 0px
Cilësimet e hapësirës së modulit Divi 1

Cilësimet e kolonës 1

Ngjyrë e sfondit

Pastaj hapni cilësimet për kolonën 1 dhe ndryshoni ngjyrën e sfondit.

  • Ngjyra e sfondit: # f7f7f7
Konfigurimi i sfondit të modulit të linjës Divi

ndarje

Përfundoni cilësimet e kolonës duke shtuar vlera të personalizuara të mbushjes në madhësi të ndryshme të ekranit.

  • Mbushja e sipërme: 200px (tavolinë), 100 px (tablet dhe telefon)
  • Mbushja e poshtme: 200px (tavolinë), 100 px (tabletë dhe telefon)
  • Mbushja e majtë: 8%
  • Mbushja e duhur: 8%
Cilësimet e kolonës së modulit rresht

Cilësimet e kolonës 2

ndarje

Vazhdoni duke hapur cilësimet në kolonën 2. Shkoni te skeda e përparuar dhe shtoni vlera të personalizuara të mbushjes në madhësi të ndryshme të ekranit.

  • Mbushja kryesore: 100px (desktop), 50 px (tablet dhe telefon)
  • Mbushja e poshtme: 200px
  • Mbushja e majtë: 150 px (tavolinë), 0 px (tablet dhe telefon)
Cilësimet e ndarjes së modulit Divi

Shtoni një modul ndarjeje në kolonën 1

dukshmëri

Në kolonën e parë, moduli i parë që na duhet është një modul ndarës. Sigurohuni që opsioni "Trego ndarësin" të jetë i aktivizuar.

  • Trego ndarësin: Po
Trego ndarësin divi 1

Linjë

Pastaj ndryshoni ngjyrën e linjës së modulit.

  • Ngjyra e linjës: # 000000
Cilësimet e ndarësit të divit

sizing

Bëni gjithashtu ndryshime në parametrat e madhësisë.

  • Pesha e ndarësit: 3px
  • Gjerësia: 50%
Madhësia e ndarësit të divit

Shtoni një modul teksti në kolonën 1

Shto përmbajtje H3

Moduli tjetër që na nevojitet në kolonën 1 është një modul teksti me përmbajtje H3.

Cilësimi i seksionit të përmbajtjes Divi

Cilësimet e tekstit H3

Kaloni në skedën e dizajnit të modulit dhe ndryshoni cilësimet e tekstit H3:

  • Titulli 3 Policia: Tremujori
  • Ngjyra e tekstit të artikullit 3: # 000000
  • Pika 3 Madhësia e tekstit: 50px (desktop), 40px (tabletë), 35px (telefon)
  • Lartësia e rreshtit 3 të kokës: 1.1em

Shtoni një modul teksti në kolonën 2

Shto përmbajtje

Në kolonën e dytë, moduli i parë që na duhet është një modul teksti me disa përmbajtje përshkrimi.

Cilësimi i modulit të tekstit Divi

Cilësimet e tekstit

Ndryshoni cilësimet e tekstit të modulit si më poshtë:

  • Shkronja e tekstit: kabina
  • Stili i shkronjave të tekstit: shkronja të mëdha
  • Madhësia e tekstit: 18px (desktop), 15px (tabletë), 13px (telefon)
  • Hapësira e shkronjave të tekstit: 3px (desktop), 1px (tablet dhe telefon)
  • Lartësia e vijës së tekstit: 3em
Rregullimi i shkronjave të formës së tekstit Divi

Shtoni një modul butoni në kolonën 2

Shto një kopje

Moduli tjetër dhe i fundit që na duhet është një modul butoni. Vendosni një kopje të zgjedhjes suaj.

Cilësimi i përmbajtjes së modulit të tekstit

Cilësimet e butonit

Pastaj stilo butonin.

  • Përdorni stilet me porosi për butonin: Po
  • Madhësia e tekstit të butonit: 20 piksele
  • Ngjyra e tekstit të butonit: #ffffff
  • Ngjyra e sfondit të butonit: # 000000
  • Gjerësia e kufirit të butonit: 0px
Cilësimi i stilit të butonit Divi
  • Font Butoni: Tremujor
  • Pesha e shkronjave të butonit: e theksuar
Cilësimet e ngjyrave të butonit Divi

ndarje

Shtoni gjithashtu mbushjen me porosi.

  • Mbushja e sipërme: 50px
  • Mbushja e poshtme: 50px
  • Mbushja e majtë: 100px
  • Mbushja e duhur: 100px
Cilësimet e hapësirës së butonit të modulit Divi

pozitë

Dhe ripoziciononi butonin në përputhje me rrethanat:

  • Pozicioni: Absolut
  • Vendndodhja: majtas
Rregullimi i pozicionit të modulit të butonit Divi

Klononi rreshtin sa herë të jetë e nevojshme

Pasi të keni përfunduar të gjithë rreshtin dhe të gjitha modulet e saj, mund të klononi të gjithë rreshtin tri herë.

Moduli i klonit divi

Ndryshoni të gjithë përmbajtjen

Sigurohuni që të redaktoni të gjithë përmbajtjen në rreshta të kopjuar.

Redaktoni përmbajtjen e seksionit divi

2. Aplikoni efektet lëvizëse

Efektet lëvizëse të rreshtit të parë

Lëvizja horizontale

Pasi të keni përfunduar të gjitha linjat në seksionin tuaj, është koha të shtoni efektet e lëvizjes. Hapni vijën e parë të seksionit dhe shtoni lëvizje horizontale.

  • Aktivizoni lëvizjen horizontale: Po
  • Fillimi i kompensimit: -5
  • Kompensimi mesatar: 0 (me 26%)
  • Përfundimi i kompensimit: 0
  • Efekti i lëvizjes së këmbëzës: mesi i elementit
Zbatoni efektet e scrolling divi

Zbehet brenda dhe jashtë

Përdorni gjithashtu një efekt venitje dhe hyrëse.

  • Aktivizoni zbehet brenda dhe jashtë: Po
  • Opaciteti fillestar: 100%
  • Opaciteti mesatar: 100% (me 50%)
  • Hapësia e mbarimit: 0% (në 53%)
  • Efekti i lëvizjes së këmbëzës: mesi i elementit
Konfiguro divi i seksionit të animacionit zbeh

Efektet lëvizëse të rreshtit të mesëm

Lëvizja vertikale

Tjetra, ne do të shtojmë efektet e lëvizjes në të gjitha linjat midis rreshtit të parë dhe të fundit të seksionit. Së pari përdorni një lëvizje vertikale:

  • Aktivizoni lëvizjen vertikale: Po
  • Fillimi i kompensimit: -4
  • Kompensimi mesatar: 0 (me 26%)
  • Përfundimi i kompensimit: 0
  • Efekti i shkatjes së lëvizjes: mesi i elementit
Konfigurimi i aniation scrolling Divi

Zbehet brenda dhe jashtë

Aktivizoni gjithashtu një efekt brenda dhe jashtë zbehet.

  • Aktivizoni zbehet brenda dhe jashtë: Po
  • Opaciteti fillestar: 0%
  • Opaciteti mesatar: 100% (nga 27% në 50%)
  • Përfundimi i kompensimit: 0 (me 53%)
  • Efekti i lëvizjes së këmbëzës: mesi i elementit
Animacion i zbehur i linjës Divi

Efektet lëvizëse të linjës së fundit

Lëvizja vertikale

Pastaj hapni rreshtin e fundit të seksionit dhe shtoni lëvizjen vertikale të mëposhtme:

  • Aktivizoni lëvizjen vertikale: Po
  • Fillimi i kompensimit: -4
  • Kompensimi mesatar: 0 (me 26%)
  • Përfundimi i kompensimit: 0
  • Efekti i lëvizjes së këmbëzës: mesi i elementit
Moduli i vijës ndarëse të lëvizjes së animacionit

Zbehet brenda dhe jashtë

Me një efekt venitje dhe dalëse dhe ju jeni mbaruar!

  • Aktivizoni zbehet brenda dhe jashtë: Po
  • Opaciteti fillestar: 0%
  • Opaciteti mesatar: 100% (nga 27% në 50%)
  • Hapësia e mbarimit: 100% (në 53%)
  • Efekti i lëvizjes së këmbëzës: mesi i elementit
Cilësimet e animacionit të paraqitjes së modulit të linjës Divi

Rezultati përfundimtar

Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.

Demo përfundimtare

Mendimet e fundit

Në këtë artikull, ne ju kemi treguar se si të krijoni një tranzicion të bukur shërbimi me efektet lëvizëse të Divi. Edhe para se një shërbim të zhduket, tjetri fillon të shfaqet, duke i dhënë një tranzicion të bukur të këndshëm syrit. Kjo qasje do t'ju ndihmojë të theksoni çdo shërbim në një nivel individual. Ju gjithashtu mund të shkarkoni skedarin JSON falas! Nëse keni ndonjë pyetje ose sugjerim, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.

Si të krijoni një karusel lëvizës të një anëtari të ekipit me Divi

Si të krijoni një karusel lëvizës të një anëtari të ekipit me Divi

Kur krijoni faqen tuaj About, ju ndoshta do të dëshironi të prezantoni edhe anëtarët e ekipit tuaj. Duke vepruar kështu, ju lejoni vizitorët të ndërveprojnë me njerëzit që qëndrojnë pas biznesit tuaj. Nëse jeni duke kërkuar një mënyrë për të gjallëruar pjesën e anëtarëve të ekipit tuaj në rrotull, ky udhëzues mund të jetë për ju. Ne do të krijojmë një karusel të anëtarit të ekipit të lëvizjes automatike që lëviz ndërsa vizitorët tuaj lëvizin në faqe. 

demonstrim

Para se të zhyteni në tutorial, le të hedhim një vështrim në rezultatin në madhësi të ndryshme të ekranit.

Shkoni anëtarin e ekipit divi

Fillimi i konceptimit

Shto një seksion të ri

ndarje

Filloni duke shtuar një seksion të ri të rregullt në faqen në të cilën po punoni. Hapni cilësimet e seksionit dhe shtoni mbushje të personalizuara në madhësi të ndryshme të ekranit.

  • Mbushja e sipërme: 200px (tavolinë), 100 px (tablet dhe telefon)
  • Mbushja e poshtme: 200px (tavolinë), 100 px (tabletë dhe telefon)
Konfigurimi i parametrit

përplot

Për t'u siguruar që nuk shfaqet asnjë shirit lëvizës horizontale në modelin tonë, ne do të fshehim tejmbushjet e seksioneve në skedën e përparuar.

  • Rrjedhja horizontale: e fshehur
  • Vërshimi vertikal: i fshehur
Konfigurimi i tejmbushjes

Shtoni rreshtin # 1

Struktura e kolonës

Vazhdoni të shtoni një rresht të ri në seksion duke përdorur strukturën e kolonës së mëposhtme:

Zgjidhni paraqitjen divi

sizing

Pa shtuar akoma ndonjë modul, hapni cilësimet e rreshtit, kaloni në skedën e dizajnit dhe ndryshoni gjerësinë dhe gjerësinë maksimale në cilësimet e madhësisë.

  • Gjerësia: 90%
  • Gjerësia maksimale: 1580px
Parametri i vijës Divi

ndarje

Ne gjithashtu shtojmë mbushje me porosi të sipërme dhe të poshtme.

  • Mbushja e sipërme: 100px
  • Mbushja e poshtme: 100px
Konfigurimi i ndarjes së vijës

Shtoni një modul teksti në kolonë

Shto përmbajtje H2

Timeshtë koha për të shtuar module, duke filluar me një modul të parë teksti. Futni përmbajtjen H2 sipas zgjedhjes suaj.

Njihuni me ekipin

Cilësimet e tekstit H2

Shkoni te skeda e modelit dhe ndryshoni cilësimet e tekstit H2 si më poshtë:

  • Titulli i fontit 2: Quicksand
  • Titulli i fontit 2: gjysëm i guximshëm
  • Ngjyra e tekstit të artikullit 2: # 000000
  • Kreu 2 Madhësia e tekstit: 70px (desktop), 50 px (tabletë), 40px (telefon)
Hapësira e tekstit Divi

Shtoni një modul ndarjeje në kolonë

dukshmëri

Pastaj shtoni një modul ndarjeje. Sigurohuni që opsioni "Trego ndarësin" të jetë i aktivizuar.

  • Trego ndarësin: Po
Trego ndarësin divi

Linjë

Pastaj bëni disa ndryshime në cilësimet e linjës.

  • Ngjyra e linjës: # edf000
  • Stili i linjës: i fortë
  • Pozicioni i linjës: Në krye
Stili i ndarjes së divit

sizing

Dhe plotësoni parametrat e modulit duke modifikuar parametrat e dimensionimit në përputhje me rrethanat:

  • Pesha e ndarësit: 20px
  • Gjerësia: 11%
  • Shtrirja e modulit: majtas
  • Lartësia: 20px
Madhësia e modulit të vijës divi

Shtoni një rresht # 2

Struktura e kolonës

Në rreshtin tjetër! Përdorni strukturën e mëposhtme të kolonës:

Konfigurimi i kolonës Divi

sizing

Pa shtuar më shumë module, hapni parametrat e linjës dhe modifikoni parametrat e madhësisë si më poshtë:

  • Përdorni një gjerësi të ulluqeve me porosi: Po
  • Gjerësia e zorrës së trashë: 2
  • Gjerësia: 100%
  • Gjerësia maksimale: 100%
Konfigurimi i gjerësisë së ullukut

ndarje

Pastaj shtoni mbushjen e majtë dhe të djathtë vetëm në ekranet më të vogla.

  • Mbushja e majtë: 5% (vetëm tablet dhe telefon)
  • Mbushja e duhur: 5% (vetëm tablet dhe telefon)
Konfigurimi i stilit të ndarjes së vijave

Parametrat e kolonës (5x)

Tani, në tre hapat e ardhshëm të këtij tutoriali, ne do të bëjmë disa ndryshime në kolona. Zbatoni të tre hapat në secilën nga kolonat në rreshtin tuaj.

Parametri divi i konfigurimit të linjës

Sfondi i gradientit

Së pari, shtoni një sfond gradient në secilën kolonë.

  • Ngjyra 1: rgba (255,255,255,0)
  • Ngjyra 2: rgba (0,0,0,0,84)
  • Lloji i gradientit: linear
  • Pozicioni i fillimit: 25%
  • Pozicioni i fundit: 86%
  • Vendosni gradientin sipër imazhit të sfondit: Po
Konfigurimi i kolonës së pasme Divi

Imazhi i sfondit

Pastaj ngarkoni një imazh sfond të zgjedhur nga ju. Ky imazh në sfond përfaqëson çdo anëtar të ekipit, kështu që përdorni një imazh të ndryshëm për secilën kolonë.

  • Madhësia e imazhit në sfond: Kopertina
  • Pozicioni i imazhit të sfondit: Qendra
Shto imazhin e sfondit të kolonës divi

Elementi kryesor

Përfundoni cilësimet e kolonës duke shtuar CSS të personalizuar në elementin kryesor të tabletës të secilës kolonë. Këto rreshta të kodit CSS do të na ndihmojnë të vendosim kolonat njëra poshtë tjetrës në tabletë, në vend që të kemi dy krah për krah.

gjerësia: 100%! e rëndësishme; diferenca: 50px 0px 50px 0px! e rëndësishme;
Kodi kolonë div css

Shtoni një modul personi në kolonë

Shto përmbajtje

Për të ndarë informacione rreth anëtarëve të ekipit, ne do të përdorim një modul Person. Shtoni modulin e parë të personit në kolonën 1 dhe përdorni çfarëdo përmbajtje që dëshironi.

Emri i personit Divi

Fshi imazhin

Pastaj fshini imazhin. Ne përdorim imazhin sfond të kolonës në vend.

Hiq imazhin divi

Imazhi i sfondit

Tjetra ne do të shtojmë një mbivendosje të imazhit si imazhin e sfondit të modulit. Mund ta gjeni atë që po përdorim duke shkarkuar dosjen në fillim të këtij udhëzimi.

  • Madhësia e imazhit në sfond: Kopertina
  • Pozicioni i imazhit të sfondit: Qendra
Konfigurimi i sfondit të modulit të personit

Cilësimet e tekstit të titullit

Shkoni te skeda e modelit dhe ndryshoni cilësimet e tekstit të titullit si më poshtë:

  • Niveli i titullit: H3
  • Shkronja e titullit: Quicksand
  • Pesha e fontit të titullit: e guximshme
  • Ngjyra e tekstit të titullit: #ffffff
  • Madhësia e tekstit të titullit: 230%
Përshtatja e titullit të modulit Divi

Cilësimet e tekstit të trupit

Ndryshoni gjithashtu cilësimet e tekstit të trupit.

  • Tipi i Trupit: Open Sans
  • Ngjyra e tekstit të trupit: #ffffff
  • Lartësia e vijës së trupit: 2,2 em
Përshtatja e trupit Divi

Cilësimet e cilësimeve të tekstit

Pastaj bëni disa ndryshime në cilësimet e tekstit të pozicionit.

  • Pozicioni i shkronjave: Sans Open
  • Ngjyra e tekstit të pozicionit: # edf000
Pozicioni Divi

ndarje

Dhe plotësoni cilësimet e modulit duke shtuar vlerat e personalizuara të mbushjes në cilësimet e hapësirës.

  • Mbushje e sipërme: 70%
  • Mbushje e poshtme: 10%
  • Mbushja e majtë: 10%
  • Mbushja e duhur: 10%
Hapësira e modulit të personit Divi

Kopjoni modulin e Personit 4 herë

Pasi të keni përfunduar modulin e Personit, mund ta kloni tërë modulin katër herë.

Vendosni kopje në kolonat e mbetura

Vendosni modulet e kopjuara në katër kolonat e mbetura të rreshtit. Sigurohuni që të redaktoni edhe përmbajtjen.

Kthejeni Row në një Carousel Scroll Auto

Ndryshoni madhësinë e rreshtit # 2

Tani për ta kthyer këtë rresht në një karusel anëtar të ekipit të lëvizjes automatike, duhet të rihapim cilësimet e rreshtit dhe të ndryshojmë gjerësinë dhe gjerësinë maksimale në cilësimet e madhësisë.

  • Gjerësia: 180%
  • Gjerësia maksimale: 220% (tavolinë), 100% (tabletë dhe telefon)
Hapësira e modifikimit të divit

Shtoni lëvizjen horizontale të rreshtit # 2

Përfundoni cilësimet e linjës duke shtuar lëvizjen horizontale te cilësimet e efektit të lëvizjes në skedën e përparuar dhe keni mbaruar!

  • Aktivizoni lëvizjen horizontale: Po
  • Fillimi i kompensimit:
    • Zyra: 2,5
    • Tableta dhe telefoni: 0
  • Kompensimi mesatar: 0 (me 40%)
  • Fundi i kompensimit:
    • Zyra: -25 (me 62%)
    • Tableta dhe telefoni: 0
  • Efekti i lëvizjes së këmbëzës: mesi i elementit
Konfigurimi i animacionit duke lëvizur Divi

studim

Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.

zyrë

Shkoni anëtarin e ekipit divi

Mendimet e fundit

Në këtë manual, ne ju kemi treguar se si të bëheni krijues me efektet e zhvendosura të Divi-t. Në mënyrë të veçantë, ne kemi rikrijuar një karusel të bukur, anëtar anëtari të ekipit që lëviz. Ndërsa vizitorët lëvizin poshtë faqes, shfaqet një pjesë tjetër e karuselit.

Si të shtoni më shumë ikona të mediave sociale në Divi

Si të shtoni më shumë ikona të mediave sociale në Divi

Divi ju lejon të kontrolloni dhe dizajnoni çdo detaj të faqes suaj të internetit, nga titulli në fund të faqes. Një nga elementët më të klikuar të çdo faqe në internet janë ikonat e mediave sociale. Një audiencë e angazhuar dëshiron t'ju gjejë diku tjetër dhe t'ju njohë. Padyshim, do të dëshironi ta bëni këtë sa më të lehtë të jetë e mundur. 

Kështu që ne do t'ju tregojmë se si të aktivizoni ikona shtesë të mediave sociale në opsionet e temës së Divi, si të përdorni Divi Builder për të futur ikona të mediave sociale kudo në një faqe ose postim dhe si të përfitoni nga fuqia. të temës Divi Builder për të shtuar ikonat e mediave sociale në çdo cep të faqes tuaj.

Si të aktivizoni lehtësisht ikonat shtesë të mediave sociale në futbollin Divi

Mënyra më e lehtë për të shtuar më shumë ikona të mediave sociale në faqen tuaj të Divi është të shkoni në panel Opsionet e temës , duke aktivizuar opsionet për Facebook, Twitter, Instagram dhe RSS. Atëherë gjithçka që duhet të bëni është të fusni URL-të e profilit tuaj në fusha. Kur ta bëni këtë, do t'i shihni ato të shfaqen si lidhje ikonash në fund të faqes së faqes tuaj:

Ikona sociale divi

Në menunë tuaj të tastierës WordPress, shkoni te Divi - Opsionet e temës dhe kliko në skedë I përgjithshëm . Shkoni poshtë për të parë ndërprerësin e rrjetit. Gjithashtu, pikërisht nën ato toggles, sigurohuni që të futni URL-të për secilën ikonë sociale Divi që aktivizoni. Përndryshe ikona do të shfaqet, por duke klikuar mbi të përdoruesi nuk do të jetë askund. Përdorimi i një # në vend të një URL do ta mbajë përdoruesin në faqe sesa potencialisht t'i ridrejtojë ata në një faqe 404 .

Opsionet e ndarjes së temave

Shkoni deri në fund të opsioneve tuaja të temës dhe klikoni ruaj Ndryshimet . Tani mund të shkoni në faqen e faqes tuaj dhe të klikoni në ikonat sociale për t'i provuar!

Nëse nuk i shihni ikonat në futbollin tuaj, sigurohuni që të kontrolloni personalizuesin e temës nën Pamja - Rregulloje dhe sigurohuni që Trego ikona sociale kontrollohet nën opsionet e futbollit.

Divi wordpress

Nëse, megjithatë, dëshironi edhe më shumë mundësi për ikonat e faqes sociale, vazhdoni të lëvizni poshtë në seksionin tonë në Ndërtuesin e Temave Divi, ku ne diskutojmë si për modelet e personalizuara ashtu edhe për parazgjedhjet e përgjithshme.

Si të përdorim Divi Builder për të shtuar ndjekës të mediave sociale në një faqe ose për të publikuar përmbajtje

Ndonjëherë vendosja e ikonave shtesë të mediave sociale midis blloqeve të tekstit, imazheve ose përmbajtjes tjetër në trupin e faqeve ose postimeve mund të ketë shumë kuptim. Faqja juaj e uljes ose faqja Rreth, për shembull, do të ishte një vend i mirë për të shtuar ikona shtesë sociale për t'i bërë të ditur vizitorët se si të lidhen me ju. Ata patjetër që do të dallohen më shumë sesa thjesht lidhja me profilet tuaja sociale duke përdorur tekst të rregullt. Plus, njerëzit janë duke kërkuar ikona të njohura.

Ju mund të përdorni Divi Builder për të futur ikona të mediave sociale direkt në faqet ose postimet tuaja duke përdorur ndjekja e mediave sociale .

Sa herë që krijoni ose hapni një faqe ose artikull ekzistues në pultin e WordPress tuaj, do të shihni një buton të madh vjollcë duke pyetur nëse doni të përdorni Divi Builder apo jo.

Krijimi i artikullit Divi

Dhe sigurisht që po. Thjesht klikoni Përdorni Divi Builder për të filluar ndërtimin e faqes tuaj ose postimin nga e para (ose nga një nga tonat paraqitjet e paracaktuara ) Për më tepër, mund të përfshini ikonat e mediave sociale Divi nëse jeni duke përdorur redaktuesin e paracaktuar të WordPress. E tëra çfarë ju duhet të bëni është të fusni një bllok të Paraqitja e Divi dhe ndiqni të njëjtat hapa siç ndjekim më poshtë.

Paraqitja Divi gutenberg

Ju mund të përdorni mjetin për të hartuar faqen tuaj ose postimin tuaj si të doni duke përdorur modulet e disponueshme për ndërtimin e faqes. Nëse kjo është hera juaj e parë që përdorni Divi Builder, mund të dëshironi të shikoni më parë këtë përmbledhje për të kuptuar qartë se si funksionon.

Kur të jeni gati të shtoni ikona të mediave sociale në faqen tuaj, klikoni rrethi i zi + në pjesën në të cilën dëshironi të vendosni ikonat tuaja të mediave sociale dhe lëvizni deri në kutinë e ndjekja e mediave sociale duket.

Futja e modulit ndjek në mediat sociale

Do t'ju kërkohet të zgjidhni rrjetet sociale që dëshironi përpara se të filloni t'i personalizoni ato. Klikoni mbi Shtoni një rrjet të ri shoqëror .

Shto rrjetin social moduli social divi

Pastaj zgjidhni një nga lista rënëse.

Shtoni një rrjet të ri shoqëror

Me atë të zgjedhur, shtoni URL-në e profilit tuaj. Opsionale, mund të zgjidhni një ngjyrë, gradient, sfond, etj. specifike për ikonën e saj.

Butoni i personalizimit të rrjetit social

Pasi të keni shtuar rrjetin tuaj të parë social, mund të vazhdoni të shtoni rrjete të tjera duke ndjekur të njëjtat hapa. Të gjithë do të renditen nën skedë Përmbajtje i Cilësimet e përcjelljes së mediave sociale . Mund t'i redaktoni, kopjoni ose riorganizoni duke i tërhequr dhe hedhur në vend.

Personalizoni ikonat sociale

Pasi të keni shtuar rrjetet tuaja sociale, shkoni te skedat Përmbajtje et Konceptim për të luajtur me opsionet e tjera të personalizimit. Ju mund të ndryshoni gjithçka nga hija e kutisë, rrezja e kufirit, hapësira, filtrat dhe madje animacioni intro për modulin e ikonës. Ju gjithashtu keni mundësinë të përfshini një buton Ndjek që të gjitha ikonat tuaja të tërheqin më shumë vëmendjen ndaj tyre. Kur të keni mbaruar, klikoni këpushë jeshile .

Na ndiqni ndarjen e butonave

Më pas mund të lëvizni ikonat rreth faqes tuaj, duke punuar në ndarjen dhe paraqitjen e tyre siç ju duket e përshtatshme. (The Opsionet e transformimit Divi janë të mahnitshme për këtë, nga rruga.) Kur jeni të kënaqur me të gjitha vendimet tuaja, shtypni butoni i gjelbër Ruaj (ose Publikoni) në këndin e poshtëm të djathtë për të regjistruar modulin tuaj të ri të ikonës së mediave sociale. Nëse nuk shihni një buton Publikimi / Ruajtja, shtypni butonin elipsë vjollcë (tre pika) në qendër të poshtme të ekranit për të zgjeruar menunë.

Butoni Divi na ndiqni

Pas kësaj, ikonat tuaja të mediave sociale do të jenë live në faqen tuaj.

Përdorimi i Divi Theme Builder për të shtuar ikona të mediave sociale

Siç e përmendëm më lart, Ndërtuesi i Temave Divi është një mjet i fuqishëm që ju jep kontroll të plotë mbi pothuajse çdo aspekt të faqes tuaj. Pra, nëse po kërkoni të shtoni ikona të mediave sociale kudo, krijuesi i temave ju ka mbuluar.

Për të filluar me gjeneratorin e temës, shkoni te Divi - Gjenerator i temave në panelin e kontrollit WordPress.

Ndërtues Divi

Kjo ka të bëjë shumë me shtimin e ikonave të mediave sociale në një plan urbanistik ekzistues të krijuesit të temave. Ose te një i ri! Nuk ka rëndësi nëse shtoni në kokë, fundin e faqes ose pjesën e përgjithshme të faqes tuaj - apo edhe kategori të caktuara ose lloje të tjerë të faqeve të specializuara. Ju do të ndiqni të njëjtin proces.

Së pari do të gjejmë pjesën që duam të shtojmë. Përsëri, mund të jetë global ose i personalizuar. Nëse nuk e keni përdorur më parë ndërtuesin e temave, është e lehtë. Ne do të shtojmë ikona të mediave sociale në postimet individuale. Prandaj mund të filloni duke klikuar në Shtoni një model të ri dhe zgjedhjen Të gjitha mesazhet ou Mesazhe në kategori specifike . Pastaj kontrolloni kategoritë që dëshironi të përfshini. Pastaj kliko në Krijoni një shabllon .

Shtoni një model divi

Nëse tashmë keni vendosur modele, thjesht klikoni në Redaktoni lapsin ose klikoni dy herë në pjesën që dëshironi të modifikoni.

Paraqitja Divi

Procesi i shtimit të ikonave të mediave sociale këtu është i njëjtë me atë që përshkruhet më sipër në gjenerator. Sidoqoftë, meqenëse jeni duke përdorur krijuesin e temave në vend që të ndryshoni vetëm një faqe të vetme, ikonat nuk do të shfaqen aty ku ju zgjidhni. Shabllonet mund të shtohen në kryefjalë, fundfaqe dhe shabllone globale. Dhe ju mund të zgjidhni se si dhe kur shfaqen ato pa pasur nevojë t’i konfiguroni një herë. Jo faqe për faqe, siç do të bënit më lart.

Për shembull, nëse duam të përfshijmë ikonat e mediave sociale poshtë titullit të postimit, por mbi përmbajtjen e postimit në çdo postim në blog që botojmë, thjesht do të shtojmë një modul në suivi rrjete sociale. Klikoni në rreth Noir + dhe zgjidhni atë në dialog Vendosni një modul .

Zgjidhni modulin shoqëror

Pastaj thjesht tërhiqni modulin atje ku dëshironi të shfaqen ikonat e mediave sociale. (Ne jemi duke përdorur mënyrën wireframe për këtë vendosje). Atëherë ju vetëm duhet të shtoni rrjetet sociale që dëshironi të shfaqni. Pastaj ju përshtatni madhësinë dhe ngjyrosjen siç bëtë më sipër.

Ndarja e modulit të mediave të ikonave sociale

Dhe ashtu si kjo, ju shtuat disa ikona të mediave sociale në krijimin e temave Divi. Ato do të shfaqen në çdo postim në blog që krijoni (në këtë shembull).

Pamja në butonin divi me ndarjen

Dhe nëse nuk ju pëlqen se si duken, krijuesi i temës është i lehtë për tu personalizuar. Thjesht tërhiqni ato në një vendndodhje tjetër, siç është pjesa e sipërme e shiritit anësor.

Lëviz moduli i ndarjes sociale Divi

Sigurohuni që të klikoni butonin jeshil Regjistrohem në këndin. Tani çdo postim në blog me këtë model në sit do të ngarkohet me ikonat tuaja të mediave sociale në krye të shiritit anësor.

ikonat e shiritit anësor

Shtimi i ikonave të mediave sociale në kokë dhe fund të faqes me Divi Theme Builder

Ndoshta ikonat e paracaktuara të mediave sociale në cilësimet e Divi nuk po funksiononin për ju ose nuk ofronin personalizim të mjaftueshëm. Në atë rast, gjithmonë mund të përdorni krijuesin e temave për ta personalizuar atë më plotësisht. 

Në çdo shabllon, mund të shtoni një futboll të personalizuar. Kjo do të zëvendësojë Divin e paracaktuar. Çdo shabllon pa një model të personalizuar do të shfaqë elementin e parazgjedhur të temës. Ikonat e mediave sociale mund të ndryshojnë nga arkivi në postë, në varësi të nevojave të përdoruesve tuaj.

Paraqitja divi e temës së personalizimit

Ju gjithashtu mund të shtoni një shtyllë globale e cila do të zëvendësojë të gjithë faqet e tjera që keni krijuar. (Kjo vlen edhe për organet globale dhe headers). 

Nëse keni hartuar 4 fund të posaçëm për Postimet, Faqet, Projektet dhe Kategoritë, por më pas krijoni një Botim Global, vetëm Global Footer do të shfaqet. 

Shabllonet globale janë të shkëlqyera për ikonat e mediave sociale në të gjithë sitin për, ndoshta, për një gazetë apo një markë. Ndërsa shabllonët e personalizuar me ikona sociale mund të jenë më të mirat për krijuesit individualë që janë pjesë e një rrjeti.

Shtoni një futboll global divi

Duke përdorur Ndërtuesin e Divi-së për koka të personalizuara, fundin e faqeve dhe shabllonet e trupit, mund të shtoni ikona të mediave sociale pothuajse në çdo pjesë të Divi-it që dëshironi. Ju nuk jeni të kufizuar në planet e paracaktuara ose duhet të gërmoni në sistemin e skedarëve WordPress. Për më tepër, me gjeneratorin e temave, mund të përdorni cilindo nga opsionet e dizajnit të Divi-t për të krijuar ikonat e mediave sociale dhe për t'i bërë ato të dallohen në mënyrën e duhur për çdo audiencë të veçantë.

përfundim

Kur keni opsionet e paracaktuara të futbollit Divi, mjeti Divi Builder për postimet dhe faqet, fuqia e Ndërtuesit të Temave Divi, nuk ka asnjë arsye pse duhet të instaloni një shtojcë për të shtuar ikonat e mediave sociale në faqen tuaj të internetit. Divi ju jep kontroll të plotë mbi mënyrën se si duken ikonat tuaja sociale dhe ku janë ato. 

Pavarësisht nëse keni nevojë të promovoni një markë, një autor të ftuar, një stallë të krijuesve të përmbajtjes, ose thjesht vendet ku mund të gjendeni në internet, Divi ka një mënyrë për ta bërë atë. Ne jemi të njëanshëm, por mendojmë se është mënyra më e lehtë, më e lehtë dhe më me stil për të shtuar ikona të mediave sociale në faqen tuaj të internetit.

Krijimi i një rrjeti përfitimesh dinamike për produktet WooCommerce

Krijimi i një rrjeti përfitimesh dinamike për produktet WooCommerce

Mënyra se si e dizajnoni faqen e produktit tuaj ka një ndikim të menjëhershëm në sjelljen e vizitorëve tuaj. Një model i hartuar dhe i personalizuar i faqes së produktit mund ta bëjë më të lehtë për vizitorët të vendosin nëse duan të blejnë produktin tuaj. Nëse jeni duke kërkuar një mënyrë për ta bërë faqen tuaj të produktit më tërheqëse, me siguri do t'ju pëlqejë ky tutorial. 

Ne do t'ju tregojmë se si të përfshini një rrjet dinamik të përfitimeve të produktit në dizajnin tuaj duke përdorur Divi dhe shtojcën e avancuar të fushave të personalizuara. Ne do të fillojmë duke krijuar një grup fushash për përfitime. Ne më pas do të plotësojmë fushat e personalizuara në faqen tonë të produktit dhe do të përfshijmë përmbajtjen dinamike në modelin e faqes tonë të produktit. 

Rezultati i mundshëm

Para se të zhyteni në tutorial, le të hedhim një vështrim të shpejtë të rezultatit në madhësi të ndryshme të ekranit.

Ndarja e rezultatit të mundshëm

1. Instaloni shtojcën e shtojcës ACF Plugin And Benefit Field Field Group

Instaloni shtojcën Advanced Advanced Fields

Për të shfaqur përfitimet e ndryshme të produkteve në pjesën e prapme të produkteve tona, ne do të përdorim shtojcën falas Fushat e Avancuara të Zonave. Hyni në tuaj WordPress backend> Plugins> Add new> Find ACF plugin> Install> Aktivizo .

Instaloni shtojcën e fushës së personalizuar të avancuar

Shkoni në fushat me porosi dhe shtoni një grup të ri fushash

Pasi të keni instaluar dhe aktivizuar shtojcën ACF, do të keni mundësi të hyni në fushat tuaja të personalizuara dhe të shtoni një grup të ri fushash.

Krijoni fusha ACF

Cilësimet e grupit fushor

Jepni një titull grupit tuaj të ri të fushave dhe lejoni që ajo të shfaqet vetëm në faqet e produkteve.

  • "Lloji i mesazhit" është i barabartë me "Produktin"
Shto rregulla

Shtoni një fushë të parë

Vazhdoni duke shtuar një fushë të re për titullin e përfitimit të produktit tuaj të parë.

  • Etiketa në terren: Titulli i përfitimit 1
  • Lloji i fushës: teksti
Shto fushën AC
Përshtatja e fushës Divi

Përsëritni hapin për fushat e mbetura

Bëni të njëjtën gjë për përfitimet e tjera të produktit dhe përshkrimet e tyre. Të gjitha këto fusha kërkojnë llojin e fushës "Tekst" të caktuar për ta.

  • Titulli i shërbimit 1
  • Përshkrimi i përfitimeve 1
  • Titulli i shërbimit 2
  • Përshkrimi i përfitimeve 2
  • Titulli i shërbimit 3
  • Përshkrimi i përfitimeve 3
  • Titulli i shërbimit 4
  • Përshkrimi i përfitimeve 4
Konfiguroni fushat acf

2. Shtoni përfitime për produktet

Hapni ose shtoni një produkt të ri

Pasi të krijohen grupi dhe fushat tuaja të fushës, ju mund të shtoni përfitimet e produkteve në produktet tuaja në një nivel individual. Hapni një produkt të zgjedhur nga ju ose krijoni një të ri.

Krijimi i produktit Divi

Plotësoni fushat e Përfitimet e Produkteve

Dhe plotësoni përfitimet e produktit.

Plotësoni fushat e përparësive divi

3. Krijoni një shabllon të faqeve të produkteve në Divi Theme Builder

Shkoni te Divi Theme Builder dhe shtoni një model të ri

Timeshtë koha të fillojmë me Divi! Për të krijuar një model të ri, shkoni te Ndërtuesi i Temave Divi dhe klikoni në "Shto një model të ri".

Ndërtuesi i temave Divi

Përdorni një shabllon për të gjitha produktet

Ne e përdorim këtë model në të gjitha produktet, por mos ngurroni të zgjidhni produktet me një kategori ose etiketë specifike.

Shtoni të gjitha produktet e woocommerce

Futni redaktuesin e modelit të trupit

Pastaj futni trupin e modelit duke klikuar në "Shtoni një organ me porosi" dhe duke zgjedhur "Krijoni një trup me porosi".

Ndërtimi i trupit divi

Redaktoni seksionin # 1

Ngjyrë e sfondit

Pasi të keni brenda redaktorin e shabllonit, do të vëreni një seksion. Hapeni atë pjesë dhe ndryshoni ngjyrën e sfondit në të zezë.

  • Ngjyra e sfondit: # 000000
Konfigurimi i sfondit të seksionit Divi

ndarje

Kaloni tek skedari i dizajnit të seksionit dhe shtoni disa mbushje të sipërme dhe të poshtme.

  • Mbulesa e sipërme: 10px
  • Mbushja e poshtme: 10px
Konfigurimi i ndarjes së seksionit Divi

Shtoni një rresht të ri

Struktura e kolonës

Le të vazhdojmë duke shtuar një rresht të ri në seksionin që ka strukturën e mëposhtme:

Konfigurimi i paraqitjes së modulit të linjës

ndarje

Pa shtuar ndonjë mod, le të hapim cilësimet e rreshtit dhe të bëjmë disa rregullime të hapësirës.

  • Përdorni ulluqet e personalizuara: Po
  • Gjerësia e zorrës së trashë: 1
  • Gjerësia: 90%
  • Gjerësia maksimale: 100%
Cilësimet e hapësirës së modulit të linjës

ndarje

Hiqni të gjithë hapësirën e brendshme të sipërme dhe të poshtme.

  • Marzhi i lartë i brendshëm: 0px
  • Marzhi i ulët i brendshëm: 0px
Cilësimet e ndarjes së modulit të linjës Divi

Shtoni modulin e Njoftimit për Shporta Woo në kolonë

Përmbajtja dinamike

Moduli i vetëm që na duhet në këtë linjë dhe seksion është moduli Woo Cart Notice. Sigurohuni që "Ky Produkt" është zgjedhur në seksionin dinamik.

  • Produkti: Ky produkt
Cilësimet woo karrocë njoftim modul ndarje

Sfond me ngjyra

Pastaj hapni cilësimet e modulit dhe përdorni një sfond transparent.

  • Ngjyra e Sfondit: rgba (0,0,0,0)
Cilësimet e ndarjes së modulit të karrocës

Cilësimet e tekstit

Kaloni në skedën "Design" dhe ndryshoni fontin e tekstit.

  • Shkronja e tekstit: Karla
Cilësimet e shkronjave të modulit Divi

Vendosja e butonit

Përfundoni cilësimet e shtojcës duke përcaktuar cilësimet e stilit:

  • Përdorni stilet e personalizuara për butonin: Po
  • Madhësia e tekstit të butonit: 20px
  • Ngjyra e tekstit të butonit: # 000000
  • Sfondi i Butonit: # ffd623
  • Gjerësia e kufirit të butonit: 0px
  • Butoni i rrumbullakosur i kufirit: 0px
Cilësimet e ngjyrave të modulit të njoftimit të karrocës
  • Shkronja e butonit: Oswald
  • Stili i shkronjave të butonit: Shift
Rregullimi i dizajnit të ngjyrës së modulit të njoftimit të karrocës
  • Marzhi i lartë i brendshëm: 20px
  • Marzhi i ulët i brendshëm: 20px
  • Margjina e brendshme e majtë: 50px
  • Margjina e brendshme e djathtë: 50px
Moduli i dizajnit të konfigurimit njoftimi i karrocës

Shtoni seksionin # 2

Sfondi i gradientit

Shtoni një seksion tjetër të rregullt nën atë të mëparshëm. Pastaj hapni cilësimet dhe përdorni një sfond gradient si më poshtë:

  • Ngjyra 1: # 000000
  • Ngjyra 2: #ffffff
  • Pozicioni i fillimit:
    • Desktop: 30%
    • Tableta: 57%
    • Telefon: 54%
  • Pozicioni i fundit:
    • Desktop: 30%
    • Tableta: 57%
    • Telefon: 54%
Rregullimi i pasmë i modulit të linjës Divi

ndarje

Le të shkojmë në skedën Design dhe të shtojmë një diferencë të lartë të brendshme.

  • Mbulesa e sipërme: 150px
Konfigurimi i ndarjes së modulit të vijës Divi

Shto një rresht të ri

Struktura e kolonës

Vazhdoni duke shtuar një linjë të re me të njëjtën strukturë siç tregohet më poshtë:

Konfigurimi i stilit të linjës Divi

sizing

Pa shtuar asnjë mods akoma, ne do të hapim cilësimet dhe do të ndryshojmë hapësirën si më poshtë:

  • Përdorni ulluqet me porosi: Po
  • Hapësira e ulluqeve: 1
  • Gjerësia: 95%
  • Gjerësia maksimale: 2560px
  • Rreshtimi i linjave: Qendra
Moduli divi i konfigurimit të ullukut

ndarje

Ne gjithashtu do të heqim kufirin e lartë të brendshëm gjithashtu.

  • Mbulesa e sipërme: 0px
Konfigurimi i ndarjes së modulit Divi

Elementi kryesor

Dhe për të përqendruar përmbajtjen e kolonës në Desktop, ne do të përdorim dy rreshta të kodit CSS në elementin kryesor të modulit të rreshtit.

Desktop:

ekran: flex; align-artikuj: qendër;

Tablet & Telefon:

ekran: bllok;
Cilësimet e stilit të modulit të linjës Divi

Shtoni modulin Woo Image në kolonën 1

Përmbajtja dinamike

It'sshtë koha për të shtuar module, ne do të fillojmë me modulin Woo Images në kolonën 1. Sigurohuni që të zgjidhet "Ky produkt".

  • Produkti: Ky produkt
Cilësimet e modulit të imazhit të produktit Woocommerce

Efekti i animacionit me lëvizje vertikale

Ne i shtojmë lëvizje delikate imazhit duke përdorur efektin lëvizës horizontal të lëvizjes në skedën e përparuar.

  • Aktivizoni lëvizjen vertikale: Po
  • Fillimi i kompensimit:
    • Zyra: -4
    • Tableta dhe telefoni: 0
  • Kompensimi mesatar: 0
  • Përfundimi i kompensimit: 0
  • Efekti i lëvizjes së këmbëzës: mesi i elementit
Rregullimi i modulit të imazhit Divi

Shtoni modulin e titullit Woo në kolonën 2

Përmbajtja dinamike

Në kolonën 2, modi i parë që na duhet është një mod titull Woo. Sigurohuni që "Ky produkt" të jetë zgjedhur në zonën e përmbajtjes dinamike.

  • Produkti: Ky produkt
produkti përfiton nga rrjeti

Cilësimet e tekstit të titullit

Pastaj shkoni në skedën e dizajnit dhe stiloni tekstin e titullit si më poshtë:

  • Shkronja e titullit: Oswald
  • Stili i shkronjave të titullit:
  • Ngjyra e tekstit të titullit: # ffd623
  • Madhësia e tekstit të titullit: 80px
Rregullimi i dizajnit të modulit të titullit Divi

ndarje

Plotësoni modulin e titullit Woo duke shtuar kufijtë e majtë dhe të djathtë.

  • Marzhi i majtë: 5%
  • Marzhi i duhur: 5%
Cilësimi i modulit të titullit Divi

Shtoni modulin e përshkrimit Woo në kolonën 2

Përmbajtja dinamike

Le të kalojmë te moduli tjetër, i cili është një modul i përshkrimit Woo. Ne përdorim përmbajtjen e mëposhtme dinamike për këtë:

  • Produkti: Ky produkt
  • Lloji i përshkrimit: Përshkrimi i shkurtër
Cilësimet e modulit të përshkrimit të produktit

Cilësimet e tekstit

Kaloni në skedën e dizajnit të modulit dhe ndryshoni rregullimet e tekstit në përputhje me rrethanat:

  • Shkronja e tekstit: Karla
  • Ngjyra e tekstit: #dbdbdb
  • Madhësia e tekstit: 17 px (desktop dhe tablet), 15 px (telefon)
  • Lartësia e vijës së tekstit: 1,9 em
Ndarja e përshkrimit të modulit të rregullimit të ngjyrave

sizing

Pastaj ndryshoni gjerësinë në madhësi të ndryshme të ekranit.

  • Gjerësia: 59% (desktop), 82% (tablet dhe telefon)
Rregullimi i gjerësisë së modulit përmbledhës Divi

ndarje

Përfundoni modulin e përshkrimit Woo duke shtuar vlerat e marzheve të personalizuara në cilësimet e hapësirës.

  • Marzhi i sipërm: 50px
  • Marzhi i poshtëm: 100px
  • Marzhi i majtë: 5%
  • Marzhi i duhur: 5%
Moduli i përshkrimit të produktit Divi

Shtoni modulin Blurb në kolonën 2

Përmbajtja dinamike

Për të shfaqur përfitimet e produktit që shtuam në pjesën e parë të këtij udhëzimi, do të përdorim modulet Blurb. Shtoni një modul të parë Blurb dhe përdorni përmbajtjen dinamike të përfitimit të parë të prodhuar për titullin dhe trupin.

  • Titulli: Titulli i përfitimeve 1
  • Trupi: Përshkrimi i përfitimeve 1
Cilësimi i tekstit të modulit përmbledhës Divi

Ngarkoni imazhin

Ngarko një imazh ose përdor një ikonë të zgjedhjes tënde tjetër. Ju mund t'i gjeni ato që kemi përdorur gjatë gjithë këtij tutoriali në dosjen e shkarkimit që keni qenë në gjendje të shkarkoni në fillim të këtij tutorial.

Konfigurimi i divit përmbledhës të modulit të imazhit

Cilësimet e figurës / ikonës

Kaloni në skedën e dizajnit të modulit dhe ndryshoni cilësimet e figurës / ikonës si më poshtë:

  • Vendosja e figurës / ikonës: Në krye
  • Përshtatja e imazhit / ikonës: Majtas
Moduli i rregullimit të Divi

Cilësimet e tekstit të titullit

Ne po modifikojmë cilësimet e tekstit të titullit tjetër.

  • Font Titulli: Oswald
  • Stili i shkronjave të titullit:
  • Madhësia e tekstit të titullit: 25px
Konfiguro fontin e modulit përmbledhës divi

Cilësimet e tekstit të trupit

Së bashku me cilësimet e tekstit të trupit.

  • Font trupi: Karla
  • Madhësia e tekstit: 17 px (desktop dhe tablet), 15 px (telefon)
  • Lartësia e vijës së trupit: 1,9 em
Konfiguro përmbledhjen e modulit të tekstit div i

sizing

Pastaj shkoni te cilësimet e madhësisë dhe ndryshoni gjerësitë. Shtë e rëndësishme të përdorni një gjerësi kryesore më pak se 50%, kjo do të na lejojë të tregojmë dy module Blurb krah për krah në hapat e ardhshëm.

  • Gjerësia e imazhit: 25%
  • Gjerësia: 49%
Konfiguroni madhësinë e modulit përmbledhës divi

ndarje

Ne gjithashtu do të shtojmë hapësira rreth modulit Blurb duke përdorur vlera të personalizuara të mbushjes në madhësi të ndryshme të ekranit.

  • Mbushje e sipërme: 8%
  • Mbushje e poshtme: 8%
  • Mbushja e majtë: 8% (desktop dhe tablet), 2% (telefon)
  • Mbushja e duhur: 8% (desktop dhe tablet) 2% (telefon)
Konfiguroni hapësirën e modulit përmbledhës divi

Elementi kryesor

Tani do të sigurohemi që moduli Përmbledhje të shfaqë tekstin pranë njëri-tjetrit, në dy hapa. Së pari, ne do të sigurohemi që gjerësia e modulit është më pak se 50% (siç bëmë në hapin e mëparshëm). Tjetra, ne do të përdorim pronën në rresht. Ne do ta shtojmë këtë veti CSS në elementin kryesor në seksionin e përparuar.

shfaq: inline-block;
Shto modulin divi të kodit CSS

Kloni modulin përmbledhës 3 herë

Pasi të keni përfunduar modin e parë të Blurb, mund ta klononi atë tri herë. Automatikisht do të vini re që modulet Blurb shfaqen në një rrjet.

Seksioni divi i emrit të produktit

Redaktoni imazhet e modulit Blurb

Redaktoni imazhin në secilën pod të kopjuar të Blurb. Mund t'i gjeni në dosjen e shkarkimit që mund të keni shkarkuar në fillim të këtij artikulli.

Imazhi i modulit përmbledhës Divi

Modifikoni përmbajtjen dinamike të modulit Blurb

Ndryshoni gjithashtu përmbajtjen dinamike të secilit modul të kopjuar Blurb.

  • Titulli: Titulli i shërbimit (2,3 ose 4)
  • Trupi: përshkrimi i avantazheve (2,3 ose 4)
Rregullat e modulit përmbledhës Divi

Shtoni kufijtë në modulet Blurb individualisht

Përcaktoni cilësimet e kufirit të modulit 1

Tani, për të përfunduar dizajnimin e rrjetit tonë, ne do të shtojmë kufij në modulet Blurb në një nivel individual. Hapni modin e parë të Blurb dhe përdorni një bordurë të drejtë.

  • Gjerësia e duhur e kufirit: 1px
  • Ngjyra e duhur e kufirit: # ffd623
Modul përmbledhës i konfigurimit të kufirit të rrumbullakosur

Shtoni gjithashtu një kufi të poshtëm në modulin e parë Blurb.

  • Gjerësia e poshtme e kufirit: 1px
  • Ngjyra e poshtme e kufirit: # 000000
Konfiguroni kufirin e poshtëm divi
Përcaktoni cilësimet e kufirit të modulit 2

Pastaj hapni modulin e dytë Blurb dhe përdorni një kufi të poshtëm.

  • Gjerësia e poshtme e kufirit: 1px
  • Ngjyra e poshtme e kufirit: # 000000
Divi përmbledhës i modulit të kufirit të konfigurimit
Përcaktoni cilësimet e kufirit të modulit 3

Plotësoni modelin e rrjetit duke shtuar një kufi të drejtë në modulin e tretë Blurb.

  • Gjerësia e duhur e kufirit: 1px
  • Ngjyra e duhur e kufirit: # ffd623
produkti përfiton nga rrjeti

Shtoni Woo Shto në shportë Modul në kolonën 2

Përmbajtja dinamike

Moduli i fundit që na duhet në dizajnin tonë është një modul Woo Add to Cart. Sigurohuni që "Ky produkt" të jetë zgjedhur në zonën e përmbajtjes dinamike.

  • Produkti: Ky produkt
Shtoni në cilësimet e modulit divi të kartës

Cilësimet e fushës

Shkoni në skedën tjetër të dizajnit dhe ndryshoni cilësimet e fushës.

  • Ngjyra e sfondit të fushave: #ffffff
  • Ngjyra e tekstit në terren: # 000000
Konfiguroni stilin e ngjyrave shtoni në shportë modulin divi
  • Fushat e rrumbullakosura: 0px (të gjitha qoshet)
  • Gjerësia e kufirit të poshtëm të fushave: 1px
  • Ngjyra e kufirit të poshtëm të fushave: # 000000
Konfiguroni ndarjen e ndarjes divi

Cilësimet e butonit

Pastaj, stiloni butonin në përputhje me rrethanat:

  • Përdorni stilet me porosi për butonin: Po
  • Madhësia e tekstit të butonit: 20 piksele
  • Ngjyra e tekstit të butonit: # 000000
  • Ngjyra e sfondit të butonit: # ffd623
  • Gjerësia e kufirit të butonit: 0px
  • Rrezja kufitare e butonit: 0px
Konfiguroni dizajnin e butonit divi
  • Shkronja e butonit: Oswald
  • Stili i shkronjave të butonit:
Konfiguro butonin divi
  • Mbushja e sipërme: 20px
  • Mbushja e poshtme: 20px
  • Mbushja e majtë: 50px
  • Mbushja e duhur: 50px
Konfiguroni madhësinë e modulit divi

ndarje

Dhe plotësoni parametrat e modulit duke shtuar vlera të marzhës me porosi.

  • Marzhi i sipërm: 100px
  • Marzhi i majtë: 5%
Konfiguroni ndarjen e ndarjeve

3. Ruani modifikimet e gjeneratorit të temës dhe shikoni paraprakisht rezultatin

Pasi të keni përfunduar hartimin e modelit të faqes së produktit, mund të ruani të gjitha ndryshimet tuaja në Builder Theme dhe të shfaqni rezultatet në produktet tuaja!

Ruani dizajnin divi
Ruani modifikimet divi

studim

Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.

Rezultati demo

Mendimet e fundit

Në këtë artikull, ne ju kemi treguar se si të bëheni krijues me modelin tuaj të ardhshëm të faqes së produktit Divi. Në mënyrë të veçantë, ne ju kemi treguar se si të përfshini një rrjet dinamik të përfitimeve të produkteve për të shtuar përfitime shtesë në faqen e produktit tuaj. Ne e krijuam këtë udhëzues duke përdorur Divi në kombinim me shtojcën e avancuar të fushave të personalizuara. Ju gjithashtu mund të shkarkoni skedarin JSON falas! Nëse keni ndonjë pyetje ose sugjerim, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.

Si të implementoni modalitetin e errët në faqen tuaj me Divi

Si të implementoni modalitetin e errët në faqen tuaj me Divi

Modaliteti i Errët vazhdon të fitojë popullaritet si një opsion i përshtatshëm për përdoruesit që të provojnë uebin me më pak tendosje në sy. Le ta pranojmë, të gjithë kemi tendencë të kalojmë më shumë kohë duke parë ekranet sesa ndoshta duhet, kështu që çdo lehtësi e shtuar në përvojën e përdoruesit (si modaliteti i errët) mund të shkojë shumë larg. 

Sistemet operative, programet dhe shfletuesit zakonisht përfshijnë aftësi të integruara në modalitetin e errët, por disa zhvillues e çojnë atë në një nivel tjetër duke përfshirë një përvojë të modalitetit të errët për faqen e tyre të internetit. Ideja është që të marrin më shumë kontroll mbi mënyrën se si faqja e tyre e internetit duket në mënyrë të errët, pa pasur nevojë për kompromis në markë dhe / ose dizajn.

Në këtë manual, ne do t'ju tregojmë se si të krijoni një këmbe të personalizuar të modalitetit të errët në Divi nga e para pa një shtojcë. Me këtë veçori të ndërrimit të modalitetit të errët, ju do të keni kontroll mbi modelin e modalitetit të errët dhe do të keni një përvojë më të mirë përdoruesi të përshtatur për markën tuaj.

Le të fillojmë!

studim

Këtu është një vrojtim i dizajnit që do të ndërtojmë në këtë tutorial.

Këtu është ndryshimi i mënyrës së errët të zakonshme që do të krijojmë.

Aktivizo modalitetin e errët

Dhe këtu është para dhe pas për modalitetin e errët të aplikuar në një nga paraqitjet tona të paracaktuara.

Dhe këtu është ndryshimi i modalitetit të errët i shtuar në një kokë globale. Vini re sesi mbetet mënyra e dritës / errësirës kur shfletoni sitin.

Pjesa 1: Ndërtimi i kaloni nga mënyra e errët

Në këtë pjesë të parë të tutorialit, ne do të ndërtojmë një modalitet të errët për të ndryshuar një faqe në Divi. Sapo të jetë krijuar ndërrimi me kodin, do të jeni në gjendje ta ruani atë në bibliotekën Divi dhe ta shtoni në çdo vend në faqen tuaj të internetit.

Për të filluar, shtoni një rresht me një kolonë në seksionin e paracaktuar kur ndërtoni nga e para me Divi në pjesën e përparme.

Seksioni Divi

Shtoni Modulin Përmbledhës

Për të ndërtuar ndryshimin me porosi, ne do të hartojmë një modul Blurb me pak CSS me porosi.

Shtoni një modul të ri teksti prezantimi në rresht.

Përmbajtje

Hiqni përmbajtjen e parazgjedhur bedel për titullin dhe trupin. Pastaj shtoni ikonën katrore në vend të figurës.

Moduli përmbledhës Divi

Konceptim

Shkoni te cilësimet e projektimit dhe azhurnoni si vijon:

  • Ngjyra e ikonës: # 666666
  • Rreshtimi i figurës / ikonës: majtas
  • Madhësia e shkronjës së ikonës: 22 pixel
Konfigurimi i ikonës Divi
  • Gjerësia: 50px
  • Shtrirja e modulit: qendra
  • Lartësia: 25px
Konfigurimi i madhësisë Divi
  • Margjina: e ulët 0px
  • Qoshet e rrumbullakosura: 4px
  • Gjerësia e kufirit: 2px
  • Ngjyra e kufirit: # 666666
Konfigurimi i kufirit Divi

Custom CSS

Sapo të krijohet dizajni, kaloni në skedën e përparuar. Nën Custom CSS, shtoni CSS të personalizuara të mëposhtme në elementin kryesor për t'u siguruar që tejkalimi nuk mbulohet nga modelimi i këndeve të rrumbullakosura.

tejmbushja: e dukshme! e rëndësishme;

Pastaj shtoni CSS të mëposhtme të personalizuar në elementin Pas:

përmbajtja: "dritë"; pozicioni: absolut; majtas: -35px; lartë: 0px;

Kjo shton një etiketë në modulin Blurb të cilin do ta ndryshojmë nga "drita" në "errët" në klik.

Butoni i ndërrimit të divit

Hartimi i tekstit të trupit

Meqenëse teksti post pseudo-element trashëgon stilet e tekstit të trupit, ne mund të shtojmë stilet e tekstit të trupit duke përdorur opsionet Divi si më poshtë:

  • Font trupi: Roboto
  • Ngjyra e tekstit të trupit: # 666666
  • Madhësia e tekstit të trupit: 13px
  • Hapësira e shkronjave të trupit: 1px
Butoni i ndërrimit të shkronjave

Shtimi i kodit personal me modul kodi

Për të shtuar kodin e nevojshëm (CSS / JQuery) për të përdorur modalitetin e errët të ndërprerë, do të përdorim një modul kodi.

Krijoni një modul kodi të ri nën modulin Blurb në të njëjtën kolonë.

Shto modul kodi

Pastaj ngjitni kodin e mëposhtëm në zonën e kodit:

/*** 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");}});

Shtimi i klasave me porosi CSS

Kodi i personalizuar kërkon që ju të keni një klasë të personalizuar CSS të shtuar në modulin Blurb ose ndërprerësin. Kjo do të lejojë që turbullira të shkaktojë funksionimin e ndryshimit të modalitetit të errët dhe të klikimit.

Blas klasën e modulit

Hapni cilësimet e modulit Blurb dhe shtoni një klasë të veçantë CSS si më poshtë:

  • Klasa CSS: ndryshim i errët
Kodi css divi

Klasa e aftë për modalitetin e errët

Ne gjithashtu duhet të shtojmë një klasë të personalizuar CSS në secilin element Divi që duam të kemi aftësinë e modalitetit të errët. Sapo elementi të ketë klasën CSS, ai element do të trashëgojë CSS të personalizuar "mode të errët" në kodin që shtuam pasi u aktivizua modaliteti i errët. Kjo metodë na jep më shumë kontroll mbi modelin tonë të modalitetit të errët, pasi disa elementë mund të mos kenë nevojë për stilim në modalitetin e errët.

Për të filluar, ne mund të shtojmë modalitetin e errët në seksionin që përmban modalitetin tonë të errët.

Hapni parametrat e seksionit dhe shtoni klasën e mëposhtme CSS:

  • Klasa CSS: et-gjendje të aftë për mode
Seksioni i ndarjes së zgjedhësit CSS

Pjesa 2: Shtimi i veçorive të modalitetit të errët në një faqe Divi

Tani që kemi kodin dhe klasat CSS në rregull, ne jemi gati të aplikojmë funksionalitetin dhe modelin e Modalitetit të Errët në një faqe të tërë në Divi. Për ta bërë këtë, ne do të përdorim paraqitjen tonë Premade të faqes së uljes së aplikacionit celular.

Për të shtuar paraqitjen, hapni menunë e cilësimeve në pjesën e poshtme të krijuesit vizual dhe klikoni në ikonën Shto paraqitje të re.

Pastaj zgjidhni paraqitjen e faqes së uljes së aplikacionit celular nga skeda Layouts të paracaktuara.

Sigurohuni që NUK është zgjedhur opsioni "Zëvendësoni përmbajtjen ekzistuese". Ju nuk doni të pastroni pjesën me ndryshimin e modalitetit të errët.

Zgjidhni paraqitjen divi 1

Meqenëse stili i modalitetit të errët do të zbatohet vetëm për elementët me klasën CSS "në gjendje të errët dhe të errët", ne mund të zgjedhim të shtojmë në faqe në mënyra të ndryshme.

  1. Ne mund të shtojmë klasën CSS në secilin element të faqes individualisht.
  2. Ne mund ta shtrijmë klasën CSS në elemente në të gjithë faqen (kjo do të ishte më shpejt sesa ta bësh manualisht). Për shembull, ne mund të hapim cilësimet e seksionit për pjesën e sipërme dhe ta shtrijmë klasën CSS për atë seksion në të gjitha seksionet e faqes.
  3. Mund të shtojmë klasën CSS në parazgjedhjet globale të elementit. Kjo do të zbatojë klasën CSS për të gjithë elementët në të gjithë sitin, duke shtuar aftësinë e modalitetit të errët në të gjithë sitin. Për shembull, ne mund të hapim cilësimet e seksionit dhe të klikojmë në ikonën e paracaktuar globale për të ndryshuar parazgjedhjet e seksionit global. Pastaj mund të shtojmë klasën CSS dhe ta regjistrojmë atë si një klasë CSS për të gjitha seksionet e faqes.

Shtimi i klasës CSS në elementët e faqes

Për këtë shembull, ne do të azhurnojmë elementët e faqes duke shtuar klasën CSS në parazgjedhjet globale në seksionet dhe modulet e tekstit. Dhe ne gjithashtu do të bëjmë disa shtesa në elementët e tjerë të faqes ndërsa shkojmë.

Të gjitha pjesët

Për të shtuar klasën CSS në të gjitha seksionet, hapni cilësimet e seksionit të sipërm që përmban ndryshimin e modalitetit të errët. Pastaj ndryshoni parazgjedhjet globale të seksionit dhe shtoni klasën e mëposhtme CSS në seksionin Parazgjedhjet globale:

  • Klasa CSS: et-gjendje të aftë për mode

Të gjitha seksionet e specializuara

Shtoni gjithashtu klasën CSS në standardet standarde në seksionin e specializuar.

Shtoni në të gjitha seksionet e specializuara

Modulet e tekstit

Pastaj hapni cilësimet për njërin nga modulet e tekstit në faqe dhe shtoni të njëjtën klasë CSS në parazgjedhjet globale të tekstit.

Shtoni në modulet e tekstit

Për të provuar rezultatin, shkoni në faqen e drejtpërdrejtë dhe klikoni në ndryshimin e modalitetit të errët në krye të faqes.

Ja se si duhet të duket faqja në modalitetin e qartë.

Modaliteti i pastër

Dhe ja se si duhet të duket faqja në modalitetin e errët.

Mënyra e errët

Burimet shtesë

Këtu janë disa burime të tjera që mund të jenë me interes për ju.

Mendimet e fundit

Pajisja e faqes tuaj Divi me një ndërrim të modalitetit të errët mund të jetë një mënyrë e shkëlqyeshme për të rritur përvojën e përdoruesit dhe për të krijuar një dizajn krejt të ri që kënaq dhe lehtëson syrin. Shpresoj se kjo do të jetë e dobishme për ju.