U ovom članku ćete naučiti kako jednostavno modificirati CSS na WordPress stranici uz pomoć besplatnih alata. Za WordPress imate 2 plaćena dodatka uz pomoć kojih možete modificirati CSS, a to su Yellow Pencil i CSS Hero, međutim, u ovom tekstu se nećemo fokusirati na njih.
Alat koji ćemo koristiti je CanvasFlip Visual Inspector. Ne instaliramo ga na sajt, jer nije dodatak, već Google ekstenzija i radi samo na Chrome-u. Možete ga koristiti vrlo lako i jednostavno, za razliku od 2 gore spomenuta dodatka koji su složeniji. CanvasFlip je besplatan i samo ga instalirajte na svoj pretraživač kao ekstenziju i možete početi uređivati.
Što se tiče CanvasFlipa, postoji i plaćena verzija u okviru koje imate više opcija. Možete snimiti više projekata istovremeno na njihovom oblaku, odmah možete vidjeti koje ste promjene napravili na stranici, na taj način više ljudi može promijeniti jednu stranicu u isto vrijeme, što je vrlo korisno za agencije za web dizajn i za neki projekti u kojima radi nekoliko ljudi.
Jedan od nedostataka ove ekstenzije je što nema opcije za uređivanje responzivnih verzija za mobilne telefone i tablete, ali je prilično korisna za unošenje promjena u desktop verziju stranice. Prvo što trebate učiniti je pronaći ekstenziju na Googleu i instalirati je. Nakon što ste to uradili potrebno je da kliknete na nju u vašem pretraživaču i ona će se pojaviti kao na slici ispod.
Kada se klikne na dugme Inspect i počnite kretati mišem po stranici, primijetit ćete kako možete odabrati različite odjeljke i promijeniti ih uživo na web stranici. Kada kliknete na dio, imate opciju da promijenite njegovu veličinu, margine, razmak, boju, font i mnoge druge stvari. Naravno, sve ovo možete promijeniti unutar Elementora i teme koju ste koristili za pravljenje stranice, ali neke stvari možda nećete moći promijeniti, kao što je razmak u zaglavlju, ili jednostavno želite vidjeti promjenu uživo na web stranici daleko. Tada vam je lakše koristiti ovu ekstenziju.
U Elementoru možete promijeniti sve gore navedeno, ali postoje stvari koje ne možete, o čemu ćemo pisati u nastavku teksta. Ako kliknete na određeni članak u odjeljku nedavnih članaka na stranici, vidjet ćete da također možete promijeniti sjenčanje elementa, što nije slučaj u Elementoru. Možete promijeniti sve što želite uživo na stranici, a zatim možete preuzeti datoteku sa CSS promjenama. Da biste to učinili, potrebno je da kliknete na opciju Info, a zatim kliknete na dugme Izvoz promjena kao na slici ispod i preuzet ćete datoteku sa promjenama.
Kada ste kliknuli na to dugme, dobili ste zip fajl koji sadrži css fajl. Otvorite ga u uređivaču teksta i kopirajte css kod koji trebate umetnuti na web stranicu. Da biste to učinili, potrebno je da kliknete na opciju na kontrolnoj tabli vaše stranice Prilagodi. Zatim kada to učinite, morate otvoriti opciju Prilagođeni CSS/JS i unutar njega zalijepiti kopirani css kod i kliknuti na dugme Objavi. Na ovaj način ste sačuvali promjene na vašoj web stranici unutar kontrolne ploče stranice. Možete se i sami uvjeriti da je na ovaj način prilično brzo i lako izvršiti izmjene na stranici.
Izvor: youtube
