Savršen način da mali biznis napravi svoj savršeni web sajt – ne treba vam nijedan Page Builder, a ni programer

Kada vas neko zamoli da mu preporučite besplatnu WordPress temu koja sjajno prikazuje blogove i da za dizajn strana ne mora da koristi Elementor Page Builder, onda vas takva molba odvede na pretraživanje i testiranje. Svakako ne želite da dajete neproverene savete, zar ne? A, zapravo, postoji savršen način da mali biznis napravi svoj savršeni web sajt, kako sam utvrdio istraživanjem.

Molba koja je pokrenula sve

Spomenuta molbica došla mi je od jedne blogerke koja mi je postavila vrlo interesantno pitanje: „Ima li neka besplatna WordPress tema koja prikazuje moje članke kako treba, a ne bezveze? Ja pišem i ne želim da se bavim nikakvim dizajniranjem.“

U konverzaciji se vrlo brzo definisalo šta je to „bezveze“ i o kakvom dizajniranju je reč. Isprobala je teme Astra, GeneratePress, OceanWP, Customify i Neve koje sasvim pristojno rade svoj posao. Međutim, podešavanja koja bi ona volela da ima na svojim člancima i ponekoj stranici su manje-više omogućene samo u PRO verzijama ovih tema. Kada je dizajniranje u pitanju ne bi želela da koristi Elementor Page Builder (niti bilo koji drugi) za uređenje svojih članaka, jer joj je to komplikovano. Za početak sam je toplo posavetovao da nikada, ama baš nikada, ne uređuje članke ni u jednom Page Builderu, pa ni u Elementoru.

Da prevedemo na terminologiju WordPressa njene želje:

• želi traku sa ikonicama društvenih mreža iznad glavne trake sa navigacijom . Visina glavne trake treba da se podešava različito za desktop, odnosno mobilnu verziju. Te mogućnosti imaju teme sa Header Builderom
• Transparent Header – providna traka sa navigacijion – na nekim stranicama da, a na nekim ne. Članci ne treba da imaju providno zaglavlje
• Sticky Header – traka sa navigacijom ostaje „zalepljeno“ na vrhu stranice prilikom skrolovanja. Kada se skroluje, gornja traka sa ikonicama se ne prikazuje, a zaglavlje postaje neprovidno i manje po visini
• više mogućnosti za globalno podešavanje boja kao što su boja pozadine, boja sadržaja, linkova, dugmadi itd.
• više opcija za globalno podešavanje fontova paragrafa kao i naslova od H1 do H6
• Breadcrumbs – podešavanje veličine fonta i boje
• Scroll To Top – dugme za povratak na vrh stranice
• Članci treba da budu poređani kao lista na YouTube
• Pojedinačni članak treba da ima izdvojenu sliku (Featured Image) pune širine kao pozadinu naslova
• Da se lako prevodi na više jezika
• kompatibilnost sa WooCommerce pluginom
• i još neke druge „sitnice“

Sve ovo nabrojano mi je zamirisalo na neku plaćenu temu. Ali vredi pokušati, pa sam se bacio na pretragu.

Kadence WP je besplatna tema koja može sve, a i više od toga

Naizgled nemoguća misija se završila uspešno. Ako tražite Kadence WP na WordPressovom skladištu nećete je naći, jer se tek pojavila na tržištu i neophodno je da prođe nekoliko meseci testiranja i provera od strane WordPressa dok se dobije odobrenje.

Kadence WP se može skinuti sa sajta kadencewp.com. Takođe se mogu skinuti i
12 Kadence Gutenberg blokova koji su takođe besplatni.

Ukratko: sjajna tema. Najbolja besplatna tema koja se trenutno nalazi na tržištu. Da li je sve gore pobrojano uključeno u besplatnu verziju teme? I više od toga. Ima čak integrisanu kontakt formu, pa vam ne treba plugin za to. I savršeno radi.

Rešili smo pitanje blogova, a šta ćemo sa dizajnom stranica bez Page Buldera?

Gde je Gutenberg Block Editor danas?

Kada u razgovoru pomenete reč „Gutenberg Block Editor“ na licu sagovornika se pojavi čudan izraz lica i odgovor: „ja ga baš nešto ne volim“.

Pa, iskreno ni ja. Jedan sam od onih 5+ miliona koji na svaki sajt instalira i koristi Classic Editor. Prošlo je više od godinu dana kako je Gutenberg integrisan u sam WordPress, ali ga ljudi jednostavno nisu zavoleli.

Blogeri su odlučni u tome da svoje članke uređuju u starom editoru, a web dizajneri ga ionako ne koriste jer se u većini slučajeva oslanjanju na Elementor Page Builder pa im Gutenberg ne smeta. Čak ga ne konstatuju.

Međutim, s druge strane, primećuje se interesantna pojava na WordPress-ovom skladištu pluginova. Uvećava se broj dodataka za Gutenberg. Isto tako, developeri WordPress tema razvijaju besplatne i PRO verzije gutenberg blokova (koje idu uz PRO verzije tema) i na taj način svoju ponudu čine konkurentnijom. Tržište WordPress tema je postalo više nego ogromno, a samim tim je i konkurencija postala sve jača. Svaka, pa i najmanja prednost koju pruža neka tema postaje odlučujući faktor za njen izbor ili moguću kupovinu.

Dizajn stranica u Gutenbeg blok editoru, a da izgleda profesionalno?

To se zove izazov. Teško je zamisliti bilo kakav profesionalan dizajn bez Elementora ili nekog drugog modernog Page Buildera. A što se Gutenberga tiče za početak je trebalo da savladam onaj prvobitni loš utisak koji je Gutenberg ostavio na mene. Ceo interfejs je neintuitivan, sakriven, sa skrivenim opcijama za podešavanje bloka… i da ne nabrajam.

Ali za nastavak priče, bilo bi dobro da prvo pogledamo ovaj sajt, pa da nastavimo sa pričom: https://kursevizasve.rs/kadence/

Šta se sve postiglo prilikom izrade demo sajta i utisci koje sam stekao u radu sa Gutenbergom

Sajt ima ukupno 4 stranice, od kojih je jedna Blog lista. Nije korišćen nijedan Page Builder. Sajt je napravljen je od nule. Drugim rečima nije učitan nikakav demo sajt, niti je korišćen bilo kakav šablon. Utrošeno je samo nekoliko sati rada, ne računajući pripremu materijala.

Za početak rada oslanjamo se samo na Kadence blokove. Samo to? Zar ćemo sa sa jednim pluginom da uradimo sajt? Dodaćemo ipak još plugin koji će prikazivati meni sa pizzama. Priznaćete da nije neobično da vidimo bar 15 stavki na ovom spisku.

Ovo je screenshot liste sa pluginovima. Ova prazna lista je praznik za oči.

• Početna strana

1. Izgled web sajta podseća na Elementor. Nisam ljubitelj zakrivljenih formi u prevelikim količinama, ali ovde je to namerno prenaglašeno. Kadence Gutenberg blokovi imaju opciju Shape Divider kao Elementor, pa je to bilo moguće izvesti. Vrlo interesantno.
2. Gornja traka sa radnim vremenom i telefonom
3. Traka sa navigacijom je Transparent Header i Sticky Header
4. Hero image
5. Sekcija „O nama“ sa 2 kolone i pozadinskom slikom
6. Sekcija „Ponuda dana“ sa pluginom RestaurantPress
7. Sekcija CTA sa parallax slikom u pozadini.
8. Google mapa

• Strana Meni

1. Transparent Header i Sticky Header
2. Sekcija sa videom u pozadini (HTM5 Background video) koji se učitava direktno sa servera i težak je ni manje ni više nego 19MB. Video sjajno radi i na mobilnom, bez zastoja ili seckanja. Ovo je prava retkost. Mnoge PRO teme nisu u mogućnosti da ovo urade kako treba. U većini slučajeva se podržava video koji je postavljen na YouTube ili Vimeo. Ovo je prijatno iznenađenje.
3. Plugin za prikaz menija – RestaurantPress (meni za izbor pizza, da ne bude zabune) je instaliran sa namerom da se testira kako Gutenberg radi sa starim pluginovima. Gutenberg ili Classic Editor su „u sistemu“ i mala je verovatnoća da se plugin ne prepozna, pod uslovom da je pisan po standardu WordPressa. RestaurantPress je pisan za starije verzije WordPressa i teme koje podržavaju SiteOrigin Page Builder, ali se u našem slučaju besprekorno prikazuju sva podešavanja plugina u Gutenbergu.

Međutim, kada govorimo o današnjim modernim Page Builderima kao što je Elementor, oni su vrlo surovi. Ako plugin nije napisan kompatibilno sa Page Builderom ne postoji mogućnost da se njegov sadržaj prikaže očekivano ili ga Builder uopšte neće videti. Svi Page Builderi su „out-of-the-box“ – van sistema, i kao takvi mogu, ali i ne moraju da prepoznaju druge dodatke.

Isprobao sam ovaj plugin da vidim da li radi pod Elementorom i bilo je za očekivati da ne funkcioniše. Ovo nam govori da to može predstavljati ozbiljan problem ukoliko vam se pojavi klijent koji bi da želeo da redizajnira svoj stari sajt. Velika je verovatnoća da stari pluginovi neće raditi, pa još ako su PRO verzije, pa traženje drugih PRO verzija… mukama nikada kraja. Moderne tehnologije brišu sve što je zastarelo koliko god to nekada radilo sjajno. Imajte ovo na umu kada budete prihvatili redizajn nekog starog sajta.

• Blog

1. Traka sa navigacijom nije transparentna, a Sticky Header radi očekivano
2. Podešavanje prikaza liste (Archive) kao i pojedinačnih članaka (Single) je izvanredno. Retko koja besplatna tema omogućava prikaz liste blogova slično kao na YouTube pretrazi.
3. Pojedinačni članak ima izdvojenu sliku (Featured Image) kao pozadinu naslova. U taj blok se mogu postaviti meta tagovi i Breadcrumb – navigacija i linkovi koju SEO eksperti jako vole.
4. Povezani članci su ugrađena funkcionalnost što je sjajno. Za ovu funkcionalnost se obično instalira plugin. Znači jedan plugin manje.

• Kontakt

1. Navigacija nije transparentna, a Sticky Header je uključen
2. Ispod navigacije je postavljen slajder – vrteška koja radi u pozadini. Naravno da to nikome ne treba, bar ne na ovoj strani. Međutim, u nekoj drugoj WordPress temi za ovu funkcionalnost bi morali da nađemo plugin. Još jedan plugin manje.
3. Kontakt forma je u Kadence WP ugrađena funkcionalnost koja savršeno radi. To do sada nisam imao prilike da vidim. Opet prijatno iznenađenje i još jedan plugin manje.

I najvažnija stvar: sve sjajno radi na mobilnim uređajima, jer su opcije za podešavanja mobilnog prikaza odlično urađene.

Koliko god je bilo podozrenja prema Gutenbergu na samom početku rada, uz kvalitetno napisane blokove moguće je izgraditi stranice sa solidnim dizajnom i bez Page Buildera. Da li to zanči da treba preći u potpunosti na Gutenberg Editor? Ne, naravno. Gutenberg ne može da se nosi sa kompleksnijim i zahtevnijim dizajnom strana. Ipak bez Page Buildera nema profesionalnog dizajna.

Da vidimo kakve su performanse našeg demo sajta

Instalirana su još dva plugina:

• Smush – za kompresovanje i optimizaciju slika, jer se o tome nije vodilo računa. Slike su skinute sa neta, onakve kakve su, dosta velike, što u potpunosti odgovara načinu rada većine blogera. Nema optimizacije u Fotošopu. Ovaj plugin radi sasvim dobro svoj posao. Besplatan je i jedostavan za korišćenje.
• Drugi plugin je W3 Total Cache za keširanje. Ima više razloga zbog čega je izabran baš on, a najvažniji je deljeni (sharing) hosting na kome se sajt nalazi i stari način pisanja koda za RestaurantPress.

Rezultati su sledeći:

• Google PageSpeed Insights

Sa rezultatima možemo biti veoma zadovoljni. Da je sajt na skupljem i bržem serveru, sigurno bi speed index bio drastično bolji. Sharing hosting po svojoj prirodi ima odlaganje učitavanja svakog zahteva od 200 – 500  milisekundi u zavisnosti od samog servera i njegovih tehničkih osobina i konfiguracije. Kada se saberu sva ta odlaganja (server delay) brzina učitavanja sajta zna da bude značajno spora. Kada se tome doda loše napisana tema i pluginovi, onda je sve to zajedno katastofa.

• GTmetrix

Dok Google prikazuje sintetičku analizu sajta (procena performansi – uprošćeno rečeno) GTmetrix koristi realno merenje vremena učitavanja i zato ga treba koristiti za poređenje.

Veoma dobri rezultati, nema šta.

I na kraju se sajt obavezno testira na mobilni prikaz. Koristićemo Google servis.

• Mobile-Friendly Test

2 utiska i 2 zaključka

1. Utisak o Kadence WP temi

Kadence WP je bez ikakvih rezervi najbolja besplatna tema u ovom trenutku. Sva podešavanja se nalaze pod stavkom Izgled->Prilagodi (Customize). Podešavanja su mnogobrojna, ali su logično raspoređena i intuitivna. U potpunosti prikazuju ono što ste podesili. Ova tema je ozbiljna konkurencija jednoj od najpopularnijih tema na WordPress skladištu Astra.

Ima li neka zamerka? Naravno, nijedna tema nije savršena, pa nije ni Kadence WP.

• Smeta mi nedostatak podešavanja za Widgete. Praktično ih nema.
• Čak i traka sa strane (Sidebar) nema nikakva podešavanja sem određivanje širine trake.
• Tema ima ugrađenu kontakt formu pa bi itekako bilo poželjno da postoji mogućnost integracije sa email servisima kao što je MailChimp.
• Ljudi vole šablone i demo strane, a to je vrlo skromno u Kadence WP temi.

Ima još sitnica i detalja, ali se nadam da će se u sledećim verzijama i to dopuniti.

• Sviđa mi se što nema agresivnih i dosadnih reklama kada sam u Kontrolnoj tabli. Astra, pa i druge teme preteruju u ogromnim banerima koje se ne mogu isključiti.
• Nema “Required” ni “Recommends” pluginova što mi se dopada.

Zaključak:
Ne postoji ni jedan jedini razlog da ovu temu zaobiđete. Probajte je, to je najbolji način da se sami uverite. Siguran sam da će vam se svideti.

2. Utisak o Gutenbergu

Nekoliko reči o Gutenbergu. Nimalo udoban za rad. Kada sam prvi put otvorio stranicu u Elementoru nisu mi bila potrebna nikakva objašnjenja. Sve je bilo jasno kao dan. A kada otvorim novu stranicu ili članak u Gutenbergu odmah iskače pop-up prozor sa glupim helpom koji morate da isključite. Čim vam guraju pod nos help, onda postaje jasno da tu nešto nije u redu. Nije za pohvalu ni 5+ miliona onih korisnika koji su instalirali Classic Editor. Rad u Gutenbergu je kao u nekoj Logic ili Trivia igrici. Bavim se samim Gutenbergom umesto sadržajem. Ovako kako sada stoje stvari on nikada neće postati Page Builder niti će ugroziti bilo koji. Sa druge strane zahvaljujući mnogim developerima koji razvijaju dodatke za Gutenbeg kao što su Kadence Blocks, sjajni Ultimate Addons for Gutenberg, istog tima koji je razvio Astra temu, Gutenberg Editor se provlači “k’o pas kroz tarabu”. Ali da li je to rešenje?

Umesto zaključka:
Met Vulenveg (Matt Mullenweg), začetnik WordPress plaforme žestoko veruje u Gutenberg. Na WordCamp Spain 2020 Q&A je izrazio uverenje da će Page Builderi koji se ne baziraju na koncepciji Gutenberga, vremenom, koristiti sve manje i manje.
Vreme će pokazati. Možda će biti tako, to niko ne zna. Ali po meni nije tragično ako se prizna da je koncepcija Gutenberg Editora nešto što nije uspelo i da ga ljudi ne vole. Za početak bih redizajnirao interfejs, svakako treba da bude jasniji – unaprediti UX/UI što bi “struka” rekla. Elementor page Builder je očitao lekciju svim Page Builderima i nekako sam siguran da će mnogi, pa i Gutenberg preuzimati njegovu koncepciju. Naravno to je samo moj utisak i mišljenje i ništa više.

I za kraj

Dragi WordPressaši, savet koji uvek dajem je: budite u toku sa svim zbivanjima u ovoj oblasti. Odvojite vreme i probajte neku temu, plugin, novu tehnologiju. Samo tako ćete znati da li je nešto dobro za vas, vašeg klijenta ili vaš budući projekat.

Ovo što je napisano u ovom članku je samo moje iskustvo, ali ne i vaše. Potrudite se da steknete vaše iskustvo i na taj način budete ispred ostalih koji imaju samo informacije, a ne znanje.