Päivitetty viimeksi: marraskuuta 3, 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 sivupalkin valikko 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, 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.
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.
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 kohdassa 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 kohdassa Verkkosivusto > Sivut: koko sivustoon kiinnitetyt tyylitiedostot.
- Kiinnitetyt tyylitiedostot asetuksissa kohdassa Verkkosivusto > Blogi: blogiisi 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 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 mallin avulla toimiviin 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 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ä.
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 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.
