Uporabite atribute po meri, da v e-pošti, straneh in obrazcih omogočite funkcije oblikovalnikov

Članek
06/04/2024

Oblikovalniki vsebine zagotavljajo grafični urejevalnik in urejevalnik kode HTML. HTML, ki ga ustvarijo, je združljiv z vsakim upodabljalnikom HTML, podpirajo pa tudi nekatere atribute po meri, ki podpirajo elemente oblikovanja »povleci in spusti« ter splošne nastavitve sloga, ki jih zagotavlja grafični urejevalnik. Privzete predloge sporočil in predloge strani, ki so na voljo z Dynamics 365 Customer Insights - Journeys uporabljajo te atribute po meri, da jih boste lažje prilagodili na določene načine. Atribute po meri lahko uporabite tudi pri oblikovanju lastnih predlog.

Nasvet

Microsoft ne zagotavlja podpore za HTML po meri v e-poštnih sporočilih.

Povzetek oznak in atributov

V naslednji tabeli je kratek pregled atributov po meri in oznak meta, ki os opisani v tej temi.

Atribut po meri	Opis
`<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">`	Ko je ta oznaka prisotna v `<head>` vašem dokumentu, bo zavihek Oblikovalnik omogočal funkcije povleci in spusti. Če ta oznaka ni prisotna, je na zavihku Oblikovalnik na voljo poenostavljen urejevalnik celotne strani. Več informacij: Prikaži orodjarno in omogoči urejanje s funkcijo povleci in spusti
`<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>">`	Ko je ta oznaka prisotna v `<head>` vašem dokumentu, bodo pisave, navedene na <font-list> (ločene s podpičjem) dodane v meni pisave v orodni vrstici za oblikovanje besedilnih elementov. Več informacij: Dodajte nove pisave v orodno vrstico besedilnih elementov
`<div data-container="true"> … </div>`	Označuje začetek in konec vsebnika, kamor uporabniki lahko povlečejo in spustijo elemente oblikovanja. Več informacij: Ustvarite vsebnik, kamor lahko uporabniki dodajo oblikovne elemente
`<div data-editorblocktype="<element-type>"> … </div>`	Označuje začetek in konec elementa oblikovanja. Vrednost atributa določa vrsto elementa (besedilo, slika, gumb itd.). Nekateri elementi oblikovanja tukaj podpirajo dodatne atribute. Več informacij: Prepoznavanje elementov oblikovanja in Zaklepanje elementov v pogledu oblikovalca
`<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>">`	Ta oznaka določa nastavitev sloga za celoten dokument, ki jo lahko uporabniki urejajo z zavihkom Oblikovalnik>Slogi . Več informacij: Dodajte nastavitve na zavihek Slogi
`/* @<tag-name> / … / @<tag-name> */`	Uporabite CSS komentare, kot so ti, da obkrožite CSS vrednost, ki jo nadzira nastavitev sloga, kjer je <tag-name> vrednost atributa name za metaoznako, ki je vzpostavila nastavitev. Več informacij: Dodajte CSS komentarje za implementacijo nastavitev sloga v glavi
`property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"`	Ta atribut postavite v katero koli oznako HTML, da postavite atribut z vrednostjo, ki jo nadzoruje nastavitev sloga, kjer je <attr> ime atributa, ki ga želite ustvariti, in <ime-oznake> je vrednost atributa `name` za metaoznako, ki je vzpostavila nastavitev. Več informacij: Dodajte atribute sklicevanja na lastnosti za implementacijo nastavitev sloga v telo

V preostalih razdelkih te teme je več informacij o uporabi vsake funkcije, ki so povzete v tabeli.

Pokaži komplet orodij in omogoči urejanje »povleci in spusti«

HTML, razvit v katerem koli orodju drugega proizvajalca, lahko prilepite neposredno na zavihek HTML načrtovalca, da začnete zelo hitro graditi dizajn. Ko pa to storite, bo zavihek Oblikovalnik prikazan kot en sam urejevalnik obogatenega besedila, ki nudi orodno vrstico za oblikovanje besedila in prikazuje vse slike, povezave in sloge vključeno v vaš HTML, vendar sicer ne ponuja Orodjarske, Lastnostiali Slogi ali katera koli funkcija povleci in spusti (ta poenostavljen pogled Oblikovalnika se včasih imenuje celostranski urejevalnik). Vendar pa lahko omogočite funkcijo povleci in spusti za kateri koli prilepljeni dizajn tako, da dodate naslednjo metaoznako v <head> razdelek vašega dokumenta:

<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">

Sledeča slika prikazuje isto zasnovo v načinu urejanja celotne strani (levo) in načinu »povleci in spusti« (desno). Edina razlika je, da zasnova na desni strani vključuje oznako meta, tako da je omogočen »povleci in spusti«, in prikazuje stransko ploščo.

Celostranski urejevalnik v primerjavi z urejevalnikom povleci in spusti.

opomba,

Ko uporabljate urejevalnik celotne strani, lahko besedilo še vedno izberete, uredite in oblikujete z orodno vrstico za oblikovanje besedila (prikazano), z dvoklikom na slike, povezave in druge elemente pa lahko s prikaznim pogovornim oknom nastavite njihove lastnosti. Orodna vrstica vključuje tudi gumb za pomoč pri urejanju za dodajanje dinamične vsebine, kot so vrednosti polj, izvlečene iz kontaktnega zapisa vsakega prejemnika.

Ustvari vsebnik, kamor lahko uporabniki dodajo elemente oblikovanja

Na zavihku Oblikovalnik uporabniki lahko urejajo le vsebino, ki je v elementu oblikovanja, in lahko samo povlečejo nove elemente oblikovanja v tiste dele dokumenta, ki so nastavljeni kot vsebniki podatkov. Zato lahko ustvarite predloge, pri katerih so nekatera področja (zunaj vsebnikov) zaklenjena za urejanje na zavihku Oblikovanje , medtem ko bodo druga področja (znotraj odklenjenih vsebnikov) sprejemala urejanja in vlečena vsebino.

Uporabite <div> oznake, ki vključujejo atribut data-container="true" za ustvarjanje vsebnikov podatkov, kot so:

<table aria-role="presentation">
    <tbody><tr>
        <td>
            LOCKED
        </td>
        <td>
            <div data-container="true">
                <!-- DRAG HERE -->
            </div>
        </td>
    </tr>
</tbody></table>

Vse oznake besedila ali HTML, ki so ugnezdene znotraj para data-container div-tag in niso del elementa oblikovanja, bodo ustvarile nepovlečen, ne -možnost urejanja, območje med dvema območjema, ki ju je mogoče povleči. Primer:

<div data-container="true">
    <!-- DRAG HERE --> <p> LOCKED </p> <!-- DRAG HERE -->
</div>

opomba,

Ko je omogočen urejevalnik celotne strani, so vse funkcije povleci in spusti onemogočene in lahko urejate vso vsebino na zavihku Oblikovalnik , vključno z vsebino zunaj data-container div oznake (ki nimajo učinka v celostranskem urejevalniku).

Zaklepanje vsebnika v pogledu oblikovalnika

Vsebnik lahko zaklenete, da bo vsa njegova vsebina na zavihku Oblikovalnik na voljo samo za branje. Če zaklenjeni vsebnik vsebuje elemente oblikovanja, bodo vsa vsebina in nastavitve za te elemente ostale zaklenjene, Lastnosti zavihek jim ne bo nikoli prikazan, tudi če jih izberete.

Funkcijo zaklepanja vsebnika lahko uporabite za zaklepanje vsebnika, potem ko zanj končate dodajanje in konfiguriranje komponent oblikovanja.

Če želite zakleniti vsebnik, dodajte atribut data-locked="hard" oznaki vsebnika, takole:

<div data-container="true" data-locked="hard">
    <!-- All elements and content here are locked, with no properties shown -->
</div>

opomba,

Lahko tudi zaklenete vsebino na ravni elementa oblikovanja. Če je vsebina zaklenjena na ravni vsebnika, potem ta nastavitev preglasi stanje zaklenjenosti/odklenjenosti vseh elementov oblikovanja znotraj tega vsebnika. Več informacij: Zaklepanje elementov v pogledu oblikovalca

Za dodatno uveljavitev zaklepanja vsebnika lahko omejite dostop do zavihka HTML , kar bo izbranim uporabnikom preprečilo dostop do kode (kjer bi drugače lahko izničili to nastavitev). Več informacij: Nadzirajte dostop do funkcij oblikovalca

Določanje elementov oblikovanja

Vsakič, ko dodate oblikovni element z zavihkom Oblikovalnik urejevalnik vstavi par <div> oznak za označevanje začetka in konca elementa, in ustvari kateri koli HTML, ki je potreben za prikaz elementa, kot je določeno v njegovih nastavitvah na zavihku Lastnosti .

Elementi oblikovanja so označeni z <div> oznakami, ki vključujejo atribut oblike data-editorblocktype="<element-type>", kjer vrednost tega atributa identificira vrsto elementa, ki je. Naslednja oznaka <div> na primer ustvari besedilni element:

<div data-editorblocktype="Text">
    ...
    <!-- Don't edit the element content here -->
    ...
</div>

Naslednja tabela navaja razpoložljive vrednosti za atribut data-editorblocktype .

Ime elementa oblikovanja	Vrsta elementa	`data-editorblocktype` vrednost atributa
Besedilni element	Pogosti element oblikovanja	Text
Slikovni element	Pogosti element oblikovanja	Image
Razdelilni element	Pogosti element oblikovanja	Razdelilna črta
Gumbni element	Pogosti element oblikovanja	Gumb
Element bloka vsebine	Pogosti element oblikovanja	Vsebina (Ta vrsta elementa oblikovanja vključuje tudi atribut `data-block-datatype="<block-type>"` , ki določa, za katero vrsto bloka vsebine gre, kjer ima <block-type> vrednost bodisi `text` ali `image`.)
Element strani za trženje	E-pošta	Stran za trženje
Element dogodka	E-pošta	Event
Elementa ankete	E-pošta	Survey
Element obrazca	Obrazec	FormBlock
Element polja	Vsebina obrazca	Polje-<ime-polja>, na primer: e-pošta polja
Element seznamov naročnin	Vsebina obrazca	SubscriptionListBlock
Element za posredovanje prijatelju	Vsebina obrazca	ForwardToFriendBlock
Elementa »Ne želim prejemati e-poštnih sporočil« in »Zapomni si me«	Vsebina obrazca	Potrditveno polje za polje (Vsak element ustvari potrditvena polja in se razlikuje po svojih notranjih nastavitvah.)
Element gumba za pošiljanje	Vsebina obrazca	SubmitButtonBlock
Element gumba za ponastavitev	Vsebina obrazca	ResetButtonBlock
Element Captcha	Vsebina obrazca	CaptchaBlock

Za več informacij o vsakem od teh elementov oblikovanja glejte Referenca elementov oblikovanja.

Pomembno

Ko delate na zavihku HTML , se izogibajte urejanju katere koli vsebine med oznakami <div> vaših oblikovalskih elementov, ker bodo rezultati zato je lahko nepredvidljivo in oblikovalec bo verjetno vseeno prepisal vaše popravke. Namesto tega uporabite zavihek Oblikovalnik za upravljanje vsebine in lastnosti elementa oblikovanja.

Zaklepanje elementov v pogledu oblikovalnika

Vsebino in lastnosti katerega koli elementa oblikovanja lahko zaklenete tako, da njegovi začetni oznaki dodate naslednji atribut <div> :

data-protected="true"

Primer:

<div data-editorblocktype="Divider" data-protected="true">
    …
        <!-- Don't edit the element content here -->
    …
</div>

Ko je element oblikovanja označen kot zaščiten, uporabniki, ki delajo na zavihku Oblikovalnik za stran ali e-pošto, ne bodo mogli urejati lastnosti ali vsebine elementa. Ta atribut je zmeraj vključen za element bloka vsebine, lahko pa ga dodate v katero koli vrsto elementa oblikovanja, da jo zaščitite. Vsak element oblikovanja, ki vključuje ta atribut, je prikazan kot senčen na zavihku HTML , kar pomeni, da je zaščiten, vendar ga lahko tam še vedno uredite, če vztrajate. Nastavite ta atribut na »false« (ali ga kar odstranite), da odstranite zaščito z elementa oblikovanja.

opomba,

Vsebino lahko zaklenete tudi na ravni vsebnika, kar preglasi stanje zaklenjenosti/odklenjenosti vseh elementov oblikovanja znotraj tega vsebnika. Več informacij: Zaklenite vsebnik v pogledu oblikovalca

Za dodatno uveljavitev zaklepanja vsebine lahko omejite dostop do zavihka HTML , kar bo izbranim uporabnikom preprečilo dostop do kode (kjer bi sicer lahko izničili to nastavitev). Več informacij: Nadzirajte dostop do funkcij oblikovalca

Uvoz zunanje ustvarjenega HTML-ja v oblikovalnik

Za ustvarjanje začetne postavitve HTML-ja in vsebine za e-poštno sporočilo, stran ali obrazec za trženje lahko uporabite katerokoli orodje. Ko je vaš HTML pripravljen, ga prilepite v ustrezen oblikovalec in nato dodajte poljubne Dynamics 365 Customer Insights - Journeys funkcije, ki jih potrebujete, kot je opisano v naslednjih pododdelkih.

Uvoz kode HTML

Če želite zunanje ustvarjen HTML vnesti v oblikovalnik, začnite s tem:

Ustvarite novo e-poštno trženje, stran ali obrazec v Dynamics 365 Customer Insights - Journeys.
Pojdite na zavihek Oblikovanje>HTML v oblikovalcu.
Počistite vso vsebino z zavihka HTML in jo prilepite v zunanje ustvarjen HTML.
Pojdite na Design>Designer zavihek oblikovalca in preglejte svoj dizajn.
Če delate z e-poštno trženje, uporabite pomoč za urejanje za umestitev vse zahtevane vsebine in povezav (vključno s povezavo do naročniškega centra in vašim fizičnim naslovom pošiljatelja).

Nasvet

Ker ste pravkar prilepili zunanji HTML, vaš dizajn verjetno ne vključuje kode, ki bi bila specifična za Dynamics 365 Customer Insights - Journeys, zato Oblikovalnik prikaže celostranski urejevalnik, ki ponuja funkcije za osnovno oblikovanje besedila, oblikovanje slik in (za e-pošto) pomožno urejanje za dodajanje dinamične vsebine. Za več informacij o delu s celostranskim urejevalnikom glejte Pokaži orodjarno in omogoči urejanje s funkcijo povleci in spusti. Če urejevalnik celotne strani ponuja vse funkcije, ki jih potrebujete, jih uporabite za natančnejšo nastavitev načrta in ga nato objavite kot običajno. Če raje uporabljate urejevalnik povleci in spusti za natančno nastavitev oblikovanja, glejte naslednji razdelek za informacije o tem, kako ga omogočiti.

Omogočanje urejevalnika »povleci in spusti« po uvozu

Če želite med delom v pogledu Designer omogočiti poln urejevalnik povleci in spusti in/ali dodati napredne elemente oblikovanja, lahko to enostavno storite tako, da nadaljnje urejanje uvožene kode HTML na naslednji način:

Vrnite se na Oblikovanje>HTML zavihek oblikovalca.
Omogočite urejevalnik povleci in spusti tako, da dodate zahtevano meta oznako v razdelek vašega dokumenta, kot je opisano v Pokaži orodjarno in omogoči urejanje povleci in spusti.
Med delom na zavihku Oblikovanje>HTML po potrebi naredite naslednje:
- V vsakem delu vašega dizajna, kjer želite, da lahko povlečete enega ali več elementov dizajna, dodajte kodo za ustvarjanje vsebnika podatkov, kot je opisano v Ustvarite vsebnik, kamor lahko uporabniki dodajajo elemente dizajna.
- Če želite oblikovne elemente raje postaviti neposredno v kodo brez uporabe povleci in spusti, lahko zahtevano kodo vnesete neposredno v Design>HTML zavihek. Elementi, ki jih dodate na ta način, ne bodo podpirali povleci in spusti, vendar bodo zagotovili nastavitve v Lastnosti podoknu Design Zavihek >Oblikovalnik . S to tehniko lahko postavite samo elemente besedila, slike, delilnika in gumbov (ustvarite vsebnike in uporabite povleci in spusti za druge vrste elementov oblikovanja). Po tem postopku si oglejte tabelo za strukture HTML, ki so potrebne za ustvarjanje vsakega od teh elementov; po potrebi kopirajte/prilepite to kodo neposredno iz tabele.
Zdaj lahko odprete zavihek Oblikovanje>Oblikovalnik in povlečete elemente oblikovanja v vsak vsebnik, ki ste ga nastavili, nato pa uporabite Podokno Lastnosti za konfiguracijo vsakega elementa oblikovanja, ki ste ga povlekli ali prilepili neposredno v kodo.

Vrsta elementa oblikovanja	Prilepite to kodo	Opombe
Text	`<div data-editorblocktype="Text"><p> Enter your text here</p></div>`	Vsebino HTML lahko vnesete med oznake `<p>` neposredno tukaj ali pa obiščete Oblikovalnik , da to storite z urejevalnikom obogatenega besedila.
Image	`<div data-editorblocktype="Image"><div align="Center" class="imageWrapper"><a href="example.com" title="example.com"><img alt="Some alt text" height="50" src="about:blank" width="50"></a></div></div>`	Vir slike in/ali povezavo slike najlažje spremenite tako, da odprete Oblikovalnik in uporabite ploščo Lastnosti. Neposredno v HTML-ju pa lahko uredite tudi te atribute: Nastavite povezavo in/ali naslov slike tako, da uredite atributa sklica hiperbesedila in/ali naslova za element `<a>`. Če želite odstraniti povezavo s slike, počistite vsebino atributov `href` in `title` elementa `<a>` (vendar obdržite atribute in narekovaje, kot je npr. `href=""`). Nastavite vir slike tako, da uredite atribut »src« za element `<img>`. Drugih kod ne urejajte.
Divider	<div data-editorblocktype="Divider"><div align="center" class="dividerWrapper"><table aria-role="presentation" style="padding: 0px; margin: 0px; width: 100%"><tbody><tr style="padding: 0px;"> <td style="margin:0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 5px; vertical-align:top;"> <p style="margin: 0px; padding: 0px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); line-height: 0px; width: 100%;"><span> </span></p></td></tr></tbody></table></div></div>	Teh kod ne urejajte neposredno v urejevalniku HTML. Namesto tega pojdite v Oblikovalnik in uporabite ploščo Lastnosti .
Button	`<div data-editorblocktype="Button"><!--[if mso]><div align="center"><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"`	Teh kod ne urejajte neposredno v urejevalniku HTML. Namesto tega pojdite v Oblikovalnik in uporabite ploščo Lastnosti .

Za več informacij o tem, kako so elementi oblikovanja prikazani v kodi, glejte Prepoznavanje elementov oblikovanja.

Besedilni elementi ponujajo pojavno orodno vrstico za oblikovanje, ki vključuje meni za uporabo pisave na izbranem besedilu.

Če želite dodati nove pisave v ta izbirnik pisav, dodajte oznako <meta> , ki uporablja naslednjo obliko <head> dokumenta:

<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>">

Kjer je <font-list> seznam imen pisav, ločenih s podpičjem.

Dodaj nastavitve v kartico Slogi

Ena priročna značilnost že pripravljenih predlog je, da zagotavljajo globalne slogovne nastavitve na zavihku Slogi , ki uporabnikom omogočajo hitro prilagoditev družine pisav, barvne palete in drugo Globalne nastavitve omogočeno za predlogo. Vsaka predloga vključuje samo tiste nastavitve slogov, ki so smiselne za to določeno zasnovo, prav tako pa lahko oblikujete predloge, ki za vas in vaše uporabnike zagotavljajo prave nastavitve sloga.

Zavihek > Slogi oblikovalca.

Če želite dodati nastavitev na zavihek Slogi , morate narediti naslednje:

Dodajte oznako <meta> <head> vašega dokumenta, da ustvarite nastavitev.
Nastavite sloge in/ali oznake HTML, ki uporabijo nastavitve, ustvarjene z oznako meta.

Naslednji podrazdelki pojasnjujejo, kako to narediti.

Dodajte oznako meta, da ustvarite nastavitev.

Zahtevana <meta> oznaka ima naslednjo obliko:

<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>">

Kjer je:

<ime> označuje metaoznako, na katero se morate sklicevati tudi v slogih in oznakah HTML, kjer bo uporabljena nastavitev.
<začetni-vrednost> je ustrezna privzeta vrednost za slog.
<data-type> opredeljuje vrsto vrednosti, ki jo bodo zagotovili uporabniki. Ta nastavitev vpliva na vrsto kontrolnika, ki je predstavljen na zavihku Slogi . Uporabiti morate eno od vrednosti, navedenih v naslednji tabeli.
<label> določi besedilo, ki bo prikazano na zavihku Slogi za nastavitev.

Vrednost podatkovnega tipa	Opis
color	Nastavi barvo z vrednostmi z oznako lojtre, kot na primer #000 ali #1a32bf. Ustvari kontrolnik izbirnika barv na zavihku Slogi .
font	Nastavi ime družine pisav. S seznamom imen pisav, ki so ločena z vejico in prednostno razvrščena, lahko ustvarite tudi sklade pisav. Ustvari preprosto vnosno polje na zavihku Slogi .
number	Nastavi številsko vrednost brez enote (uporabite besedilo, da omogočite določitev enot, kot je px ali em skupaj z vrednost). Ustvari vnosno polje z gumbi gor/dol, ki ga je mogoče uporabiti tudi za povečanje/zmanjšanje trenutne vrednosti na zavihku Slogi .
picture	Nastavi vir slike (kot URL). Ustvari preprosto vnosno polje na zavihku Slogi .
text	Nastavi vrednost, ki lahko vključuje besedilo in številke. To vrsto podatkov uporabite tudi za številske vrednosti, ki lahko vključujejo enoto (na primer px ali em). Ustvari preprosto vnosno polje na zavihku Slogi .

opomba,

Oznaka, prikazana na zavihku Slogi se lahko pojavi v oglatih oklepajih, na primer »[Moj slog]«. Oglati oklepaji označujejo, da prikazano besedilo nima na voljo prevoda. Če izberete vrednost, ki jo podpira katera koli pripravljena predloga (kot na primer »Barva 1«), potem prevod bo na voljo, tako da se oglati oklepaji ne bodo pojavili.

opomba,

Nastavitev sloga, vzpostavljena z oznako <meta> , kot je opisano tukaj, je prikazana na zavihku Slogi samo, če je ta nastavitev navedena tudi v vsaj enem dejanski slog ali oznako HTML, kot je opisano v naslednjih razdelkih.

Dodajanje komentarjev CSS za uporabo nastavitev sloga v glavi

Nastavitve na zavihku Slogi lahko uporabite za CSS sloge, vzpostavljene v <head> vašem dokumentu HTML, tako da obkrožite CSS vrednost z dvema CSS komentarjema, ki vsebujeta vrednost name atributa za ujemajočo se meta oznako xrm/designer/setting . Par komentarjev CSS ima takšno obliko:

/* @<tag-name> */ <value> /* @<tag-name> */

Kjer je:

<tag-name> je atribut imena za xrm/designer/setting meta oznako, ki vzpostavi ustrezne Sloge nastavitev zavihka.
<vrednost> je vrednost, ki bo zamenjana, ko uporabnik uredi ustrezno nastavitev zavihka Slogi .

Pomembno

Te pare CSS komentarjev lahko uporabite samo v slogih in razredih, definiranih znotraj <style> oznak v <head> razdelku. Poleg tega mora biti prisoten samo en niz <style> oznak z vsemi CSS nastavljenimi slogi.

Tukaj je primer, kjer lahko vidite xrm/designer/setting meta oznako, ki ustvari kontrolnik izbirnika barv, imenovan "Barva 1", na zavihku Slogi . A CSS style nato uporabi to nastavitev, da določi barvo besedila za <h1> elemente.

<head>
    <meta type="xrm/designer/setting" name="color1" value="#ff0000" datatype="color" label="Color 1">
    <style>
        h1 {color: /* @color1 */ #ff0000 /* @color1 */;}
    </style>
</head>

Dodaj atribute z referenco lastnosti za izvedbo nastavitev sloga v telesu

Nastavitve na zavihku Slogi lahko uporabite kot vrednosti atributa za katero koli oznako HTML v <body> vašega dokumenta, tako da dodate atribut naslednje oblike za vsako ustrezno oznako:

property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"

Kjer je:

<attr> je ime atributa, ki ga želite ustvariti.
<tag-name> je vrednost atributa name za metaoznako, ki je vzpostavila nastavitev.
Več atributov, če je potrebno, mora biti ločenih s podpičjem v enojnem atributu z referenco lastnosti.

Tukaj je primer, kjer si lahko ogledate xrm/designer/setting meta oznake, ki ustvarijo dve nastavitvi za nadzor glavne slike (pasice) v dokumentu, s kontrolniki, imenovanimi "Hero image" in "Hero image height" na Zavihek Slogi. Lastnost property-reference se nato uporabi v oznaki <img> za izvajanje teh nastavitev.

<head>
    <meta type="xrm/designer/setting" name="hero-image" value="picture.jpg" datatype="picture" label="Hero image">
    <meta type="xrm/designer/setting" name="hero-image-height" value="100px" datatype="text" label="Hero image height">
</head>
<body>
    <img property-reference="src:@hero-image;height:@hero-image-height;">
</body>

Torej bi se v tem primeru oznaka <img> razrešila v nekaj takega:

<img src="picture.jpg" height="100px">

Deli z drugimi prek

Uporabite atribute po meri, da v e-pošti, straneh in obrazcih omogočite funkcije oblikovalnikov

Povzetek oznak in atributov

Pokaži komplet orodij in omogoči urejanje »povleci in spusti«

Ustvari vsebnik, kamor lahko uporabniki dodajo elemente oblikovanja

Zaklepanje vsebnika v pogledu oblikovalnika

Določanje elementov oblikovanja

Zaklepanje elementov v pogledu oblikovalnika

Uvoz zunanje ustvarjenega HTML-ja v oblikovalnik

Uvoz kode HTML

Omogočanje urejevalnika »povleci in spusti« po uvozu

Dodaj nastavitve v kartico Slogi

Dodajte oznako meta, da ustvarite nastavitev.

Dodajanje komentarjev CSS za uporabo nastavitev sloga v glavi

Dodaj atribute z referenco lastnosti za izvedbo nastavitev sloga v telesu

Dodatni viri

Deli z drugimi prek

Uporabite atribute po meri, da v e-pošti, straneh in obrazcih omogočite funkcije oblikovalnikov

Povzetek oznak in atributov

Pokaži komplet orodij in omogoči urejanje »povleci in spusti«

Ustvari vsebnik, kamor lahko uporabniki dodajo elemente oblikovanja

Zaklepanje vsebnika v pogledu oblikovalnika

Določanje elementov oblikovanja

Zaklepanje elementov v pogledu oblikovalnika

Uvoz zunanje ustvarjenega HTML-ja v oblikovalnik

Uvoz kode HTML

Omogočanje urejevalnika »povleci in spusti« po uvozu

Dodajanje novih pisav v orodno vrstico za besedilne elemente

Dodaj nastavitve v kartico Slogi

Dodajte oznako meta, da ustvarite nastavitev.

Dodajanje komentarjev CSS za uporabo nastavitev sloga v glavi

Dodaj atribute z referenco lastnosti za izvedbo nastavitev sloga v telesu

Dodatni viri