Spectra WordPress blokovi: Nova era dizajna

Dizajniranje web stranice nikada nije bilo lakše s uvođenjem Spectra WordPress blokova.

Spectra blokovi podižu dizajn web stranice na potpuno novu razinu, nudeći korisnicima niz visokokvalitetnih, prilagodljivih dizajnerskih elemenata koji mogu učiniti da se web stranica ističe u gomili.

Ovi su blokovi osmišljeni da budu vizualno zadivljujući i optimizirani za izvedbu, osiguravajući da vaša web stranica bude brza i responzivna.

Blokovi su također vrlo prilagodljivi, omogućujući korisnicima da ih podešavaju kako bi odgovarali specifičnim potrebama za bilo koju namjenu.

Korisnici mogu birati između niza boja, fontova i izgleda kako bi stvorili jedinstveni dizajn koji odražava osobnost njihove tvrtke.

Sadržaj

Ako imate dužu stranicu ili objavu, možete koristiti blok sadržaja za bolju vidljivost, kao što to radimo ovdje.

U postavkama Sadržaja možete podesiti mnoge parametre i definirati koji naslovi će se pojaviti u njemu H1, H2, H3…

Container block

Container blok(spremnik) je blok koji ćete gotovo uvijek upotrebljavati i on sadrži sve ostale blokove.

Možete odabrati dvostruke, trostruke četverostruke blokove i njihove kombinacije.

Blokovi koriste flex tehnologiju i prilagodljivi su za bilo koji tip uređaja.

Gotovo sve na njima je podesivo od poravnanja, odmaka od rubova, razmaka između blokova…

Ako imamo trostruki blok i on je na tabletu preuzak, opcija Wrap će podijeliti blokove na 2+1 i oni će biti idealno prikazani.

Napredni naslov

S naprednim blokom naslova (Advanced heading) možete dobiti stilizirane naslove s prijelazom boja, različitim bojama riječi u naslovu, podnaslovu i razdjelniku između njih.

Image block

Image block (blok slika) donosi nove mogućnosti za stiliziranje slika i fotografija.

Možete dodati mnoge vrste maski, definirati rubove ili dodati sjene pa čak i dodati jednostavne animacije.

Mnogi efekti mogu se namjestiti da budu vidljivi kod prijelaza mišem.

Naslov

Možete čak dodati sloj s naslovom i tekstom i koristiti ih kao poveznice.

Button blok

Button blok (blok tipki) proširuje Gutenbergove klasične mogućnosti gradijentnim bojama, obrubima, sjenama i ikonama.

Ako vam to nije dovoljno, možete koristiti i poseban blok tipki (Marketing Button).

Info box

Info box (info okvir) može se prilagoditi pomoću unaprijed postavljenih opcija, ovisno o vašim potrebama.

U ovom bloku možete koristiti ikone ili slike.

Ikona može biti bez okvira ili uokvirena okruglim ili četvrtastim oblikom.

Na svim elementima boje se mogu mijenjati kada korisnik postavi pokazivač miša iznad njih.
Info Box nema boju pozadine.

Za drugačiju boju pozadine postavite Info Box u container blok.

Counter block

Counter block (blok brojača) relativno je novi blok u Spectra kolekciji.

Prvi blok predstavlja brojač s tekstom i ikonom.

Drugi blok je kružni brojač, a treći je brojač u stupcu.

U postavkama bloka brojača, morate dodati početni broj, završni broj, ukupni broj, decimalna mjesta (ako postoje), prefiks i sufiks broja te trajanje animacije.

Countdown block

Ako želite označiti vrijeme do kada će trajati rasprodaja ili do kada se članovi mogu prijaviti na tečaj, to možete učiniti pomoću bloka za odbrojavanje (Countdown blok) .

Gotovo svi parametri ovog bloka mogu se uređivati, ​​tako da se može postaviti, bilo gdje na web stranicu.

Icon list

Icon list blok (lista ikona) može biti koristan ako navodite više stavki. 

Svaka stavka također se može definirati kao poveznica i imati svoju različitu ikonu.

Icon block

Osim bloka lista ikona, možete pronaći i Icon block (blok ikona). 

Na raspolaganju ćete imati na stotine ikona koje možete stilizirati na iznimno velik broj načina.

Moguće je podesiti i promjenu boje ikona kada pokazivač miša postavite iznad ikone.

Uskoro će biti moguće dodati vlastite ikone u SVG formatu!

Price list

Price list (blok cijena) je blok namijenjen definiranju cijena proizvoda..

Prema zadanim postavkama dolazi kao četverostruki element, ali brisanjem tri podređena elementa možete ga pretvoriti u jedan element ako je to potrebno.

Okinawa dodatak prehrani

Na rasprodaji!

$19

Vinegar Gummies

Na rasprodaji!

$29

To je korisno za sve koji imaju jednostavnu prodaju a ne žele koristiti WooCommerce dodatak za web shop.

Star ratings

Neki elementi dolaze s već uključenim Star ratings blokom (ocjena rejtinga).

Ali ako ih na bloku nema uvijek ih možete dodati kao poseban blok.

Možete definirati i ocjene do 10 ali to se ipak rijeđe koristi.

Modal block

Modal block koristi se za jednostavne skočne poruke, na primjer, prijava na novosti i slično.

Pritisnite tipku kako bi vidjeli kako to izgleda.

Možete urediti veličinu skočnog prozora i način na koji se aktivira (pomoću gumba, ikone, teksta ili slike).

Automatsko iskakanje poruke, definirane vremenskim intervalom biti će moguće u pro verziji.

Testemonials carusel block

Da, i taj blok postoji u Spectri.

Na njemu možete prikazivati komentare vaših kupaca.

Ako koristite slike na vrtuljku (carousel) morat ćete malo pripaziti na postavke mobitela kako bi sve izgledalo što bolje.

Lottie animation

Lottie animacijski blok prihvaća jednostavne animacije optimizirane za web.

Možete pronaći mnoge jednostavne animacije, poput ove na njihovoj web stranici.

Ako želite neke posebne animacije, dodatno komprimirane, morat ćete platiti za ovu uslugu.

Ovdje nismo priložili primjer bloka jer je maksimalna veličina medijskih slika 128MB a animacija je bila veća od tog iznosa.

Blokovi sheme

Spectra također ima blokove u sebi, koje kada se ispravno popune, Google prikazuje kao obogaćene rezultate (rich results).

Ti blokovi su blok Česta pitanja(FAQ), Kako da blok (How to) i blok Recenzija (review).

Ovdje smo priložili samo blok FAQ, dok će ostali blokovi biti detaljnije objašnjeni u nekom od sljedećih postova.

Klizni blok

Spectra klizni (slider) blok je univerzalniji od gore opisanog.

Možete koristiti tipke, ikone, slike i obrube kao u ovom primjeru.

Možete vidjeti da je ovaj blok optimiziran za sve vrste uređaja.

Klizač 1

Klizač sa slikom razdjelnikom i prozirnom tipkom .

Read More

Klizač 2

Klizač s ikonom tekstom i tipkom.

Saznajte više

Klizač 3

Klizač sa slikom obrubom i poveznicom .

Tabs block

Na mjestima s puno teksta, Tabs block (blok kartica) biti će od pomoći kod uštede na prostoru.

Kartice možete rasporediti vodoravno ili okomito i birati između mnogih ponuđenih unaprijed postavljenih postavki.

Gallery block

Blok galerije jedan je od blokova koji će smanjiti potrebu za vanjskim dodacima.

U postavkama galerije možemo definirati gotovo sve, a moguće je i da se slike prikazuju u obliku klizača.

Jedna od opcija koja se upravo pojavila je Lightbox.

Slike se mogu prikazivati ​​u nizu, a klikom na njih otvaraju se u punoj veličini.

Opis

Opis

Opis

Opis

1/1

Jedan veliki plus za Spectru!

Ili možda želite koristiti slike koje se mijenjaju? Nema problema.

Blockquote

Blockquote blok za prikaz vaših citata na nov, stiliziraniji način.

Također možete uključiti Twitter tipku za dijeljenje kako bi i drugi mogli podijeliti mudre izreke.

Team block

Tu je i neizostavan tim blok za predstavljanje vaših suradnika.

Kao što smo već spomenuli, ako jedan od blokova nema boju pozadine, možete ga umetnuti unutar bloka spremnika(Container).

Tamo ćete tada moći postaviti boju, sliku, gradijent ili animaciju kao pozadinu.

Također ćete moći definirati rub kao i efekt sjene i neke efekte lebdenja.

Daphne Westland

Art Director

Daphne Westland trained as a graphic designer and for the last 15 years has been working as a freelance editorial art director. 

Social share block

Ako ova opcija ne postoji u vašoj temi, možete na bilo koje mjesto jednostavno dodati blok za dijeljenje na društvenim mrežama (Social share block).

Timeline block

A Timeline block (Blok vremenske linije) može biti koristan ako vašim posjetiteljima želite pokazati kako vaš projekt napreduje.

Spectra predlošci

Spectra dolazi s čitavim skupom unaprijed definiranih predložaka.

Tu imamo sve, od pojedinih gotovih blokova cijelih stranica ili čak kompletne web stranice .

Brzina Spectra blokova

Kao što vidite, ovdje postoji mnogo različitih blokova.

Vjerojatno također znate da neki blokovi mogu usporiti web stranicu.

Ali ne i Spectra blokovi.

Ovo je test koji smo napravili na Google Site Speed za ovu objavu.

Mislimo da je brzina od 99% za mobilne uređaje odlična.

Možda je malo manja u udaljenim dijelovima svijeta jer još uvijek ne koristimo CDN.

Kontrolni panel

Spectra ima odlično riješeni kontrolni panel.

Na njemu možemo isključiti blokove koje ne koristimo da bi kod bio što kraći.

Na istom panelu možemo aktivirati i jednostavne animacije za blokove kao i postavke vidljivosti na različitim uređajima.

Iako ih ovdje nismo opisali, Spectra ima još i ove blokove: Google Maps, Post Carousel, Post Grid, Form, Inline notice, i ekstenzije kao što su Responsive Conditions, Animations, Display Conditions, Masonry Gallery…

Zaključak

Spectra može značajno poboljšati izgled vaše web stranice bez gubitka brzine učitavanja.

Autori su objavili i Pro verziju s još više opcija, kao i potpuni graditelj tema.

Kao što možete vidjeti ovdje smo se usredotočili više na vanjski izgled blokova i različite stilove koje možemo dobiti pomoću njih.

Ako želite više tehničkih informacija, to možete učiniti na web stranici Spectra blokova.

Osim toga, o specifičnim postavkama Spectra blokova pročitajte ovdje:

Spectra: #1 Website Builder For Gutenberg Blocks Plugins For WordPress

O svim novostima koje se pojave bit ćete informirani.

Ostanite prisutni!

Povezano: Blocksy najbolja besplatna WordPress tema?