Divi Layout Block otvara vrata mnogim praktičnim načinima za integraciju moćnih dizajnerskih značajki Divi Buildera s WordPressovim zadanim uređivačem blokova (Gutenberg). To vam omogućuje pisanje većine sadržaj svog posta na blogu pomoću poznatog Gutenbergovog blok sučelja, zatim ubacite Divi rasporede tamo gdje je potreban prilagođeni dizajn ili funkcionalnost. Divi blok rasporeda može sadržavati sve što možete stvoriti u Divi Builderu, ali također je izvrstan za uključivanje nečeg tako jednostavnog i bitnog kao obrazac pretplate.
U ovom vodiču ćemo vidjeti kako dodati a obrazac pretplata na Gutenberg blog post koristeći Divi layout block.
Mogući ishod
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 blok Divi unutar posta Gutenberg
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 !
I to je sve!
Prijeđimo na tutorial, u redu?
Dodajte Optin modul e-pošte u svoj blog na Gutenbergu
Stvaranje ili uređivanje posta na blogu
Da bismo započeli, moramo stvoriti novi post na blogu ili urediti postojeći. Za ovaj primjer dodajmo sadržaj lažni naslov i tijelo članka pomoću nekoliko blokova zaglavlja i odlomaka. Zatim dodajte istaknutu sliku i odaberite "Bez bočne trake" za izgled pod postavkama stranice Divi.
Dodajte Divi blok izgleda na mreži
Nakon što ste izradili većinu objave, sve što trebamo učiniti je dodati novi Divi blok rasporeda gdje god želimo u području objave. sadržaj objavljivanja. Mogli bismo ga dodati negdje bliže kraju poruke kako bismo uhvatili kvalificiranog potencijalnog klijenta koji je očito zainteresiran za sadržaj poruke.
Da biste ga dodali, zadržite pokazivač miša iznad područja na koje želite dodati opciju e-pošte, a zatim kliknite plavu ikonu plus da biste dodali novi blok. Na popisu kontekstualnih blokova odaberite blok Divi Layout.
Napravite novi izgled u bloku Divi izgled
Jednom kada je odabran blok Divi izgleda, imat ćemo opciju "Stvori novi izgled" ili "Učitaj iz knjižnice". Budući da opciju e-pošte moramo stvoriti od nule, odaberite optin "Stvori novi izgled".
Dizajn presjeka
U uređivaču izgleda možemo početi dizajnirati optin e-pošte koji će biti uključen u naš post. Sve što dizajniramo u ovom uređivaču prikazat će se u području bloka Divi Layout u postu.
Za početak otvorite postavke odjeljka zadanog odjeljka koji je već tamo.
Za izgled ćemo odabrati izgled s dva stupca.
Tada ćemo dodati modul E-mail Optin u jedan od stupaca, a izbor stupca prepuštam vama.
Zatim ćemo prilagoditi pozadinu odjeljka. Uvijek možete promijeniti vrijednosti kako biste svoj dizajn učinili jedinstvenim. Međutim, koristili smo sljedeće vrijednosti:
- Pozadina: # ff6100
- Top & Bottom Separator: 13. računajući od vrha.
- Širina elementa razdjelnika: 40 piksela (gore i dolje).
Sada ćemo dodati tekst u suprotni stupac. Ovdje ćete upotrijebiti poticajni tekst da donesete posjetilac pretplatiti se.
Tada ćete morati izvršiti različite izmjene:
- Tekst fonta: Montserrat
- Boja fonta: #FFF
- Podnaslov teksta teksta H2: Montserrat
- Podnaslov teksta H2 Veličina: 2.5em
- Podnaslov teksta H2 u boji: #FFF
Ne zaboravite konfigurirati sustav e-pošte koji ćete koristiti. Trebali biste znati da je Gutenberg kompatibilan s MailChimp.
Završne misli
Dodavanje optin e-pošte u vašu Gutenbergovu poruku postalo je nevjerojatno jednostavno s blokom Divi layout. Ne samo da za nekoliko sekundi možete dodati potpuno funkcionalnu (i jednostavnu za upotrebu) opciju e-pošte, već također možete koristiti Divi Builder za dodavanje prilagođenog dizajna, efekata lebdenja i animacije. Sve to bez upotrebe dodatka!
