Ymmärrä sivun muotoilun lähde.

HubSpotissa on useita paikkoja, joihin sisältötyylit voidaan lisätä, ja ne sovelletaan tietyssä järjestyksessä sen mukaan, mihin ne on lisätty. Tässä artikkelissa kerrotaan, miten tyylit sovelletaan, miten tyylit löytyvät julkaistulta sivulta ja miten saat apua suunnittelun muokkaukseen.

Ymmärrä, miten tyylit sovelletaan

Tyylit sovelletaan tietyssä järjestyksessä sen mukaan, mihin ne on lisätty HubSpotissa. Esimerkiksi globaaliin tyylitiedostoon lisätyt tyylit ohitetaan tietylle sivulle lisätyillä tyyleillä. 

Käytä tätä luetteloa ymmärtääksesi sivun tyylien lähteen, alkaen ensimmäisenä sovelletuista tyyleistä ja päättyen viimeisenä sovellettuihin tyyleihin.

1. Mukautettu moduuli CSS
   • Tyylitiedostot, jotka on liitetty moduuliin asettelueditor issa.

• • CSS, joka on lisätty moduulin editorissa moduulin module.css -osioon.

1. • CSS moduulin HubL-merkinnän sisällä require_css-lohkonsisällä.
2. Tyylitiedostot, jotka on lisätty malliin require_css-lohkonkoodieditorissa.
3. HubSpotin oletusmallisivut (esim. layout.css) suunnittelunhallinnassa.
4. Tyylitiedostot, jotka on liitetty malliin layout-editorissa.

5. Tyylitiedostot, jotka on liitetty sivusi asetukset-välilehteen.

6. Kaikkien verkkotunnusten asetuksiin liitetyt tyylitiedostot
7. Tyylitiedostot, jotka on liitetty tietyn verkkotunnuksen asetuksiin
8. CSS, joka on lisätty <style>-tunnisteiden sisään. Esimerkiksi verkkosivustosi asetusten, sivun asetusten tai mallin HTML-otsikko.

9. Sivun editorissa lisätyt tyylit. HubSpot lisää myös !important-tunnisteet näihin tyyleihin. Lue lisää !important-tunnisteista ja niiden vaikutuksesta tyylien muotoiluun.

Etsi tyylit esikatselu- tai live-sivulta

Käytä selaimesi kehittäjätyökaluja löytääksesi tyylit, jotka on sovellettu live-verkkosivustollesi tai esikatselusivulle. Tyylien vianmääritys vaihtelee hieman selaimesta toiseen. Seuraavassa esimerkissä käytetään Google Chromea.

1. Siirry sisältöön:
   • Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Siirry HubSpot-tililläsi kohtaan Sisältö > Aloitussivut.
2. Napsauta sivusi nimeä.
3. Napsauta sisältöeditorissa oikeassa yläkulmassa olevaa Esikatselu-painiketta.
4. Napsauta esikatselusivulla Avaa uudessa välilehdessä.
5. Napsauta esikatselussa hiiren kakkospainikkeella tarkasteltavaa elementtiä ja valitse sittenTarkista.
6. Elementit-ruudussa näet sivun HTML-koodin. Napsauta elementtejä nähdäksesi niiden tyylit.
7. Tarkista Tyylit-ruudussa kyseiseen elementtiin sovelletut CSS-säännöt. Valitse ja poista valintaruudut kunkin tyylin vieressä poistaaksesi tai lisätäksesi tyylejä väliaikaisesti. Tämä auttaa tunnistamaan, mikä sääntö vaikuttaa elementtiin.

8. CSS-sääntöjen oikealla puolella näet kyseisen tyylin lähteen nimen. Tämä vahvistaa tyylin lähteen sijainnin. Vie hiiri lähteen nimen päälle nähdäksesi sen koko nimen:
   • Jos tyyli on peräisin CSS-tiedostosta, tyylitiedoston nimi näkyy CSS-määrittelyn vieressä. Siirry suunnittelunhallintaan, etsi tyylitiedosto ja tee tarvittavat muutokset.

• • Jos lähteen nimi alkaa moduulilla, tyyli on peräisin moduulin CSS:stä. Vie hiiri lähteen nimen päälle nähdäksesi moduulin koko nimen.

• • Jos lähteen nimi on Käyttäjäagentin tyylitiedosto , tyylit ovat osa selaimen oletustyylejä.
    • Yleensä tämä näkyy HTML-tagien tyylissä (esim. <p>, <h1>, <span> jne.), kun selain ei löydä elementin tyylisääntöjä. 
    • Käyttäjäagentin tyylitiedosto voidaan ohittaa lisäämällä oma tyylisi kyseiseen elementtiin.

• • Jos lähteen nimi on sivun URL-osoite, tyylit ovat peräisin sivun <style> -tunnisteista. Tyylit voidaan esimerkiksi asettaa sivun tai mallin HTML-otsikossa.

• • Jos lähteen nimi on sivun URL-osoite ja tyylit kohdistetaan #hs_cos_wrapper_module_number-elementtiin, tyylit lisätään sivun editorin Tyylit -välilehdessä. HubSpot lisää !important -tunnisteet näihin tyyleihin. Lue lisää !important-tunnisteista ja niiden vaikutuksesta tyyliin.

• • Jos lähteen nimi on <style>, tyyli lisätään automaattisesti elementtiin. Usein tämä johtuu siitä, että tyyli on määritetty upotettavan HubSpot-resurssin, kuten CTA- tai kokouswidgetin, editorissa.

• • Jos element.style näkyy ilmoituksen vieressä tarkistajassa, CSS on asetettu inline-tyyliksi. Inline-tyylitys on tyylitys, joka lisätään suoraan sivun HTML-lähdekoodiin tai mallininline-tyylityskenttiin. Esimerkiksi lähdekoodissa inline-tyylitys näkyisi seuraavasti <p style="background:purple;">Hello world</p>.

Lisätietoja sivun tarkastamisesta on selaimesi ohjedokumentaatiossa:

• Chrome
• Firefox
• Microsoft Edge
• Safari

Apua suunnittelun muokkaukseen

Paras resurssi HubSpot-mallien tai tyylitiedostojen muuttamiseen on alkuperäinen mallisuunnittelija. On kuitenkin olemassa useita resursseja, joista saat lisäapua sisällön tyylien kanssa, riippuen siitä, kuinka hyvin hallitset HTML- ja CSS-ongelmien ratkaisun.

• Jos olet tottunut käyttämään tarkastustyökaluja mallisi suunnitteluongelmien ratkaisemiseen:

• • Etsi ja julkaise yhteisön CMS-kehitysfoorumilla vinkkejä, neuvoja tai vianmääritysohjeita koodiisi.
  • Katso CMS-viitedokumentaatiosta oppaita, ohjeita ja yleiskatsaus CMS-kehyksestä.
  • Ota yhteyttä HubSpotin tuotetiimiin ja muihin HubSpotissa työskenteleviin kehittäjiin CMS-kehittäjien yhteisön Slackissa.

• Jos et ole tottunut lukemaan tai muokkaamaan HTML- ja CSS-koodia malleissasi:

• • Ota yhteyttä sertifioituun HubSpot-kumppaniin, jolla on verkkosivujen suunnittelun asiantuntemusta ja joka voi auttaa sinua muokkaamaan mallejasi.
  • Käytä teemamallia muokataksesi sivutyylejä kirjoittamatta koodia.
  • Jos käytät Asset Marketplacesta ostettua mallia,ota yhteyttä mallin suunnittelijaan, jos sinulla on kysyttävää sivusi suunnittelusta.