Luo ja muokkaa moduuleja
Päivitetty viimeksi: tammikuuta 20, 2023
Tämä koskee seuraavia:
Kaikki tuotteet ja HubSpot-tilaukset |
Design Manager -työkalussa voit luoda mukautettuja koodattuja moduuleja, joilla voit lisätä lisäominaisuuksia blogiisi, sivuihisi tai sähköposteihisi. Mukautetut moduulit tarjoavat laajan valikoiman toimintoja, jotta sisältöä voidaan mukauttaatäysin sivun, sähköpostin tai blogin editorissa. Voit rakentaa mukautettuja moduuleja tyhjästä tai lisätä valmiita moduuleja HubSpot Marketplace -palvelusta.
Huomaa: moduulien luominen edellyttää HTML:n, CSS:n, HubL:n ja HubSpot design managerin tuntemusta. HubSpot suosittelee, että koodattujen moduulien luomiseksi tehdään yhteistyötä suunnittelijan kanssa.
Luo uusi moduuli
- Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
- Napsauta hakuikkunan yläreunassa Tiedosto-pudotusvalikkoa ja valitse Uusi tiedosto.
- Napsauta valintaikkunassa Mitä haluat rakentaa tänään? -pudotusvalikkoa ja valitse Moduuli.
- Napsauta Seuraava.
- Valitse valintaruutu kunkin sisältötyypin kohdalla, jossa moduulia käytetään: sivut, blogikirjoitukset, blogiluettelot, sähköpostit tai lainaukset. Sähköpostimalleissa käytettävät moduulit eivät voi sisältää CSS:ää tai JavaScriptiä.
Huomaa: sähköposteissa käytettäviä mukautettuja moduuleja voi luoda vain tileille, joilla on Marketing Hub Professional- tai Enterprise-tilaus .
- Valitse, onko tämä moduuli paikallinen vai globaali moduuli. Jos luotglobaalin moduulin, moduulin sisällön muokkaaminen päivittää kaikki sijainnit, joissa moduulia käytetään.
- Kirjoita moduulisi tiedostonimi ja napsauta sitten Luo.
Merkitse moduuli
Oletusarvoisesti sisältöeditori viittaa moduuliin käyttämällä nimeä, joka sille on annettu suunnittelunhallinnassa. Jos haluat, että moduulisi käyttää sisältöeditorissa eri nimeä, voit tehdä sen antamalla nimikkeen.
Lisää kenttiä moduuliin
Lisää moduuliin kenttiä, joilla voit määrittää moduulin sisällön tai muotoilun ja tehdä siitä muokattavissa olevan sisältöeditorissa. Lue lisää käytettävissä olevista kenttätyypeistä kehittäjän dokumentaatiosta.
- Napsauta oikealla olevassa moduulin tarkastajassa Lisää kenttä
-pudotusvalikkoa Kentät-osiossa ja valitse sitten kenttä, jonka haluat lisätä moduuliin.
- Muokkaa kentän nimeä napsauttamalla kentän nimen vieressä olevaa muokkauskynäkuvaketta . Jos haluat muokataHubL-muuttujan nimeä, tee muutokset HubL-muuttujan nimi -tekstikenttään.
Lisää kentän oletussisältö
Sisältöasetukset-osiossa voit lisätä oletussisältöä, joka tulee näkyviin, kun moduulia käytetään malleissa ja sisällönmuokkaimissa. Oletussisällön vaihtoehdot vaihtelevat kenttätyypin mukaan.
Alla olevassa esimerkissä kenttätyyppi on kuvakenttä, joten oletussisällön vaihtoehdot ovat oletuskuvan valitseminen ja koon säätimien piilottaminen.
Aseta kenttäeditorin asetukset
Editor Options (Editorin asetukset ) -osiossa voit ottaa käyttöön seuraavat vaihtoehdot, joilla käyttäjät voivat muokata moduulia sisältöeditorissa:
- Tee tästä kentästä pakollinen: käyttäjä ei voi jättää tätä kenttää tyhjäksi sisältöeditorissa.
- Muokkauksen estäminen sisältöeditorissa: kentän sisältöä ei voi muokata sisältöeditorissa; sitä voi kuitenkin muokata mallin tasolla. Tämä vaihtoehto ei ole käytettävissäglobaaleille moduuleille, joita ei voi muokata sivutasolla.
- Työkaluvihjeen ohjeteksti: Lisää kenttään ohjeteksti, joka antaa käyttäjille asiayhteyden tai ohjeita. Tämä ohjeteksti näkyy työkaluvihjeenä, kun käyttäjä vie hiiren osoitin kentän päälle muokkauksen aikana.
- Inline-aputeksti: Lisää kenttään aputekstiä, joka antaa käyttäjille asiayhteyden tai ohjeita. Tämä ohjeteksti näkyy kentän alla, kun käyttäjä muokkaa moduulia.
Aseta kentän näyttöolosuhteet
Kentän näyttöehtojen avulla voit asettaa moduulin kentän näkymään vain, jos jokin toinen kenttä täyttää tietyt kriteerit.
- Valitse moduulikenttä napsauttamalla HubL-muuttujan
pudotusvalikosta Näytä ehdot -osiossa HubL-muuttujanpudotusvalikkoa javalitse sitten kentän ehto napsauttamalla ei ole tyhjä -pudotusvalikkoa. - Jos valitset ehdon on yhtä suuri kuin, kirjoita arvo tai regex.
Alla olevassa esimerkissä näyttöehdot asetetaan kuvakentälle. Ehtona on, että image_title-nimisen tekstikentän arvon on oltava yhtä suuri kuin Headshot, jotta kuvakenttä näkyy moduulissa.
Näyttöehdot otetaan automaattisesti käyttöön, kun olet asettanut ehdon. Voit poistaa näyttöehdot käytöstä napsauttamalla näyttöehtojen oikealla puolella olevaavaihtokytkintä .
Aseta kentän toistimen asetukset
Voit määrittää toistinvaihtoehdot kentälle kohdassa Toistinvaihtoehdot . Toistimet ovat kenttiä ja ryhmiä, jotka voivat luoda useita kohteita ja näyttää ne for-silmukan
avulla.
- ValitseRepeater options (Toistimen vaihtoehdot ) -osiossa kentän vaadittujen esiintymien vähimmäis- ja/tai
enimmäismäärä . - Voit myös asettaa oletusarvoisen objektiluvun, joka on kentän oletusarvoisesti moduulissa esiintyvien kenttien lukumäärä.
Alla olevassa esimerkissä kuvakenttä on määritetty kuvan liukusäätimeksi. Objektien lukumäärän rajat on asetettu siten, että moduulissa näkyy vähintään 3 kuvakenttää ja enintään 5 kuvakenttää. Käyttäjä näkee moduulissa oletusarvoisesti 4 kuvakenttää, ja hän voi lisätä yhden kuvakentän lisää tai poistaa yhden olemassa olevan kuvakentän.
Toistinvaihtoehdot otetaan automaattisesti käyttöön, kun olet muuttanut jotakin vaihtoehtoa. Voit poistaa toistinvaihtoehdot käytöstä napsauttamalla toistinvaihtoehtojen oikealla puolella olevaavaihtokytkintä .
Ryhmämoduulin kentät
Kun olet luonut kenttiä, voit ryhmitellä enintään 4 kenttää yhteen, jotta kentät pysyvät järjestettyinä merkityksellisyyden mukaan. Kenttäryhmiä voidaan käyttää mukautetun kenttälogiikan luomiseen. Lisätietoja moduulin kenttäryhmistä.
Moduulikenttien ryhmittely:
- Napsauta moduulieditorin oikeanpuoleisessa sivupalkissa olevaa Ryhmä-painiketta.
- Valitse kentät, jotka haluat ryhmitellä.
- Valitse Luo ryhmä.
Kopioi ja liitä kenttäpätkät
- Kun olet valmis sisällyttämään kentän moduuliin, kopioi ja liitä kentän katkelma moduulin HTML + HubL -editoriin.
- Jos olet kenttätarkastuksessa, napsauta Kopioi pätkä kentän HubL-muuttujan nimen oikealla puolella.
- Jos olet moduulin tarkastajassa, siirrä hiiren kursori kentän päälle ja napsauta
Toiminnot-pudotusvalikkoa ja valitse sitten Kopioi pätkä.
- Napsauta HTML + HubL -editorin kenttää haluamaasi paikkaan ja liitä pätkä painamalla Ctrl+V tai Cmd+V.
Kirjoita moduulisi syntaksi
Kun muokkaat moduulia, voit kirjoittaa lisää moduulin syntaksia HTML + HubL-, CSS- ja JS-editorin ikkunoihin. Lue lisäämoduulin koodieditorista ja moduulin syntaksiviitteestä HubSpotin suunnittelijan dokumentaatiosta.Lisää ohjeen tekstiä moduuliin
Lisää editorin asetukset -osioon ohjeteksti, joka antaa käyttäjille kontekstin moduulia muokattaessa. Ohjeteksti voi olla enintään 300 merkkiä pitkä.
Kun käyttäjä muokkaa moduulia sisältöeditorissa, ohjeteksti näkyy moduulin kenttien yläpuolella.
Esikatsele moduulisi
Voit esikatsella, miltä moduulisi näyttää ja miten se toimii sisältöeditorissa, napsauttamalla moduulieditorin oikeassa yläkulmassa olevaa Esikatselu-painiketta . Moduulisi esikatselu avautuu uuteen välilehteen. Tämä esikatselu synkronoituu editorin kanssa ja päivittyy automaattisesti työskentelyn aikana.
Julkaise moduuli
Kun olet lisännyt kentät ja kirjoittanut moduulisi syntaksin, voit julkaista moduulisi. Napsauta oikeassa yläkulmassa Julkaise muutokset.
Tee moduulisi saataville malleja varten
- Kytke muokkausohjelman oikeassa yläkulmassa oleva Vaihda Mallien saataville -vaihtoehto päälle , jotta tämä moduuli voidaan lisätä malleihisi.
- Kytke tämä kytkin pois päältä , jos haluat tehdä muutoksia tai testata moduulin toimintaa. Jos tämä kytkin on pois käytöstä, tiimisi näkee ilmoituksen, että tämä moduuli ei ole käytettävissä malleja varten.
Lisää moduulisi malliin
Kun olet julkaissut moduulin, voit käyttää sitä kaikilla sivuillasi lisäämällä sen malliin.
Moduulin lisääminen vedä ja pudota -malliin:
- Napsauta mallin ulkoasun muokkauksessa ulkoasun tarkastajan yläosassa olevaa Lisää-välilehteä ja etsi sitten moduuli. Luomasi mukautetut moduulit tunnistaa mukautetun moduulin kuvakkeesta: customModules.
- Vedä ja pudota moduuli malliin.
Jos haluat lisätä moduulin koodattuun malliin, voit kopioida ja liittää moduulin pätkän malliin:
- Voit kopioida moduulin katkelman moduulieditorista valitsemalla oikean sivupalkin alareunassa Kopioi katkelma.
- Voit kopioida moduulin pätkän suunnittelunhallinnan vasemmasta sivupalkista:
- Etsi vasemmasta sivupalkista mukautettu moduuli.
- Napsauta moduulia hiiren kakkospainikkeella ja valitse Kopioi pätkä. Vaihtoehtoisesti voit valita moduulin, napsauttaa sitten vasemmassa yläkulmassa olevaa Toiminnot-painiketta ja valita Kopioi pätkä.
- Liitä koodattuun malliin pätkä tarvittaessa.
Asiaan liittyvä sisältö
-
Luo sivuja useilla kielillä
Voit kääntää HubSpot-sivun sisällön useille kielille. Lisäämällä kielivaihtomoduulin sivun malliin voit antaa...
Tietämyskanta -
Kloonaa HubSpot-sisältösi
Voit kloonata HubSpotin blogikirjoituksen, sähköpostiviestin tai sivun ja käyttää olemassa olevaa sisältöä...
Tietämyskanta -
Luo, muokkaa ja liitä CSS-tiedostoja sivustosi tyylittelemiseksi.
CSS (Cascading Style Sheets) on koodattu tiedosto, joka valitsee sivusi elementit ja ohjaa niiden...
Tietämyskanta