...
✅ WEB- ja WordPress -uutiset, -teemat, -laajennukset. Täällä jaamme vinkkejä ja parhaita verkkosivustoratkaisuja.

Kuinka mukauttaa WordPress-sivustosi CSS Heron avulla

15

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.

Kuinka mukauttaa WordPress-sivustosi CSS Heron avulla

Napsauttamalla tätä painiketta pääset heidän sivustonsa sivulle, jolla on toinen napsautettava painike, ja sitten lisenssi aktivoituu.

Kuinka mukauttaa WordPress-sivustosi CSS Heron avulla

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.

Kuinka mukauttaa WordPress-sivustosi CSS Heron avulla

Napsauttamalla tätä pääset CSS Hero -suunnitteluliittymään.

Kuinka mukauttaa WordPress-sivustosi CSS Heron avulla

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.

Kuinka mukauttaa WordPress-sivustosi CSS Heron avulla

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.

Kuinka mukauttaa WordPress-sivustosi CSS Heron avulla

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).

Kuinka mukauttaa WordPress-sivustosi CSS Heron avulla

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.

Napsauta tätä saadaksesi lisää tapoja muokata sivustoasi.

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja