Stvaranje vrijednih postova na blogu zahtijeva vrijeme i trud. Uz pronalaženje najboljih tema za pisanje u vašoj niši, također je važno angažirati čitatelje i omogućiti im da brzo pronađu informacije koje traže.
Sada je dobar način da pristupite ovoj vrsti korisničkog iskustva dijeljenje vizualnog okvira sažetka na kraju vašeg bloga, neposredno prije posljednjih razmišljanja.
S novim Divi-jevim blokovima rasporeda sada možete bez napora stvoriti okvir sažetaka s ugrađenim opcijama Divi-a. U ovom vodiču provest ćemo vas kroz postupak, a također ćete moći besplatno preuzeti datoteku JSON izgleda!
Krenimo rekreirati!
Koristite predložak publikacije za šesti paket tema
Preuzmite Šesti paket graditelja tema
Okvir sa sažetkom koji ćemo ponovno kreirati kroz ovaj vodič savršeno se podudara s predloškom posta Sixth Theme Builder Pack besplatno. Pristupiteblog članak i preuzmite cijeli paket.
Idite na Divi Builder tema
Zatim idite na Divi Builder tema.
Preuzmite predložak publikacije
Kliknite ikonu u gornjem desnom kutu i preuzmite predložak posta iz paketa tema. Svakako uredite sve izmjene u alatu za izgradnju tema.
Otvorite postojeću Gutenbergovu publikaciju ili stvorite novu
Sada, nakon što dodate odgovarajući predložak posta, vrijeme je da izradite okvir sažetka. Otvorite ili izradite novi post pomoću Gutenberga.
Dodajte sažetak naslova H2
Na kraju bloga ćemo dodati novi H2 naslov.
Dodajte novi blok Divi na mreži
Dalje ćemo dodati novi blok Divi izgleda.
Stvorite novi izgled unutar bloka Divi
Nakon što dodate blok, imat ćete dvije mogućnosti. Odaberite stvoriti novi izgled.
Postavke odjeljka
Boja pozadine
Unutar uređivača blokova izgleda Divi primijetit ćete odjeljak. Otvorite ovaj odjeljak i za njega upotrijebite bijelu pozadinu.
- Boja pozadine: #FFFFFF
razmak
Prebacite se na karticu dizajna odjeljka i dodajte prilagođene vrijednosti margina i umotavanja.
- Gornja margina: 100px
- Lijeva marža: -10% (ured), 0% (tablet i telefon)
- Desna marža: -10% (ured), 0% (tablet i telefon)
- Gornja obloga: 0px
- Donja obloga: 0px
granica
Dodajte i polumjer obruba.
- Donja donja: 16px
- Donja desna: 16 px
Kutija sjena
S suptilnom sjenom kutije.
- Jačina zamagljivanja sjene okvira: 60px
- Sila širenja sjene kutije: 10px
- Boja sjene: rgba (0,0,0,0,08)
Dodajte novi redak
Struktura stupaca
Nastavite dodavati novi redak odjeljku koristeći sljedeću strukturu stupaca:
dimenzioniranje
Bez još dodavanja modula, otvorite postavke retka i pustite da red zauzima cijelu širinu spremnika odjeljka.
- Koristite prilagođenu širinu oluka: Da
- Širina oluka: 1
- Izjednačite visine stupaca: Da
- Širina: 100%
- Maks. Širina: 100%
razmak
Zatim uklonite zadane gornje i donje obloge s crte.
- Gornja obloga: 0px
- Donja obloga: 0px
Postavke 1. stupca
Boja pozadine
Zatim otvorite postavke u stupcu 1 i upotrijebite bijelu boju pozadine.
- Boja pozadine: #FFFFFF
razmak
Dodajte i prilagođene vrijednosti ispunjavanja.
- Gornja obloga: 70px
- Donja obloga: 70px
- Lijeva obloga: 70 px
- Desna obloga: 70px
Kutija sjena
Nastavite dodavanjem suptilne sjene okvira s drugom zadanom bojom sjene i lebdenja.
- Jačina zamagljivanja sjene okvira: 50px
- Zadana boja sjene: rgba (0,0,0,0)
- Boja sjene lebdenja: rgba (0,0,0,0,15)
Lebdenje skale transformacije
Kad zadržite pokazivač, također želimo malo prilagoditi stupac.
- Desno: 105%
- Niska: 105%
Zadržite pokazivač Z
Ispunite parametre stupca dodavanjem pokazivača pokazivača z.
- Zadržite pokazivač Z: 11
Dodajte tekstualni modul # 1 u stupac
Dodajte broj u područje sadržaja
Vrijeme je za dodavanje modula, počevši od prvog tekstualnog modula. Dodajte broj u okvir sadržaj.
Gradijentna pozadina
Zatim dodajte pozadinu gradijenta.
- Boja 1: # ff5e92
- Boja 2: # ffd4b6
- Smjer gradijenta: 165deg
Postavke teksta
Idite na karticu dizajn modula i promijenite postavke teksta kako slijedi:
- Font teksta: Poppins
- Boja teksta: #ffffff
- Veličina teksta: 26px
- Usklađivanje teksta: središte
dimenzioniranje
Zatim dodijelite širinu i visinu.
- Širina: 150px
- Visina: 150px
granica
Dodajte i polumjer obruba.
- Donja donja, gornja desna i donja desna: 100 piksela
CSS glavni element
Da bismo centrirali tekst u našem spremniku, morat ćemo dodati nekoliko redaka CSS koda glavnom elementu modula na naprednoj kartici.
display: flex;align-items: center;justify-content: center;
Položaj
A mi ćemo završiti parametre modula repozicioniranjem modula.
- Pozicija: apsolutno
- Lokacija: gore lijevo
Dodajte tekstualni modul # 2 u stupac
Dodajte H3 sadržaj
Prijeđimo na sljedeći tekstualni modul. Dodajte malo sadržaj H3 po vašem izboru.
Postavke teksta H3
Zatim izmijenite veličinu H3 teksta modula.
- Naslov 3 Veličina teksta: 23px
razmak
Također promijenite postavke razmaka.
- Gornja margina: 100px
- Donja marža: 20px
Dodajte modul za odvajanje u stupac
vidljivost
Sljedeći modul koji nam treba je modul za odvajanje. Provjerite je li omogućena opcija "Prikaži separator".
- Pokaži separator: Da
Postavke linije
Prebacite se na karticu dizajna modula i promijenite postavke reda kako slijedi:
- Boja linije: # ff5e92
- Stil linije: čvrst
- Položaj linije: visok
dimenzioniranje
Izmijenite i veličinu modula.
- Težina razdjelnika: 2px
- Širina: 20%
Dodajte tekstualni modul # 3 u stupac
Dodajte sadržaj
Prijeđimo na sljedeći i posljednji tekstualni modul. Dodajte malo sadržaj po vašem izboru.
Stupac za kloniranje
Nakon što dovršite stupac i sve njegove module, možete klonirati cijeli stupac.
Promijenite boju sjene zadanog okvira
Otvorite postavke u stupcu 2 i promijenite zadanu boju sjene.
- Boja sjene: rgba (0,0,0,0,06)
Promijenite pozadinu gradijenta tekstualnog modula br. 1
Otvorite prvi modul teksta u sljedeća 2 stupca i promijenite pozadinu gradijenta.
- Boja 1: # 7e5ce6
- Boja 2: # 25b8ee
Promijenite obrub tekstualnog modula br. 1
Također promijenite postavke obruba modula.
- Gornji lijevi, donji lijevi i donji desni: 100 piksela
Promijenite položaj tekstualnog modula # 1
I premjestite modul u naprednu karticu.
- Lokacija: gore desno
Promijenite boju separatora
Nastavite otvaranjem postavki za modul za odvajanje. Promijenite boju crte kako bi odgovarala novoj shemi boja.
- Boja linija: # 7e5ce6
Promijenite sav sadržaj
Na kraju izmijenite cijeli sadržaj modula u stupcu 2.
Klonirajte cijeli odjeljak dva puta
Nakon što dovršite prvi odjeljak, možete ga klonirati dva puta.
Promijenite razmak prvog dupliciranog odjeljka
Otvorite postavke u prvom duplikatnom odjeljku i promijenite marginalne vrijednosti u skladu s tim:
- Lijeva marža: -5% (stolno računalo), 0% (tablet i telefon)
- Desna marža: -5% (ured), 0% (tablet i telefon)
Promijenite razmak drugog dupliciranog odjeljka
Također otvorite drugi duplikat, izbrišite sve vrijednosti margine i umjesto toga dodajte nižu maržu.
- Donja marža: 100px
Promijenite sav sadržaj
Na kraju izmijenite cijeli sadržaj modula.
Spremite izgled u Bivi knjižnici za ponovnu upotrebu
Ako ovaj okvir sažetka planirate koristiti u drugim postovima na blogu, svakako ga spremite u svoju Divi knjižnicu kako biste mu mogli lako pristupiti! To je to !
pregled
Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.
Završne misli
U ovom smo vam članku pokazali kako dodati okvir sa sažetkom u vaš Gutenberg post s Divi novim blokovima izgleda. Okviri sa sažetkom izvrstan su vizualni način da vam pomognete posjetitelji pronaći informacije koje traže.
Također možete besplatno preuzeti JSON datoteku za izgled! Ako imate pitanja, slobodno ostavite komentar u odjeljku za komentare u nastavku.
