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ä vaiheita 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ösGlobaalin sisällön ja teeman asetukset ja Verkkosivuston asetukset -oikeudet, jos sinun on muokattava globaaleja verkko-ominaisuuksia ja blogin/verkkosivuston asetuksia.

Ymmärrä rajoitukset ja näkökohdat

• 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

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Napsauta hakuikkunan yläreunassa File (Tiedosto ) -pudotusvalikkoa ja valitse New file (Uusi tiedosto).

3. Napsauta valintaikkunassa Mitä haluat rakentaa tänään? -pudotusvalikkoa ja valitse HTML + HubL.

4. Valitse vaihtoehto Mitä rakennat? -kentässä:
   • 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.
5. 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ä.
6. Kirjoita tiedoston nimi Tiedoston nimi -kenttään.
7. Jos haluat päivittää tiedoston sijainnin, napsauta Muuta kohdassa Tiedoston sijainti ja valitse kansio.
8. Kun olet valmis, napsauta Luo.

HTML + HubL:n lisääminen malliin

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

HTML + HubL:n lisääminen

1. Syötä mallin HTML-koodi. Lisätietoja CSS- ja JavaScript-tiedostojen lisäämisestä mukautetun koodin malleihin.
2. Jos haluat näyttää, miten HTML + HubL renderöityy, kytke Show output -kytkin päälle vasemmalla ylhäällä. Oikealle avautuu paneeli, jossa on renderöity esikatselu.

Lisää tarvittava HTML + HubL

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

• Sivu- ja blogimallit vaativat seuraavat muuttujat:

<!-- Enter above the closing </header> tag -->
{{ standard_header_includes }}

<!-- Enter above the closing </body> tag -->
{{ standard_footer_includes }}

• Sähköpostimallit edellyttävät seuraavia muuttujia, jotta ne olisivat CAN-SPAM-yhteensopivia:

<!-- Enter variables above the closing </body> tag -->
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}

<!-- Choose one unsubscribe variable -->
{{ unsubscribe_link }}
{{ unsubscribe_link_all }}

• Sähköpostimallit vaativat seuraavan koodin, jotta esikatseluteksti voidaan näyttää tietyissä sähköpostiohjelmissa:

<!-- Preview text (text which appears right after subject in certain email clients) -->

<div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}
</div>

Kloonaa malli HTML-muotoon

Sen lisäksi, että voit luoda malleja tyhjästä, voit myös kloonata blogien, verkkosivujen ja laskeutumissivujen vedä ja pudota -mallit HTML-muotoon.

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Napsauta hakulaitteessa sen mallin nimeä, jonka haluat kloonata.
3. Napsauta Actions (Toiminnot ) -pudotusvalikkoa ja valitse Clone to HTML. HTML-tiedosto luodaan samaan kansioon kuin alkuperäinen tiedosto.

Mallin esikatselu ja julkaisu

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

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Napsauta hakulaitteessa sen mallin nimeä, jonka haluat esikatsella tai julkaista.
3. Napsauta oikeassa yläkulmassa Preview (Esikatselu ) -pudotusvalikkoa ja valitse vaihtoehto:
   • Jos valitset Live esikatselu näyttöasetusten kanssa, voit esikatsella malliasi sellaisena kuin se näkyy muilla laitteilla valitsemalla Viewport esiasetuksen.
   • Jos valitset Esikatselu ilman näyttöasetuksia, voit esikatsella vain sitä, miltä mallisi näyttää selaimissa.
4. Kun olet valmis, valitse Julkaise muutokset.
5. Jos koodissa on virheitä, näyttöön tulee virheilmoitus. Tarkista lisätietoja näistä virheistä koodieditorin alla olevasta virhekonsolista:

• • Avaa koodieditorin alapuolella oleva konsoli napsauttamalla sivun yläreunassa olevassa virheilmoituksessa virhekonsoli.
  • Vaihtoehtoisesti voit siirtyä koodieditorin vasempaan alareunaan ja napsauttaa Näytä tiedot.