Kuinka mukauttaa WordPress-sivustosi CSS Heron avulla
Helvetti! Niin lähellä!
Oletko koskaan löytänyt teemaa, joka olisi täydellinen, jos voisit muuttaa muutamia asioita?
Tämä on juuri se ongelma, jonka CSS Hero ratkaisee.
Se on työkalu kaikille, jotka ovat koskaan miettineet: "Toivon, että osaisin CSS:n, jotta voisin muokata sivustoani."
Mikä on CSS Hero?
CSS Hero on osoita ja napsauta -työkalu, jonka avulla voit mukauttaa lähes kaikkia sivustosi osia. Esimerkiksi CSS Heron avulla voit:
- Muokkaa minkä tahansa tekstin kirjasinperhettä, kirjasinkokoa ja väriä
- Muuta taustavärejä ja kuvia
- Säädä elementtien välistä etäisyyttä
Ja tämä on vain esimerkki mahtavista mahdollisista mukautuksista.
Mikä ei ole CSS Hero?
Et voi luoda uusia malleja tai kokonaan uusia asetteluja CSS Herolla. Sitä varten sivujen rakentajat, kuten Elementor, ovat.
Yleisesti ottaen, jos haluat tehdä sivustoosi muutoksia, jotka edellyttävät uuden sisällön lisäämistä, CSS Hero ei ole oikea työkalu. Jos haluat tehdä puhtaasti visuaalisia muutoksia, kuten muuttaa elementin väriä tai kokoa, CSS Hero on täydellinen.
Kuinka käyttää CSS Heroa
Vaikka siinä on paljon vaihtoehtoja, CSS Heron käyttäminen on todella yksinkertaista.
Napsauta tätä kokeillaksesi CSS Heroa itse
Asennus
CSS Hero ladataan Plugins-valikon kautta aivan kuten muutkin laajennukset. Asennuksen jälkeen näkyviin tulee painike, joka pyytää sinua hankkimaan lisenssiavaimen.
Napsauttamalla tätä painiketta pääset heidän sivustonsa sivulle, jolla on toinen napsautettava painike, ja sitten lisenssi aktivoituu.
Se ei voisi olla yksinkertaisempaa.
Käyttöliittymä
Kun CSS Hero on aktivoitu, sivustollesi lisätään uusi Edit with CSS Hero -kohde järjestelmänvalvojan työkalupalkkiin.
Napsauttamalla tätä pääset CSS Hero -suunnitteluliittymään.
Esittelen CSS Heroa ilmaisella Ignite- teemallamme
Käyttöliittymä on samanlainen kuin Customizer (joka käsitellään perusmuokkausoppaassamme ). Vasemmalla on paneeli, jossa on mukautustyökalut, ja oikealla esikatselu, joka päivittyy livenä, kun teet muutoksia. Muokaajan tavoin mikään näistä muutoksista ei näy vierailijoille ennen kuin napsautat Tallenna ja julkaise -painiketta.
Valitse elementti
Räätälöintiprosessi CSS Heron avulla alkaa valitsemalla elementti.
Kun liikutat hiirtä sivuston esikatselussa, näet sinisen ääriviivan, joka määrittää valittavissa olevat elementit. Napsauttamalla mitä tahansa elementtiä voit muokata sitä. Näin valitsen Ignite-teeman otsikon:
Sivuston elementtien mukauttaminen
Kun elementti on valittu, muokattavat ominaisuudet lisätään vasempaan paneeliin.
Samat ominaisuudet ovat saatavilla kaikille elementeille
Nämä ovat kaikki erilaisia mukautuksia, joita voit tehdä mihin tahansa elementtiin CSS Heron avulla.
Tarkastellaanpa tarkemmin joitain näistä ominaisuuksista, jotta saat käsityksen siitä, miten niitä voidaan käyttää sivustosi mukauttamiseen.
Vaihda fontteja
Kun otsikko on valittuna, voin valita Typografia-vaihtoehdon ja valita sitten uuden fontin. Valittua kirjasinta käytetään automaattisesti kaikkeen otsikossa olevaan tekstiin. Tämä on paljon nopeampaa kuin yrittää määrittää kirjasimen valikkoon tai sivuston otsikkoon erikseen.
CSS Hero antaa sinulle pääsyn järjestelmäkirjasimiin (käyttöjärjestelmääsi asennettuihin kirjasimiin) ja joihinkin Google Fontsin suosituimpiin kirjasimiin. Siellä on myös "fontinhallinta", jonka avulla voit lisätä minkä tahansa kirjasimen Google Fontsista sivustollesi napin painalluksella.
Muuta tekstin värejä
Toinen yleinen mukautus, jota CSS Hero voi käsitellä, on tekstin värin muuttaminen sivustolla.
Jos haluat muuttaa minkä tahansa sivuston elementin tekstin väriä, valitse se, valitse Typografia-vaihtoehto ja napsauta väriasetusta. CSS Hero tarjoaa sinulle yksinkertaisen värivalitsimen, jonka avulla voit vaihtaa väriä nopeasti.
Mukauta reunoja
Ignite-teemalla on oranssi reunus sivuston yläosassa. Tämä on yhtä helppo vaihtaa kuin mikä tahansa tekstin väri CSS Herolla.
Voin valita otsikon, valita Reunat-vaihtoehdon ja sitten valita yläreunuksen kuvakkeen muokatakseni vain yläreunaa. Väriä voidaan muuttaa käyttämällä samaa värinvalitsinta, joka on käytettävissä tekstin värien vaihtamiseen.
Lisää taustakuva
Voit muuttaa minkä tahansa elementin taustaväriä tai käyttää taustakuvaa.
Jos haluat kuvioitu ilmeen, voit lisätä pienen taustakuvan ja saada sen toistumaan pysty- ja vaakasuunnassa. Voit myös luoda staattisen taustakuvan, joka täyttää koko sivuston taustan. CSS Hero tarjoaa kaikki säätimet, joita tarvitset taustakuvan lisäämiseen minkä tahansa sijainnin ja kokoisena haluamallasi tavalla.
Vaikka voit ladata minkä tahansa kuvan, CSS Herossa on myös integraatio Unsplashin kanssa, joka antaa sinulle pääsyn tuhansiin ilmaisiin korkearesoluutioisiin valokuviin, mikä on erittäin kätevää.
Säädä väliä
Viimeinen CSS Heron mukautusominaisuus, jonka käsittelen, ovat väliominaisuudet.
Marginaalia käytetään luomaan tilaa elementtien väliin. Voin esimerkiksi pienentää tämän painikkeen yläpuolella olevaa tilaa ja lisätä sen alapuolella olevaa tilaa marginaalin CSS-ominaisuuden avulla.
Toisaalta pehmusteella luodaan tilaa elementtien sisään. Voin lisätä pehmustetta painikkeen kaikilla neljällä sivulla, jotta se on suurempi ja helpompi napsauttaa.
Ja tiedätkö mikä on vielä vaikuttavampaa?
Näitä muutoksia sovelletaan automaattisesti kaikkiin "Lue lisää" -painikkeisiin sivustolla, joten minun tarvitsee tehdä tämä säätö vain kerran.
Lisävaihtoehtoja
CSS Herossa on myös osiot reunasäteen (pyöristetyt kulmat) ja luettelotyylien muokkaamiseen, mutta et käytä niitä läheskään yhtä usein.
Siellä on myös Ekstrat-osio, joka sisältää muutamia satunnaisia ominaisuuksia, kuten läpinäkyvyys, laatikoiden varjot ja näkyvyys (piilota kaikki elementit).
Pitäisikö sinun käyttää CSS Heroa?
Jos sinulla on vain kourallinen korjauksia, voi olla vaikea perustella uuden laajennuksen ostamista. Jos esimerkiksi haluat vain muuttaa sivustosi otsikon kokoa, voit todennäköisesti lähettää teemasi kehittäjälle CSS-koodinpätkän.
CSS Hero maksaa kuitenkin vain 29 dollaria, mikä tekee siitä erittäin edullisen. Vaihtoehtona on selvittää asioita itse, mikä voi kestää tunteja. Et voi palkata kehittäjää työskentelemään sivustollasi 29 dollarilla.
Napsauta tätä tarkistaaksesi CSS Heron nyt
Jos huomaat usein haluavasi muokata sivustoasi, usean sivuston käyttöoikeus on mielestäni hyvin taattu, jotta voit aina tehdä haluamasi muutokset sivustosi ulkoasuun.
Yhteenvetona voidaan todeta, että CSS Hero on erinomainen työkalu sivuston mukauttamiseen ja täyttää tärkeän markkinaraon. Jos haluat tehdä merkittäviä sivuston mukautuksia, sinun kannattaa valita uusi teema tai oppia käyttämään sivunrakennustyökalua.