Kur thjeshtoni mënyrën se si krijoni postime në blogun tuaj Site Web, shanset janë që dëshironi të përfshini një CTA tërheqëse diku në artikullin tuaj. Tani me integrimin e ri të Bllokut të paraqitjes së Gutenberg të Divi, mund të shtoni lehtësisht një bllok të ri të ndërtuar nga Divi kudo në postimin tuaj të blogut të Gutenberg. Kjo ju lejon të mbani përmbajtje postimi i përgjithshëm i blogut në mjedisin Gutenberg, ndërsa ende krijon një Divi CTA të personalizuar duke përdorur opsionet e integruara të Divi-s. Më e mira e të dy botëve! Në këtë tutorial, ne do t'ju tregojmë se si të shtoni një bllok të animuar të paraqitjes Divi CTA në postimin tuaj në Gutenberg. Ne gjithashtu do të ndajmë skedarin JSON të bllokut të paraqitjes Divi CTA 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.
Importimi i bllokut të paraqitjes JSON
Shkarkoni paraqitjen në bibliotekën Divi
Për të importuar skedarin JSON që keni mundur të shkarkoni më lart, shkoni në bibliotekën tuaj Divi në pjesën e prapme të panelit tuaj të WordPress dhe klikoni në 'Import dhe eksport'.
Pastaj zgjidhni skedarin JSON në dosjen tuaj të shkarkimit dhe klikoni në "Importoni Layouts Builder Divi".
Shtoni një Bllok të ri Divi brenda Gutenberg
Pasi të jetë importuar faqosja juaj, mund të hyni në mesazhin tuaj Gutenberg dhe të shtoni një bllok të ri të paraqitjes së Divi.
Importoni një skedar JSON nga prezantimet e ruajtura
Pastaj, kliko në "Ngarko nga biblioteka", shko te "Paraqitjet e tua të ruajtura" dhe zgjidh paraqitjen për të importuar bllokun e paraqitjes Divi CTA në postimin tënd të blogut. Kjo eshte!
Le të fillojmë rikrijimin!
Përdorni shabllonin e botimit për paketën e tretë me temë
Përdorni Paketën e Tretë të Ndërtuesit të Temave
Timeshtë koha të fillojmë të krijojmë nga e para! Para së gjithash, dizajni që ne po rikrijojmë korrespondon me paketën e tretë të krijimit të temës, e cila u botua në blogun Divi. Shko tek artikulli dhe shkarkoni skedarët JSON për këtë paketë krijimi temash.
Shkoni te Ndërtuesi i Temave Divi
Pasi të keni shkarkuar paketën e tretë të krijimit të temave, mund të hyni në Builder Divi Theme.
Shkarkoni shabllonin e botimit
Shkarkoni modelin postues të Theme Builder Pack duke klikuar në ikonën në këndin e sipërm të djathtë.
Pastaj zgjidhni modelin e postimit dhe klikoni në "Importo Divi Theme Builder templates". Sigurohuni që të ruani ndryshimet edhe në ndërtuesin e temave. Në këtë pikë, ne kemi caktuar modelin e postimit të blogut nga Paketa e Ndërtimit të Temave për të gjitha postimet tona.
Hapni një botim ekzistues të Gutenberg ose krijoni një të ri
Hapi tjetër është të shtojmë bllokun e paraqitjes së Divi CTA në postimin tonë në Gutenberg. Për ta bërë këtë, hapni një artikull ekzistues ose krijoni një artikull të ri.
Shtoni një bllok të ri Divi në internet
Pasi të futeni në mesazh, mund të shtoni një bllok të ri të paraqitjes në Divi.
Krijoni një plan urbanistik të ri brenda bllokut Divi
Atëherë do të keni dy mundësi. Zgjidhni opsionin "Krijo një paraqitje të re".
Cilësimet e seksionit
ndarje
Sapo të hyni brenda redaktorit të bllokut të faqosjeve Divi, do të vini re një seksion. Hapni këtë seksion dhe shtoni vlera marzhi të personalizuara për të krijuar hapësirë rreth kontejnerit të seksionit.
- Marzhi i sipërm: 50px
- Marzhi i poshtëm: 50px
- Marzhi i majtë: -10%
- Marzhi i duhur: -10%
Shtoni rreshtin # 1
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 rrisni gjerësinë dhe gjerësinë maksimale.
- Gjerësia: 100%
- Gjerësia maksimale: 100%
Shtoni ndarës # 1 në kolonë
dukshmëri
Timeshtë koha për të shtuar module, duke filluar me një modul ndarjeje. Sigurohuni që opsioni "Trego ndarësin" të jetë i aktivizuar.
- Trego ndarësin: Po
Linjë
Kaloni në skedën e dizajnit të modulit dhe ndryshoni cilësimet e rreshtit si më poshtë:
- Ngjyra e linjës: # fc526e
- Stili i linjës: i fortë
- Pozicioni i linjës: i lartë
sizing
Ndryshoni gjithashtu parametrat e madhësisë.
- Pesha e ndarësit: 3px
- Gjerësia: 30%
- Rreshtimi i modulit: e drejtë
- Lartësia: 3px
gjallëri
Dhe ndryshoni cilësimet e animacionit në përputhje me rrethanat:
- Stili i animacionit: Slide
- Drejtimi i animacionit: majtas
- Kohëzgjatja e animacionit: 2000ms
- Vonesa e animacionit: 500 ms
- Intensiteti i animacionit: 100%
- Perde e fillimit të animacionit: 0%
Shtoni ndarësin # 2 në kolonë
dukshmëri
Le të kalojmë në modulin tjetër të ndarjes. Përsëri, sigurohuni që opsioni "Trego Ndarësin" të jetë i aktivizuar.
- Trego ndarësin: Po
Linjë
Pastaj shkoni në skedën e dizajnit të modulit dhe ndryshoni cilësimet e rreshtit si më poshtë:
- Ngjyra e linjës: # e1e3e8
- Stili i linjës: i fortë
- Pozicioni i linjës: i lartë
sizing
Pastaj modifikoni parametrat e madhësisë së modulit.
- Pesha e ndarësit: 3px
- Lartësia: 3px
ndarje
Shtoni gjithashtu vlerat e hapësirës së personalizuar.
- Marzhi i majtë: 10%
- Marzhi i duhur: -20%
gjallëri
Dhe plotësoni parametrat e modulit duke ndryshuar parametrat e animacionit si më poshtë:
- Stili i animacionit: Slide
- Drejtimi i animacionit: majtas
- Kohëzgjatja e animacionit: 2000ms
- Vonesa e animacionit: 500 ms
- Intensiteti i animacionit: 100%
- Perde e fillimit të animacionit: 100%
Ju mund të shtoni sa më shumë ndarës sa doni të shkulni animacionin tuaj.
Shtoni një rresht # 2
Struktura e kolonës
Shtoni një rresht tjetër në seksion duke përdorur strukturën e kolonës së mëposhtme:
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ë: 1
- Gjerësia: 70%
- Rreshtimi i linjës: qendër
Shtoni modulin e tekstit # 1 në kolonë
Shto përmbajtje H2
Më pas, shtoni një modul të parë teksti në kolonën e rreshtit me përmbajtje H2 sipas zgjedhjes suaj.
Cilësimet e tekstit H2
Kaloni në skedën e dizajnit dhe ndryshoni përkatësisht cilësimet e tekstit H2:
- Ngjyra e tekstit të artikullit 2: # fc526e
- Titulli 2 Madhësia e tekstit: 28px
ndarje
Pastaj shtoni vlera të mbushura me porosi.
- Mbushja e sipërme: 50px
- Mbushja e poshtme: 50px
- Mbushja e majtë: 50px
kufi
Ne gjithashtu përdorim një kufi të majtë.
- Gjerësia e kufirit të majtë: 2px
- Ngjyra e majtë e kufirit: # fc526e
gjallëri
Dhe plotësoni parametrat e modulit duke shtuar një animacion të personalizuar.
- Stili i animacionit: Rrokullisje
- Drejtimi i animacionit: Qendra
- Vonesa e animacionit: 1500 ms
Shtoni modulin e tekstit # 2 në kolonë
Shto përmbajtje
Shtoni një modul tjetër teksti pak më poshtë atij të mëparshëm me përmbajtje e zgjedhjes suaj.
ndarje
Kaloni në skedën e dizajnit të modulit dhe ndryshoni vlerat e mbushjes në përputhje me rrethanat:
- Mbushja e sipërme: 50px
- Mbushja e poshtme: 50px
- Mbushja e duhur: 50px
kufi
Pastaj shtoni një kufi të sipërm dhe të djathtë.
- Kufiri i lartë dhe i djathtë: 2 piksele
- Ngjyra e kufirit të sipërm dhe të djathtë: # fc526e
gjallëri
Dhe plotësoni parametrat e modulit duke ndryshuar parametrat e animacionit si më poshtë:
- Stili i animacionit: Rrokullisje
- Drejtimi i animacionit: Qendra
- Vonesa e animacionit: 1700 ms
Shtoni një modul butoni në kolonë
Shto një kopje
Moduli tjetër dhe i fundit që na duhet në këtë rresht është një modul butoni. Shtoni një kopje të zgjedhjes suaj.
Cilësimet e butonit
Kaloni në skedën e dizajnit të modulit dhe ndryshoni cilësimet e butonit si më poshtë:
- Përdorni stilet me porosi për butonin: Po
- Madhësia e tekstit të butonit: 13px
- Ngjyra e tekstit të butonit: #ffffff
- Shkalla e ngjyrosur 1: # ff5b84
- Shkalla e ngjyrosur 2: # f94857
- Lloji i gradientit: linear
- Drejtimi i gradientit: 165deg
- Gjerësia e kufirit të butonit: 0px
- Rrezja kufitare e butonit: 0px
- Hapësira e shkronjave të butonave: 1px
- Shkronja e butonit: Montserrat
- Pesha e shkronjave të butonit: Gjysmë e theksuar
- Stili i shkronjave të butonit:
ndarje
Pastaj shtoni mbushjen me porosi të sipërme dhe të poshtme.
- Mbushja e sipërme: 16px
- Mbushja e poshtme: 16px
gjallëri
Dhe plotësoni parametrat e modulit duke shtuar animacionin e mëposhtëm:
- Stili i animacionit: Rrokullisje
- Vonesa e animacionit: 1900 ms
Linja e klonit # 1 dhe vendoseni në fund të seksionit
Pasi të keni mbaruar rreshtin e parë dhe të dytë, mund të klononi rreshtin e parë dhe ta vendosni kopjimin në fund të seksionit.
Ndryshoni rendin e ndarësve
Ndryshoni vendet për modulet e para dhe të fundit të ndarjes.
Mendimet e fundit
Në këtë artikull, ne ju kemi treguar se si të përfitoni nga integrimi i ri i Divi-t Gutenberg dhe të shtoni një bllok të animuar Divi CTA në postimin tuaj të blogut në Gutenberg. Kjo është një mënyrë e shkëlqyer për të nxjerrë në pah Thirrjen për Veprim të zgjedhur gjatë kohës vizitorët lexoni përmbajtjen e postimit tuaj në blog.
