- \n
- Muokkaa mink\u00e4 tahansa tekstin kirjasinperhett\u00e4, kirjasinkokoa ja v\u00e4ri\u00e4<\/li>\n
- Muuta taustav\u00e4rej\u00e4 ja kuvia<\/li>\n
- S\u00e4\u00e4d\u00e4 elementtien v\u00e4list\u00e4 et\u00e4isyytt\u00e4<\/li>\n<\/ul>\n
Ja t\u00e4m\u00e4 on vain esimerkki mahtavista mahdollisista mukautuksista.<\/p>\n
Mik\u00e4 ei ole CSS Hero?<\/h2>\n
Et voi luoda uusia malleja tai kokonaan uusia asetteluja CSS Herolla. Sit\u00e4 varten sivujen rakentajat, kuten Elementor,<\/a> ovat.<\/p>\n
Yleisesti ottaen, jos haluat tehd\u00e4 sivustoosi muutoksia, jotka edellytt\u00e4v\u00e4t uuden sis\u00e4ll\u00f6n lis\u00e4\u00e4mist\u00e4, CSS Hero ei ole oikea ty\u00f6kalu. Jos haluat tehd\u00e4 puhtaasti visuaalisia muutoksia, kuten muuttaa elementin v\u00e4ri\u00e4 tai kokoa, CSS Hero on t\u00e4ydellinen.<\/p>\n
Kuinka k\u00e4ytt\u00e4\u00e4 CSS Heroa<\/h2>\n
Vaikka siin\u00e4 on paljon vaihtoehtoja, CSS Heron k\u00e4ytt\u00e4minen<\/a> on todella yksinkertaista.<\/p>\n
Napsauta t\u00e4t\u00e4 kokeillaksesi CSS Heroa itse<\/a><\/p>\n
Asennus<\/h3>\n
CSS Hero ladataan Plugins-valikon kautta aivan kuten muutkin laajennukset. Asennuksen j\u00e4lkeen n\u00e4kyviin tulee painike, joka pyyt\u00e4\u00e4 sinua hankkimaan lisenssiavaimen.<\/p>\n
![\"Kuinka](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bab38c4.png\")
<\/a><\/p>\nNapsauttamalla t\u00e4t\u00e4 painiketta p\u00e4\u00e4set heid\u00e4n sivustonsa sivulle, jolla on toinen napsautettava painike, ja sitten lisenssi aktivoituu.<\/p>\n
![\"Kuinka](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bca53eb.png\")
<\/a><\/p>\nSe ei voisi olla yksinkertaisempaa.<\/p>\n
K\u00e4ytt\u00f6liittym\u00e4<\/h3>\n
Kun CSS Hero on aktivoitu, sivustollesi lis\u00e4t\u00e4\u00e4n uusi Edit with CSS Hero -kohde j\u00e4rjestelm\u00e4nvalvojan ty\u00f6kalupalkkiin.<\/p>\n
![\"Kuinka](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0be832d5.png\")
<\/a><\/p>\nNapsauttamalla t\u00e4t\u00e4 p\u00e4\u00e4set CSS Hero -suunnitteluliittym\u00e4\u00e4n.<\/p>\n
![\"Kuinka](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c0c755d.png\")
<\/a><\/p>\nEsittelen<\/a> CSS Heroa ilmaisella Ignite-<\/a> teemallamme<\/p>\n
K\u00e4ytt\u00f6liittym\u00e4 on samanlainen kuin Customizer (joka k\u00e4sitell\u00e4\u00e4n perusmuokkausoppaassamme<\/a> ). Vasemmalla on paneeli, jossa on mukautusty\u00f6kalut, ja oikealla esikatselu, joka p\u00e4ivittyy liven\u00e4, kun teet muutoksia. Muokaajan tavoin mik\u00e4\u00e4n n\u00e4ist\u00e4 muutoksista ei n\u00e4y vierailijoille ennen kuin napsautat Tallenna ja julkaise -painiketta.<\/p>\n
Valitse elementti<\/h3>\n
R\u00e4\u00e4t\u00e4l\u00f6intiprosessi CSS Heron avulla alkaa valitsemalla elementti.<\/p>\n
Kun liikutat hiirt\u00e4 sivuston esikatselussa, n\u00e4et sinisen \u00e4\u00e4riviivan, joka m\u00e4\u00e4ritt\u00e4\u00e4 valittavissa olevat elementit. Napsauttamalla mit\u00e4 tahansa elementti\u00e4 voit muokata sit\u00e4. N\u00e4in valitsen Ignite-teeman otsikon:<\/p>\n
Sivuston elementtien mukauttaminen<\/h3>\n
Kun elementti on valittu, muokattavat ominaisuudet lis\u00e4t\u00e4\u00e4n vasempaan paneeliin.<\/p>\n
![\"Kuinka](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c41dda0.png\")
<\/a><\/p>\nSamat ominaisuudet ovat saatavilla kaikille elementeille<\/p>\n
N\u00e4m\u00e4 ovat kaikki erilaisia \u200b\u200bmukautuksia, joita voit tehd\u00e4 mihin tahansa elementtiin CSS Heron avulla.<\/p>\n
Tarkastellaanpa tarkemmin joitain n\u00e4ist\u00e4 ominaisuuksista, jotta saat k\u00e4sityksen siit\u00e4, miten niit\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 sivustosi mukauttamiseen.<\/p>\n
Vaihda fontteja<\/h4>\n
Kun otsikko on valittuna, voin valita Typografia-vaihtoehdon ja valita sitten uuden fontin. Valittua kirjasinta k\u00e4ytet\u00e4\u00e4n automaattisesti kaikkeen otsikossa olevaan tekstiin. T\u00e4m\u00e4 on paljon nopeampaa kuin yritt\u00e4\u00e4 m\u00e4\u00e4ritt\u00e4\u00e4 kirjasimen valikkoon tai sivuston otsikkoon erikseen.<\/p>\n
CSS Hero antaa sinulle p\u00e4\u00e4syn j\u00e4rjestelm\u00e4kirjasimiin (k\u00e4ytt\u00f6j\u00e4rjestelm\u00e4\u00e4si asennettuihin kirjasimiin) ja joihinkin Google Fontsin<\/a> suosituimpiin kirjasimiin. Siell\u00e4 on my\u00f6s "fontinhallinta", jonka avulla voit lis\u00e4t\u00e4 mink\u00e4 tahansa kirjasimen Google Fontsista sivustollesi napin painalluksella.<\/p>\n
Muuta tekstin v\u00e4rej\u00e4<\/h4>\n
Toinen yleinen mukautus, jota CSS Hero voi k\u00e4sitell\u00e4, on tekstin v\u00e4rin muuttaminen sivustolla.<\/p>\n
Jos haluat muuttaa mink\u00e4 tahansa sivuston elementin tekstin v\u00e4ri\u00e4, valitse se, valitse Typografia-vaihtoehto ja napsauta v\u00e4riasetusta. CSS Hero tarjoaa sinulle yksinkertaisen v\u00e4rivalitsimen, jonka avulla voit vaihtaa v\u00e4ri\u00e4 nopeasti.<\/p>\n
Mukauta reunoja<\/h4>\n
Ignite-teemalla on oranssi reunus sivuston yl\u00e4osassa. T\u00e4m\u00e4 on yht\u00e4 helppo vaihtaa kuin mik\u00e4 tahansa tekstin v\u00e4ri CSS Herolla<\/a>.<\/p>\n
Voin valita otsikon, valita Reunat-vaihtoehdon ja sitten valita yl\u00e4reunuksen kuvakkeen muokatakseni vain yl\u00e4reunaa. V\u00e4ri\u00e4 voidaan muuttaa k\u00e4ytt\u00e4m\u00e4ll\u00e4 samaa v\u00e4rinvalitsinta, joka on k\u00e4ytett\u00e4viss\u00e4 tekstin v\u00e4rien vaihtamiseen.<\/p>\n
Lis\u00e4\u00e4 taustakuva<\/h4>\n
Voit muuttaa mink\u00e4 tahansa elementin taustav\u00e4ri\u00e4 tai k\u00e4ytt\u00e4\u00e4 taustakuvaa.<\/p>\n
Jos haluat kuvioitu ilmeen, voit lis\u00e4t\u00e4 pienen taustakuvan ja saada sen toistumaan pysty- ja vaakasuunnassa. Voit my\u00f6s luoda staattisen taustakuvan, joka t\u00e4ytt\u00e4\u00e4 koko sivuston taustan. CSS Hero tarjoaa kaikki s\u00e4\u00e4timet, joita tarvitset taustakuvan lis\u00e4\u00e4miseen mink\u00e4 tahansa sijainnin ja kokoisena haluamallasi tavalla.<\/p>\n
![\"Kuinka](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c873f76.png\")
<\/a><\/p>\nVaikka voit ladata mink\u00e4 tahansa kuvan, CSS Herossa on my\u00f6s integraatio Unsplashin kanssa,<\/a> joka antaa sinulle p\u00e4\u00e4syn tuhansiin ilmaisiin korkearesoluutioisiin valokuviin, mik\u00e4 on eritt\u00e4in k\u00e4tev\u00e4\u00e4.<\/p>\n
S\u00e4\u00e4d\u00e4 v\u00e4li\u00e4<\/h4>\n
Viimeinen CSS Heron mukautusominaisuus, jonka k\u00e4sittelen, ovat v\u00e4liominaisuudet.<\/p>\n
Marginaalia k\u00e4ytet\u00e4\u00e4n luomaan tilaa elementtien v\u00e4liin. Voin esimerkiksi pienent\u00e4\u00e4 t\u00e4m\u00e4n painikkeen yl\u00e4puolella olevaa tilaa ja lis\u00e4t\u00e4 sen alapuolella olevaa tilaa marginaalin CSS-ominaisuuden avulla.<\/p>\n
Toisaalta pehmusteella luodaan tilaa elementtien sis\u00e4\u00e4n. Voin lis\u00e4t\u00e4 pehmustetta painikkeen kaikilla nelj\u00e4ll\u00e4 sivulla, jotta se on suurempi ja helpompi napsauttaa.<\/p>\n
Ja tied\u00e4tk\u00f6 mik\u00e4 on viel\u00e4 vaikuttavampaa?<\/p>\n
N\u00e4it\u00e4 muutoksia sovelletaan automaattisesti kaikkiin "Lue lis\u00e4\u00e4" -painikkeisiin sivustolla, joten minun tarvitsee tehd\u00e4 t\u00e4m\u00e4 s\u00e4\u00e4t\u00f6 vain kerran.<\/p>\n
Lis\u00e4vaihtoehtoja<\/h2>\n
CSS Herossa on my\u00f6s osiot reunas\u00e4teen (py\u00f6ristetyt kulmat) ja luettelotyylien muokkaamiseen, mutta et k\u00e4yt\u00e4 niit\u00e4 l\u00e4hesk\u00e4\u00e4n yht\u00e4 usein.<\/p>\n
Siell\u00e4 on my\u00f6s Ekstrat-osio, joka sis\u00e4lt\u00e4\u00e4 muutamia satunnaisia \u200b\u200bominaisuuksia, kuten l\u00e4pin\u00e4kyvyys, laatikoiden varjot ja n\u00e4kyvyys (piilota kaikki elementit).<\/p>\n
![\"Kuinka](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0cc7fd09.png\")
<\/a><\/p>\nPit\u00e4isik\u00f6 sinun k\u00e4ytt\u00e4\u00e4 CSS Heroa?<\/h2>\n
Jos sinulla on vain kourallinen korjauksia, voi olla vaikea perustella uuden laajennuksen ostamista. Jos esimerkiksi haluat vain muuttaa sivustosi otsikon kokoa, voit todenn\u00e4k\u00f6isesti l\u00e4hett\u00e4\u00e4 teemasi kehitt\u00e4j\u00e4lle CSS-koodinp\u00e4tk\u00e4n.<\/p>\n
CSS Hero maksaa kuitenkin vain 29 dollaria, mik\u00e4 tekee siit\u00e4 eritt\u00e4in edullisen. Vaihtoehtona on selvitt\u00e4\u00e4 asioita itse, mik\u00e4 voi kest\u00e4\u00e4 tunteja. Et voi palkata kehitt\u00e4j\u00e4\u00e4 ty\u00f6skentelem\u00e4\u00e4n sivustollasi 29 dollarilla.<\/p>\n
Napsauta t\u00e4t\u00e4 tarkistaaksesi CSS Heron nyt<\/a><\/p>\n
Jos huomaat usein haluavasi muokata sivustoasi, usean sivuston k\u00e4ytt\u00f6oikeus on mielest\u00e4ni hyvin taattu, jotta voit aina tehd\u00e4 haluamasi muutokset sivustosi ulkoasuun.<\/p>\n
Yhteenvetona voidaan todeta, ett\u00e4 CSS Hero<\/a> on erinomainen ty\u00f6kalu sivuston mukauttamiseen ja t\u00e4ytt\u00e4\u00e4 t\u00e4rke\u00e4n markkinaraon. Jos haluat tehd\u00e4 merkitt\u00e4vi\u00e4 sivuston mukautuksia, sinun kannattaa valita uusi teema<\/a> tai oppia k\u00e4ytt\u00e4m\u00e4\u00e4n sivunrakennusty\u00f6kalua<\/a>.<\/p>\n
Napsauta t\u00e4t\u00e4 saadaksesi lis\u00e4\u00e4 tapoja muokata sivustoasi<\/a>.<\/p>\n