HubSpot Tietämyskanta

Ymmärrä sivun muotoilun lähde.

Kirjoittanut HubSpot Support | Nov 2, 2021 10:34:19 AM

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 tyylitaulukot. require_css-lohkon kautta
  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 otsikon HTML-merkki.



  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 muotoiluja esikatselu- 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 sitten Tarkasta.
  • Vasemmalla olevassa Elementit-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 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 kyseisen tyylin lähteen nimen, joka kertoo, mistä tyyli on peräisin. Siirrä hiiren kursori lähteen nimen päälle nähdäksesi koko nimen:
    • Kun muotoilu on peräisin tyylitaulusta, tyylitaulukon nimi näkyy CSS-ilmoituksen vieressä tarkastuksessa. Voit sitten 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. You'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.



    • 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:

Apua suunnittelun muokkaamiseen

Paras resurssi muutosten tekemiseen HubSpotin malleihin tai tyylitaulukoihin 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:
  • Jos et osaa lukea tai muokata HTML:ää ja CSS:ää malleissasi:
Näytä koko julkaisu