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.
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:
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.
HubSpotissa voit liittää tyylitauluja sisältöön muutamalla eri tavalla. Alla on järjestys, jossa kiinnitetyt tyylitaulut linkitetään sivustossasi:
* 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.
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:
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ä:
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.