Pikakierros suunnittelupäällikköön

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 tutustut kaikkiin suunnittelunhallinnan ominaisuuksiin. Jos etsit konkreettisia koodiesimerkkejä ja viitedokumentaatiota, tutustu HubSpotin kehittäjien dokumentaatioon.

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 Sisältö > Suunnittelun hallinta.

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.

Kaikilla Marketing Hub Professional- ja Enterprise- sekä Content Hub Professional- ja Enterprise -tileillä on oletusarvoisesti @hubspot-kansio suunnittelunhallinnassa. Tämä kansio sisältää kaikki teemat ja oletusmoduulit, mukaan lukien vedä ja pudota -sähköpostimoduulit. Nämä teemat ja moduulit ovat vain lukuoikeuksilla, mutta ne voidaan kloonata, jos haluat muokata niitä. Lisätietoja teemojen ja oletusmoduulien mukauttamisesta.

Napsauta File (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.

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 sitten Poista kaikki.

Toiminnot-valikko on aktiivinen vain, jos tiedosto tai kansio on parhaillaan valittuna, ja siinä on kyseisen tyyppisen omaisuuserän kontekstuaalisia vaihtoehtoja. Voit myös napsauttaa hiiren kakkospainikkeella suoraan 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.
• Kopioi portaaliin : 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 käyttäen.
• Näytä versiohistoria: tarkastele tallennettujen versioiden historiaa.
• Kopioi pätkä: Käytä tätä kopioidaksesi mukautetun moduulin koodinpätkän nopeasti leikepöydälle. Tämä vaihtoehto tulee näkyviin vain, kun napsautat moduulia hiiren oikealla pain ikkeella.
• 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.

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 olevaa alaspäin osoittavaa nuolta.

Jos haluat saada enemmän tilaa työskentelyyn ulkoasueditorissa, voit sulkea hakemiston napsauttamalla kokoontaitokuvaketta first . Voit laajentaa hakemiston uudelleen napsauttamalla kansiokuvaketta folder.

Uusien mallien ja tiedostojen luominen

Voit luoda uuden mallin, moduulin tai koodatun tiedoston napsauttamalla Tiedosto > Uusi tiedosto hakemiston 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ä muokkausta varten oikealla puolella olevassa tarkastajassa tai napsauttamalla komponenttia hiiren kakkospainikkeella, jolloin saat tarkastajan toiminnot käyttöön.

Vedä ja pudota komponentteja ulkoasueditorissa säätääksesi niiden sijoittelua ja kokoa mallissa. Vasemmassa yläkulmassa on peruutus- ja palautuspainikkeet, joiden avulla voit nopeasti palauttaa muutokset. Voit myös napsauttaa moduulia hiiren kakkospainikkeella, jolloin voit nopeasti ryhmitellä, kloonata tai vaihtaa moduulityyppiä, tai käyttää näppäimistön pikanäppäimiä samojen toimintojen suorittamiseen.Napsauttamalla oikeassa yläkulmassa olevaa Esikatselu-painiketta voit 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 responsiivinen sisäänrakennetulla CSS:llä.

Lisätietoja mallien 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 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 koodata CSS-tiedostoja, Javascript-tiedostoja ja jopa HTML-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ätietoja koodieditorin käytöstä.

Huomaa: oletusarvoisesti HubSpot pienentää automaattisesti suunnittelunhallintaan sisältyvän JavaScriptin ja CSS:n poistaakseen tarpeettomat välilyönnit, rivinvaihdot ja kommentit. Tämä koskee myös CLI:n kautta design manageriin ladattuja JavaScript- ja CSS-ohjelmia. Tämä tarkoittaa sitä, että sinun ei pidä lisätä jo pienennettyä koodia suoraan design manageriin.

Lue lisää JavaScriptin ja CSS:n pienentämisestä.

Moduulieditori

Vaikka HubSpotin vedä ja pudota -malleissa on useita vakiomoduuleja, joista valita, suunnittelijat saattavat toisinaan tarvita räätälöidympää suunnitteluratkaisua. Moduulit ovat uudelleenkäytettäviä räätälöityjä komponentteja, jotka koostuvat HTML- ja HubL-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 tiedostonhallinta tallentaa 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.