Ebből a cikkből megtudhatja, hogyan módosíthatja egyszerűen a CSS-t egy WordPress webhelyen ingyenes eszközök segítségével. A WordPresshez 2 fizetős bővítménye van, amelyek segítségével módosíthatja a CSS-t, mégpedig a Yellow Pencil és a CSS Hero, azonban ebben a szövegben ezekre nem térünk ki.
Az eszköz, amit használni fogunk CanvasFlip Visual Inspector. Nem telepítjük az oldalra, mert nem plugin, hanem Google bővítmény és csak Chrome-on működik. Nagyon egyszerűen és egyszerűen használhatod, ellentétben a fent említett 2 pluginnal, amelyek összetettebbek. CanvasFlip ingyenes, és csak bővítményként telepítse a böngészőjére, és máris elkezdheti szerkeszteni.
Ami a CanvasFlip-et illeti, van egy fizetős verzió is, amelyen belül több lehetőséged van. Egyszerre több projektet is elmenthet a felhőjükön, azonnal láthatja, hogy milyen változtatásokat végzett az oldalon, így egyszerre többen is cserélhetnek egy oldalt, ami webdesign ügynökségeknél és néhány olyan projektnél is nagyon hasznos, ahol többen dolgoznak.
Ennek a bővítménynek az egyik hátránya, hogy nincs lehetőség a reszponzív verziók szerkesztésére mobiltelefonokon és táblagépeken, de nagyon hasznos az oldal asztali verziójának módosításához. Első lépésként meg kell találni a bővítményt a Google-on, és telepíteni kell. Miután ezt megtette, kattintson rá a böngészőjében, és az alábbi képen látható módon fog megjelenni.
Amikor a gombra kattintanak Vizsgálja meg és mozgassa az egeret az oldalon, észreveheti, hogyan választhat ki különböző szakaszokat és módosíthatja azokat élőben a webhelyen. Ha rákattint egy szakaszra, lehetősége van módosítani a méretét, a margókat, a térközt, a színt, a betűtípust és sok más dolgot. Természetesen mindezt megváltoztathatod az Elementoron belül és az oldal felépítéséhez használt témán, de előfordulhat, hogy néhány dolgot nem tudsz megváltoztatni, például a fejlécek térközét, vagy egyszerűen csak szeretnéd azonnal élőben látni a változást az oldalon. Akkor könnyebben használhatja ezt a bővítményt.
Az Elementorban mindent meg lehet változtatni, amit fent említettünk, de van, amit nem, amiről a szöveg további részében írunk. Ha az oldal legutóbbi cikkek részében egy adott cikkre kattint, látni fogja, hogy az elem árnyékolását is módosíthatja, ami az Elementorban nem így van. Bármit megváltoztathat, amit szeretne élőben az oldalon, majd letöltheti a fájlt a CSS-módosításokkal. Ehhez kattintson az Info opcióra, majd kattintson a gombra Módosítások exportálása mint az alábbi képen, és letölti a fájlt a változtatásokkal.
Amikor erre a gombra kattintott, egy css fájlt tartalmazó tömörített fájlt kapott. Nyissa meg egy szövegszerkesztőben, és másolja ki a css kódot, amelyet be kell szúrnia a webhelyre. Ehhez kattintson a lehetőségre a webhely vezérlőpultján Testreszabás. Majd ha ezt megtette, meg kell nyitnia az opciót Egyedi CSS/JS és azon belül illessze be a kimásolt css kódot, és kattintson a gombra Közzététel. Ily módon elmentette a webhely módosításait a webhely vezérlőpultján. Ön is láthatja, hogy ilyen módon meglehetősen gyorsan és egyszerűen lehet változtatásokat végrehajtani az oldalon.
Forrás: youtube
