Želite li objavljivati postove na blogu u Diviju?
Danas ćemo vam pokazati kreativan način predstavljanja postova na blogu kao plutajućih karata u Diviju. Svaki blog odn web stranica treba težiti izvrsnom sadržaj privlačan i, možda jednako važan ili dostupan.
Jedan od načina da se osigura da sadržaj ostaje dostupno korisnicima je učiniti da pluta na stranici.
A blogerima ćemo vam pokazati kako predstaviti članke iz blog kao lebdeće kartice tako da ostaju vidljive tijekom pomicanja po stranici.
Idemo.
pregled
Ovdje je kratki pregled rezultata koji ćemo dobiti na kraju ovog vodiča.
Što trebate za početak
Prije nego počnete stvarati ovaj dizajn u Diviju, morat ćete učiniti sljedeće:
- Napravite novu stranicu, dajte relevantan naziv i kliknite na 'Koristi Divi Builder'
- Odaberite opciju Odaberite izgled".
- Pronađite i odaberite izgled 'odredišna stranica blogera'.
- Kliknite na gumb Odaberite izgled da ga učitate na stranicu.
Nakon toga, imat ćete unaprijed napravljeni izgled spreman za korištenje za ovaj vodič.
Kako stvoriti lebdeće kartice za post na blogu pomoću Divi blog modula
Sada kada je izgled učitan na stranici, spremni smo za izradu lebdećih kartica za post bloga.
Pročitajte također: Kako stvoriti ljepljivo globalno zaglavlje u Diviju
Napravite novi odjeljak na samom dnu izgleda.
Zatim odjeljku dodajte novi redak s jednim stupcem.
Dodajte modul Blog i naslov u red/stupac
Umjesto da ovdje kreirate novi modul Blog, pomaknite se prema gore i pronađite postojeći modul Blog koji prikazuje tri posta na blogu (nalazi se u trećem odjeljku blizu sredine stranice). Otvorena " Ostali parametri modula »I odaberite« Kopija modula".
Zatim zalijepite modul u novi redak s jednim stupcem koji smo stvorili na dnu stranice desnim klikom na sivu ikonu plus i odabirom " Zalijepi modul".
Zatim ćemo dodati naslov iznad postova na blogu koji će također lebdjeti iznad kartica bloga. Da biste to učinili, kopirajte postojeći tekstualni modul s malim tekstom naslova " Lifestyle".
Zatim zalijepite modul odmah iznad novog blog modula koji smo upravo dodali.
Zatim uredite tekst naslova kako biste opisali vrstu postova na blogu koje želite istaknuti. U ovom primjeru koristit ćemo samo " Top Story".
Prilagođavanje linije s fiksnim položajem i prilagođenom širinom
Želimo smanjiti veličinu lebdećih postova na blogu kako ne bi zauzimali previše prostora na stranici kada imaju fiksni položaj. Bilo bi zabavno. Da biste to učinili, otvorite postavke linije i ažurirajte sljedeće:
Da bi stavke plutale, moramo liniji dati fiksni položaj. Na kartici Napredno ažurirajte sljedeće:
- Položaj: fiksni
- Mjesto: dolje desno
- Vertikalni pomak: 20px
- Horizontalni pomak: 20px
- Z indeks: 12
Ažurirani blog modul s minimalnim sadržajem i okvirom
Općenito, modul Blog već ima raspored mreže s tri stupca i lijep stil koji dolazi s paketom izgleda koji smo odabrali. Ali postoji nekoliko stvari koje moramo učiniti.
Vidi također: Kako stvoriti globalno zaglavlje s obrascem za prijavu u Diviju
Prije svega, moramo smanjiti veličinu mapa (okomito) i ukloniti neke elemente sadržaj.
Da biste to učinili, otvorite postavke bloga i sakrijte sve elemente osim istaknute slike. Time će post prikazati samo istaknutu sliku i naslov.
Na kartici Stil konfigurirajte sjenu okvira na sljedeći način:
- Shadow box: Pogledajte snimak zaslona
- Snaga zamućenja sjene okvira: 28 px
- Boja fonta titla: rgba(0,0,0,0.19)
pregled
Ovdje je pregled dosadašnjih rezultata.
Neka se redak članaka pojavi dok lebdite
Konačno, možemo dodati lijep efekt lebdenja koji potiče korisnike na interakciju s lebdećim člancima.
Pročitajte također: Kako izraditi blog stranicu s modulom Blog u Diviju
Otvorite postavke linije i opcije ažuriranja:
Za ured
- Transformacija: 50%
Za stanje lebdenja
- Transformacija: 0%
Ovo će u početku dovesti cijelu liniju izvan okvira preglednika za 50%. Nakon što korisnik prijeđe pokazivačem iznad crte, ona se potpuno vraća u vidokrug.
Sakrij red na mobitelu
Osim ako ne želite objaviti jedan post na blogu, nema smisla objavljivati te postove na mobilnom uređaju. Vjerojatno bi zauzeo previše prostora i uzrokovao probleme prilikom pokušaja listanja.
Vidi također: Kako dodati obrazac za kontakt u globalno zaglavlje u Diviju
Da biste sakrili karte na mobilnom telefonu, otvorite postavke sekcija i isključite vidljivost sekcija na telefonu i tabletu.
Konačni rezultat
Preuzmite DIVI odmah!!!
Zaključak
Dakle! Pokazali smo vam u ovom vodiču kreativan i originalan način predstavljanja postova na blogu koje želite istaknuti.
Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara raspravljati o tome.
Međutim, možete se konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
