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.
Vini re titullin dhe titullin e faqes në mesin e sipërm të kokës që shfaqet dinamikisht.
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.
Pasi të përfundojë, modeli i përgjithshëm i kokës do të jetë i disponueshëm në Divi Theme Builder.
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ë.
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.
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.
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.
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).
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.
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.
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.
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ë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
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.
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%
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.
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!
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.
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.
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
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
ndarje
Pastaj shtoni një diferencë të sipërme dhe të poshtme.
Marzhi i sipërm: 200px
Marzhi i poshtëm: 200px
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.
Cilësimet e tekstit H2
Shkoni te skeda e modelit dhe ndryshoni cilësimet e tekstit H2 si më poshtë:
Pastaj shtoni një diferencë më të ulët në tabletë dhe telefon.
Marzhi i poshtëm: 50 pixel (vetëm tablet dhe telefon)
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.
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
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
Linjë
Pastaj ndryshoni ngjyrën e linjës së modulit.
Ngjyra e linjës: # 000000
sizing
Pastaj bëni disa ndryshime në parametrat e madhësisë.
Pesha e ndarësit: 3px
Gjerësia: 28%
ndarje
Ne gjithashtu shtojmë një diferencë të lartë.
Marzhi i sipërm: 10px
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
përplot
Fshihni edhe rrjedhjet e tejmbushura.
Rrjedhja horizontale: e fshehur
Vërshimi vertikal: i fshehur
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:
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
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 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
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 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)
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
Linjë
Pastaj ndryshoni ngjyrën e linjës së modulit.
Ngjyra e linjës: # 000000
sizing
Bëni gjithashtu ndryshime në parametrat e madhësisë.
Pesha e ndarësit: 3px
Gjerësia: 50%
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ë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ë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
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ë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
Font Butoni: Tremujor
Pesha e shkronjave të butonit: e theksuar
ndarje
Shtoni gjithashtu mbushjen me porosi.
Mbushja e sipërme: 50px
Mbushja e poshtme: 50px
Mbushja e majtë: 100px
Mbushja e duhur: 100px
pozitë
Dhe ripoziciononi butonin në përputhje me rrethanat:
Pozicioni: Absolut
Vendndodhja: majtas
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ë.
Ndryshoni të gjithë përmbajtjen
Sigurohuni që të redaktoni të gjithë përmbajtjen në rreshta të kopjuar.
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
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
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
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
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
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
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.
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ë.
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.
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)
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
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:
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
ndarje
Ne gjithashtu shtojmë mbushje me porosi të sipërme dhe të poshtme.
Mbushja e sipërme: 100px
Mbushja e poshtme: 100px
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.
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)
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
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
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
Shtoni një rresht # 2
Struktura e kolonës
Në rreshtin tjetër! Përdorni strukturën e mëposhtme të kolonës:
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%
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)
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.
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
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
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;
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.
Fshi imazhin
Pastaj fshini imazhin. Ne përdorim imazhin sfond të kolonës në vend.
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
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%
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
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
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%
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)
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
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ë
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.
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:
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 .
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.
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.
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ë.
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.
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 .
Pastaj zgjidhni një nga lista rënëse.
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.
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.
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 .
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ë.
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.
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 .
Nëse tashmë keni vendosur modele, thjesht klikoni në Redaktoni lapsin ose klikoni dy herë në pjesën që dëshironi të modifikoni.
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 .
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.
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).
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.
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.
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.
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.
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.
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.
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 .
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.
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"
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
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
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.
Plotësoni fushat e Përfitimet e Produkteve
Dhe plotësoni përfitimet e produktit.
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".
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.
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".
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
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
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:
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%
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
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
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 tekstit
Kaloni në skedën "Design" dhe ndryshoni fontin e tekstit.
Shkronja e tekstit: Karla
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
Shkronja e butonit: Oswald
Stili i shkronjave të butonit: Shift
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
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%
ndarje
Le të shkojmë në skedën Design dhe të shtojmë një diferencë të lartë të brendshme.
Mbulesa e sipërme: 150px
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ë:
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
ndarje
Ne gjithashtu do të heqim kufirin e lartë të brendshëm gjithashtu.
Mbulesa e sipërme: 0px
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;
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
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
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
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
ndarje
Plotësoni modulin e titullit Woo duke shtuar kufijtë e majtë dhe të djathtë.
Marzhi i majtë: 5%
Marzhi i duhur: 5%
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 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
sizing
Pastaj ndryshoni gjerësinë në madhësi të ndryshme të ekranit.
Gjerësia: 59% (desktop), 82% (tablet dhe telefon)
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%
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
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.
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
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
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
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%
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)
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;
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.
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.
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)
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
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
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
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
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
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
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
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
Shkronja e butonit: Oswald
Stili i shkronjave të butonit:
Mbushja e sipërme: 20px
Mbushja e poshtme: 20px
Mbushja e majtë: 50px
Mbushja e duhur: 50px
ndarje
Dhe plotësoni parametrat e modulit duke shtuar vlera të marzhës me porosi.
Marzhi i sipërm: 100px
Marzhi i majtë: 5%
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!
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.
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ë.
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ë.
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.
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.
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
Gjerësia: 50px
Shtrirja e modulit: qendra
Lartësia: 25px
Margjina: e ulët 0px
Qoshet e rrumbullakosura: 4px
Gjerësia e kufirit: 2px
Ngjyra e kufirit: # 666666
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:
Kjo shton një etiketë në modulin Blurb të cilin do ta ndryshojmë nga "drita" në "errët" në klik.
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
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ë.
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
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
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.
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.
Ne mund të shtojmë klasën CSS në secilin element të faqes individualisht.
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.
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.
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.
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ë.
Dhe ja se si duhet të duket faqja në modalitetin e errët.
Burimet shtesë
Këtu janë disa burime të tjera që mund të jenë me interes për ju.
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.
Konfidencialiteti dhe cookies: kjo faqe përdor cookies. Duke vazhduar të shfletoni këtë faqe, ju pranoni ta përdorni.
Për të mësuar më shumë, përfshirë mënyrën e kontrollit të cookies, shihni sa vijon:
Politika e cookies
