Autor: Neil Lock

  • Što su uopće kratki kodovi?

    What-Are-Shortcodes-AnywayAko ste primijetili, jedno od WordPress-ovih zlatnih pravila je uvijek, baš uvijek olakšati stvari svima – kako početnicima, tako i iskusnim programerima. Jedan od načina na koji postižu taj cilj je upotreba kratkih kodova (shortcodes).

    WordPress.com stranica za podršku definira ih ovako:

    shtZvuči prilično jednostavno. Ako do ovog članka još niste čuli za kratke kodove i ne znate kako izgledaju, to su oni arhaični tekstovi nalik na kôd smješteni unutar uglatih zagrada.

    U usporedbi s uobičajenim kodom, koji obično izgleda ovako:

    HTML5-video-tag-sample-code
    (Hm. Što?)

    Kratki kodovi općenito izgledaju otprilike ovako:

    embed_shortcode
    (Sasvim jednostavno.)

    …i ako ste programer (ili čak netko tko se barem dvaput našao pred računalom), vjerojatno ćete se složiti da sam čin tipkanja i klikanja kako biste obavili jedan sitan zadatak može oduzeti puno vremena. Iz istog razloga zbog kojeg imamo tipkovničke prečace, kratki kodovi postoje kako bi svima nama olakšali stvari, kako bismo uštedjeli vrijeme i mogli stvarati bolje stvari; vrlo su slični tipkovničkim prečacima jer imaju upravo tu istu svrhu.

    Vratimo se sada na ovaj konkretni kratki kod, isti kao gore:

    embed-shortcode Ovaj se konkretno naziva embed kratki kod i standardno je ugrađen u WordPress. On ugrađuje videozapis s URL-a u vaš sadržaj. Ako ste trenutno u WordPressu, možete kopirati i zalijepiti gornji kratki kod na svoju web-stranicu ako ga želite isprobati.

    Ipak, kratki kodovi nisu savršeno rješenje za uštedu vremena. U našem prethodnom članku detaljnije se bavimo time zašto kratki kodovi imaju svoje nedostatke i što tim Sandwich priprema kako bi ih riješio.

    Za sada, slobodno eksperimentirajte s kratkim kodovima i pogledajte što sve mogu učiniti za vas.

    Ugodna izrada web-stranica!

  • Mapiranje kratkih kodova: Kako će PBS podržavati više od 800 dodataka i više od 2000 kratkih kodova

    How-PBS-Supports-800-Plugins-2000-ShortcodesWhen I started getting further into software development and WordPress, I noticed that not a lot of page builders I come across with have that “page builder standard” I was looking for: fast, easy, convenient.

    Page Builder Sandwich, then, was created with the goal of having a builder meet these same standards.

    I wanted- and still want it– to be the best page builder out there, and the best way I could accomplish that, I figured, was to add in features in a way in which page building becomes helpful and accessible to everyone –developers and noobs alike.

    I’d like to note though, that I didn’t simply create PBS with the intent of merely bombarding it with features just for the sake of it.

    I want to add in features that people would want to work with; features that hopefully, would make the experience of page building feel a little bit more like magic.

    Tijekom proteklih nekoliko tjedana tim PBS-a dodao je element karte, kao i element kartica (tabs).

    Sada bi se činilo prilično jednostavnom i običnom rutinom da se držimo dodavanja novog elementa svakih nekoliko dana.

    But I think it’d be better if we take it to the next level; to take a bigger leap, do something more drastic, something drizzled with a little more awesomesauce.

    And so we came up with an idea: “How about we start supporting 800+ plugins along with their 2000+ shortcodes?!?!”

    I know what you’re thinking: “How the heck can you support that much shortcodes? Is that even possible?”

    Well, the simple answer is yes. Yes it is.

    And we’ve managed to achieve this feat through shortcode mapping.

    What is Shortcode Mapping?

    Shortcode mapping
    Shortcode mapping makes building shortcodes more friendly.

    Put more simply, shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

    Prednosti ovakvog sustava su prilično velike:

    1.) Since PBS already knows what your shortcodes are, you get to spend less time going through the documentation of each plugin you use, and check how to use their shortcodes.

    2. ) In other words: Say goodbye to the grueling task of manually typing in your shortcodes!

    3.) With shortcode mapping, you can also say goodbye to manually checking post type ID’s. How? PBS can give you a list of all your contact forms through a drop-down list, so instead of looking for ID’s while on admin mode, you can pick from the list we made instead.

    4.) You’ll get to use dropdowns, colorpickers, image uploaders, and even number sliders when adjusting shortcode attributes.

    5.) Overall faster page building time!

    Mapiranje kratkih kodova (shortcode mapping) ipak nije novost i mnogi alati za izradu stranica (page builders) to već imaju. No, po čemu se naš razlikuje?

    Kako mapiranje kratkih kodova funkcionira u drugim alatima za izradu stranica

    Lonely times
    Each person/site does their own shortcode mapping.

    Other page builders have a dedicated admin page for shortcode mapping. You go inside your admin page, and then their admin page. You put in your shortcode, edit a number of text fields, then hit save. Finally, when you go to your page builder editor, the shortcode is now there in element list.

    U ovom scenariju teret mapiranja kratkih kodova prepušten je vama, korisniku. Ako želite da svi vaši kratki kodovi budu potpuno mapirani sa svim atributima (i s lijepim biračima boja i drugim stvarima), morat ćete unijeti svaki pojedini detalj svakog kratkog koda.

    What’s more, all your mappings only reside on your site. So when the times comes that you need to work on another site, you’ll have to copy your mappings all over again. Additionally, if and when you install a new plugin that has shortcodes, then you’re going to have to map those too.

    Kako mapiranje kratkih kodova funkcionira u Page Builder Sandwichu

    Shortcode mapping is centralized
    Shortcode mappings are shared across all users.

    Unlike the norm, shortcode mapping in Page Builder Sandwich is done on a global scale. The most used and popular plugins are gathered first, and all their shortcode mappings are created and updated in a central area. These will then spread out to all users depending on what they have installed. In other words, PBS studies and reviews all the shortcodes you have, including your activated plugins. Afterwards, it gives you the mapping of basically everything you need.

    To nam donosi mnogo sjajnih prednosti:

    1. Maximum coverage. Since we’ll be mapping out the shortcodes of the popular plugins, PBS will be able to support a majority of the shortcodes available on your site.
    2. Constant and frequent additions, updates and corrections. And since it’s in a central area, changes can be made quickly, and can be disseminated to all users.
    3. It basically works like magic. Let’s say you just installed a new plugin. Then you activate it, all mappings for its shortcodes will automatically get sent to you right away.
    4. Gone are the days when you have to personally map shortcodes yourself. PBS will do that for you.
    5. Your site remains lean and fast, and will only contain shortcode mappings that are relevant to you.
    6. Plugin zip size remains small. Even though PBS supports thousands of shortcodes, the plugin file size is still small. Your site and your backups remain small too!

    In case you’re interested in reading into how we made all of this possible,  we actually have a second part to this article in which things might start sounding a little more technical (if that’s your drift).

    Prijavite se na naš bilten!

    You can also opt to sign up to our mailing list, which will automatically notify you when we officially release this feature, (you can get future updates from us too, if you want). The shortcode mapping functionality will be out for our customers tentatively on August 12 August 15 2016. Not all shortcodes will be mapped by this time (our estimate is maybe 100 plugins), but mapping will be continuously done and customers will get them as soon as new ones roll out.

    So sign up to our newsletter to get news on shortcode mapping, when we’ll release it, and when we open shortcode mapping to the public! Until then, we hope you enjoy this new feature of ours, and that you have fun exploring it!

  • Neizrečeni problem kratkih kodova

    The-Unspoken-Problem-of-Shortcodes

    Kratki kodovi (shortcodes) jedan su od vrhunaca WordPressa. Kratki kodovi predstavljaju most između programera i kreatora web-mjesta, omogućujući korisnicima postavljanje složenih dijelova sadržaja gotovo kamo god požele. Autori dodataka vole kratke kodove jer im to pruža veću fleksibilnost u načinu na koji i gdje njihovi korisnici prikazuju svoj sadržaj.

    Ako ne znate što su kratki kodovi i kako izgledaju, to su oni arhaični tekstovi nalik na kôd omotani uglatim zagradama. Izgledaju otprilike ovako:

    Ovaj konkretni naziva se embed kratki kod i zadano je ugrađen u WordPress. Upravo ovaj ugrađuje videozapis s URL-a u vaš sadržaj. Samo kopirajte i zalijepite gornji kratki kod na svoje web-mjesto ako ga želite isprobati.

    Iza kulisa događa se to da, kada WordPress naiđe na kratki kod u vašem sadržaju, on se obrađuje i pretvara u nešto drugo. U našem gornjem slučaju, kad god se otkrije

    kratki kod, WordPress uzima URL iz kratkog koda i provjerava ga s nizom pružatelja sadržaja koje podržava. Kada ga pronađe, dohvaća odgovarajući iframe kôd za ugradnju i prikazuje njega umjesto poveznice.

    U čemu je onda problem? Zvuči dovoljno jednostavno: samo unesete kratki tekst sa zagradama i gotovi ste.

    Upoznajte Shortcode API..

    Kratki kodovi u izobilju

    Shortcode API otvara mogućnost izrade kratkih kodova programerima. Zahvaljujući tome, programeri mogu dodavati vlastite kratke kodove unutar svojih dodataka.

    To je sjajno, sada uz samo jedan kratki isječak nalik na kôd (otuda i naziv „shortcode”), i početnici i napredni korisnici mogu postaviti praktički bilo koju vrstu sadržaja kamo god požele.

    WordPress prema zadanim postavkama nudi tek nekolicinu kratkih kodova. Lako ih je upisati iz glave jer ih je svega nekoliko. No ako instalirate nekoliko dodataka, broj kratkih kodova brzo naraste na tucet ili više, a u nekim slučajevima i na više od stotinu. Svaki kratki kod ima vlastiti skup atributa i uputa o tome kako ga koristiti. Svaki dodatak najvjerojatnije ima neku vrstu dokumentacije o tome kako svi njegovi kratki kodovi funkcioniraju i navodi sve dostupne parametre za svaki od njih. No bili biste ludi kada biste pokušali zapamtiti sve kratke kodove i njihove atribute.

    Problem je u tome što ne postoji središnje mjesto na kojem možete vidjeti sve kratke kodove dostupne na vašem web-mjestu i upute kako ih koristiti.

    Neki pokušavaju riješiti problem

    Neki dodaci pokušavaju riješiti ovaj problem prikazivanjem svih vlastitih kratkih kodova u lako dostupnom padajućem izborniku. Klikom na jedan od njih ispisao bi se kratki kod, zajedno sa svim mogućim atributima. Više ga nema potrebe pamtiti, što je odlična stvar.

    Screen-Shot-2016-06-22-at-11.27.09-AM

    Neki idu i korak dalje te dodaju skočni prozor s postavkama koji sadrži potvrdne okvire i alate za odabir boja kako bi popunili atribute kratkog koda.

    Screen-Shot-2016-06-22-at-11.28.54-AM

    Ovo rješenje donekle funkcionira. Međutim, svaki dodatak navodi isključivo vlastite kratke kodove. Pa ako svaki dodatak izradi vlastiti oblik birača kratkih kodova, neminovno ćete doći u situaciju da imate višestruke birače kratkih kodova na zaslonu (to mi se već dogodilo).

    Screen-Shot-2016-06-22-at-11.22.41-AM

    Drugim riječima, svaki dodatak vodi svoju politiku i implementira vlastito rješenje za svoje kratke kodove. Neki dodaci dodaju novi gumb pokraj gumba „Dodaj medij”, dok ga drugi smještaju unutar TinyMCE uređivača.

    Stoga biste sada mogli pomisliti: „Zašto jednostavno ne prikupiti i kratke kodove drugih dodataka te ih također uvrstiti u taj padajući izbornik / birač kratkih kodova?” Upravo sam to i ja pomislio. No to je lakše reći nego učiniti. Objasnit ću zašto za koji trenutak, ali prvo pogledajmo kako bi izgledalo idealno rješenje.

    Idealno rješenje

    Savršen plan bio bi izraditi dodatak koji prikuplja sve dostupne kratke kodove na vašem web-mjestu, prikazuje vam njihov popis i pomaže vam ispuniti sve atribute. Svaki put kada instalirate novi dodatak, svi ti novouvedeni kratki kodovi također bi vam se automatski ponudili.

    Zamislite središnje mjesto na kojem bi se nalazili svi vaši kratki kodovi radi lakšeg pristupa. Za svaki kratki kod bilo bi opisano što radi i kojem dodatku pripada. Zatim zamislite da za svaki dostupni atribut postoji jasna oznaka, odgovarajući način odabira vrijednosti i opis. Na raspolaganju bi vam bili padajući izbornici, birači boja, radio gumbi, sklopke i još mnogo toga.

    Nešto takvo znatno bi olakšalo život nama kao kreatorima web-mjesta i sadržaja. Nema više pretraživanja raznoraznih dokumentacija ili različitih dijelova administracije samo kako biste kopirali generirani kratki kod za klizač (slider) koji želite upotrijebiti.

    Kvaka

    Nažalost, trenutno je prilično teško izvesti nešto takvo. Ne postoji pouzdan način da se saznaju sve pojedinosti o nekom kratkom kodu. Možete dobiti popis svih kratkih kodova, ali samo njihove stvarne oznake/nazive; ne možete dobiti nikakve dodatne pojedinosti o njima poput popisa atributa, što rade i kojeg su tipa – primjerice tekstualni niz (string), boja ili broj. Niti možete dobiti ikakav privid opisa za pojedini atribut.

    Napomena programerima: da, postoji novododani treći argument za funkciju shortcode_atts, no on nije obavezan. Sve dok ga svaki autor dodataka na svijetu ne implementira, i dalje nećemo imati siguran način za određivanje svih atributa kratkog koda.

    Shortcode API ne pruža nikakav mehanizam za dodavanje opisa kratkih kodova, određivanje tipova atributa ili opise atributa. A sve dok sam WordPress ne doda središnje sučelje za pristup kratkim kodovima, sumnjam da će takva mogućnost uopće biti stvorena.

    Zaključak

    Trenutno je zadatak organizacije kratkih kodova prepušten svakom pojedinom programeru. Sve dok se unutar WordPressa ne razvije centralizirana metoda, očekujte da ćete i dalje viđati više gumba „Dodaj kratki kod” u svojoj administraciji. Treba li nešto ovakvo dodati u samu jezgru WordPressa (WordPress Core) ili ne, posve je zasebna i opsežna rasprava.

    Alternativa

    Postoje dodaci za vizualno uređivanje stranica (page builder) koji ovom problemu pristupaju drugačije. Umjesto programskog otkrivanja kratkih kodova, oni nude mapere kratkih kodova u koje korisnici mogu ručno unijeti svaki detalj kratkog koda. Nakon što se to postavi, kratki kod postaje dostupan unutar alata za uređivanje. Iako  ovo funkcionira, ti su kratki kodovi dostupni isključivo na vašem web-mjestu.

    Mi ovdje u Page Builder Sandwichu stvaramo rješenje koje bi, nadamo se, moglo riješiti ovu zavrzlamu s kratkim kodovima. Pretplatite se na naš bilten u nastavku kako biste bili obaviješteni o našem napretku.

  • Dodavanje stiliziranih karata na vašu stranicu interaktivno je iskustvo

    Adding-Stylish-Maps-to-your-Page-is-an-Interactive-Experience-2Sada možete postaviti karte u svoje dizajne stranica pomoću dodatka Page Builder Sandwich!

    Čudno je biti uzbuđen oko karata. Uzmete URL Google karte i zatim ga ugradite. Ili možda pronađete dodatak za karte na internetu i unesete kratki kôd. Ili možda vaš drugi alat za izradu stranica već ima tu opciju i možete je dodati kad god želite. No razlog zašto smo mi uzbuđeni jest taj što smo dodavanje karata podigli na sasvim novu razinu.

    Evo pretpregleda:

    Stari, dosadni način dodavanja karte

    Evo kako dodajete kartu s tipičnim alatom za izradu stranica:

    1. Dovučete novi element karte,
    2. Unesete zemljopisnu širinu i dužinu u polja,
    3. Unesete ostale vrijednosti u polja, poput visine karte, širine karte, označite okvir za stil ceste itd.,
    4. Kliknete na pretpregled, provjerite kako izgleda i odlučite da trebate nešto promijeniti kako bi izgledalo privlačnije,
    5. Vratite se u alat za izradu stranica i promijenite vrijednosti, a zatim ponovite 4. korak iznad.

    Način dodavanja karte uz Page Builder Sandwich

    Karte na web-stranicama su interaktivne – možete se kretati po njima, zumirati i odzumirati kartu. Zato smo pomislili, zašto ne ukloniti sva nagađanja i jednostavno omogućiti ljudima da izravno upravljaju kartom dok grade svoju stranicu?

    Evo kako dodajete kartu uz Page Builder Sandwich:

    1. Dodate element karte,
    2. Upišete zemljopisnu širinu i dužinu ili adresu na koju želite centrirati kartu,
    3. Pomičete kartu i zumirate je ili odzumirate kako biste postigli željeni izgled,
    4. Dodate zanimljive boje svojim kartama kako bi odgovarale vašem stilu,
    5. Kliknete spremi.

    Naš je način mnogo zabavniji i intuitivniji. U osnovi radite s kartom onako kako biste to činili s uobičajenom Google kartom.

    Obojite karte ili ih stilizirajte pomoću servisa SnazzyMaps

    Sjajna značajka koju smo dodali jest mogućnost nijansiranja i bojanja vaših karata, a to je iznimno jednostavno učiniti. (Ovo je dostupno samo u premium verziji). Ako želite obojati svoju kartu, samo kliknite na naš odabir boja i odaberite boju, a vaša će se karta odmah promijeniti.

    Evo jedne koju smo obojili u ružičasto:

    Page Builder Sandwich također podržava složenije sheme boja putem servisa SnazzyMaps. Oni nude ogroman popis shema boja koje su pridonijeli korisnici i omogućuju vam stvaranje vlastitih ako želite veću kontrolu nad bojama.

    Samo pronađite shemu boja koja vam se sviđa, zatim preuzmite kôd i zalijepite ga u Page Builder Sandwich. Shema boja odmah će se primijeniti na vašu kartu.

    Evo odlične sheme boja zvane papuportal dark sa servisa SnazzyMaps:

    Postavite karte gdje god želite

    Postoji još mnogo zanimljivih stvari koje možete učiniti s kartama – poput dodavanja u retke pune širine radi dramatičnijeg efekta. Također ih možete dodati unutar vrtuljka ako želite, ili unutar kartica (značajka koja uskoro stiže).

    Ako još nemate Page Builder Sandwich, možete isprobati premium verziju klikom na poveznicu „Live Demo” iznad.

  • 5 razloga zašto je prazan prostor važan

    Reasons-Why-Whitespace-MattersU osnovi, bjelina (whitespace), u svojoj najosnovnijoj definiciji, jest prostor oko i između svih elemenata kompozicije koji je ostavljen prazan. To nije samo gubljenje prostora na ekranu, kako misli većina vlasnika web-mjesta. Kada se dobro koristi, bjelina zapravo može pružiti prednosti za bolju promociju proizvoda. Ona je važan ključ za stvaranje dobrog dizajna i čini web-mjesto boljim u svakom pogledu.

    Iako naziv bjelina sugerira da je prostor bijel, on ne mora uvijek biti doslovno bijel. Bjelina zapravo može biti bilo koje boje — čak može imati i suptilan uzorak ili teksturu. To je područje na koje ne želite da se oko fokusira. Drugi naziv za to je negativni prostor.

    Dakle, zašto je bjelina važna?

    newsfeed
    Izvor slike: News Feed

    Razlog br. 1: Poboljšava čitljivost

    Bjelina između osnovnih linija i odlomaka zapravo pomaže ljudima da ugodno čitaju sav sadržaj na web-mjestu. Prilagodba sitnih detalja vaše stranice (poput proreda redaka ili razmaka između slova) može donijeti ogromnu razliku u olakšavanju čitanja.

    Cilj je potaknuti ljude da nastave čitati dizajniranjem izgleda koji je ugodan za oči.

    hpmagicwords
    Izvor slike: HP Magic Words

    Razlog br. 2: Ubrzava interakciju

    Budimo iskreni: većina vaših posjetitelja neće imati dovoljno strpljenja za temeljito pregledavanje web-mjesta. Kada web-mjesto izgleda pretrpano, to odvlači pažnju korisnika od pronalaženja onoga što traže.

    Bjelina bi trebala pomoći u vođenju posjetitelja kroz stranicu. Manje elemenata koji se natječu za pažnju uz pravilnu upotrebu bjelina može spriječiti ometanja koja usporavaju posjetitelje.

    google
    Izvor slike: Google

    Razlog br. 3: Usmjerava pažnju na prave elemente

    Bjelina može dati korisnicima vizualne smjernice kamo bi trebali gledati. Kada se koristi na pravilan način, bjelina pomaže istaknuti informacije i privući pozornost na određeno područje na vašem web-mjestu.

    Zapamtite, ako se sve ističe, ništa se ne ističe.

    Izvor slike: Pocket Penguins

    Razlog br. 4: Prvi dojam je važan

    Izgled i dojam web-mjesta glavni su ključ dobrog prvog dojma. Dobar prvi dojam često vodi do duljeg trajanja posjeta. Premalo bjeline može učiniti da vaše web-mjesto izgleda jeftino i nepouzdano. Posjetitelji neće smatrati stranicu ili brend vjerodostojnima osim ako ne izgleda privlačno. Odgovarajuća količina bjeline pomaže stvoriti pravi ton za vaše web-mjesto. Bjelina može biti način komuniciranja domišljatosti, svježine, a ponekad i elegancije.

    Savjet: Evo ideje kako učiniti svoj web-dizajn jednostavnim i poznatim.

    flockknitwear
    Izvor slike: Flock Knitwear

    Razlog br. 5: Pomaže stvoriti prostor za disanje i ravnotežu

    Uravnotežen dizajn ne znači simetričan. Veliki dizajnerski element može se uravnotežiti s nekoliko manjih. Dodavanje bjeline odličan je način za uravnoteženje elemenata dizajna različitih veličina na vašoj stranici. Stvorite tijek kako oči korisnika ne bi lutale posvuda. Dobar dizajn trebao bi moći voditi korisnika od jedne točke do druge bez zbunjivanja posjetitelja.

    Zaključak

    Sljedeći put kada posjetite web-mjesto i uhvatite se kako ostajete neko vrijeme, razmislite o tome što vas je navelo da ostanete i čitate. Mislite li da prored redaka čini članak lakšim za čitanje? Potiče li vas to iskustvo da se poželite vraćati po još? Jeste li teško pronašli navigaciju?

    Obratite pažnju na dobru primjenu bjeline na web-mjestu. Ako smatrate da to može funkcionirati i na vašem web-mjestu, naučite primjenjivati i upravljati time koliko prostora trebate dodijeliti svom elementu dok ne procijenite da ste postigli pravi ton i čitljivost bez žrtvovanja „tijeka” koji želite za svoje web-mjesto.

    Krajnji cilj svakog web-mjesta je komunikacija. Vizualna privlačnost ide ruku pod ruku s uspjehom vašeg web-mjesta.

  • 5 jednostavnih savjeta da vaša web stranica izgleda dobro

    5-Simple-Ways-To-Make-Your-Website-Look-GoodIn general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the extent of just how much it matters, the fact remains that design is a very crucial factor towards success—any kind of success– including your website’s. Yes, your content is an important key towards reeling your audience in, but how your site looks will definitely be a determining factor as well.

    Evo nekoliko osnovnih savjeta o tome što možete učiniti kako biste poboljšali dizajn svoje web stranice.

    Add high-quality images

    You want to add the best quality images on your website that reflect your brand style, but if you don’t have a high-resolution camera or the money to pay a photographer, you can get free stock photos from sources like Pexels and Pixabay. Images should pertain directly to the content of your site. Including images is always better than no images at all.

    Odaberite prave boje

    booneselections
    Lawrence Boone Selections uses black to add a sense of luxury and value to their website
    juicebox
    Juicebox used this zesty combination for people to get that organic and fresh that the brand represents

    Shema boja web stranice igra veliku ulogu u stvaranju pravog tona i ugođaja za vaš brend. Odabir lijepe boje ne znači nužno da je ona i prava. Svaka boja šalje drukčiju poruku i reakciju. Boje su jedna od prvih stvari koje posjetitelji stranice primijete i zapravo mogu utjecati na uspjeh vaše web stranice.

    Odaberite najviše dvije do tri osnovne boje za svoj dizajn. Ako osjećate potrebu za dodavanjem više boja, možete upotrijebiti svjetlije i tamnije nijanse svojih osnovnih boja. U teoriji boja, posvjetljivanje (tint) je miješanje boje s bijelom, što povećava svjetlinu, dok je zatamnjivanje (shade) miješanje boje s crnom, što smanjuje svjetlinu.

    Additional Tip: There are great tools such as Adobe Colour CC and Coolors to make picking colors easier.

    Koristite kontrastne tipografije

    Font Pairing There are more fonts other than Arial, Georgia and Times New Roman. Google Web Fonts offer a variety of typefaces you can use for free on your site. Just like with choosing colors you can easily over do fonts, so I suggest you do not use more than two typefaces on your website. Most well-designed websites use two typefaces only, one for the headlines and one for the body text.

    Usklađivanje dviju tipografija može biti teško čak i dizajnerima. Možete pojednostaviti stvari tako da se poigrate s dva različita fonta iz iste tipografske obitelji. Ako je druga tipografija nužna, odaberite nešto što stvara dobar kontrast s vašom prvom tipografijom. Obično kombinacija serifnog i sans-serifnog fonta dobro funkcionira. Još jedan važan savjet jest odabrati tipografije koje odgovaraju stilu vaše tvrtke. Možete imati najljepši font na svijetu, no kada se koristi u pogrešnom kontekstu, i dalje može izgledati užasno.

    Održavajte preglednost uz pomoć praznog prostora

    Whitespace is one of the easiest and most effective ways to create a visually effective website. Your website should look well organized and clutter free, directing users exactly where they need to go. Make sure elements stand out and are grouped together by using whitespace properly.

    Prilagodite je mobilnim uređajima

    People are probably going to visit your site at different times using different devices and screen sizes. While content is important, consistency across devices provides a better user-experience for anyone who visits your site. It makes it easier for users to share and link contents on your website to social media platforms on mobile. On top of that, Google prioritizes responsive websites on search results.

    Dodatni savjet: Korištenje dodatka Page Builder Sandwich na vašoj web stranici automatski će omogućiti mobilni prikaz i prilagoditi ga veličini zaslona mobitela.

    Zaključak

    Zapamtite: Podcjenjivanje moći dizajna jedna je od najgorih pogrešaka koje možete napraviti prilikom izrade svoje web stranice. Naravno, ne morate uložiti previše truda pri dizajniranju svoje web stranice, ali u međuvremenu, jednostavno praćenje ovih savjeta može osigurati da vaša stranica ne izazove nikakvo neodobravanje kod vaše publike.

  • WordPress.com protiv WordPress.org

    Wordpress-Com-VS-Wordpress-OrgAko ste relativno novi u izradi web stranica, velika je vjerojatnost da niste upoznati s velikom raspravom WordPress.com protiv WordPress.org. Možda niste ni znali da jedno ili drugo uopće postoji, kao ni za prednosti i nedostatke svakog od njih. Dakle, o čemu se zapravo radi u toj velikoj raspravi između korištenja WordPress.com i WordPress.org? Je li jedno od njih samo jeftina kopija koja čeka tužbu?

    Pa, ne.

    Rasprava se, ukratko, svodi na to koja je od ove dvije WordPress usluge bolji izbor za web stranicu koju pokušavate izgraditi. Niti jedno nije kopija drugoga, a obje stranice su u vlasništvu WordPressa; stvar je samo u tome što je jedna (.com) verzija prilagođenija onima koji nisu programeri, dok .org ima puno manje ograničenja kada je riječ o izradi web stranice u usporedbi s .com.

    “Kako onda znati koja mi treba?”

    Odgovor na ovo pitanje u potpunosti ovisi o potrebama vaše buduće web stranice. Ne postoji jedna verzija WordPressa koja je objektivno „bolja” ili čak „najbolja” za korištenje. Obje imaju svoje jedinstvene značajke i podjednak broj prednosti i nedostataka.

    WordPress.com: Zašto i kada ga odabrati?

    WordPress.com se brine o osnovnim stvarima umjesto vas, što vam omogućuje da se više usredotočite na sadržaj svoje stranice. To je alat za izradu web stranica kojim u potpunosti upravlja i hosta ga tvrtka pod nazivom Automattic. Dobivate vrhunski hosting, sigurnosne kopije, sigurnost i slično. To znači da se puno lakše možete posvetiti sadržaju svoje stranice, umjesto da sate i sate provodite gradeći je od nule.

    Imajte na umu, međutim, da WordPress.com dolazi i s vlastitim ograničenjima. Iako se možda ne morate toliko brinuti o tehničkom održavanju svoje stranice, morate imati na umu da vjerojatno nećete imati onoliko slobode koliko biste željeli. Iako prilagođavanje sučelja vaše stranice možda neće biti problem (WordPress.com, na primjer, dolazi s mnoštvom tema), dodavanje određenih funkcija i elemenata u obliku dodataka može postati problem, posebno ako vaša stranica treba specifične značajke koje nisu dostupne na WordPress.com.

    Kako održavati web stranicu sasvim je druga priča. To uvelike ovisi o tome: 1.) niste li WordPress programer 2.) nemate namjeru učiti kodiranje ili 3.) za to imate malo ili nimalo vremena.

    WordPress.org: Kada je vrijeme za razmatranje?

    Opće pravilo kada je u pitanju razmatranje WordPress.org-a jest kada ste barem malo upoznati s načinom funkcioniranja koda ili ste spremni uložiti malo vremena u učenje. Budući da je WordPress.org samohostirana verzija WordPressa, možete zasukati rukave koliko god želite. Osim toga, imate slobodu raditi preinake i podešavati koliko god želite ili ne želite. Bili biste zaduženi za pronalaženje vlastitog hostinga, postavljanje vlastitih sigurnosnih kopija i općenito samostalno održavanje web stranice – i što je još važnije, pod vlastitim uvjetima.

    “Ali čekajte, zašto bih to želio? Nije li poanta WordPressa olakšati izradu stranica?”

    …Ne baš. Razmislite o tome ovako: The Daily Post donosi izvrsnu analogiju između WordPress.org i WordPress.com, na način da čak i najveći početnici (poput mene) odmah shvate bit.

    Prema njima, o WordPress.com morate razmišljati kao o nečemu nad čime nemate potpuno vlasništvo. Uzmite za primjer sebe s 15 godina, dok još živite s roditeljima. Ako biste željeli obojiti svoju sobu, prvo biste morali tražiti dopuštenje roditelja (koji, naravno, imaju potpuno vlasništvo nad kućom, uključujući i vašu sobu). Tehnički, soba je vaša, ali na kraju krajeva, pa… i nije baš.

    Dakle, ako trebate ili želite napraviti bilo kakve drastične promjene (poput bojenja zidova ili proširenja sobe), ipak biste morali razgovarati i/ili postići kompromis sa stvarnim vlasnicima kuće, odnosno mamom i tatom. Dobra strana toga je što se, kad u podrumu pregori osigurač ili klima prestane raditi, vaši roditelji pobrinu za to, a vi se ne morate brinuti ni o čemu.

    S druge strane, WordPress.org je nešto što možete slobodno prilagođavati i podešavati po vlastitoj želji. To se može usporediti s trenutkom kada se s 18 napokon odselite i dobijete vlastiti stan. Budući da imate potpuno vlasništvo nad svojim domom, ne morate raditi kompromise ni s kim kako biste obojili zidove u onu boju od koje se vaša mama uvijek zgražala; imate slobodu donijeti odluku i/ili unajmiti nekoga tko odgovara vašim standardima da to učini umjesto vas. Osim toga, imate i slobodu odabrati točno onaj klima-uređaj koji želite za svoj dnevni boravak. Samo što ćete, ako se slučajno pokvari, morati unajmiti majstora da to popravi ili sami shvatiti u čemu je problem i kako ga riješiti (što i nije tako loše jer, hej, lekcija je naučena, a učenje je dobro).

    Do sada ste, nadamo se, dobili jasniju sliku o tome koje su glavne razlike između WordPress.com i WordPress.org. No ukratko:

    instalirajte koliko god želite ili malo tema koje su ograničene samo na WordPress teme, morate platiti određenu naknadu da biste se riješili oglasa.Imate gotovo potpunu kontrolu nad svojom stranicom; možete dodavati, prilagođavati ili čak graditi vlastite teme.

    Kontrola sadržaja je ograničena;

    WordPress.com WordPress.org
    U potpunosti hostano od strane WordPressa; sve osnovne potrebe su pokrivene. Samohostirano; odaberite vlastite osnove ili odaberite bolje.
    Značajke su ograničene na ono što WordPress.com nudi Tisuće značajki u obliku dodataka;

    Ovo je nekoliko usporedbi koje dolaze s vaganjem razlika između to dvoje. Odabir između to dvoje na kraju se svodi na razinu slobode koju želite pri izradi svoje stranice i koliko ste resursa (vremena, truda, novca itd.) spremni uložiti u to. Zapamtite da su obje opcije vrlo važne za odvagnuti prije nego što odlučite koja vam WordPress platforma najbolje odgovara. Zato nemojte žuriti s donošenjem odluke!

    Sretno s izradom web stranice!

  • Zašto WordPress?

    Why-WordpressJedna važna stvar koju treba uzeti u obzir pri izradi prvog web-mjesta – bilo da ste tvrtka, slobodnjak ili zapravo bilo tko drugi – jest da nisu svi vješti u jeziku koda i razvoju softvera. Možete biti, na primjer, kuhar koji želi objaviti svoje recepte na mreži. Također možete biti student likovnih umjetnosti kojem je potreban profesionalni portfolio ili novoosnovana tvrtka koja treba vlastitu web-stranicu. Bilo da se radi o jednom ili drugom ili nečemu između, činjenica je da, iako su nekima od nas možda poznate osnove koda, nismo svi profesionalni programeri i da ne zna svatko tko treba ili želi web-mjesto kako ga napraviti od nule. Tu WordPress može dobro doći. Postavlja se pitanje: „Zašto WordPress?”

    RAZLOG BR. 1

    WordPress je sustav za upravljanje sadržajem, što ga čini potpuno prilagođenim korisnicima.

    Prva stvar koju trebate znati jest da je WordPress sustav za upravljanje sadržajem (ili CMS). Jednostavnije rečeno, to znači da WordPress omogućuje svojim korisnicima izradu web-mjesta bez potrebe za pisanjem koda od nule. Ima sustavno, organizirano sučelje koje vam omogućuje da stalno držite stvari pod kontrolom bez potrebe za povremenim petljanjem po kodu.

    U usporedbi s izradom web-mjesta od nule, što bi obično započelo ovako:

    screenshot-1 Sa sustavom za upravljanje sadržajem započinjete s nečim poput ovog:

    WordPress
    Administratorsko sučelje WordPressa. Upravljanje i izrada web-mjesta postaju lakši uz CMS.

    Možda ćete se ipak zapitati: „WordPress se čini sjajnim, ali što ako nema značajke koje želim za svoje web-mjesto?” ili „što ako želim kartu, glazbeni player, mehanizam za predmemoriranje ili pouzdaniji sigurnosni sustav?”

    …Tehnički gledano, WordPress vjerojatno ima tu značajku koju želite, a ona dolazi u obliku WordPress dodatka.

    RAZLOG BR. 2

    Dodaci: šlag na torti WordPressa

    Ako se brinete da WordPress ne uključuje tu određenu značajku koju biste željeli na svojem web-mjestu, ne brinite: vjerojatno je ima.

    Dodaci su „značajke proširenja” koje postoje kako bi povećale funkcionalnost vašeg WordPress web-mjesta. Ako ste poduzetnik kojem je potreban obrazac za kontakt na web-mjestu, možda biste trebali imati na umu da WordPress sam po sebi nema tu značajku, ali postoje brojni dodaci koji je imaju. Budući da je WordPress otvorenog koda – što znači da gotovo svatko može doprinijeti njegovom razvoju – redovito se stvaraju novi dodaci. Možete dobiti željeni obrazac za kontakt i još mnogo toga. Imate slobodu dodavanja drugih dodataka, od gumba za dijeljenje na društvenim mrežama, do karata, pa čak i dodatnih sigurnosnih mjera za svoje web-mjesto, među mnogim drugim značajkama i proširenjima. Recite, zar to ne zvuči sjajno?

    Do sada WordPress ima tisuće takvih dodataka – a neki od njih čak su dostupni besplatno i/ili imaju besplatne verzije, uključujući PBS.

    RAZLOG BR. 3

    Otvoreni kod: WordPress zajednica

    WordPress je otvorenog koda. To znači da svatko može slobodno doprinijeti njegovom razvoju i svatko može proučavati njegov izvorni kod kako bi saznao više o razvoju softvera, pa čak i o samom WordPressu. Postoje čak i tvrtke koje su isključivo posvećene stvaranju i razvoju proizvoda povezanih s WordPressom, kao što su dodaci i teme (poput nas!)

    Budući da je WordPress otvorenog koda, postoje brojni korisnici, programeri, pa čak i dizajneri koji neprestano surađuju i pomažu jedni drugima s problemima vezanim uz WordPress. Na taj način dobivate stvarnu pomoć od stvarnih ljudi i istovremeno učite jedni od drugih. To je nešto što uobičajene službe za korisnike rijetko kada mogu pružiti.

    RAZLOG BR. 4

    WordPress je vjerodostojan.

    CNN, službeni Star Wars blog, magazin Time, pa čak i (OH!) Beyonce imaju web-mjesta temeljena na WordPressu, među mnogim drugima. Ta velika imena nisu jedina stvar koja potvrđuje vjerodostojnost WordPressa – prema Treehouse.com, oko 25% svih web-mjesta na internetu pokreće WordPress. S obzirom na to koliko milijuna i tisuća web-mjesta postoji… pa, 25% je prilično velika brojka.

    RAZLOG BR. 5

    Mnoštvo prilagodbi!

    WordPress ima mnoštvo tema dostupnih za vas i vaše web-mjesto. Slobodni ste birati između besplatnih inačica, onih premium ili čak izraditi vlastitu (ili angažirati nekoga da je izradi za vas!).

    RAZLOG BR. 6:

    Besplatan je.

    Da, dobro ste pročitali. Putem lokalnog razvoja, WordPress je potpuno besplatan i možete ga instalirati na svoje računalo jednim klikom. Isto tako, umjesto angažiranja programera, možete iskoristiti svoje postojeće znanje o kodu kako biste saznali više o tome kako WordPress radi (a učenje je uvijek dobro).

    …da ne spominjemo da, ako nemate vremena previše ulaziti u WordPress i izradu web-mjesta, uvijek možete nabaviti praktičan dodatak za vizualno uređivanje stranica i isprobati naš.

    Zapamtite da uz WordPress postoje beskrajne mogućnosti i ne morate biti genijalac da biste shvatili kako sve funkcionira!

    Korištenje WordPressa može vam uštedjeti puno vremena, novca i truda. A u vremenima kada tih resursa ima vrlo malo, imajte na umu da vam WordPress web-mjesta, njihovi dodaci (poput PBS-a!), teme, a posebno zajednica, mogu uvelike pomoći i znatno vam olakšati stvari.

    Sretna izrada web-mjesta!

  • 3 stvari koje trebate razmotriti prije upuštanja u alate za izradu stranica

    3-Things-to-Consider-Before-Diving-Into-Page-BuildersPostoji mala šansa da ste ovdje jer ste čuli da je PBS vrlo vjerojatno jedan od najbržih prečaca za izradu web stranica. Iako alati za izradu stranica (page builderi) općenito postoje kako bi olakšali stvari, ipak postoji nekoliko stvari koje biste mogli uzeti u obzir prije nego što zaronite dublje u ovo specifično područje razvoja WordPressa.

    Učenje WordPressa: ključni preduvjet za page builder

    Ovo je vjerojatno najočitija stavka na ovom popisu, ali ipak najvažnija. Alati za izradu stranica nažalost se ne mogu kupiti samostalno. Dolaze u obliku dodataka u WordPressu, koje ćete morati instalirati i naučiti kako biste njima upravljali. Budite sigurni da je WordPress jedan od najjednostavnijih i najlegitimnijih načina za izradu web stranice. Nećete požaliti što znate nešto tehničko, s obzirom na doba u kojem se trenutno nalazimo. Postoji razlika između WordPress.com i WordPress.org, a poznavanje toga koji odgovara vašim potrebama također štedi vrijeme!

    Ako ste pak pomalo zastrašeni mnoštvom nekih tehničkih pojmova u ovom članku, ne brinite. Postoji nekoliko korisnih stranica koje možete posjetiti kako biste lakše započeli. Neke od njih su WordPress Codex i Treehouse. One sadrže savjete za WordPress i izradu web stranica, ovisno o vašim potrebama i razini znanja.

    Možda biste prvo trebali opipati teren, samo da budete sigurni

    Uvijek je dobra ideja isprobati besplatne i/ili probne verzije prije bilo kakve velike kupnje zbog koje biste na kraju mogli požaliti u budućnosti. Srećom, većina alata za izradu stranica dolazi s besplatnim/demo verzijama. Naravno, mogli bismo pogledati i mnoštvo pouzdanih recenzija o alatima za izradu stranica, dok drugi uspoređuju i suprotstavljaju page buildere.  Svakako pažljivo odvagnite svoje mogućnosti!

    Osim pregledavanja članaka i recenzija, jedna od stvari koje volimo kod WordPressa jest to što iza njega stoji ogromna zajednica. Postoje pojedinci, timovi, pa čak i tvrtke, koji su spremni pružiti ruku pomoći svojim kolegama korisnicima WordPressa, posebno novima poput vas! Zajednica u osnovi funkcionira prema načelu nesebičnog pomaganja drugima umjesto pukog davanja i uzimanja.

    Dizajn čini veliku razliku

    WordPress entuzijastica Donna Fontenot Cavalier ističe vrlo dobru poantu vezano uz drag-and-drop alate za izradu stranica i važnost osnovnog dizajna. Iako vam alati tipa povuci-i-ispusti poput PBS-a mogu uštedjeti puno vremena, osnovno znanje i barem donekle poznavanje estetike još je jedna ključna stvar koju treba uzeti u obzir pri izradi web stranica. Zamislite scenarij – recimo da se dočepate sjajnog page buildera po svom izboru: to je odlično! Ali recimo da ste osoba koja baš i nema najbolje oko za umjetnost, dizajn i funkcionalnost: o-o.

    Ipak, ne brinite. Page Builder Sandwich nije samo alat za izradu stranica; naš je tim također posvećen pružanju pomoći i drugim korisnicima WordPressa. Dakle, ako imate manjih problema s dizajnom, ne brinite se – na PBS blogu imamo hrpu članaka s mnoštvom korisnih savjeta koji će vam pomoći da započnete. Tako možete postići više, naučiti više i manje brinuti.

    Zapamtite, ako imate bilo kakvih pitanja ili nedoumica u vezi alata za izradu stranica ili bilo čega povezanog s gore navedenim stavkama, slobodno nam ostavite komentar u odjeljku u nastavku. Uvijek rado pomažemo našim korisnicima.

    Sretno s izradom web stranice!

  • Kako izraditi osnovna hero zaglavlja u 3 jednostavna koraka

    How-to-Create-Basic-Hero-Headers-2

    061716_PBS_Jihan_How to Create Basic Hero Headers_Done

    When your dream website finally becomes a reality, the first thing you want your audience to know is what your site’s all about. The trick to reel them in is to give them a good but quick summary of your site’s content – and the easiest way to do that is by creating a Hero Header for your page.

    Što su Hero zaglavlja?

    The purpose of the Hero Header is to visually communicate with your target audience in the fastest and most efficient way possible. You need to grab their attention quickly, in a way that it says: “Hey, this is my website, and here are the reasons it may be worth your time.”

    Typically, hero headers take up most of the space on the page, usually with large text and an equally large background image in order to give your readers a quick but firm-enough grasp as to what your website can offer them.

    Kako biste započeli s izradom svog prvog PBS hero zaglavlja, slijedite brze korake u nastavku:

    1. korak: Umetnite stupac i prilagodite širinu retka

    061716_PBS_Jihan_How-to-Create-Basic-Hero-HeadersClick 1 Column below the Insert Content tab on the inspector (that thing on the left/sidebar). Make sure your caret (the blinking cursor on the text box) is inside the text box.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-1-b_Revised-1Under the Row Properties tab, you may change the background color in order to use it as a guide for the next steps. Change Row Width from Normal to Full-Width: Retained Content Width using the toggle button shown above.

    What’s the difference between Normal, Full-Width and Full-Width: Retained Content Width?

    Row Width-Normal

    Normal – Background, text and other elements are contained within the bounds of your current theme’s row width

    Row Width-Full-Width

    Full-Width – Background, text and other elements fill the entire width of your browser window

    Row Width-Full-Width Retain

    Full Width: Retained Content Width – Only the background fills the entire width of your browser window. Text and other elements are contained within the bounds of your current theme’s row width

    In this layout, Full Width: Retained Content Width is used because the text that will be applied is centered; not full-width.

    2. korak: Prilagodite marginu za stvaranje praznog prostora

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-2-revisedIncrease the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.

    3. korak: Dodajte pozadinu s tekstom i slojevima elemenata

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-aTo add a background image with text and element overlays, simply click the Background Image icon under the Row Properties tab, upload your desired background image, and select to apply.

    061716_PBS_Jihan_How to Create Basic Hero HeadersTip #1: For Premium users, using the Background Image Tint option, helps to provide more contrast for text, buttons or other elements. You can select a tint color and adjust its value by clicking on the Background Color icon. Both icons can be found under Background on the Row Properties tab.

    061716_PBS_Jihan_How-to-Create-Basic-Hero-Headers_Step-3-cType in the message for your header. See Text Formatting tab to adjust the style. Choose typefaces that are easy to read and goes well with the background image. Remember to show contrast from the background image.

    Savjet br. 2: Za elemente brendiranja razmislite o upotrebi bijelog ili crnog logotipa kako se ne bi sudarao sa šarenom pozadinskom slikom.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-dYou can also add buttons by clicking on Button below the Insert Content tab.

    Ne zaboravite spremiti svoj rad i sve je spremno!

    Čestitamo na izradi vašeg prvog hero zaglavlja s PBS-om! Ako vam pak ne uspije, nema razloga za brigu; kretanje ispočetka vjerojatno je još lakše uz PBS, pa to ne bi trebao biti toliki problem.

    Sretna izrada web stranica!