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

Käytä tarkastajaa mallin muotoiluun

Päivitetty viimeksi: marraskuuta 2, 2021

Tämä koskee seuraavia:

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

Kun olet jäsentänyt mallin ja lisännyt oletussisällön, on aika miettiä sivuston esteettistä ulkoasua.

Tarkastaja sijaitsee design managerin oikealla puolella. Siellä voit muokata asettelun, moduulin tai ryhmän ominaisuuksia sekä lisätä moduuleja raahaa ja pudota -asetteluun. Kun kyseessä on mallin muotoilu, voit käyttää tarkastajaa seuraaviin tarkoituksiin:

  • liittää malliin tyylitauluja tai JavaScript-tiedostoja.
  • lisätä malliin Head- tai Footer HTML-merkintää.
  • lisätä mukautettuja CSS-luokkia ja rivin sisäistä muotoilua tiettyyn moduuliin tai ryhmään.

Mukauttaa mallin pään ja rungon asetuksia.

Kun avaat mallisi suunnittelunhallinnassa, näet ulkoasun tarkastajan oikealla puolella, jos sinulla ei ole valittuna mitään moduuleja. Asettelutarkastimessa tehdyt muokkaukset vaikuttavat koko malliin. Täällä voit muokata mallin pään ja rungon asetuksia.

Liitä tyylilomakkeet ja JavaScript-tiedostot

ValitseLinkitetyt tyylitiedostot-jaLinkitetyt JavaScript-tiedostot-vaihtoehdoissaLisääja valitse malliin liitettävä tyylitiedosto tai JavaScript-tiedosto. Voit myös valita sisällyttää, sulkea pois tai käyttää toimialueen oletustyyliarkkejaDomain stylesheets (toimialueen tyyliarkit) -pudotusvalikosta.

Voitlukea lisää siitä, mitenluoda ja muokata CSS-tiedostoja sivustosi tyylittelyä varten, täällä.

Lisää otsikon tai alatunnisteen HTML-merkintä

Additional <head> markup-jaAdditional markup before </body>-kenttiin voit lisätä Head- tai Footer HTML-merkintää, jota sovelletaan malliin.

Lisää luokka tai rivin sisäinen muotoilu mallin runkoon

Body classes-kentässä voit lisätä mallin runkoluokka-attribuutin. Voit myös lisätä mallin runko-HTML:ään rivin sisäistä muotoiluaInline body styling-kentässä.

Mukauta moduulin tai ryhmän muotoiluvaihtoehtoja.

Kun valitset tietyn moduulin mallissa, näkyviin tulee moduulin tarkastaja. Kun valitset mallin moduuliryhmän, ryhmätarkastaja tulee näkyviin. Tarkastajan avulla voit mukauttaa moduulin tai ryhmän muotoiluvaihtoehtoja.

Näytettävät muotoiluvaihtoehdot vaihtelevat sen mukaan, muokkaatko sähköpostimallimoduulia, sivumoduulia vai moduuliryhmää. Alla olevassa esimerkissä näytetään muotoiluvaihtoehdot, jotka ovat käytettävissä sivumallin rikkaan tekstin moduulille.

Lisää CSS-luokka

HTML-luokka-attribuutin avulla voit määrittää malleissasi oleville moduuleille luokkia, jotta niitä voidaan muotoilla CSS:n avulla. Vaikka mallineessasi on jo monia oletusluokkia, mukautetut luokat antavat suunnittelijoille enemmän valtaa mallineen ulkoasun hallintaan, mutta säilyttävät silti raahaa ja pudota -asettelueditorin joustavuuden.

Yllä olevassa esimerkissä "bio" on lisättyCSS-luokka-kenttäänrikatekstimoduulissa. Tämä lisää HTML-attribuutinclass="bio" moduulin container-div-tunnisteeseen (HTML-tunniste, joka määrittää sivun alueen tai osion).Bio-luokkatai siihen kuuluvat elementit voidaan nyt kohdistaa mallin tyylitaulukkoon.

Huomaa:tätä vaihtoehtoaei suositellakäytettäväksi sähköpostimalleissa, koskajotkin sähköpostiohjelmat eivät tue tyylitunnisteita.

Mallin tyylitaulussavoit kohdistaa kontti-divin tyylittelyn valitsemalla mukautetun luokan ja soveltamalla erilaisia CSS-ominaisuuksia. Jos haluat esimerkiksi lisätä taustavärin moduuliin, jossa onbio-luokka, voit kirjoittaa CSS:n alla olevan esimerkin mukaisesti:

.bio {
background: #CCCCCCCC;
}

Voit myös haluta kohdistaa elementtejä moduulinsisällä, ei vain kontti-diviä. Voit tehdä sen käyttämällä sisäkkäisiä tai suoraan alenevia valitsijoita. Jos haluat esimerkiksi kohdistaabio-luokankaikkiin moduulin sisällä oleviin kappaleisiin, voit kirjoittaa alla olevan esimerkin kaltaisen sisäkkäisen CSS-valitsimen:


.bio p {
color: #000000;
}

Lisää riviin muotoilu

Inline-styling on CSS, joka on kirjoitettu HTML-tunnisteiden sisään. CSS-ominaisuuksien ja -arvojen lisääminen moduulin tai ryhmänInline styling-kenttään soveltaa koodiasi moduulin tai ryhmän kontti-diviin.

Yllä olevassa esimerkissä marginaali ja väri käytetään moduulin välyksen ja värin säätämiseen. Tämä lisää HTML-attribuutinstyle="margin-top:30px; color: #00349e;"moduulin kontti-div-tunnisteeseen.

Vaikka tämä vaihtoehto voi olla hyödyllinen tietyn sivumallin nopeissa korjauksissa, se ei ole yhtä joustava kuinCSS-luokkakentän käyttö, koska koodimuutokset on tehtävä yksittäisten moduulien sisällä eikä globaalissa mallin tyylitaulukossa.

Sähköpostiohjelmat ovat rajoitetumpiaHTML:n ja CSS:n renderöintiominaisuudetkuin nykyaikaisilla verkkoselaimilla. Näin ollen inline-muotoilu on paras tapa muotoilla sähköpostit siten, että niitä tuetaan kaikissa sähköpostiohjelmissa. Sähköpostimallien moduuleissa on lisää käyttäjäystävällisiä vaihtoehtoja rivin sisäisen muotoilun lisäämiseksi, jotka näkyvät alla.

Lisää HTML-kääre

Vaikka raahaa ja pudota -asettelueditori ei tarjoa täydellistä pääsyä mallin HTML-merkintöihin, voit lisätä tiettyjen moduulien ympärille ylimääräistä kietovaa HTML:ää. Tämä vaihtoehto on tarkoitettu suunnittelijoille, jotka tarvitsevat lisähallintaa mallin HTML:ään, mutta haluavat silti säilyttää raahaa ja pudota -asettelueditorin käytön joustavuuden raa'an HTML-mallin päällä.

Voit ottaa tämän ominaisuuden käyttöön lisäämällä HTML-merkkauksen jaHTML HubL -tunnuksen (jossa moduulin koodi renderöidään)Wrapping HTML-kenttään. Aiemmassa esimerkissä moduulin kietoo HTML5<aside>-tagi.

Lisää CSS-tunnus (vain moduuliryhmät)

HTML ID -attribuutti on käytettävissä lisävarusteena missä tahansa moduuliryhmässä. ID:t muistuttavat luokkia siinä mielessä, että niiden avulla voit määrittää mallisi alueita, joihin tyylitaulukkosi kohdistuu. Toisin kuin luokkien, tunnusten on kuitenkin oltavayksilöllisiä(ne esiintyvät vain kerran mallinetta kohti), ja niillä on enemmän painoarvoa kuin luokillaCSS-kohtaisuuden kannalta.

Alla olevassa esimerkissä sivun moduuliryhmälle annetaanCSS-tunnuskentässätunnus "sidebar". Tämä lisää HTML-attribuutinid="sidebar" moduuliryhmän kontti-div-tunnisteeseen.Sivupalkintunnus tai tämän tunnuksen sisällä olevat elementit voidaan nyt kohdistaa mallin tyylitaulukkoon.

Jos haluat esimerkiksi lisätä punaisen reunuksen ryhmään, jolla onsidebar-tunnus, voit kirjoittaa CSS:n alla olevan esimerkin mukaisesti:

#sidebar {
border: border: 1px solid red;
}