Kada pojednostavite način na koji stvarate postove na svom blogu web stranica, vjerojatno želite uključiti atraktivan CTA negdje u svoj članak. Sada s Divi novom Gutenberg Layout Block integracijom, možete jednostavno dodati novi Divi izgrađeni blok bilo gdje u svom Gutenberg blogu. To vam omogućuje da zadržite sadržaj ukupni post na blogu u okruženju Gutenberg, dok nastavljate stvarati prilagođeni Divi CTA koristeći Divi-ove ugrađene opcije. Najbolje od oba svijeta! U ovom vodiču ćemo vam pokazati kako dodati ugrađeni, animirani Divi CTA blok rasporeda u vaš Gutenberg post. Također ćemo besplatno podijeliti Divi CTA layout block JSON datoteku!
Idemo.
Mogući ishod
Prije nego što uđemo u tutorial, pogledajmo rezultat na različitim veličinama zaslona.
Uvoz JSON bloka izgleda
Preuzmite izgled u biblioteci Divi
Da biste uvezli JSON datoteku koju ste gore mogli preuzeti, idite u svoju Divi biblioteku na pozadini vaše WordPress nadzorne ploče i kliknite na 'Uvoz i izvoz'.
Zatim odaberite datoteku JSON u mapi za preuzimanje i kliknite na "Import Divi Builder Layouts".
Dodajte novi Divi blok unutar Gutenberga
Nakon što je vaš izgled uvežen, možete pristupiti vašoj Gutenbergovoj poruci i dodati novi blok Divi izgleda.
Uvozite JSON datoteku iz spremljenih prezentacija
Zatim kliknite "Učitaj iz biblioteke", idite na "Vaši spremljeni izgledi" i odaberite izgled za uvoz bloka Divi CTA izgleda u svoj blog post. To je to!
Krenimo rekreirati!
Upotrijebite predložak za objavljivanje za treći paket tema
Upotrijebite treći paket alata za izgradnju tema
Vrijeme je da krenete stvarati od nule! Prije svega, dizajn koji ponovno stvaramo odgovara trećem paketu za izradu tema objavljenom na blogu Divi. Idite na članak i preuzmite datoteke JSON za ovaj paket za stvaranje tema.
Idite na Divi Builder tema
Nakon što preuzmete treći paket za stvaranje tema, možete pristupiti Divi Builderu tema.
Preuzmite predložak publikacije
Preuzmite predložak paketa Theme Builder Pack klikom na ikonu u gornjem desnom kutu.
Zatim odaberite predložak objave i kliknite na "Uvoz predložaka Divi Theme Builder". Svakako spremite i promjene u alatu za izradu tema. U ovom smo trenutku svim našim postovima dodijelili predložak posta bloga iz paketa tema.
Otvorite postojeću Gutenbergovu publikaciju ili stvorite novu
Sljedeći je korak dodavanje bloka Divi CTA izgleda u naš Gutenbergov post. Da biste to učinili, otvorite postojeći članak ili izradite novi.
Dodajte novi blok Divi na mreži
Kad uđete u poruku, možete dodati novi blok Divi izgleda.
Stvorite novi izgled unutar bloka Divi
Tada ćete imati dvije mogućnosti. Odaberite opciju "Stvori novi izgled".
Postavke odjeljka
razmak
Jednom kad uđete u uređivač blokova Divi, primijetit ćete odjeljak. Otvorite ovaj odjeljak i dodajte prilagođene vrijednosti margina kako biste stvorili prostor oko spremnika odjeljka.
- Gornja margina: 50px
- Donja marža: 50px
- Lijeva marža: -10%
- Desna marža: -10%
Dodajte redak br. 1
Struktura stupaca
Nastavite dodavati novi redak koristeći sljedeću strukturu stupaca:
dimenzioniranje
Bez dodavanja dodatnih modula, otvorite parametre linije i povećajte širinu i maksimalnu širinu.
- Širina: 100%
- Maks. Širina: 100%
Dodajte separator br. 1 u stupac
vidljivost
Vrijeme je za dodavanje modula, počevši od modula za odvajanje. Provjerite je li omogućena opcija "Prikaži separator".
- Pokaži separator: Da
Crta
Prebacite se na karticu dizajna modula i promijenite postavke reda kako slijedi:
- Boja linija: # fc526e
- Stil linije: čvrst
- Položaj linije: visok
dimenzioniranje
Također promijenite parametre dimenzioniranja.
- Težina razdjelnika: 3px
- Širina: 30%
- Usklađivanje modula: desno
- Visina: 3px
Animacija
I u skladu s tim promijenite postavke animacije:
- Stil animacije: dijapozitiv
- Smjer animacije: lijevo
- Trajanje animacije: 2000ms
- Kašnjenje animacije: 500 ms
- Intenzitet animacije: 100%
- Neprozirnost pokretanja animacije: 0%
Dodajte razdjelnik # 2 u stupac
vidljivost
Prijeđimo na sljedeći modul za odvajanje. Opet, provjerite je li uključena opcija "Prikaži separator".
- Pokaži separator: Da
Crta
Zatim idite na karticu dizajna modula i promijenite postavke reda kako slijedi:
- Boja linije: # e1e3e8
- Stil linije: čvrst
- Položaj linije: visok
dimenzioniranje
Zatim izmijenite parametre veličine modula.
- Težina razdjelnika: 3px
- Visina: 3px
razmak
Također dodajte prilagođene vrijednosti razmaka.
- Lijeva marža: 10%
- Desna marža: -20%
Animacija
I dovršite parametre modula mijenjajući parametre animacije na sljedeći način:
- Stil animacije: dijapozitiv
- Smjer animacije: lijevo
- Trajanje animacije: 2000ms
- Kašnjenje animacije: 500 ms
- Intenzitet animacije: 100%
- Neprozirnost pokretanja animacije: 100%
Možete dodati onoliko separatora koliko želite prilagoditi svoju animaciju.
Dodajte liniju br. 2
Struktura stupaca
Dodajte još jedan redak odjeljku koristeći sljedeću strukturu stupaca:
dimenzioniranje
Bez dodavanja dodatnih modula, otvorite parametre retka i izmijenite parametre veličine na sljedeći način:
- Koristite prilagođenu širinu oluka: Da
- Širina oluka: 1
- Širina: 70%
- Poravnavanje linija: središte
Dodajte tekstualni modul br. 1 u stupac
Dodajte H2 sadržaj
Zatim dodajte prvi tekstualni modul stupcu reda s sadržaj H2 po vašem izboru.
Postavke teksta H2
Prebacite se na karticu dizajn i u skladu s tim promijenite postavke teksta H2:
- Boja teksta predmeta 2: # fc526e
- Zaglavlje 2 Veličina teksta: 28px
razmak
Zatim dodajte vrijednosti prilagođenog ispunjavanja.
- Gornja obloga: 50px
- Donja obloga: 50px
- Lijevo oblaganje: 50px
granica
Koristimo i lijevu obrub.
- Širina lijeve granice: 2 px
- Boja na lijevoj ivici: # fc526e
Animacija
Ispunite parametre modula dodavanjem personalizirane animacije.
- Stil animacije: Flip
- Smjer animacije: Centar
- Kašnjenje animacije: 1500 ms
Dodajte tekstualni modul # 2 u stupac
Dodajte sadržaj
Dodajte još jedan tekstualni modul odmah ispod prethodnog s sadržaj po vašem izboru.
razmak
Premjestite se na karticu dizajna modula i u skladu s tim promijenite vrijednosti popunjavanja:
- Gornja obloga: 50px
- Donja obloga: 50px
- Desna obloga: 50px
granica
Zatim dodajte gornju i desnu obrub.
- Gornja i desna granica: 2 piksela
- Boja gornje i desne granice: # fc526e
Animacija
I dovršite parametre modula mijenjajući parametre animacije na sljedeći način:
- Stil animacije: Flip
- Smjer animacije: Centar
- Kašnjenje animacije: 1700 ms
Dodajte modul gumba u stupac
Dodajte kopiju
Sljedeći i posljednji modul koji nam treba u ovom retku je modul s gumbima. Dodajte kopiju po vašem izboru.
Postavke gumba
Prebacite se na karticu dizajna modula i promijenite postavke gumba kako slijedi:
- Upotrijebite prilagođene stilove za gumb: Da
- Veličina teksta gumba: 13px
- Boja teksta gumba: #ffffff
- Gradijent boje 1: # ff5b84
- Gradijent boje 2: # f94857
- Tip gradijenta: linearni
- Smjer gradijenta: 165deg
- Širina obruba gumba: 0px
- Polumjer obruba gumba: 0px
- Razmak između slova s gumbom: 1 px
- Font gumba: Montserrat
- Težina fonta gumba: Polut podebljano
- Stil fonta gumba: velika slova
razmak
Zatim dodajte prilagođene gornje i donje obloge.
- Gornja obloga: 16px
- Donja obloga: 16px
Animacija
I dovršite parametre modula dodavanjem sljedeće animacije:
- Stil animacije: Flip
- Kašnjenje animacije: 1900 ms
Klonirajte liniju # 1 i stavite je na dno odjeljka
Nakon što završite prvi i drugi redak, možete klonirati prvi redak i staviti duplikat na dno odjeljka.
Promijenite redoslijed separatora
Promijenite mjesta za prvi i zadnji modul za odvajanje.
Završne misli
U ovom smo vam članku pokazali kako iskoristiti Divi novu Gutenberg integraciju i dodati ugrađeni, animirani Divi CTA pitch blok u svoj Gutenberg blog post. Ovo je sjajan način da istaknete svoj poziv na akciju po izboru posjetitelji pročitajte sadržaj svog posta na blogu.
