Päivitetty viimeksi: huhtikuuta 6, 2023
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. 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 . Valitse sitten Tiedosto > Uusi tiedosto.
- 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.
Jos haluat nähdä luettelon HubSpotin mallien vakiomuotoisista CSS-valitsimista, tutustu osoitteeseen 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 Piilotatiedot 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ä tyylilomaketta toisessa koodatussa mallissa, kopioi lomakkeen URL-osoite napsauttamalla vasemman sivupalkin valikosta Toiminnot > Kopioi julkinen URL-osoite .
Liitä malliin
HubSpotissa voit liittää tyylitauluja sisältöön muutamalla eri tavalla. Alla on järjestys, jossa liitetyt tyylitaulut linkitetään sivustollasi:
- public_common.css*: tyylitaulukko, jota käytetään pääasiassa HubSpotin sovelluksessa, mutta myös tietyissä sivuston ominaisuuksissa.
- Otsikon HTML-asetuksissa osoitteessa Verkkosivusto > Sivut: linkkitunnisteet lisätty sivuston globaaliin <head>:iin.
- Layout.css **:oletusarvoinen responsiivinen CSS-tiedosto, joka liitetään kaikkiin vedä ja pudota -malliasetteluihin.
- Kiinnitetyt tyylitiedostot asetuksissa osoitteessa Website > Sivut: koko sivustoon kiinnitetyt tyylitiedostot.
- Kiinnitetyt tyylitiedostot asetuksissa osoitteessa Verkkosivusto > Blogi: blogiin kiinnitetyt tyylitiedostot (ohittaa sivuston globaalit tyylitiedostot).
- Linkitetyt tyylitiedostot***: mallin ulkoasuun liitetyt tyylitiedostot.
- Mallin ylimääräinen <head>-merkintä: tietyn mallin ulkoasun <head>-osaan lisätyt linkkitunnisteet .
- Sivukohtaiset tyylitiedostot: sivun asetuksiin liitetyt tyylitiedostot.
- Sivun pään HTML: linkkitunnisteet, jotka on lisätty tietyn sivun <head>-osaan 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 kohdan 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 muutoksiasi mallin avulla oleviin live-sivuihin.
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 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 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 asetukset-kuvaketta päänavigointipalkissa.
- Valitse sivupalkin valikosta Verkkosivusto > Sivut.
- Valitse avattavasta valikosta verkkotunnus ,jonka 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.
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.
