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

Pikakierros suunnittelupäällikköön

Päivitetty viimeksi: kesäkuuta 15, 2022

Tämä koskee seuraavia:

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

HubSpotin design managerissa yhdistyvät kaikki työkalut, joita suunnittelijat tarvitsevat huippuluokan verkkosivujen rakentamiseen, mutta samalla se antaa markkinoijille haluamansa joustavuuden sisällön luomisessa.

Tässä artikkelissa esitellään kaikki design managerin ominaisuudet.Jos etsit konkreettisia koodiesimerkkejä ja viitedokumentaatiota, tutustu HubSpotin osoitteeseen kehittäjien dokumentaatio.

Suunnittelunhallintaan sisältyvät työkalut

Design Manager yhdistää useita tärkeitä työkaluja yhteen tehokkaaseen sovellukseen:

  • Finder- tila tiedostojen, mallien, moduulien ja kansioiden luomiseen ja järjestämiseen.
  • Layout Editor- vedä ja pudota -editori sivu-, blogi-, sähköposti- ja järjestelmämallien jäsentämiseen.
  • Tarkastaja- tässä voit muokata asettelun, moduulin tai ryhmän ominaisuuksia.
  • Code Editor- integroitu kehitysympäristö (IDE) kaikelle frontend-koodillesi (CSS, Javascript tai jopa omat HTML-mallisi).
  • Moduulieditori- uudelleenkäytettäviä mukautettuja moduuleja, joita voit määrittää lisäämään sivustoosi kehittyneitä toimintoja, joita ei-tekniset käyttäjät voivat silti hallita.
  • Tiedostonhallinta- tiedostojen hosting-järjestelmä kaikille sivustosi varoille.

Siirry suunnittelunhallintaan tutustuaksesi näihin työkaluihin.Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.

Finder

Hakemisto on tila, jossa voit hallita kaikkia kansioita, malleja, moduuleja ja koodattuja tiedostoja. Voit järjestää tiedostot ja kansiot haluamallasi tavalla käyttämällä hakemiston raahaa ja pudota -käyttöliittymää. Napsauttamalla tiedostoa voit laajentaa tai tiivistää sen sisältämiä tiedostoja.

Kaikki Markkinoinnin keskus Professional ja Enterprise jaCMS-keskus Professional- ja Enterprise-tileillä on oletusarvoisesti @hubspot-kansio suunnittelunhallinnassa. Tämä kansio sisältää kaikki teemasi ja oletusmoduulisi, mukaan lukien vedä ja pudota -sähköpostimoduulit. Nämä teemat ja moduulit ovat vain lukuoikeudellisia, mutta ne voidaan kloonata, jos haluat muokata niitä. Lisätietoja teemojen ja oletusmoduulien mukauttamisesta.

design-manager-hubspot-folder

NapsautaFile (Tiedosto), jos haluat luoda uusia tiedostoja tai kansioita tai tehdä toimenpiteitä etsimessä valittuna olevaan omaisuuserään, kuten poistaa, kloonata tai nimetä omaisuuserän uudelleen. KäytäNäytä-kohdan vaihtoehtoja tiedostojen ja kansioiden sijoittelun hallintaan. Voit nopeasti sulkea kaikki kansiot tai nostaa esiin äskettäin muokatut tai poistetut resurssit.

design manager collapse and deselect folders

Huomaa: Etsin on kontekstisidonnainen, mikä tarkoittaa, että toimintosi ovat aina suhteessa valittuihin kansioihin ja tiedostoihin. Jos haluat luoda uuden tiedoston tai kansion tiettyyn kansioon, napsauta kyseistä kansiota hakemistossa. Jos haluat luoda uuden tiedoston tai kansion kaikkien olemassa olevien kansioiden ulkopuolelle, napsauta Näytä ja valitse sittenPoista kaikki.

TheToimetvalikko on aktiivinen vain, jos tiedosto tai kansio on parhaillaan valittuna, ja siinä on kyseistä omaisuuserätyyppiä koskevia kontekstuaalisia vaihtoehtoja. Voit myös napsauttaahiiren kakkospainikkeellasuoraan omaisuuserää ja tehdä mitä tahansa seuraavista:

  • Kloonaus: kopion tekeminen tiedostosta, kansiosta tai mallista.
  • Siirrä: valitse uusi kansio omaisuudelle.
  • Nimeä uudelleen: anna omaisuuserälle uusi nimi.
  • Kloonaa HTML:ksi: luo kopio omaisuudestasi kokonaan HTML-koodattuna.
  • Kopioiportaaliin: luo kopio omaisuuserästäsi ja lähetä se toiselle HubSpot-tilille, johon sinulla on pääsy.
  • Luo sivu/sähköposti: luo uusi sisältö tällä mallilla.
  • Näytä riippuvaiset: näet luettelon kaikista HubSpot-sisällöistä, jotka käyttävät tiedostoa.
  • Näytä versiohistoria: tarkastele tallennettujen versioiden historiaa.
  • Kopioi pätkä: Käytä tätä kopioidaksesimukautetun moduulinkoodinpätkän nopeasti leikepöydälle. Tämä vaihtoehto tulee näkyviin vain, kun napsautatmoduuliahiiren oikealla painikkeella.
  • Lukitse kansio: Lukitse kansio, jotta käyttäjät eivät voi muokata sen sisältöä suunnittelunhallinnassa. Lukittujen kansioiden sisältöä voi muokata vain paikallisessa kehitysympäristössä.
  • Poista- poistaa tämän tiedoston, kansion, mallin tai moduulin.

right-cilck

Välilehdet

Kun napsautat mallin, moduulin tai koodatun tiedoston nimeä, valinta avautuu editorin välilehdelle. Välilehtien avulla voit helposti tehdä useita tehtäviä ja vaihdella eri mallien ja koodattujen tiedostojen välillä. Voit napsauttaa mitä tahansa välilehteähiiren kakkospainikkeella, jolloin saat näkyviin vaihtoehtoja välilehtien hallintaan editorissa. Voit tarkastella koko luetteloa avoimista välilehdistä napsauttamalla oikealla olevaaalaspäin osoittavaa nuolta.

Jos haluat saada enemmän tilaa työskentelyyn ulkoasueditorissa, voit ensinnapsauttaa kokoontaitokuvaketta, jolloin hakuikkuna sulkeutuu. Voit laajentaa hakemiston uudelleen napsauttamalla kansiokuvakettakansio.

2021-12-16_16-33-42 (2)

Uusien mallien ja tiedostojen luominen

Voit luoda uudenmallin,moduulin taikoodatun tiedoston napsauttamalla Tiedosto>Uusi tiedostohakemiston vasemmassa yläkulmassa. Voit luoda minkä tahansa seuraavista omaisuuserätyypeistä:

  • Vedä ja pudota: malli, joka on rakennettu lisäämällä moduuleja intuitiiviseen vedä ja pudota -käyttöliittymään.
  • HTML & HUBL: koodieditorissa HTML:n, CSS:n ja Javascriptin avulla luotu mukautettu malli.
  • Stylesheet: koodattu CSS-tiedosto, jota voidaan käyttää moduulien ja tiedostojen tyylittelyyn.
  • JavaScript: koodattu Javascript-tiedosto, jota voidaan soveltaa moduuleihin ja tiedostoihin.
  • Moduuli: mukautettu koodattu moduuli, joka voidaan lisätä malliin.

Asettelueditori

Ulkoasueditori on vedä ja pudota -käyttöliittymä sivujen ja sähköpostien rakenteelle ja oletussisällölle. Näet moduulien ja ryhmien nimet sekä kuhunkin komponenttiin sovellettavan runkoluokan. Voit muokata kutakin moduulia tai ryhmää napsauttamalla sitä muokattavaksi oikealla puolella olevassa tarkastajassa tai napsauttamalla komponenttia hiiren kakkospainikkeella päästäksesi tarkastajan toimintoihin.

Vedä ja pudota komponentteja ulkoasueditorissa säätääksesi niiden sijoittelua ja kokoa mallissa. Vasemmassa yläkulmassa onperuutus-japalautuspainikkeet, joiden avulla voit nopeasti palauttaa muutokset.Voit myös napsauttaamoduuliahiirenkakkospainikkeella,jolloin voit nopeasti ryhmitellä, kloonata tai vaihtaa moduulityyppiä. Napsauttamalla oikeassa yläkulmassa olevaaEsikatselu-painikettavoit esikatsella työtäsi ja testata asetteluasi eri näytön koossa.

Kaikki HubSpotin mallin ulkoasut ovat responsiivisia, eli ne mukautuvat automaattisesti eri näytön kokoihin. Tämä editori kokoaa raahaa ja pudota -moduulisi puhtaaksi HTML-merkinnäksi, josta tehdään responsiivinensisäänrakennetullaCSS:llä.

Lisätietojamallien luomisesta ja muokkaamisesta sekätyylien lisäämisestä malliin.

Tarkastaja

Tarkastajan avulla voit lisätä ja muokata mallin tai moduulin komponentteja. Se on kontekstisidonnainen ja riippuu suoritettavasta tehtävästä ja tiedostotyypistä. Esim:

  • Kun komponentti valitaan raahaa ja pudota -editorissa, tarkastaja näyttää kaikki kyseisen komponentin ominaisuudet ja vaihtoehdot.
  • Kun mitään komponenttia ei ole valittu raahaa & pudota -editorissa, tarkastaja näyttää itse mallin vaihtoehdot.
  • Kun muokkaat moduulia, voit muokata ja lisätä kenttiä tarkastajan avulla.

Malliin valitun moduulin tyypistä riippuen tarkastuksessa voi olla erilaisia vaihtoehtoja.

Vedä ja pudota -mallien+ Lisää-välilehdellävoit lisätä uusia komponentteja ulkoasuun.Tarkastajan Muokkaa-välilehteävoidaan käyttäämukautettujen CSS-luokkien määrittämiseen, oletussisällön muokkaamiseen tai koodattujen tiedostojen liittämiseen.

Tarkastaja sisältää yläreunassa olevan leivänmurun, jonka avulla voit nopeasti siirtyä sen omaisuuserän, moduulin, ryhmän ja mallin välillä, jonka parissa parhaillaan työskentelet.

Mukautetuille koodatuille HTML- ja HUBL-malleille ja -moduuleille voit lisätä tarkastajan avulla uusia kenttiä tai linkkejä koodattuihin tiedostoihin.Voit myös lisätä suodatintunnisteita, jotka ilmaisevat koodattujen mallien ja moduulien sisältötyypin ja toiminnon, jotta ne ovat helpommin löydettävissä hakukoneessa. Löydät myös pätkiä ja lisätietoja siitä, miten näitä mukautettuja koodattuja aineistoja voidaan käyttää malleissasi.

Koodieditori

HubSpotin koodieditori on tehokas IDE, jonka avulla voit koodataCSS-tiedostoja,Javascript-tiedostoja ja jopaHTML-malleja. Kun koodaat tai muokkaat tyylilomakkeita, voit esikatsella muutosten vaikutuksia eri näytön koossa. Koodieditori hyödyntää myös monia muita hyödyllisiä IDE-ominaisuuksia, kuten värikoodattuja luokkia, virhetarkistusta, syntaksin korostusta, automaattista tallennusta, automaattista tagien sulkemista, automaattista sisennystä ja paljon muuta.

Lisätietojakoodieditorin käytöstä.

design-manager-code-editor-example

Moduulieditori

Vaikka HubSpotin vedä ja pudota -malleissa on useita vakiomoduuleja, joista valita, suunnittelijat saattavat toisinaan tarvita räätälöidympää suunnitteluratkaisua.Moduulitovat uudelleenkäytettäviä räätälöityjä komponentteja, jotka koostuvat HTML- jaHubL-kentistä, CSS:stä ja Javascriptistä. Nämä moduulit voidaan lisätä malliin ja mukauttaa sivueditorissa ilman koodia.

Käytä tarkastajaa kenttien lisäämiseen, koodattujen tiedostojen liittämiseen tai tunnisteiden lisäämiseen varojen järjestämiseksi. Aivan kuten koodieditorissa, voit esikatsella työtäsi eri kokoisilla näytöillä työn edetessä. Voit myös määrittää moduulin kenttien oletussisällön, lukita oletussisällön tai tehdä tietyistä moduulin kentistä pakollisia.

Tiedostonhallinta

HubSpotin tiedostonhallintatallentaa kaikki sisällön luomiseen käyttämäsi aineistot. Tämän työkalun avulla voit ladata PDF-tiedostoja, kuvia, videoita, äänitiedostoja, fontteja ja paljon muuta. Voit käyttää luovia resurssejasi tai ladata nopeasti uusia tiedostoja poistumatta sovelluksesta.

file-manager

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.