Divi Layout Block i dalje je korisna nadogradnja Divi teme, omogućujući nam da dodamo bilo koji Divi layout u objavu na blogu u Gutenberg editoru. Možemo čak pretvoriti Divi Layout Block u blok za višekratnu upotrebu u Gutenbergu kao i bilo koji drugi WordPress blok. To otvara vrata za pojednostavljenje nekih korisnih Divi obrazaca layout-a u normalan tok pisanja objave na Gutenbergu.
U ovom uputstvu pokazat ćemo kako stvoriti blok Divi za višekratnu upotrebu za postove na blogu Gutenberg. Da bismo to ilustrirali, stvorit ćemo razdjelnik odjeljaka za naš primjer bloka Divi za višekratnu upotrebu za ovaj članak. No, tu istu tehniku možemo lako primijeniti za stvaranje bloka Divi za višekratnu upotrebu za gotovo sve iz Divi generatora.
Počnimo.
Izrada bloka Divi izgleda za Gutenbergov post na blogu
Stvaranje ili uređivanje posta na blogu
Da bismo započeli, moramo stvoriti post na blogu ili urediti postojeći. U ovom primjeru dodajte naslovni sadržaj naslovu i tijelu posta pomoću nekoliko blokova naslova i odlomaka. Zatim dodajte odabranu sliku i odaberite "Nema bočne trake" za izgled pod postavkama stranice Divi.
Dodajte Divi blok izgleda na mreži
Nakon što kreiramo veći dio posta, samo trebamo dodati novi blok Divi izgleda gdje god želimo u području sadržaja posta.
Da biste ga dodali, zadržite miš iznad područja na koje želimo dodati optinsku e-poštu. 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 za naš primjer moramo izgraditi novi razdjelnik, odaberite opciju "Izgradi novi izgled".
Dizajnirajte izgled pomoću uređivača blokova Divi layout
Nakon što odaberemo gumb Stvori novi izgled, možemo dizajnirati svoj Divi raspored u uređivaču bloka izgleda.
U ovom ćemo primjeru izraditi prilagođeni razdjelnik pomoću razdjelnika oblika odjeljka Divi i gradijentne pozadine. Jasno je da je ovo element dizajna koji možemo pretvoriti u blok za višekratnu upotrebu za prikladan način dodavanja separatora odjeljaka u Gutenbergovom postu.
Da biste stvorili dizajn separatora odjeljaka, otvorite postavke odjeljka i ažurirajte sljedeće:
- Boja pozadine lijevog gradijenta: # ddd6f3
- Gradijentna boja pozadine s desne strane: # faaca8
- Smjer gradijenta: 90deg
- Početna pozicija: 30%
- Vrh razdjelnika: pogledajte snimak zaslona
- Boja gornjeg separatora: #ffffff
- Visina gornjeg razdjelnika: 50px
- Stil donjeg razdjelnika: pogledajte snimak zaslona
- Boja donjeg separatora: #ffffff
- Visina donjeg razdjelnika: 50px
- Naginjanje donjeg razdjelnika: vodoravno
- Visina: 100px
- Padding: 0px visoko, 0px low
Nakon završetka dizajna, svakako spremite blok Divi layout.
Sada će se u uređivaču poruka WordPress pojaviti razdjelnik odjeljka Divi Layout Block.
Imajte na umu da razmaci iznad i ispod Divi izgleda bloka izgleda mogu izgledati veći na pozadini nego na prednjoj strani.
Sada smo spremni pretvoriti ovaj Divi blok izgleda u blok izgleda za višekratnu upotrebu kako bismo olakšali dodavanje istog separatora odjeljaka u buduće članke.
No prije nego što to učinite, moglo bi vam pomoći da saznate što je blok za ponovnu upotrebu u WordPressu.
Što je blok za višekratnu upotrebu
Blok izgleda za višekratnu upotrebu u WordPressovom zadanom uređivaču blokova (Gutenberg) sliči na globalni element u Diviju. Blok se može koristiti više puta, ali sadržaj i izgled ostaju potpuno isti za sve instance. A kada uredimo blok izgleda za višekratnu upotrebu, promjena se primjenjuje na sve instance bloka izgleda za cijelu web lokaciju. Jednom kada se blok izgleda ponovno koristi u WordPressu, blok će biti dostupan na popisu blokova prilikom pisanja posta. Zbog toga je vrlo zgodno dodati isti blok izgleda u više blogova više puta.
Pretvorite Divi blok izgleda u blok izgleda za višekratnu upotrebu
Da bi naš Divi blok izgleda postao blok za višekratnu upotrebu, zadržite pokazivač iznad bloka izgleda i otvorite izbornik postavki klikom na ikonu s tri točke. Zatim na popisu odaberite opciju "Dodaj blokovima za ponovnu upotrebu".
Zatim dodijelite imenu bloku za višekratnu upotrebu i kliknite gumb Spremi da biste ga spremili kao blok za višekratnu upotrebu.
Sada kada dodamo novi blok unutar posta bloga, na popisu možemo pronaći novi blok izgleda za višekratnu upotrebu (pod prekidačem kategorije za ponovnu upotrebu). Samo kliknite blok izgleda za višekratnu upotrebu i on će biti dodan u post.
Ako pogledamo post uživo, možemo vidjeti dvije instance istog točnog djelitelja odjeljka.
Nakon što smo više puta upotrijebili blok za višekratnu upotrebu u postu ili na web mjestu, možemo urediti bilo koju instancu bloka za višekratnu upotrebu i te će se promjene primijeniti na sve instance bloka na cijelom web mjestu. .
Da biste izmijenili blok izgleda za višekratnu uporabu, pokažite pokazivač miša iznad bloka i kliknite gumb Modify u gornjem desnom kutu bloka.
Zatim odaberite (kliknite) izgled u bloku za višekratnu upotrebu i kliknite ikonu za uređivanje u gornjem izborniku koji se pojavi. Također možemo kliknuti vezu Uredi izgled na kartici Stavka na desnoj bočnoj traci.
Zatim izmijenite dizajn izgleda po želji. U ovom primjeru možemo promijeniti boje korištene za gradijentnu pozadinu.
Nakon spremanja izgleda, obavezno kliknite gumb Spremi u gornjem desnom dijelu bloka za višekratnu upotrebu. Zatim ažurirajte post i pregledajte promjene na web mjestu uživo.
Primijetit ćete da su promjene dizajna ažurirane za sve instance izgleda za višekratnu upotrebu.
Savjet: Kao predložak upotrijebite blok izgleda za višekratnu upotrebu
Postoje slučajevi kada želimo koristiti modificiranu verziju bloka izgleda za višekratnu upotrebu na našem postu. To nam omogućuje dodavanje bloka izgleda za višekratnu upotrebu u post kao početni predložak, tako da možemo prilagoditi blok izgleda za određenu instancu bez utjecaja na blok za cijelu web lokaciju koji se može ponovno upotrijebiti.
Da biste koristili blok izgleda za višekratnu upotrebu kao predložak, prvo dodajte blok za višekratnu upotrebu u post.
Zatim otvorite izbornik bloka i odaberite opciju "pretvori u normalni blok".
Sada možemo promijeniti izgled određenog dizajna za tu instancu bez utjecaja na druge blokove koji se mogu ponovno upotrijebiti.
Završne misli
Stvaranje blokova Divi za višekratnu upotrebu može biti korisno, posebno za Divi elemente dizajna poput razdjelnika odjeljaka. To nam omogućuje da razdjelnik više puta koristimo tijekom naših postova. Ovo ne samo da pojednostavljuje postupak pisanja članka, već nam daje i moć da puno lakše ažuriramo dizajn bloka na cijeloj web lokaciji. U ovom smo članku pokazali kako dodati razdjelnik odjeljaka kao blok za višekratnu upotrebu, ali ista se tehnika može koristiti za stvaranje beskrajnih blokova Divi za višekratnu upotrebu iz bezbroj drugih razloga.