Rakenna mukautettu koodattu malli

Kehittäjät voivat rakentaa blogin, verkkosivun, aloitussivun ja sähköpostimallit tyhjästä HTML + HubL:n avulla. Voit myös kloonata vedä ja pudota mallin ulkoasun HTML-muotoon ja muokata sitä sitten koodattuna mallina.

Lue lisää mukautettujen omaisuuserien suunnittelusta kehittäjädokumentaatiostamme.

Ennen kuin aloitat

Ennen kuin aloitat työskentelyn tämän ominaisuuden kanssa, varmista, että ymmärrät täysin, mitä toimenpiteitä on toteutettava etukäteen, sekä ominaisuuden rajoitukset ja sen käytön mahdolliset seuraukset.

Vaatimusten ymmärtäminen

• Varmista, että sinulla on suunnittelutyökalujen käyttöoikeudet mallien luomiseen ja muokkaamiseen suunnittelunhallinnassa.
• On suositeltavaa, että sinulla on myös Globaalin sisällön ja teeman asetukset ja Verkkosivuston asetukset -oikeudet, jos sinun on muokattava globaaleja verkko-ominaisuuksia ja blogin/verkkosivuston asetuksia.

Rajoitusten ja näkökohtien ymmärtäminen

• Sähköpostimallien luominen edellyttää Marketing Hub Professional- tai Enterprise-tilausta. Content Hub -tileillä voi luoda sähköposteja raahaa ja pudota -sähköpostieditorilla.
• Mukautetuissa koodatuissa malleissa voidaan käyttää monia ennalta määritettyjä muuttujia. Jotkin näistä muuttujista ovat välttämättömiä sähköpostien ja sivujen luomiseksi, kun taas toiset ovat valinnaisia. Lue lisää vaadittujen sähköposti-, verkkosivusto- ja aloitussivu HubL-muuttujien lisäämisestä.

Luo uusi HTML + HubL-tiedosto

• Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
• Napsauta vasemman sarakkeen yläosassa File (Tiedosto) -valikkoa ja valitse New file (Uusi tiedosto).

• Napsauta Uusi tiedosto -valintaikkunassa Mitä haluat rakentaa tänään? -pudotusvalikkoa ja valitse HTML + HubL ja napsauta sitten Seuraava.

• Kirjoita uuden HTML + HUBL -mallin määrittäminen -valintaikkunassa uuden tiedoston tiedot:
  • Valitse vaihtoehto kohdasta Mitä rakennat?:
    • Malli: Määrittää verkkosivuston sivuilla, aloitussivuilla, blogikirjoituksissa tai sähköpostissa näytettävän sisällön ulkoasun ja rakenteen.
    • Mallin osa: on uudelleenkäytettävää koodia tai koodinpätkä, joka voidaan sisällyttää useisiin muihin malleihin.
  • Napsauta pudotusvalikkoa Template type (Mallin tyyppi ) ja valitse mukautetun koodatun mallin tyyppi (sivu, blogipostaus/listaus, sähköposti tai järjestelmäsivu). Lisätietoja mallinetyypeistä.
  • Kirjoita tiedoston nimi Tiedoston nimi -kenttään.
  • Jos haluat päivittää tiedoston sijainnin, napsauta Muuta kohdassa Tiedoston sijainti ja valitse kansio.
• Napsauta Luo.

Lisää HTML + HubL malliisi

Kun olet määrittänyt uuden tiedostosi, sinut ohjataan koodieditoriin, jossa voit lisätä mukautetun koodisi ja esikatsella, miten se näkyy live-sivulla.

Lisää HTML + HubL

• Kirjoita mallin HTML-koodi. Lisätietoja CSS- ja JavaScript-tiedostojen lisäämisestä mukautettuun malliin.
• Jos haluat näyttää, miten HubL renderöi, napsauta Näytä tulostus -kytkintä. Oikealle avautuu paneeli, jossa on renderöity esikatselu.

Lisää tarvittava HubL

Mukautetut koodatut mallit edellyttävät tiettyjä HubL-muuttujia toimiakseen. Jos jokin näistä vaadituista muuttujista puuttuu, virheilmoitus tulee näkyviin, kun yrität julkaista mallin.

• Sivu- ja blogimallit vaativat seuraavat muuttujat:
  • {{standard_footer_includes}}
  • {{standard_header_includes}}
• Sähköpostimallit vaativat seuraavat muuttujat ollakseen CAN-SPAM-yhteensopivia.
  • {{unsubscribe_link}} tai {{unsubscribe_link_all}} (sisällytä vähintään yksi)
  • {{unsubscribe_anchor}}
  • {{site_settings.company_name}}
  • {{site_settings.company_street_address_1}}
  • {{site_settings.company_city}}{{site_settings.company_state}}
  • {{site_settings.company_zip}}

Mallin kloonaaminen HTML-muotoon

Sen lisäksi, että voit luoda malleja tyhjästä, voit myös kloonata vetämällä ja pudottamalla blogien, verkkosivujen ja laskeutumissivujen malleja HTML-muotoon.

• Voit luoda koodatun version olemassa olevasta mallista:
  • Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.

• • Avaa vasemmasta sivupalkista malli, jonka haluat kloonata.
  • Napsauta pudotusvalikkoa Toiminnot ja valitse Kloonaa HTML:ksi. HTML-tiedosto luodaan samaan kansioon kuin alkuperäinen tiedosto.

Esikatsele ja julkaise mallisi

Kun olet luonut mallin, voit esikatsella, miten se näkyy live-sivulla, ja julkaista sen sitten.

• Napsauta oikeassa yläkulmassa Preview (Esikatselu).
• Jos valitset Live-esikatselu näyttöasetusten kanssa, voit esikatsella malliasi sellaisena kuin se näkyy muilla laitteilla valitsemalla esiasetus.
• Jos valitset Esikatselu ilman näyttöasetuksia, voit esikatsella vain sitä, miten malli näkyy selaimissa.
• Kun olet lopettanut muokkauksen, napsauta Julkaise muutokset oikeassa yläkulmassa.

• Jos koodissa on virheitä, näyttöön tulee virheilmoitus. Tarkista lisätietoja näistä virheistä koodieditorin alla olevasta virhekonsolista:
  • Avaa koodieditorin alapuolella oleva konsoli valitsemalla sivun yläreunassa olevassa virheilmoituksessa virhekonsoli.
  • Vaihtoehtoisesti voit siirtyä koodieditorin alareunaan ja napsauttaa Näytä tiedot.