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.
Design Manager yhdistää useita tärkeitä työkaluja yhteen tehokkaaseen sovellukseen:
Siirry suunnittelunhallintaan tutustuaksesi näihin työkaluihin.
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:
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 . Voit laajentaa hakemiston uudelleen napsauttamalla kansiokuvaketta .
Voit luoda uuden mallin, moduulin tai koodatun tiedoston napsauttamalla Tiedosto > Uusi tiedosto hakemiston vasemmassa yläkulmassa. Voit luoda minkä tahansa seuraavista omaisuuserätyypeistä:
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.
Tarkastajan avulla voit lisätä ja muokata mallin tai moduulin komponentteja. Se on kontekstisidonnainen ja riippuu suoritettavasta tehtävästä ja tiedostotyypistä. Esim:
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.
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ä.
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.
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.