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

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

Päivitetty viimeksi: maaliskuuta 11, 2024

Saatavilla minkä tahansa seuraavan Tilauksen kanssa, paitsi jos toisin mainitaan:

Kaikki tuotteet ja HubSpot-tilaukset

CSS-tiedostot (Cascading Style Sheets) ovat koodattuja tiedostoja, jotka valitsevat sivusi elementit ja ohjaavat niiden esitystapaa. CSS-tiedostoja ei voi liittää sähköposteihin tai sähköpostimalleihin.

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

Luo uusi CSS-tiedosto

  • Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
  • Laajenna sivupalkin valikko napsauttamalla vasemmassa yläkulmassa olevaa kansiokuvaketta folder. 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, jotka helpottavat CSS:n ylläpitoa. Jos haluat esikatsella, miten HubL-koodisi renderöityy, napsauta Näytä tulostus -kytkintä päälle editorin yläosassa. Oikealle avautuu paneeli, jossa on renderöity esikatselu.


design-manager-show-output-toggle

Jos haluat nähdä luettelon HubSpotin mallien vakiomuotoisista CSS-valitsimista, tutustu Boilerplate CSS:ään.

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. Valitse koodieditorin alareunassa Näytä yksityiskohdat, jos haluat nähdä lisätietoja virheistä virhekonsolissa, ja Piilota yksityiskohdat, jos haluat sulkea 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 valitsemalla vasemman sivupalkin valikosta Toiminnot > Kopioi julkinen URL-osoite.

Edit CSS

Liitä malliin

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

  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 on lisätty sivuston yleiseen <head>-otsikkoon.
  3. Layout.css **: oletusarvoisesti reagoiva CSS-tiedosto, joka liitetään kaikkiin vedä ja pudota -malliasetteluihin.
  4. Kiinnitetyt tyylitiedostot asetuksissa kohdassa Verkkosivusto > Sivut: koko sivustoon kiinnitetyt tyylitiedostot.
  5. Kiinnitetyt tyylitiedostot asetuksissa kohdassa Verkkosivusto > Blogi: blogiisi kiinnitetyt tyylitiedostot (ohittaa sivuston globaalit tyylitiedostot).
  6. Linkitetyt tyylitiedostot***: mallin ulkoasuun liitetyt tyylitiedostot.
  7. Mallin ylimääräinen <head>-merkintä: tietyn mallin ulkoasun <head>-osaan lisätyt linkkitunnisteet.
  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 valikosta Head and Body Options (Otsikko- ja runkovaihtoehdot) -kohdasta Add (Lisää ) -pudotusvalikosta Linked stylesheets (Linkitetyt tyylitiedostot) -valikon vierestä tiedosto.

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

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

HubSpot Help article screenshot

Liitä tai poista tyylilomakkeita tietylle sivulle( vainMarketing Hub Professional ja Enterprise ).

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

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

  • Siirry sisältöön:

    • Verkkosivut: Siirry HubSpot-tililläsi kohtaan Markkinointi > Verkkosivusto > Verkkosivuston sivut.
    • Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Markkinointi > Aloitussivut.
  • Vie hiiren kursori sivusi päälle ja valitse Muokkaa.
  • Napsauta sisältöeditorissa Asetukset-valikkoa ja valitse Lisäasetukset.
  • Napsauta valintaikkunan Page Stylesheets (Sivun tyylitiedostot ) -osiossaAttach a stylesheet( Liitä tyylitaulukko) -pudotusvalikkoa ja valitse tyylitaulukko. Voit poistaa tyylitaulukon napsauttamalla X kyseisen tyylitaulukon vieressä.
  • Jos haluat poistaa mallin tai toimialueen perimät tyylitiedostot käytöstä, napsauta tyylitiedoston vieressä olevaa pudotusvalikkoa ja valitse Pois käytöstä.

remove-or-turn-off-stylesheets-1

Liitä tai poista verkkotunnuksen tyylitaulukot( vainMarketing Hub Professional ja Enterprise ).

Huomaa: teemamallien on sisällettävä huomautus enableDomainStylesheets: true, jotta ne voivatkäyttää toimialuetason tyylilomakkeita. Lue lisää mallien merkinnöistä.

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

  • Napsauta HubSpot-tililläsi settings asetukset-kuvaketta päänavigointipalkissa.
  • Valitse sivupalkin valikosta Verkkosivusto > Sivut.
  • Valitse avattavasta valikosta verkkotunnus , jonka asetukset haluat päivittää.
  • Siirry Mallit-välilehdellä kohtaan CSS & tyylilomakkeet. Voit lisätä tyylitaulukon valitsemalla + Lisää tyylitaulukko. Poista liitetty tyylitaulukko napsauttamalla sen vieressä olevaa X-kirjainta.
  • Napsauta Tallenna.

Huomaa: kun alennat HubSpotin Starter- tai ilmaistyökaluihin, kiinnitetyt verkkotunnuksen tason tyylilomakkeet pysyvät aktiivisina, kunnes poistat ne. Kun kaikki tyylitaulukot on poistettu, et voi enää kiinnittää tyylitaulukoita toimialuetasolla. Lisätietoja tilauksen alentamisesta.

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

Oliko tästä artikkelista apua?
Tätä lomaketta käytetään vain dokumentaation palautteeseen. Lue, miten saat apua HubSpotin kanssa.