Luo mukautettu koodattu malli

Kehittäjät voivat luoda blogi-, verkkosivu-, aloitussivu- ja sähköpostimalleja alusta alkaen HTML:n ja HubL:n avulla. Voit myös kopioida vedä ja pudota -mallin HTML-muotoon ja muokata sitä sitten koodatun mallin tavoin.

Lue lisää mukautettujen resurssien suunnittelusta kehittäjille tarkoitetusta dokumentaatiostamme.

Luo uusi HTML + HubL-tiedosto

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Suunnittelun hallinta. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Suunnittelun hallinta.
2. Napsauta hakutoiminnon yläosassa olevaa Tiedosto -pudotusvalikkoa ja valitse Uusi tiedosto.

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

4. Valitse kentästä " Mitä olet rakentamassa? " jokin vaihtoehto:
   • Malli: määrittää verkkosivujen, aloitussivujen, blogikirjoitusten tai sähköpostiviestien sisällön ulkoasun ja rakenteen.
   • Osamalli: on uudelleenkäytettävä koodi tai koodinpätkä, joka voidaan sisällyttää useisiin muihin malleihin.
5. Napsauta Mallityyppi-pudotusvalikkoa ja valitse tyyppi mukautetulle koodatulle mallille (sivu, blogikirjoitus/luettelo, sähköposti tai järjestelmäsivu). Lue lisää mallityypeistä.
6. Kirjoita tiedostonimi Tiedostonimi -kenttään.
7. Voit päivittää tiedoston sijainnin napsauttamalla Muuta-painiketta Tiedoston sijainti -osiossa ja valitsemalla kansion.
8. Kun olet valmis, napsauta Luo.

Lisää HTML + HubL mallipohjaasi

Kun olet määrittänyt uuden tiedostosi, sinut ohjataan koodieditoriin, jossa voit lisätä mukautetun koodisi ja esikatsella, miltä se näyttää julkaisussa.

Lisää HTML + HubL

1. Syötä mallin HTML-koodi. Lue lisää CSS- ja JavaScript-tiedostojen lisäämisestä mukautettuihin malleihin.
2. Voit tarkastella, miltä HTML + HubL näyttää, kytkemällä Näytä tuloste -kytkimen päälle vasemmassa yläkulmassa. Oikealle avautuu paneeli, jossa näkyy renderoitu esikatselu.

Lisää vaadittu HTML + HubL

Mukautetut mallit vaativat tiettyjä HTML- tai HubL-muuttujia toimiakseen. Jos jokin näistä vaadituista muuttujista puuttuu, saatat saada virheilmoituksen yrittäessäsi julkaista mallia.

• Sivu- ja blogimallit edellyttävät seuraavia muuttujia:

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

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

• Sähköpostimallit vaativat seuraavia muuttujia, jotta ne ovat CAN-SPAM-vaatimusten mukaisia:

<!-- 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 edellyttävät seuraavaa koodia esikatselutekstin näyttämiseksi 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 alusta alkaen, voit myös kloonata blogien, verkkosivujen ja aloitussivujen malleja HTML-muotoon vetämällä ja pudottamalla.

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Suunnittelun hallinta. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Suunnittelun hallinta.
2. Napsauta Finderissa sen mallin nimeä, jonka haluat kloonata.
3. Napsauta Toiminnot-pudotusvalikkoa ja valitse Kloonaa HTML-muotoon. HTML-tiedosto luodaan samaan kansioon kuin alkuperäinen tiedosto.

Esikatsele ja julkaise mallisi

Kun olet luonut mallisi, voit esikatsella, miltä se näyttää julkaisusivulla, ja julkaista sen sitten.

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Sisältö > Suunnittelun hallinta. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Sisältö > Suunnittelun hallinta.
2. Napsauta hakukoneessa sen mallin nimeä, jota haluat esikatsella tai julkaista.
3. Napsauta oikeassa yläkulmassa olevaa Esikatselu -pudotusvalikkoa ja valitse vaihtoehto:
   • Jos valitset Live-esikatselu näyttöasetuksilla, voit esikatsella mallia sellaisena kuin se näkyy muilla laitteilla valitsemalla Viewport-esiasetuksen.
   • Jos valitset ”Esikatselu ilman näyttöasetuksia”, voit esikatsella mallia vain selaimissa.
4. Kun olet valmis, napsauta Julkaise muutokset.
5. Jos koodissa on virheitä, näyttöön tulee virheilmoitus. Tarkista lisätietoja näistä virheistä koodieditorin alapuolella olevasta virhekonsolista:

• • Napsauta sivun yläosassa näkyvässä virheilmoituksessa ”virhekonsoli”, jolloin konsoli avautuu koodieditorin alapuolelle.
  • Vaihtoehtoisesti voit siirtyä koodieditorin vasempaan alakulmaan ja napsauttaa Näytä tiedot.