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ärtää, miten muotoilua sovelletaan

CSS-muotoilua HubSpotissa sovelletaan järjestyksessä sen mukaan, mihin se on HubSpotissa asetettu, kuten alla on lueteltu. Esimerkiksi globaalissa tyylitaulukossa määritetty muotoilu ohittaa tietyllä sivulla määritetyn muotoilun.

1. Mukautettu moduuli CSS
   1. Moduuliin liitetyt tyylitaulukot.
   2. Moduulin CSS-osioon lisätty CSS.
   3. CSS moduulin markup sisällä require_css-lohkossa
2. Malliin require_css-lohkon kautta lisätyt tyylilomakkeet
3. HubSpotin oletustyyliarkit (esimerkiksi layout.css)
4. Malliin liitetyt tyylitaulukot
   
   
   
   
5. Sivun asetukset-välilehdelle liitetyt tyylitaulukot
   
   
   
   
6. Kaikkien verkkotunnusten asetuksiin liitetyt tyylitiedostot
7. Tietyn verkkotunnuksen asetuksiin liitetyt tyylitaulukot
8. <style>-tunnisteisiin lisätty CSS. Esimerkiksi verkkosivuston asetusten, sivun asetusten tai mallin pään HTML-kielessä.
   
   
   
   
9. Sivueditorin kautta lisätyt tyylit. HubSpot lisää näihin tyyleihin myös !important-tagit. Lue lisää !important-tageista ja siitä, miten ne vaikuttavat muotoiluun.

Etsi muotoilu esikatselusivulta tai live-sivulta

Voit käyttää selaimen kehittäjätyökaluja tutkiaksesi tyylejä, joita on sovellettu elävään verkkosivustoosi tai esikatselusivuun. Kukin selain vaihtelee hieman siinä, miten tyylityyppien vianmääritys tapahtuu.

Löytääksesi muotoilun Google Chromessa:

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

  

• Oikealla olevassa Tyylit-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 kentän lähteen nimi joka kertoo, mistä muotoilu on peräisin. Vie hiiren kursori lähteen nimi nähdäksesi koko nimen:
  • Kun muotoilu on peräisin tyylitaulukosta, tyylitaulukon nimi näkyy CSS-ilmoituksen vieressä tarkastuksessa. Tämän jälkeen voit siirtyä suunnittelunhallintaasi, etsiä tyylitaulukon ja tehdä tarvittavat muutokset.
    
    
    
    
  • Jos lähteen nimi alkaa moduulilla, muotoilu on todennäköisesti peräisin moduulin CSS-tiedostosta. 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. Näet tämän useimmiten yleisten HTML-tunnisteiden muotoilussa, kuten <p>, <h1>, <h2>, <span>, <div> jne. 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ähdenimi on sivun URL-osoite ja muotoilu kohdistuu #hs_cos_wrapper_module_number-elementtiin, muotoilu asetetaan todennäköisesti sivun editorin Styles-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.
    
    
    
    
  • Jos element.style ilmestyy tarkastuksessa ilmoituksen viereen, CSS on asetettu inline. 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:

• Kromi
• Firefox
• Microsoft Edge
• Safari

Apua suunnittelun muokkaamiseen

Paras resurssi muutosten tekemiseen HubSpotin malleihin tai tyylilomakkeisiin on alkuperäinen mallien suunnittelija. Sisällön muotoiluun liittyvää lisäapua voi kuitenkin saada useista eri resursseista, riippuen siitä, miten hyvin hallitset HTML- ja CSS-ohjelmien ongelmanratkaisun.

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

• • Etsi ja kirjoita viestejä yhteisön CMS-kehitysfoorumille saadaksesi vinkkejä, neuvoja tai vianmääritystä koodissasi.
  • Tutustu CMS-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-malleja:

• • Ota yhteys sertifioituun HubSpot-kumppaniin, jolla on asiantuntemusta verkkosivujen suunnittelussa ja joka auttaa sinua mukauttamaan malleja.
  • Käytä aloitusmallia tai teemamallia muokataksesi sivutyylejä kirjoittamatta koodia.
  • Jos käytät Asset Marketplace -palvelusta ostettua mallia, ota yhteyttä mallin suunnittelijaan, jos sinulla on kysymyksiä sivusi suunnittelusta.