Krijimi i postimeve të vlefshme në blog kërkon kohë dhe përpjekje. Së bashku me gjetjen e temave më të mira për të shkruar në kamaren tuaj, është gjithashtu e rëndësishme të mbani lexuesit të angazhuar dhe t'i lejoni ata të gjejnë shpejt informacionin që kërkojnë.
Tani një mënyrë e mirë për t'iu afruar këtij lloji të përvojës së përdoruesit është të ndani një kuti përmbledhëse vizuale në fund të postimit tuaj në blog, menjëherë para mendimeve të fundit.
Me blloqet e reja të paraqitjes së Divi-t, tani mund të krijoni pa mundim një kuti përmbledhëse me opsionet e integruara të Divi-t. Në këtë manual, ne do t'ju ndjekim gjatë procesit dhe gjithashtu do të jeni në gjendje të shkarkoni skedarin JSON falas për paraqitjen!
Le të fillojmë rikrijimin!
Përdorni shabllonin e botimit për paketën e gjashtë të temave
Shkarkoni Paketën e Gjashtë të Ndërtuesit të Temave
Kutia përmbledhëse që do të rikrijojmë gjatë këtij tutoriali përputhet në mënyrë të përkryer me shabllonin e postimit të Paketës së Gjashtë Tema Builder falas. Hyni nëartikull në blog dhe shkarkoni të gjithë paketën.
Shkoni te Ndërtuesi i Temave Divi
Pastaj shkoni te Ndërtuesi i Temave Divi.
Shkarkoni shabllonin e botimit
Klikoni në ikonën në këndin e sipërm të djathtë dhe shkarkoni modelin e postimit nga Paketa e Ndërtimit të Temave. Sigurohuni që të redaktoni çdo ndryshim në krijuesin e temave më pas.
Hapni një botim ekzistues të Gutenberg ose krijoni një të ri
Tani, pasi të keni shtuar modelin përkatës të postimit, është koha të krijoni kutinë e përmbledhjes. Hapni ose krijoni një postim të ri duke përdorur Gutenberg.
Shtoni një përmbledhje të titullit H2
Drejt fundit të postimit në blog, ne do të shtojmë një titull të ri H2.
Shtoni një bllok të ri Divi në internet
Tjetra do të shtojmë një bllok të ri të paraqitjeve të Divi.
Krijoni një plan urbanistik të ri brenda bllokut Divi
Pasi të keni shtuar bllokun, do të keni dy mundësi. Zgjidhni të krijoni një plan urbanistik të ri.
Cilësimet e seksionit
Ngjyrë e sfondit
Brenda redaktorit të bllokut të faqosjeve Divi, do të vini re një seksion. Hapni këtë seksion dhe përdorni një sfond të bardhë për të.
- Ngjyra e sfondit: #FFFFFF
ndarje
Kaloni në skedën e dizajnit të seksionit dhe shtoni vlera të personalizuara të marzhit dhe mbushjes.
- Marzhi i sipërm: 100px
- Marzhi i majtë: -10% (zyrë), 0% (tablet dhe telefon)
- Marzhi i duhur: -10% (zyra), 0% (tablet dhe telefon)
- Mbushja e sipërme: 0px
- Mbushja e poshtme: 0px
kufi
Shtoni edhe një rreze kufitare.
- Fundi majtas: 16px
- Në të djathtë: 16px
Kuti me hije
Me një hije delikate të kutisë.
- Fuqia e turbullimit të hijes së kutisë: 60px
- Forca e përhapjes së hijes së kutisë: 10px
- Ngjyra e hijes: rgba (0,0,0,0,08)
Shto një rresht të ri
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 një modul, hapni cilësimet e rreshtit dhe lini që rreshti të zërë të gjithë gjerësinë e kontejnerit të seksionit.
- 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: 100%
- Gjerësia maksimale: 100%
ndarje
Pastaj hiqni mbushjen e sipërme dhe të poshtme të paracaktuar nga linja.
- Mbushja e sipërme: 0px
- Mbushja e poshtme: 0px
Cilësimet e kolonës 1
Ngjyrë e sfondit
Pastaj hapni cilësimet në kolonën 1 dhe përdorni një ngjyrë të bardhë në sfond për këtë.
- Ngjyra e sfondit: #FFFFFF
ndarje
Shtoni gjithashtu vlera të mbushura me porosi.
- Mbushja e sipërme: 70px
- Mbushja e poshtme: 70px
- Mbushja e majtë: 70 f
- Mbushja e duhur: 70px
Kuti me hije
Vazhdoni duke shtuar një hije të kutisë delikate me një ngjyrë tjetër të parazgjedhur dhe hover.
- Fuqia e turbullimit të hijes së kutisë: 50px
- Ngjyra e paracaktuar e hijes: rgba (0,0,0,0)
- Ngjyra e hijes së rri pezull: rgba (0,0,0,0,15)
Shkalla e transformimit të rri pezull
Në pezull, ne gjithashtu duam të shkallëzojmë kolonën pak.
- E drejta: 105%
- E ulët: 105%
Indeksi i Hover Z
Plotësoni parametrat e kolonës duke shtuar një indeks hoveri z.
- Indeksi i Hover Z: 11
Shtoni modulin e tekstit # 1 në kolonë
Shtoni një numër në zonën e përmbajtjes
Është koha për të shtuar module, duke filluar me modulin e parë të tekstit. Shtoni një numër në kuti përmbajtje.
Sfondi i gradientit
Pastaj shtoni një sfond gradient.
- Ngjyra 1: # ff5e92
- Ngjyra 2: # ffd4b6
- Drejtimi i gradientit: 165deg
Cilësimet e tekstit
Shkoni te skeda e modelit dhe ndryshoni cilësimet e tekstit si më poshtë:
- Shkronja e tekstit: Poppins
- Ngjyra e tekstit: #ffffff
- Madhësia e tekstit: 26px
- Shtrirja e tekstit: qendra
sizing
Pastaj caktoni një gjerësi dhe një lartësi.
- Gjerësia: 150px
- Lartësia: 150px
kufi
Shtoni edhe një rreze kufitare.
- Fundi majtas, djathtas lart dhe poshtë djathtas: 100 piksele
Elementi kryesor CSS
Për ta përqendruar tekstin në enën tonë, do të duhet të shtojmë disa rreshta të kodit CSS në elementin kryesor të modulit në skedën e përparuar.
display: flex;align-items: center;justify-content: center;
pozitë
Dhe ne do t'i japim fund parametrave të modulit duke ripozicionuar modulin.
- Pozicioni: absolut
- Vendndodhja: majtas
Shtoni modulin e tekstit # 2 në kolonë
Shto përmbajtje H3
Le të kalojmë te moduli tjetër i tekstit. Shtoni disa përmbajtje H3 sipas zgjedhjes suaj.
Cilësimet e tekstit H3
Pastaj modifikoni madhësinë e tekstit H3 të modulit.
- Titulli 3 Tekst Madhësia: 23px
ndarje
Gjithashtu ndryshoni cilësimet e hapësirës.
- Marzhi i sipërm: 100px
- Marzhi i poshtëm: 20px
Shtoni një modul ndarjeje në kolonë
dukshmëri
Moduli tjetër që na duhet është një modul i ndarjes. Sigurohuni që opsioni "Trego ndarësin" të jetë i aktivizuar.
- Trego ndarësin: Po
Cilësimet e linjës
Kaloni në skedën e dizajnit të modulit dhe ndryshoni cilësimet e rreshtit si më poshtë:
- Ngjyra e linjës: # ff5e92
- Stili i linjës: i fortë
- Pozicioni i linjës: i lartë
sizing
Ndryshoni gjithashtu madhësinë e modulit.
- Pesha e ndarësit: 2px
- Gjerësia: 20%
Shtoni modulin e tekstit # 3 në kolonë
Shto përmbajtje
Le të kalojmë në modulin tjetër dhe përfundimtar të tekstit. Shtoni disa përmbajtje e zgjedhjes suaj.
Kolona e klonimit
Pasi të keni përfunduar kolonën dhe të gjitha modulet e saj, mund të klononi të gjithë kolonën.
Ndryshoni ngjyrën e hijes së kutisë së paracaktuar
Hapni cilësimet në kolonën 2 dhe ndryshoni ngjyrën e paracaktuar të hijes.
- Ngjyra e hijes: rgba (0,0,0,0,06)
Ndryshoni sfondin gradient të modulit të tekstit Nr. 1
Hapni modulin e parë të tekstit në kolonën tjetër 2 dhe ndryshoni sfondin e gradientit.
- Ngjyra 1: # 7e5ce6
- Ngjyra 2: # 25b8ee
Ndryshoni kufirin e modulit të tekstit Nr. 1
Ndryshoni gjithashtu cilësimet e kufirit të modulit.
- Top majtas, majtas dhe majtas djathtas: 100 piksele
Ndryshoni pozicionin e modulit të tekstit # 1
Dhe ripoziciononi modulin në skedën e përparuar.
- Vendndodhja: djathtas
Ndryshoni ngjyrën e ndarësit
Vazhdoni duke hapur cilësimet për modulin e ndarjes. Ndryshoni ngjyrën e vijës për t'iu përshtatur skemës së re të ngjyrave.
- Ngjyra e linjës: # 7e5ce6
Ndryshoni të gjithë përmbajtjen
Në fund, modifikoni të gjithë përmbajtjen e modulit në kolonën 2.
Kloni i tërë seksioni dy herë
Pasi të keni përfunduar pjesën e parë, mund ta klononi dy herë.
Ndryshoni hapësirën e seksionit të parë të kopjuar
Hapni cilësimet në seksionin e parë kopjuar dhe ndryshoni vlerat e marzhit në përputhje me rrethanat:
- Marzhi i majtë: -5% (kompjuter desktop), 0% (tablet dhe telefon)
- Marzhi i duhur: -5% (zyra), 0% (tablet dhe telefon)
Ndryshoni hapësirën e seksionit të dytë të kopjuar
Gjithashtu hapni kopjimin e dytë, fshini të gjitha vlerat e margjinës dhe në vend të kësaj shtoni një diferencë më të ulët.
- Marzhi i poshtëm: 100px
Ndryshoni të gjithë përmbajtjen
Në fund, modifikoni të gjithë përmbajtjen e modulit.
Ruani paraqitjen në bibliotekën e Divi për ripërdorim
Nëse planifikoni të përdorni këtë kuti përmbledhëse në postime të tjera në blog, sigurohuni që ta ruani në bibliotekën tuaj Divi, në mënyrë që të mund të përdorni lehtë atë! Kjo eshte !
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 treguam se si të shtoni një kuti përmbledhëse në postimin tuaj në Gutenberg me blloqet e reja të paraqitjes së Divi. Kutitë përmbledhëse janë një mënyrë e shkëlqyer vizuale për t'ju ndihmuar vizitorët për të gjetur informacionin që kërkojnë.
Ju gjithashtu mund të shkarkoni skedarin JSON për paraqitjen falas! Nëse keni ndonjë pyetje, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.
