Luo ja muokkaa moduuleja suunnittelunhallinnassa

Suunnittelunhallinnan avulla voit luoda mukautettuja moduuleja, joilla voit lisätä lisäominaisuuksia blogiisi, sivuihisi tai sähköposteihisi. Mukautetut moduulit tarjoavat laajan valikoiman toimintoja, jotta sisältöä voidaan mukauttaa täysin sivun, sähköpostin tai blogin editorissa.

Huomaa: moduulien luominen edellyttää HTML:n, CSS:n, HubL:n ja HubSpot design managerin tuntemusta. HubSpot suosittelee yhteistyötä kehittäjän kanssa koodattujen moduulien luomiseksi.

Luo uusi moduuli

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

3. Napsauta valintaikkunassa Mitä haluat rakentaa tänään? -pudotusvalikkoa ja valitse Moduuli.
4. Napsauta Next (Seuraava).
5. Valitse Missä haluat käyttää tätä moduulia -kentässä valintaruutu kunkin sisältötyypin vieressä, jossa moduulia käytetään (esim. blogikirjoitukset, sähköpostit tai laskeutumissivut).
6. Valitse Moduulin sisällön laajuus -kentässä vaihtoehto (esim. Paikallinen moduuli tai Globaali moduuli). Jos luot globaalin moduulin, tämän moduulin sisällön muokkaaminen päivittää kaikki paikat, joissa moduulia käytetään.
7. Anna moduulin tiedostonimi .
8. Jos haluat muuttaa moduulin tiedostosijaintia, napsauta Tiedoston sijainti -osiossa kohtaa Muuta. Valitse ponnahdusikkunassa uusi sijainti ja napsauta sitten Valitse.
9. Kun olet valmis, napsauta Luo.
10. Jatka moduulin muokkaamista.

Huomaa: sähköposteissa käytettäviä moduuleja voi luoda vain tileillä, joilla on Marketing Hub Professional- tai Enterprise-tilaus. Ne eivät voi sisältää CSS:ää tai JavaScriptiä.

Muokkaa moduulia

Kun olet luonut moduulin suunnittelunhallinnassa, voit muokata sen toiminnallisuutta ja ulkonäköä. Voit merkitä moduulin selkeyden vuoksi, lisätä ja määrittää kenttiä ja säätää kenttäeditorin asetuksia, kuten oletussisältöä. Aseta näyttöehdot ja toistovaihtoehdot ja ryhmittele toisiinsa liittyvät kentät paremman järjestyksen vuoksi. Voit myös kopioida ja liittää kenttäpätkiä, kirjoittaa mukautettua moduulin syntaksia, lisätä hyödyllistä opastavaa tekstiä ja muokata sitä, minkä mallityyppien kanssa moduulia voidaan käyttää.

Moduulin etiketin lisääminen

Suunnittelunhallinnassa voit lisätä tai päivittää moduulin tunnisteen, jotta käyttäjät voivat tunnistaa moduulin sisältöeditorissa. Jos etiketti on tyhjä, moduulin nimi näytetään oletusarvoisesti.

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Avaa etsimessä moduuli, jonka etikettiä haluat muokata, napsauttamalla sitä.
3. Kirjoita tarkastajassa etiketti.

Kenttien lisääminen moduuliin

Lisää kenttiä moduuliin, jos haluat määrittää moduulin sisällön tai muotoilun ja tehdä siitä muokattavissa olevan sisältöeditorissa. Lisätietoja käytettävissä olevista kenttätyypeistä.

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Avaa moduuli napsauttamalla sitä etsimessä.
3. Napsauta tarkastajassa Fields (Kentät ) -osiossa Add field (Lisää kenttä ) -pudotusvalikkoa. Valitse sitten moduuliin lisättävä kenttä.

4. Voit muokata kentän nimeä napsauttamalla edit muokkauskuvaketta ja kirjoittamalla uuden nimen. Jos haluat muokata HubL-muuttujan nimeä, kirjoita uusi nimi HubL-muuttujan nimi -kenttään.

Kentän oletussisällön mukauttaminen

Sisältöasetukset-osiossa voit lisätä oletussisältöä, joka näkyy, kun moduulia käytetään malleissa ja sisältöeditorissa. Oletussisällön vaihtoehdot vaihtelevat kenttätyypin mukaan.

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Avaa moduuli napsauttamalla hakulaitteessa.
3. Vie hiiren kursori tarkastajan Fields (Kentät ) -osiossa kentän päälle ja valitse Edit (Muokkaa).
4. Lisää tai muokkaa Sisältöasetukset-osiossa oletussisältöasetuksia. Käytettävissä olevat oletussisältövaihtoehdot riippuvat valitusta kenttätyypistä.

Esimerkiksi lisäämällä moduuliin Päivämäärä ja aika -kenttätyypin voit valita oletuspäivämäärän ja -ajan. Voit myös syöttää oletusaikavälin.

Kenttäeditorin vaihtoehtojen asettaminen

Editor Options (Muokkausasetukset ) -osiossa voit asettaa kentän pakolliseksi ja estää sen muokkaamisen sisältöeditorissa. Voit myös mukauttaa ohjetekstiä.

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Avaa moduuli napsauttamalla hakulaitteessa.
3. Vie hiiren kursori tarkastajan Fields (Kentät ) -osiossa kentän päälle ja valitse Edit (Muokkaa).
4. Jos haluat tehdä kentästä pakollisen, vaihda Muokkaa tämä kenttä pakolliseksi -kytkintä päälle Editor options -osiossa. Tämä estää käyttäjiä jättämästä kenttää tyhjäksi sisältöeditorissa.
5. Jos haluat estää kentän sisällön muokkaamisen, kytke Estä muokkaaminen sisältöeditorissa -kytkin päälle. Kentän sisältöä voidaan silti muokata suunnittelunhallinnassa mallin tasolla. Tämä vaihtoehto ei ole käytettävissä globaaleissa moduuleissa.
6. Jos haluat lisätä kontekstia tai ohjeita kentän käyttöön, kirjoita tekstiä Tooltip-ohje-tekstikenttään tai Inline-ohje-tekstikenttään .
   • Työkaluvihjeen ohjeteksti: Tämä teksti tulee näkyviin työkaluvihjeeseen, kun käyttäjä vie hiiren kursorin sisällönmuokkausohjelman infoCircleIcon infokuvakkeen päälle.
   • Inline-aputeksti: Tämä teksti näkyy kentän alapuolella, kun käyttäjä muokkaa moduulia sisältöeditorissa.

Kentän näyttöehtojen asettaminen

Näyttöehdot-osiossa voit kentän näyttöehtojen avulla asettaa moduulin kentän näkymään vain, jos jokin toinen kenttä täyttää tietyt kriteerit.

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Avaa moduuli napsauttamalla sitä hakulaitteessa.
3. Vie hiiren kursori tarkastajan Kentät-osiossa kentän päälle ja valitse Muokkaa.
4. Napsauta Näytä ehdot -osiossa HubL-muuttujan pudotusvalikkoa ja valitse muuttuja.
5. Napsauta toista pudotusvalikkoa ja valitse vaihtoehto (esim. Is equal to tai Is not empty). Valitusta vaihtoehdosta riippuen saatetaan tarvita lisää ehtokenttiä. Jos esimerkiksi valitset Is equal to, tarvitaan ylimääräinen arvokenttä.
6. Oletusarvoisesti näyttöehdot kytkeytyvät automaattisesti päälle, kun ehto on määritetty. Jos haluat kytkeä näyttöehdot pois päältä, vaihda Display Conditions (Näyttöehdot ) -kytkin pois päältä.

Kentän toistovaihtoehtojen asettaminen

Toistovaihtoehdot-osiossa voit määrittää kenttien ja ryhmien toistovaihtoehdot. Kun toistovaihtoehdot on otettu käyttöön, useita kohteita luodaan ja näytetään for -silmukan avulla.

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Avaa moduuli napsauttamalla hakulaitteessa.
3. Vie hiiren kursori tarkastajan Kentät-osiossa kentän päälle ja valitse Muokkaa.
4. Kirjoita Repeater options (Toistimen asetukset ) -osassa Minimum and Maximum (valinnainen ) -kenttiin numero. Tämä määrittää kentän vähimmäiskertojen määrän moduulissa enimmäisarvoon asti.
5. Jos haluat määrittää, kuinka monta kertaa kenttä näytetään oletusarvoisesti, kirjoita numero Default object count -kenttään.
6. Oletusarvoisesti toistinvaihtoehdot kytkeytyvät automaattisesti päälle, kun ne on määritetty. Jos haluat kytkeä toistinvaihtoehdot pois päältä, kytke Toistinvaihtoehdot-kytkin pois päältä.

Esimerkiksi kuvakentän toistinvaihtoehtoja muutetaan siten, että vähintään kolme ja enintään viisi kuvakenttää näytetään. Oletusarvoksi on määritetty neljä kuvakenttää. Sisältöeditorissa käyttäjä näkee oletusarvoisesti neljä kuvakenttää ja voi lisätä yhden kuvakentän lisää tai poistaa olemassa olevan kuvakentän.

Ryhmämoduulin kentät

Kun olet luonut kenttiä, voit ryhmitellä ne yhteen, jotta kentät pysyvät järjestyksessä merkityksellisyyden mukaan. Kenttäryhmiä voidaan käyttää mukautetun kenttälogiikan rakentamiseen. Voit ryhmitellä enintään neljä kenttää yhteen. Lisätietoja moduulin kenttäryhmistä.

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Avaa moduuli napsauttamalla hakulaitteessa.
3. Napsauta tarkastajassa Fields (Kentät ) -osiossa Actions (Toiminnot ) -pudotusvalikkoa ja valitse Group (Ryhmä).
4. Valitse yksi tai useampi kenttä, jotka haluat ryhmitellä, ja napsauta sitten Luo ryhmä.

Lisää moduuliin ohjetekstiä

Editorin asetukset -osiossa voit lisätä ohjetekstiä, joka antaa käyttäjille kontekstin moduulin muokkauksen aikana. Tämä teksti näkyy moduulisi kenttien yläpuolella.

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Avaa moduuli napsauttamalla etsimessä.
3. Kirjoita tarkastajan Editor options -osion Inline help text -kenttään tekstiä.

Moduulin sisältötyyppien ja saatavuuden hallinta

Lisää tai poista sisältötyyppejä, joihin käyttäjät voivat käyttää moduulia, kuten blogikirjoituksia tai laskeutumissivuja. Voit myös kytkeä moduulin saatavuuden malleissa ja sivuilla päälle tai pois.

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Avaa moduuli napsauttamalla hakulaitteessa.
3. Voit muokata moduulin sisältötyyppejä napsauttamalla moduulin nimen alla olevaa Sisältötyypit-kohtaa oikeassa yläkulmassa olevassa tarkastajassa.

1. • Valitse tai poista valintaikkunassa valintaruutu jokaisen sisältötyypin vieressä, jossa moduulia käytetään tai ei käytetä (esim. blogikirjoitukset, sähköpostit tai laskeutumissivut).
   • Kun olet valmis, napsauta Päivitä.

4. Jos haluat hallita moduulin saatavuutta malleissa tai sivuilla, vaihda oikeassa yläkulmassa olevaa Aseta saataville malleissa ja sivuilla -kytkintä päälle. Jos haluat testata moduulin toiminnallisuutta tai poistaa sen saatavuuden malleissa ja sivuilla, kytke Ota käyttöön malleissa ja sivuilla -kytkin pois päältä.

Huomaa: moduulin asettaminen saataville malleissa tai sivuilla pois päältä ei poista moduulia olemassa olevista malleista tai sivuista.

Kopioi ja liitä kenttäpätkiä

Kun sisällytät kentän moduuliin, voit kopioida ja liittää kenttäsnippetin moduulieditorin module.html (HTML + HubL) -osioon.

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Avaa moduuli napsauttamalla hakulaitteessa.
3. Vie hiiren kursori tarkastajassa moduulin kentän päälle ja napsauta Kentät-osiossa olevaa Toiminnot-pudotusvalikkoa. Valitse sitten Kopioi pätkä.
4. Liitä kenttäpätkä moduulieditorissa haluttuun paikkaan moduuli.html (HTML. + HubL) -osiossa. Voit käyttää pikanäppäimiä Cmd+V tai Ctrl+V.

Kirjoita moduulin syntaksi

Kun muokkaat moduulia, voit kirjoittaa moduulin syntaksiamoduulieditorin module.html (HTML + HubL), module.css ja module.js -osioihin . Lisätietoja moduulieditorista ja moduulin yleiskatsauksesta.

Moduulin esikatselu ja julkaisu

Kun olet saanut moduulin muokkauksen valmiiksi, mukaan lukien kenttien lisäämisen ja moduulin syntaksin kirjoittamisen, voit esikatsella ja julkaista moduulin.

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Avaa moduuli napsauttamalla hakulaitteessa.
3. Voit esikatsella moduulia napsauttamalla oikeassa yläkulmassa olevaa Preview (Esikatselu ) -painiketta. Sinut ohjataan uuteen selainvälilehteen moduulin esikatselua varten. Tämä esikatselu synkronoituu moduulieditorin kanssa ja päivittyy automaattisesti, kun muokkauksia tehdään.
4. Voit julkaista moduulin napsauttamalla Julkaise muutokset.

Moduulin lisääminen malliin

Kun olet julkaissut moduulin, voit käyttää sitä eri malleissa lisäämällä sen vedä ja pudota -malliin tai mukautettuun koodattuun malliin suunnittelunhallinnassa. Jos haluat lisätä moduuleja sisältöeditorissa, katso lisätietoja moduulien lisäämisestä ja muokkaamisesta sisältöeditorissa.

1. Siirry HubSpot-tililläsi kohtaan Sisältö > Suunnittelun hallinta.
2. Avaa malli napsauttamalla hakulaitteessa.
3. Jos haluat lisätä moduulin raahaa ja pudota -malliin ulkoasueditorissa, napsauta + Lisää-välilehteä tarkastajan yläosassa.
   • Kirjoita hakukenttään moduulin nimi. Jos haluat rajata haun mukautettuihin moduuleihin, napsauta Filter by category or tags (Suodata luokan tai tunnisteiden mukaan ) -pudotusvalikkoa ja valitse Custom modules (Mukautetut moduulit).
   • Napsauta dragHandleIcon raahaa ja pudota -kuvaketta ja siirrä moduuli paikalleen asettelueditorissa.
4. Moduulin lisääminen mukautettuun koodattuun malliin:
   • Napsauta moduulia oikealla hiiren kakkospainikkeella tai Ctrl+napsauta sitä hakulaitteessa ja valitse Kopioi pätkä. Vaihtoehtoisesti voit avata moduulin napsauttamalla sitä ja napsauttaa sitten tarkastajan Mallin käyttö -osiossa Kopioi pätkä.
   • Liitä moduulin katkelma mukautetun koodin mallissa koodieditoriin.
5. Kun olet valmis, napsauta Julkaise muutokset oikeassa yläkulmassa.

Esimerkki

Luo lähtölaskentamoduuli

1. Luo moduuli suunnittelunhallinnassa ja nimeä se'Countdown Timer'.
2. Napsauta tarkastajan kenttäosiossa Lisää kenttä -pudotusvalikkoa.

• • Valitse Päivämäärä ja kellonaika -kenttä. Kirjoita nimi 'Tapahtuman päivämäärä ja kellonaika'. Tämä päivittää HubL-muuttujan nimi -kentän muotoon event_date_and_time.

• • Valitse Väri-kenttä. Kirjoita nimi "Timer Font Color". Tämä päivittää HubL-muuttujan nimi -kentän muotoon timer_font_color.

Huomaa: HubL-muuttujien nimien on vastattava alla olevassa module.html (HTML + HubL) -koodiosiossa olevia muuttujien nimiä.

3. Kopioi ja liitä moduulieditorissa seuraava koodi module.html (HTML + HubL) -osioon:

<!-- Piilotettu span tallentamaan tavoitepäivämäärää -->
<span id="target-date" style="display: none;"></span>

<!-- Näytä lähtölaskenta -->
<div style="float: left; width: 100%; color: ;">
<div class="time_container" style="margin-left: 30%;">
<span id="days"></span><br>
Days
</div>
<div class="time_container">
<span id="hours"></span><br>
Hours
</div>
<div class="time_container">
<span id="minutes"></span><br>
Minutes
</div>
<div class="time_container">
<span id="seconds"></span><br>
Seconds
</div>
</div>

4. Kopioi ja liitä seuraava koodi module.css-osioon:

.time_container {
float: left;
width: 10%;
text-align: center;
}
.time_container span {
font-weight: bold;
font-size: 200%;
}

5. Kopioi ja liitä seuraava koodi module.js-osioon:

// Funktio lähtölaskennan laskemiseen ja näyttämiseen
function updateCountdown() {
// Hae tavoitepäivämäärä piilotetusta spanista
const targetDate = new Date(document.getElementById('target-date').textContent);
// Hae nykyinen päivämäärä
const currentDate = new Date();
// Lasketaan jäljellä oleva aika (millisekunteina).
const timeRemaining = targetDate - currentDate;
// Tarkista, onko tavoitepäivä kulunut
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Countdown expired';
return;
}
// Lasketaan jäljellä olevat päivät, tunnit, minuutit ja sekunnit.
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// Näytä lähtölaskenta
document.getElementById('days').innerText = `${days}`;
document.getElementById('hours').innerText = `${hours}`;
document.getElementById('minutes').innerText = `${minutes}`;
document.getElementById('seconds').innerText = `${seconds}`;
}
// Päivitä lähtölaskenta joka sekunti
setInterval(updateCountdown, 1000);
// Alkuperäinen kutsu päivittää lähtölaskenta välittömästi
updateCountdown();

6. Kun olet valmis, esikatsele ja julkaise moduuli.
7. Jatka moduulin lisäämistä malliin.