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ä.
Design Manager

Luo ja muokkaa moduuleja

Päivitetty viimeksi: maaliskuuta 10, 2022

Tämä koskee seuraavia:

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

Design Manager -työkalussa voit luoda mukautettuja koodattuja moduuleja lisätäksesi lisäominaisuuksia blogiisi, sivuille tai sähköposteihin.. Mukautetut moduulit tarjoavat laajan valikoiman toimintoja, jotta sisältöä voidaan täysin mukauttaa 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 yhteistyötä suunnittelijan kanssa koodattujen moduulien luomiseksi.

Luo uusi moduuli

  • Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
  • Napsauta hakuohjelman yläreunassa pudotusvalikkoaTiedosto ja valitse sittenUusi tiedosto.

new-file

  • Napsauta valintaikkunassa Mitä haluat rakentaa tänään? -pudotusvalikkoa ja valitse sitten Module.

build-a-module

  • NapsautaSeuraava.
  • Valitse, käytetäänkö tätä moduuliasivupohjissa,blogipohjissa ja/taisähköpostipohjissa. Sähköpostimalleissa käytettävät moduulit eivät voi sisältää CSS:ää tai JavaScriptiä.
  • Valitse, onko tämä moduuli paikallinenvaiglobaali moduuli. Jos luotglobaalin moduulin, moduulin sisällön muokkaaminen päivittää kaikki sijainnit, joissa moduulia käytetään.
  • Kirjoita moduulisi tiedostonimi ja napsauta sittenLuo.

set-up-your-new-module

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.

design-manager-label-module

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ädokumentaatiostamme.

  • Napsauta oikealla olevassa moduulin tarkastajassaLisää kenttä-pudotusvalikkoaKentät-osiossaja valitse sittenkenttä, jonka haluat lisätä moduuliin.

module-add-field

  • Muokkaa kentän nimeä napsauttamallakynäkuvaketta.muokkaa kentän nimen vieressä. Voit muokataHubL-muuttujan nimeä tekemällä muutokset HubL-muuttujan nimi-tekstikenttään.

Lisää kentän oletussisältö

Sisältöasetukset-osiossavoit lisätä oletussisältöä, joka näkyy, 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.

field-content-options

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, mutta sitä voi silti 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.

    custom-module-help-text
  • 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.

design-manager-module-field-options

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.

  • VuonnaNäyttöolosuhteetosiossa valitse moduulikenttä napsauttamallaHubL-muuttujanpudotusvalikkoa ja napsauta sittenis notempty -pudotusvalikkoa valitaksesi ehdon kyseiselle kentälle.
  • Jos valitset ehdonon yhtä suuri kuin, kirjoitaarvo 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.

field-display-conditions

Näyttöehdot otetaan automaattisesti käyttöön, kun olet asettanut ehdon. Voit poistaa näyttöehdot käytöstä napsauttamallanä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.

  • Toistimen vaihtoehdoissaosiossa, valitseminimija/taimaximumvaadittujen tapausten määrä tässä kentässä.
  • Voit myös asettaaoletusarvoisen objektiluvun, joka on kentän oletusarvoisesti moduulissa esiintyvien kenttien lukumäärä.

Alla olevassa esimerkissä kuvakenttä on määritetty kuvan liukusäätimeksi. Kohteiden lukumäärän rajat on asetettu siten,että moduulissa näkyy vähintään3kuvakenttää ja enintään 5kuvakenttää.Käyttäjä näkee moduulissa oletusarvoisesti4kuvakenttää, ja hän voi lisätä yhden kuvakentän lisää tai poistaa yhden olemassa olevan kuvakentän.

field-repeater-options

Toistinvaihtoehdot otetaan automaattisesti käyttöön, kun olet muuttanut jotakin vaihtoehtoa. Voit poistaa toistinvaihtoehdot käytöstä napsauttamallatoistinvaihtoehtojen 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.

    design-manager-group-fields
  • Valitse kentät, jotka haluat ryhmitellä.
  • ValitseLuo ryhmä.

Kopioi ja liitä kenttäpätkät

  • Kun olet valmis sisällyttämään kentän moduuliin, kopioi ja liitä kenttäpätkä moduulin HTML + HubL-editoriin.
    • Jos olet kenttätarkastimessa, valitseKopioi pätkä kentänHubL-muuttujan nimen oikealla puolella.
    • Jos olet moduulin tarkastajassa, siirrä hiiren kursori kentän päälle ja napsautaActions (Toiminnot)-pudotusvalikkoa ja valitseCopy snippet (Kopioi pätkä).
  • NapsautaHTML + HubL -editorissa kentän haluamaasi paikkaan ja liitä sitten pätkä painamallaCtrl+V taiCmd+V.

copy-paste-field-snippet

Kirjoita moduulisi syntaksi

Kun muokkaat moduulia, voit kirjoittaa lisää moduulin syntaksiaHTML + HubL-,CSS- jaJS-editoriruuduissa. Lue lisäämoduulin koodieditorista jamoduulin 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ä.

design-manager-help-text

Kun käyttäjä muokkaa moduulia sisältöeditorissa, ohjeteksti näkyy moduulin kenttien yläpuolella.

page-editor-module-help-text

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.

preview-module

Julkaise moduuli

Kun olet lisännyt kentät ja kirjoittanut moduulisi syntaksin, voit julkaista moduulisi. Napsauta oikeassa yläkulmassa Julkaise muutokset.

publish-module

Tee moduulisi saataville malleja varten

  • Kytke muokkausohjelman oikeassa yläkulmassa olevaVaihda Mallien saataville-vaihtoehto päälle, jotta tämä moduuli voidaan lisätä malleihisi.

content-toggle

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

make-module-available

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 olevaaLisää-välilehteäja etsi sitten moduuli. Luomasi mukautetut moduulit tunnistaa mukautetun moduulin kuvakkeesta: customModules.
  • Vedä ja pudota moduuli malliin.

add-custom-module

Jos haluat lisätä moduulin koodattuun malliin, voit kopioida ja liittää moduulin pätkän malliin:

  • Voit kopioida moduulin katkelman moduulieditorista valitsemalla oikean sivupalkin alareunassaKopioi katkelma.

    module-editor-copy-snippet0
  • 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 olevaaToiminnot-painiketta ja valitaKopioi pätkä.

      custom-module-copy-snippet00
  • Liitä koodattuun malliin pätkä tarvittaessa.

    coded-template-paste-snippet0

Moduulin lisääminen tai ostaminen kauppapaikalta

Omien moduulien luomisen lisäksi voit lisätä tai ostaa mukautettuja moduuleja, joita muut käyttäjät tai palveluntarjoajat ovat luoneet HubSpot Marketplace -markkinapaikalla.

  • Napsauta HubSpot-tilisi Marketplace-kuvaketta marketplace päänavigointipalkissa.
  • Napsauta vasemmanpuoleisessaFilter products (Suodata tuotteet) -osiossa Category (Luokka) -kohdanAll products (Kaikki tuotteet) -pudotusvalikkoa ja valitseModules (Moduulit). Voit suodattaa käytettävissä olevia moduuleja seuraavasti:
    • Hinta:onko moduuli ilmainen vaimaksullinen
    • Toiminto: moduulin sisältämien toimintojen tyyppi (esim. laskin, galleria, kartta).
    • Toimii: mallinetyyppi(t), jossa moduulia voidaan käyttää.
    • Palveluntarjoaja: palveluntarjoaja(t), jonka (joiden) tarjoama moduuli on.
  • Vie hiiren kursori valitun moduulin päälle ja valitse Näytä tiedot.
  • Napsauta oikeassa yläkulmassa kohtaaHanki moduuli ilmaiseksitaiOsta moduuli$:lla.
    • Jos moduuli on vapaa, se lisätään automaattisesti suunnittelunhallintaasi.
    • Jos moduuli on maksullinen, siirry syöttämään maksutiedot. Kun maksu on käsitelty, moduuli lisätään design manageriin.
Was this article helpful? *
This form is used for documentation feedback only. Learn how to get help with HubSpot.