Ymmärrä sivun muotoilun lähde.

HubSpotissa on useita paikkoja, joihin sisällön muotoilua voidaan lisätä, ja sitä sovelletaan tietyssä järjestyksessä sen mukaan, mihin se on lisätty. Alla kerrotaan, miten muotoilua käytetään, miten löydät muotoilun live-sivulta ja miten saat apua muotoilun muokkaamiseen.

Ymmärrä, miten muotoilua sovelletaan

HubSpotin CSS-styliä sovelletaan HubSpotissa järjestyksessä, joka perustuu siihen, mihin se on HubSpotissa asetettu, kuten alla on lueteltu. Esimerkiksi globaalissa tyylitaulukossa määritetty muotoilu ohittaa tietyllä sivulla määritetyn muotoilun.

1. Mukautetun moduulin CSS
   1. Moduuliin liitetyt tyylilomakkeet.
   2. CSS, joka on lisätty CSS-osioon moduuliin.
   3. CSS moduulin HubL-merkkauksen sisällä require_css-lohkossa.
2. Malliin mallin kautta lisätyt tyylilajit require_css-lohko
3. HubSpotin oletustyylilehdet (esimerkiksi layout.css).
4. Malliin liitetyt tyylit
   
   
5. Sivun asetukset-välilehdellä liitetyttyylilomakkeet
   
   
6. Kaikkien verkkotunnusten asetuksiin liitetyttyylitaulukot
7. Tiettyä verkkotunnusta koskeviin asetuksiin liitetyttyylitaulukot.
8. <style>-tunnisteiden sisään lisätty CSS. Esimerkiksi verkkosivuston asetusten, sivun asetusten tai mallin pään HTML-kielessä.
   
   
9. Sivueditorin kautta lisätyt tyylit. HubSpot lisää myös !important-tunnisteet näihin tyyleihin. Lue lisää !important-tunnisteista ja siitä, miten ne vaikuttavat muotoiluun.

Etsi muotoiluja esikatselusta tai live-sivulta

Voit käyttää selaimen kehittäjätyökaluja tutkiaksesi live-sivustoon tai esikatselusivuun sovellettuja tyylejä. Kukin selain vaihtelee hieman siinä, miten tyylien vianmääritys onnistuu.

Muotoilun etsiminen Google Chromessa:

• Napsauta esikatselu- tai live-sivulla hiiren kakkospainikkeella elementtiä, jota haluat tutkia, ja valitse sittenTarkasta.
• Vasemmalla olevassaElementit-ruudussa näet sivun HTML-koodin. Voit joko napsauttaa elementtejä nähdäksesi niiden tyylit tai napsauttaa sivun elementtejä paneelin vasemmassa yläkulmassa olevalla kursorikuvakkeella.

  

• Oikeanpuoleisessa Styles-ruudussa näet kaikki kyseiseen elementtiin sovelletut tyylit. Voit poistaa ja soveltaa tyyliä valitsemalla kunkin tyylin vieressä olevat valintaruudut ja poistamalla niiden valinnan. Tämä auttaa rajaamaan, minkä tyylin sääntöä kannattaa muuttaa.
  
  
• CSS-sääntöjen oikealla puolella näet muotoilun lähteen nimen, joka kertoo, mistä muotoilu on peräisin. Siirrä hiiren kursori lähteen nimen päälle nähdäksesi koko nimen:
  • Kun muotoilu tulee tyylitaulukosta, CSS-ilmoituksen vieressä tarkastuksessa näkyy tyylitaulukon nimi. Voit sitten siirtyä suunnittelunhallintaasi, etsiä tyylitaulukon ja tehdä tarvittavat muutokset.
    
    
  • Jos lähteen nimi alkaa moduulilla, muotoilu tulee todennäköisesti moduulin CSS:stä. Näytä moduulin koko nimi viemällä hiiren kursori lähteen nimen päälle.
    
    
  • Jos lähteen nimi on User agent stylesheet , CSS on osa selaimen oletusmuotoilua. You'Näet tämän useimmiten yleisten HTML-tunnisteiden, kuten <p>, <h1>, <h2>, <span>, <div> jne. muotoilussa. Tätä muotoilua käytetään, kun selain ei löydä elementin yleisiä muotoilusääntöjä, mutta se voidaan korvata lisäämällä elementtiin omia tyylejä.
    
    
  • Jos lähteenä on sivun URL-osoite, CSS tulee sivun <style>-tagien sisältä. Muotoilu voidaan asettaa esimerkiksi sivun tai mallin pään HTML-koodissa.
    
    
  • Jos lähteenä on sivun URL-osoite ja muotoilun kohteena on #hs_cos_wrapper_module_number, muotoilu asetetaan todennäköisesti sivueditorin Tyylit-välilehdellä . HubSpot lisää !important-tunnisteet näihin tyyleihin. Lue lisää !important-tunnisteista ja siitä, miten ne vaikuttavat muotoiluun.
    
    
  • Jos lähteen nimi on <style>, muotoilu sisällytetään todennäköisesti automaattisesti elementtiin. Usein tämä johtuu tyyliasetuksista, jotka on asetettu upotettavan HubSpot-assetin, kuten CTA- tai kokouswidgetin, editorissa.
    
    
  • Joselement.stylenäkyy tarkastuksessa ilmoituksen vieressä, CSS on asetettu riviin. Inline-styling on muotoilu, joka lisätään suoraan sivun HTML-lähdekoodiin tai mallinInline-styling-kenttiin. Lähdekoodissa oleva inline-muotoilu näyttäisi esimerkiksi seuraavalta: <p style="background:purple;">Hello world</p>.
    
    

Lisätietoja sivun tarkastamisesta saat selaimesi ohjeasiakirjoista:

• Chrome
• Firefox
• Microsoft Edge
• Safari

Apua suunnittelun muokkaamiseen

Paras resurssi muutosten tekemiseen HubSpotin malleihin tai tyylilomakkeisiin on alkuperäinen mallien suunnittelija. On kuitenkin olemassa useita resursseja, joista voit saada lisäapua sisällön muotoiluun, riippuen siitä, miten hyvin hallitset HTML:n ja CSS:n ongelmanratkaisun.

• Jos osaat käyttää tarkastustyökaluja mallin suunnitteluun liittyvien ongelmien vianmääritykseen:

• • Etsi ja kirjoita viestiä yhteisön CMS-kehitysfoorumilla saadaksesi vinkkejä, neuvoja tai vianmääritystä koodissasi.
  • Tutustu CMS:n viitedokumentaatioon, josta löydät opetusohjelmia, oppaita ja yleiskatsauksen CMS-kehykseen.
  • Ole yhteydessä HubSpotin tuotetiimiin ja muihin HubSpotissa työskenteleviin kehittäjiin CMS-kehittäjäyhteisön Slackissa.

• Jos et osaa lukea tai muokata HTML:ää ja CSS:ää malleissasi:

• • Ota yhteys sertifioituun HubSpot-kumppaniin, jolla on verkkosivustojen suunnitteluun liittyvää asiantuntemusta ja joka auttaa sinua mukauttamaan malleja.
  • Käytä aloitusmallia tai teemamallia sivutyylien muokkaamiseen kirjoittamatta koodia.
  • Jos käytät Asset Marketplace -palvelusta ostettua mallia,ota yhteyttä mallin suunnittelijaanjos sinulla on kysymyksiä sivusi suunnittelusta.