Siirry sisältöön
Huomaa: Tämän artikkelin käännös on tarkoitettu vain tiedoksi. Käännös on luotu automaattisesti käännösohjelmiston avulla, eikä sitä ole välttämättä tarkistettu. Näin ollen tämän artikkelin englanninkielistä versiota on pidettävä hallitsevana versiona, joka sisältää uusimmat tiedot. Voit tutustua siihen täällä.
Landing Pages

Ymmärrä sivun muotoilun lähde.

Päivitetty viimeksi: maaliskuuta 14, 2022

Tämä koskee seuraavia:

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Vanhentunut Marketing Hub Basic-versio

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

    design-manager-linked-stylesheet
  5. Sivun asetukset-välilehdellä liitetyttyylilomakkeet

    page-editor-attach-stylesheet
  6. Kaikkien verkkotunnusten asetuksiin liitetyt tyylitaulukot
  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ä.

    page-editor-head-html
  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.

page-editor-styles-tab

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 sittenTarkista.
  • 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.

    inspect-live-page-cursor

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

    inspect-live-page
  • 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, tyylitaulukon nimi näkyy CSS-ilmoituksen vieressä tarkastuksessa. Voit sitten siirtyä suunnittelunhallintaasi, etsiä tyylitaulukon ja tehdä tarvittavat muutokset.

      inspect-css-stylesheet-name
    • 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.

      inspect-css-module-name
    • 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ä.

      inspect-css-user-agent
    • 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.

      inspect-css-page-url
    • 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.

      inspect-css-styles-tab
    • Jos lähteen nimi on <style>, muotoilu sisällytetään todennäköisesti automaattisesti elementtiin. Usein tämä johtuu tyylittelystä, joka on asetettu upotettavan HubSpot-assetin, kuten CTA- tai kokouswidgetin, editorissa.

      page-styling-style-tag0
    • 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>.

      inspect-css-element-style

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:
Was this article helpful? *
This form is used for documentation feedback only. Learn how to get help with HubSpot.