Siirry sisältöön
Huomaa: Tämän artikkelin käännös on tarkoitettu vain tiedoksi. Käännös on luotu automaattisesti käännösohjelmiston avulla, eikä sitä ole välttämättä tarkistettu. Näin ollen tämän artikkelin englanninkielistä versiota on pidettävä hallitsevana versiona, joka sisältää uusimmat tiedot. Voit tutustua siihen täällä.
Design Manager

Luo, muokkaa ja liitä CSS-tiedostoja sivustosi tyylittelemiseksi.

Päivitetty viimeksi: marraskuuta 2, 2021

Tämä koskee seuraavia:

Markkinointi Hub Professional, Enterprise
Sisällön hallintajärjestelmä Hub Starter, Professional, Enterprise
Vanhentunut Marketing Hub Basic-versio

CSS (Cascading Style Sheets) on koodattu tiedosto, joka valitsee sivusi elementit ja ohjaa niiden esitystapaa. Ajattele, että mukautetun mallin HTML on sivustosi luusto ja CSS on sivustosi iho.

Tässä artikkelissa käydään läpi CSS-tiedoston luominen, julkaiseminen ja liittäminen HubSpotissa. Voit oppia, miten tehdä yksinkertaisia suunnittelumuutoksia tietylle sivulle täällä. Jos käytät teemamallia, opi muokkaamaan teema-asetuksia.

Luo uusi CSS-tiedosto

  • Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
  • Laajenna sivupalkkivalikko napsauttamalla vasemmassa yläkulmassa olevaa -kansiokuvaketta kansio . Valitse sitten Tiedosto > Uusi tiedosto.
New coded file
  • Valitse valintaikkunassa CSS-tyylitaulukko. Kirjoita sitten CSS-tyylitaulukkosi nimi ja napsauta Luo.

Muokkaa CSS-tiedostoa

Kun olet luonut tai avannut olemassa olevan CSS-tiedoston, tee muokkaukset koodieditorissa. Normaalin CSS:n lisäksi koodieditori tukee HubL-muuttujia ja makroja , mikä helpottaa CSS:n ylläpitoa. Jos haluat esikatsella, miten HubL-koodisi renderöityy, napsauta Show output -kytkintä päälle editorin yläosassa. Oikealle avautuu paneeli, jossa on renderöity esikatselu.


design-manager-show-output-toggle

Luettelo HubSpotin mallien vakio-CSS-valitsimista on osoitteessa Boilerplate CSS.

Tarkista koodisi HubL-virheiden varalta ennen julkaisemista. HubL:n virheitä tai varoituksia on kolme paikkaa, joista voit löytää mukautetun moduulin tai koodatun tiedoston:

  • Koodieditorin alaosassa olevassa virhekonsolissa.
  • Koodieditorin vasemmassa reunassa olevassa virhekourussa.
  • Editorin oikealla puolella olevassa vierityspalkissa.

Julkaisemisen estävät virheet näkyvät punaisella ja yleiset varoitukset keltaisella. Napsauta koodieditorin alaosassa Näytä tiedot nähdäksesi lisätietoja virheistä virhekonsolissa ja Piilota tiedot sulkeaaksesi virhekonsolin.

Virhekonsolissa on linkkejä kaikkiin HubL-virheisiin tai varoituksiin koodissasi tai mukautetussa moduulissasi. Siirry koodieditorin vasemmassa reunassa olevien punaisten virheindikaattoreiden päälle nähdäksesi koodissasi olevan virheen tai varoituksen. Napsauttamalla virhettä kursori siirtyy kaikkiin kyseisellä rivillä oleviin virheisiin tai varoituksiin. Vierityspalkin merkintää napsauttamalla pääset kyseiseen tiedoston osaan.

Voit myös napsauttaa rivinumeroa koodieditorissa, jolloin tiedoston URL-osoite päivittyy vastaavasti. Näin voit jakaa linkin koodiin muiden kanssa ja ohjata heidät täsmälleen siihen kohtaan, jossa työskentelet tiedostossa.

Kun olet muokannut tiedostoa, valitse oikeassa yläkulmassa Julkaise muutokset. Jos haluat kutsua tätä tyylitaulukkoa toisessa koodatussa mallissa, kopioi taulukon URL-osoite napsauttamalla vasemman sivupalkin valikossa Toiminnot > Kopioi julkinen URL-osoite .

Edit CSS

Liitä malliin

HubSpotissa voit liittää tyylitauluja sisältöön muutamalla eri tavalla. Alla on järjestys, jossa liitetyt tyylitaulut linkitetään sivustollasi:

  1. public_common.css * - tyylitaulukko, jota käytetään pääasiassa HubSpotin sovelluksessa, mutta myös tietyissä sivuston ominaisuuksissa.
  2. Otsikon HTML-asetuksissa kohdassa Verkkosivusto > Sivut - linkkitunnisteet lisätty sivuston globaaliin <head>:iin.
  3. Layout.css ** -oletusarvoisesti reagoiva CSS-tiedosto, joka on liitetty kaikkiin raahaa ja pudota -malliasetteluihin.
  4. Kiinnitetyt tyylitiedostot asetuksissa osoitteessa Website > Pages - tyylitiedostot kiinnitetään koko sivustoosi.
  5. Kiinnitetyt tyylitiedostot asetuksissa osoitteessa Verkkosivusto > Blogi - blogiin kiinnitetyt tyylitiedostot (ohittaa sivuston globaalit tyylitiedostot).
  6. Linkitetyt tyylitiedostot***- mallin ulkoasuun liitetyt tyylitiedostot.
  7. Mallin ylimääräinen <head>-merkintä - linkkitunnisteet, jotka on lisätty tietyn mallin ulkoasun <head>-osaan.
  8. Sivukohtaiset tyylitiedostot - sivun asetuksiin liitetyt tyylitiedostot.
  9. Sivun pään HTML - linkkitunnisteet, jotka on lisätty tietyn sivun <head>:iin sivun asetuksissa.

* Vaaditaan

** Tarvitaan vedä ja pudota -asetteluja varten

*** Suositeltava menetelmä tyylitaulukon liittämiseen mallin ulkoasuja varten

Jos haluat liittää tyylitauluja malliin, avaa malli suunnittelunhallinnassa. Valitse oikeanpuoleisen sivupalkin valikossa kohdassa Head and Body Options (Otsikko- ja runkovaihtoehdot) tiedosto Add (Lisää ) -pudotusvalikosta Linked stylesheets (Linkitetyt tyylitiedostot) vierestä.

Voit muokata tai poistaa jo liitetyn tyylitaulukon viemällä hiiren sen päälle ja napsauttamalla Muokkaa tehdäksesi siihen muutoksia tai X poistaaksesi sen.

Kun olet lisännyt tyylitaulukon, napsauta Julkaise muutokset oikeassa yläkulmassa, jotta voit soveltaa muutoksia mallia käyttäviin live-sivuihin.

HubSpot Help article screenshot

Liitä tai poista tyylilomakkeita tietyllä sivulla.

Huomaa:tämä vaihtoehto ei ole käytettävissä teemamalleissa.Opi muokkaamaan teema-asetuksia.

Sivukohtaisen tyylitaulukon lisääminen tai poistaminen sivueditorin asetukset-osiosta:

  • Siirry verkkosivuille tai aloitussivuille.
  • Vie hiiren kursori sivusi päälle ja valitse Muokkaa.
  • Napsauta sivun editorissa yläreunasta Asetukset.
  • Vieritä alaspäin ja valitse Lisäasetukset.
  • Napsauta kohdassa Page Stylesheets (Sivun tyylitiedostot) Attach a stylesheet (Liitä tyylitiedosto) -pudotusvalikkoa ja valitse tiedosto, jonka haluat liittää. Napsauta X sen tyylitaulukon vieressä, jonka haluat poistaa.

  • Napsauta oikeassa yläkulmassa olevaa Save and Publish (Tallenna ja julkaise ) -painiketta.

Voit myös poistaa käytöstä tyylitaulukot, jotka sivu periytyy mallin tai toimialueen kautta. Kun nämä tyylilomakkeet poistetaan käytöstä, niitä ei sovelleta sivuun:

  • Samassa Asetukset -välilehdessä sivueditorissa valitse Disabled pudotusvalikosta mukana olevien tyylilomakkeiden vierestä.
  • Napsauta oikeassa yläkulmassa Save ja Publish .

Liitä tai poista tyylilomakkeita verkkotunnustasolla( vainMarketing Hub Enterprise).

Huom: enableDomainStylesheets: true, jotta domain-tason tyylilomakkeita voidaan käyttää . Lue lisää mallien merkinnöistä.

Voit lisätä tai poistaa tyylitaulukon kaikesta verkkotunnuksen sisällöstä:

  • Napsauta HubSpot-tilisi Asetukset-kuvaketta settings päänavigointipalkissa.
  • Valitse sivupalkin valikosta Verkkosivusto > Sivut.
  • Napsauta pudotusvalikko valitaksesi verkkotunnus yjonka asetukset haluat päivittää.
  • Siirry Mallit-välilehdellä kohtaan CSS & Stylesheets. Voit lisätä tyylitaulukon napsauttamalla + Add style sheet. Poista liitetty tyylitaulukko napsauttamalla X sen vieressä.
  • Napsauta Tallenna.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.