Aracılığıyla paylaş

E-postalarda, sayfalarda ve formlarda tasarımcı özelliklerini etkinleştirmek için özel öznitelikleri kullanma

  • Makale

İçerik tasarımcıları hem bir grafik düzenleyicisi hem de bir HTML kod düzenleyicisi sağlar. Oluşturdukları HTML tüm HTML oluşturucularla uyumludur ancak grafik düzenleyicisinin sağladığı tasarım öğelerini sürükle ve bırak özelliği ile genel stil ayarlarını destekleyen birkaç özel özniteliği de destekler. Dynamics 365 Customer Insights - Journeys ile sağlanan varsayılan ileti şablonları ve sayfa şablonları belirli şekillerde özelleştirmenizi kolaylaştırmak için bu özel özniteliklerden yararlanır. Ayrıca kendi şablonlarınızı tasarlarken de bu özel özniteliklerden yararlanabilirsiniz.

İpucu

Microsoft e-postalarda özel HTML için destek sağlamaz.

Etiket ve öznitelik özeti

Aşağıdaki tabloda, bu konuda açıklanan özel özniteliklere ve meta etiketlere hızlı bir başvuru sunulmaktadır.

Özel öznitelik Açıklama
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> Belgenizin <head> bölümünde bu etiket olduğunda Tasarımcı sekmesi sürükle ve bırak özellikleri sunar. Bu etiket yoksa Tasarımcı sekmesi basitleştirilmiş, tam sayfa düzenleyicisi sunar. Daha fazla bilgi: Araç kutusunu gösterme ve sürükle ve bırak yoluyla düzenlemeyi etkinleştirme
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> Bu etiket, belgenizin <head> bölümünde varsa <yazı tipi listesi> (noktalı virgülle ayrılmış) içinde listelenen yazı tipleri, metin öğelerinin biçimlendirme araç çubuğundaki yazı tipi menüsüne eklenir. Daha fazla bilgi: Metin öğesi araç çubuğuna yeni yazı tipleri ekleme
<div data-container="true"> … </div> Kullanıcıların tasarım öğelerini sürükleyip bırakabileceği bir kapsayıcının başlangıcını ve bitişini işaretler. Daha fazla bilgi: Kullanıcıların tasarım öğeleri ekleyebileceği bir kapsayıcı oluşturma
<div data-editorblocktype="<element-type>"> … </div> Tasarım öğesinin başlangıcını ve bitişini işaretler. Özniteliğin değeri, öğe türünü (metin, görüntü, düğme vs.) belirler. Bazı tasarım öğeleri burada ek öznitelikleri destekler. Daha fazla bilgi: Tasarım öğelerini tanımlama ve Tasarımcı görünümünde öğeleri kilitleme
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> Bu etiket, kullanıcıların Tasarımcı>Stiller sekmesini kullanarak düzenleyebilecekleri belge genelinde bir stil ayarı tanımlar. Daha fazla bilgi: Stiller sekmesine ayar ekleme
/* @<tag-name> */ … /* @<tag-name> */ Stil ayarı tarafından denetlenecek bir CSS değerini çevrelemek için bunlara benzer CSS yorumları kullanın. Burada <tag-name>, ayarı belirleyen meta etiket için name öznitelik değeridir. Daha fazla bilgi: CSSStil ayarlarını başlığa uygulamak için CSS yorumları ekleme
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" Stil ayarı tarafından denetlenen bir değere sahip bir öznitelik yerleştirmek için bu özniteliği herhangi bir HTML etiketine ekleyin. Burada <attr>, oluşturulacak özniteliğin adı ve <tag-name> ayarı belirleyen meta etiketin name öznitelik adı değeridir. Daha fazla bilgi: Stil ayarlarını gövdeye uygulamak için özellik-başvuru öznitelikleri ekleme

Bu konunun geri kalan bölümlerinde, tabloda özetlenen tüm özelliklerin nasıl kullanılacağı hakkında daha fazla bilgi verilmektedir.

Araç kutusunu gösterme ve sürükle ve bırak yoluyla düzenlemeyi etkinleştirme

Bir tasarım oluşturmaya hızlı bir şekilde başlamak için üçüncü taraflara ait bir araçta geliştirilen HTML'yi doğrudan tasarımcının HTML sekmesine yapıştırabilirsiniz. Ancak bunu yaptığınızda Tasarımcı sekmesi bir metin biçimlendirme araç çubuğu sunan tek bir zengin metin düzenleyicisi olarak görüntülenir ve HTML kodunuzda yer alan tüm görüntüleri, bağlantıları ve stilleri gösterir. Araç kutusu, Özellikler veya Stiller sekmelerini veya sürükle ve bırak işlevselliklerini içermez (bu basitleştirilmiş Tasarımcı görünümü bazen full-page editor olarak adlandırılır). Ancak yapıştırılan tasarımlar için sürükle ve bırak işlevselliğini aşağıdaki meta etiketi belgenizin <head> bölümüne ekleyerek etkinleştirebilirsiniz:

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

Aşağıdaki resimde aynı tasarım, tam sayfa düzenleme modunda (sol) ve sürükle ve bırak modunda (sağ) gösterilmektedir. Tek fark sağdaki tasarımın meta etiket içermesidir. Bu durumda sürükle ve bırak özelliği etkindir ve yan panel gösterilir.

Tam sayfa düzenleyici ile sürükle ve bırak düzenleyicisi.

Not

Tam sayfa düzenleyicisi kullanırken, metin biçimlendirme araç çubuğunu (gösterilen) kullanarak metni seçebilir, düzenleyebilir ve metne stil verebilirsiniz. Ayrıca görüntülere, bağlantılara ve diğer öğelere çift tıklayarak bir açılır iletişim kutusu kullanarak özelliklerini ayarlayabilirsiniz. Araç çubuğunda, her alıcının ilgili kişi kaydından alınan alan değerleri gibi dinamik içerikler eklemek için Yardımcı düzenleme düğmesi Kişiselleştirme düğmesi. de bulunur.

Kullanıcıların tasarım öğeleri ekleyebileceği bir kapsayıcı oluşturma

Tasarımcı sekmesinde, kullanıcılar yalnızca bir tasarım öğesinin içinde bulunan içeriği düzenleyebilir ve yalnızca yeni tasarım öğelerini belgenin veri kapsayıcıları olarak ayarlanmış parçalarına sürükleyebilirler. Böylece bazı alanların (kapsayıcılar dışında) Tasarım sekmesinde düzenlemeye karşı kilitlendiği ancak diğer alanların (kilitli olmayan kapsayıcılar içinde) düzenlemeleri ve sürüklenen içeriği kabul ettiği şablonlar oluşturabilirsiniz.

Veri kapsayıcılar oluşturmak için data-container="true" özniteliğini içeren <div> etiketlerini kullanın; örneğin:

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

data-container div-etiket çiftinin içine alınan ve tasarım öğesinin parçası olmayan metin veya HTML etiketleri, iki sürüklenebilir alan arasında sürüklenemez, düzenlenemez bir alan oluşturur. Örneğin: 

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

Not

Tam sayfa düzenleyicisi etkinleştirildiğinde tüm sürükle ve bırak özellikleri devre dışı bırakılır. Tam sayfa düzenleyicisinde hiçbir etkisi olmayan data-container div etiketleri dışındaki içerik dahil olmak üzere Tasarımcı sekmesindeki tüm içeriği düzenleyebilirsiniz.

Tasarımcı görünümünde bir kapsayıcıyı kilitleme

Bir kapsayıcıyı Tasarımcı sekmesinde tüm içeriğini salt okunur yapmak için kilitleyebilirsiniz. Kilitli bir kapsayıcı tasarım öğeleri içeriyorsa bu öğelere ilişkin tüm içerik ve ayarlar kilitli kalır. Özellikler sekmesi bu öğeleri seçseniz bile bu öğeler için gösterilmez.

Kapsayıcı kilitleme özelliğini bir kapsayıcıya tasarım bileşenlerini ekleme ve yapılandırma işlemlerini tamamladıktan sonra onu kilitlemek için de kullanabilirsiniz.

Kapsayıcıyı kilitlemek için data-locked="hard" özniteliğini kapsayıcı etiketine aşağıdaki gibi ekleyin:

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

Not

Ayrıca içeriği tasarım öğesi düzeyinde de kilitleyebilirsiniz. İçerik kapsayıcı düzeyinde kilitlendiyse bu ayar bu kapsayıcı içindeki tüm tasarım öğelerinin kilitli/kilidi açıldı durumunu geçersiz kılar. Daha fazla bilgi: Tasarım görünümü kilit öğeleri

Kapsayıcıyı kilitlemeye daha fazla zorlamak için HTML sekmesine erişimi sınırlandırabilirsiniz. Bu, seçili kullanıcıların (bu ayarı devre dışı bırakabilecekleri) koda erişimini önler. Daha fazla bilgi: Bu tasarımcı özelliklerine erişimi denetlemek için:

Tasarım öğelerini tanımlama

Tasarımcı sekmesini kullanarak tasarım öğesi eklediğinizde düzenleyici, öğenin başlangıcını ve bitişini işaretlemek için bir <div> etiket çifti ekler ve öğeyi Özellikler sekmesindeki ayarlarıyla belirtildiği şekilde görüntülemek için gereken HTML kodunu oluşturur.

Tasarım öğeleri data-editorblocktype="<element-type>" biçiminde bir öznitelik içeren <div> etiketleriyle işaretlenir. Bu özniteliğin değeri, öğe türünü belirtir. Örneğin, aşağıdaki <div> etiketi bir metin öğesi oluşturur:

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

Aşağıdaki tabloda data-editorblocktype özniteliğinin kullanılabilir değerleri listelenmektedir.

Tasarım öğesi adı Öğe türü data-editorblocktype özniteliği değeri
Metin öğesi Ortak tasarım öğesi Text
Görüntü öğesi Ortak tasarım öğesi Image
Ayırıcı öğe Ortak tasarım öğesi Ayırıcı
Düğme öğesi Ortak tasarım öğesi Düğme
İçerik bloğu öğesi Ortak tasarım öğesi İçerik
(Bu tasarım öğesi türü bir data-block-datatype="<block-type>" özniteliği de içerir. Bu, <blok türünün> text veya image değerine sahip olduğu içerik bloğu türünü tanımlar.)
Pazarlama sayfası öğesi E-posta Pazarlama Sayfası
Etkinlik öğesi E-posta Event
Anket öğesi E-posta Survey
Form öğesi Form FormBlock
Alan öğesi Form içeriği Field<field-name> alanı, örneğin: Field-email
Abonelik listesi öğesi Form içeriği SubscriptionListBlock
Bir arkadaşa ilet öğesi Gönderen içeriği ForwardToFriendBlock
E-posta göndermeyin öğesi ve Beni anımsa öğesi Form içeriği Alan onay kutusu
(Bu öğelerin her biri onay kutuları oluşturur ve bunun dışında dahili ayarları ile ayrılır.)
Gönder düğmesi öğesi Form içeriği SubmitButtonBlock
Sıfırla düğmesi öğesi Form içeriği ResetButtonBlock
Captcha öğesi Form içeriği CaptchaBlock

Bu tasarım öğelerinin her biri hakkında daha fazla bilgi için bkz. Tasarım öğeleri başvurusu.

Önemli

HTML sekmesinde çalışırken, tasarım öğelerinizin <div> etiketleri arasındaki içeriği düzenlemekten kaçınmalısınız. Bu içeriğin düzenlenmesi öngörülemez sonuçlara yol açabilir ve tasarımcının yaptığınız düzenlemelerin üzerine yazması da olasıdır. Bunun yerine tasarım öğesi içeriğinizi ve özellikleri yönetmek için Tasarımcı sekmesini kullanın.

Tasarımcı görünümünde öğeleri kilitleme

Tüm tasarım öğelerinin içeriğini ve özelliklerini açılış <div> etiketine aşağıdaki özniteliği ekleyerek kilitleyebilirsiniz:

data-protected="true"

Örneğin:

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

Tasarım öğesi korumalı olarak işaretlendiğinde bir sayfanın veya e-postanın Tasarımcı sekmesinde çalışan kullanıcılar öğenin özelliklerini veya içeriğini düzenleyemezler. Bu öznitelik her zaman içerik bloğu öğesine dahil edilir ancak korumak için herhangi bir tasarım öğesi türüne ekleyebilirsiniz. Bu özniteliği içeren tüm tasarım öğeleri korumalı olduklarını göstermek için HTML sekmesinde gölgeli olarak gösterilir ancak yine de isterseniz öğeyi düzenleyebilirsiniz. Bir tasarım öğesinin korumasını kaldırmak için bu özniteliği "yanlış" olarak ayarlayın (veya kaldırın).

Not

İçeriği kapsayıcı düzeyinde de kilitleyebilirsiniz. Bu durumda bu kapsayıcı içindeki tüm tasarım öğelerinin kilitli/kilidi açıldı durumu geçersiz kılınır. Daha fazla bilgi: Tasarımcı görünümünde bir kapsayıcıyı kilitleme

İçeriği kilitlemeye daha fazla zorlamak için HTML sekmesine erişimi sınırlandırabilirsiniz. Bu, seçili kullanıcıların (bu ayarı devre dışı bırakabilecekleri) koda erişimini önler. Daha fazla bilgi: Bu tasarımcı özelliklerine erişimi denetlemek için:

Harici olarak oluşturulan HTML'yi tasarımcıda içeri aktarma

Pazarlama e-postası, sayfası veya formu için ilk HTML düzeni ve içeriğini oluşturmak üzere dilediğiniz aracı kullanabilirsiniz. HTML'niz hazır olduğunda bunu yalnızca ilgili tasarımcıya yapıştırın ve ardından gereksinim duyduğunuz Dynamics 365 Customer Insights - Journeys özelliklerini aşağıdaki alt bölümlerde açıklandığı şekilde ekleyin.

HTML kodunuzu içe aktarma

Harici olarak oluşturulan HTML'yi tasarımcıya getirmek için aşağıdakileri yaparak başlayın:

  1. Dynamics 365 Customer Insights - Journeys'de yeni bir pazarlama e-postası, sayfası veya formu oluşturun.
  2. Tasarımcının Tasarım>HTML sekmesine gidin.
  3. HTML sekmesindeki tüm içeriği temizleyin ve harici olarak oluşturduğunuz HTML'yi yapıştırın.
  4. Tasarımcının Tasarım>Tasarımcı sekmesine gidin ve tasarımınızı inceleyin.
  5. Pazarlama e-postası ile çalışıyorsanız (bir abonelik merkezi bağlantısı ve fiziksel gönderen adresiniz dahil olmak üzere) gerekli tüm içeriği ve bağlantıları yerleştirme amacıyla yardımcı düzenleme kullandığınızdan emin olun.

Bahşiş

Harici HTML'yi henüz yapıştırdığınızdan tasarımınız muhtemelen Dynamics 365 Customer Insights - Journeys'e özel bir kod içermez. Bu nedenle Tasarımcı, dinamik içerik eklemek üzere temel metin biçimlendirmesi, görüntü biçimlendirmesi ve (e-postalar için) yardımcı düzenleme için özellikler sağlayan tam sayfa düzenleyicisini gösterir. Tam sayfa düzenleyicisi ile çalışma hakkında daha fazla bilgi için bkz. Araç kutusunu gösterme ve sürükle ve bırak yoluyla düzenlemeyi etkinleştirme. Tam sayfa düzenleyicisi gereksinim duyduğunuz tüm işlevselliği sağlarsa tasarımınızın ince ayarını yapmak için bunu kullanın ve ardından her zaman olduğu gibi yayımlayın. Tasarımınızın ince ayarını yapmak üzere sürükle ve bırak düzenleyicisini kullanmayı tercih ederseniz bunu nasıl etkinleştireceğiniz hakkında bilgi için sonraki bölüme bakın.

İçe aktardıktan sonra sürükle ve bırak düzenleyicisini etkinleştirme

Tasarımcı görünümünde çalışırken tam özellikli sürükle ve bırak düzenleyicisini etkinleştirmek ve/veya gelişmiş tasarım öğeleri eklemek isterseniz içe aktarılan HTML kodunu aşağıdaki gibi düzenleyerek bunu kolayca yapabilirsiniz:

  1. Tasarımcının Tasarım>HTML sekmesine geri dönün.

  2. Gerekli meta etiketi Araç kutusunu göster ve sürükle ve bırak düzenlemeyi etkinleştir bölümünde açıklandığı üzere belgenizin kısmına ekleyerek sürükle ve bırak düzenleyiciyi etkinleştirin.

  3. Tasarım>HTML sekmesinde çalışırken gerektiği gibi aşağıdakileri yapın:

    • Tasarımınızın bir veya birden fazla tasarım öğesi sürüklemek istediğiniz her bölümüne Kullanıcıların tasarım öğeleri ekleyebileceği bir kapsayıcı oluşturma konusunda açıklandığı gibi bir veri kapsayıcısı oluşturmak için kod ekleyin.
    • Sürükle ve bırak kullanmadan kodunuza doğrudan tasarım öğeleri konumlandırmayı tercih ederseniz gerekli kodu doğrudan Tasarım>HTML sekmesine girebilirsiniz. Bu yolla eklediğiniz öğeler sürükle ve bırak özelliğini desteklemez ancak Tasarım>Tasarımcı sekmesinin Özellikler panelinde ayarlar sağlarlar. Bu tekniği kullanarak yalnızca metin, görüntü, ayırıcı ve düğme öğeleri yerleştirebilirsiniz (diğer tasarım öğesi türleri için kapsayıcılar oluşturun ve sürükle ve bırak kullanın). Bu öğelerin her birini oluşturmak üzere gerekli HTML yapıları için bu yordamdan sonraki tabloya bakın; bu kodu gerektiği gibi doğrudan tablodan kopyalayın/yapıştırın.

  4. Artık Tasarım>Tasarımcı sekmesine gidip ayarladığınız kapsayıcıların her birine tasarım öğelerini sürükleyip bırakabilir ve ardından doğrudan kodunuza sürüklediğiniz veya yapıştırdığınız her tasarım öğesini yapılandırmak için Özellikler panelini kullanabilirsiniz.

Tasarım öğesi türü Bu kodu yapıştırın Notlar                                                     
Text <div data-editorblocktype="Text"><p> Enter your text here</p></div> HTML içeriğini <p> etiketleri arasına doğrudan buradan girebilir veya bunu yapmak üzere zengin metin düzenleyicisini kullanmak için Tasarımcı'ya gidebilirsiniz.
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> Görüntü kaynağınızı ve/veya görüntü bağlantınızı değiştirmenin en kolay yolu Tasarımcı'ya gitmek ve Özellikler panelini kullanmaktır. Ancak aşağıdaki öznitelikleri doğrudan HTML olarak da düzenleyebilirsiniz:
  • <a> öğesinin href ve/veya başlık özniteliklerini düzenleyerek görüntü bağlantısını ve/veya başlığını ayarlayın.
  • Bağlantıyı görüntüden kaldırmak için <a> öğesinin href ve title özniteliklerinin içeriğini temizleyin (ancak öznitelikleri ve href="" gibi tırnak işaretlerini tutun).
  • <img> öğesinin src özniteliğini düzenleyerek görüntü kaynağını ayarlayın.
Diğer hiçbir kodu düzenlemeyin.
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>&nbsp;</span></p></td></tr></tbody></table></div></div> Bu kodun hiçbir kısmını doğrudan HTML düzenleyicisinde düzenlemeyin. Bunun yerine, Tasarımcı'ya gidin ve Özellikler panelini kullanın.
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" Bu kodun hiçbir kısmını doğrudan HTML düzenleyicisinde düzenlemeyin. Bunun yerine, Tasarımcı'ya gidin ve Özellikler panelini kullanın.

Tasarım öğelerinin kodda nasıl göründüğü hakkında daha fazla bilgi için bkz. Tasarım öğelerini tanımlama.

Metin öğesi araç çubuğuna yeni yazı tipleri ekleme

Metin öğeleri, tasarımcıda bir yazı tipini seçili metne uygulamak için kullanılacak bir menü içeren bir açılır biçimlendirme araç çubuğu sağlar.

Metin öğeleri için yazı tipi seçici.

Yeni yazı tiplerini bu yazı tipi seçiciye eklemek için belgenin <head> bölümüne aşağıdaki formu kullanan bir <meta> etiket ekleyin:

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

Burada <yazı tipi listesi>, noktalı virgülle ayrılmış yazı tiplerinin bir listesidir.

Stiller sekmesine ayar ekleme

Kullanıma hazır şablonların kullanışlı bir özelliği de Stiller sekmesinde genel stil ayarları sunmalarıdır. Bu, kullanıcıların yazı tipi ailesini, renk paletini ve şablon için etkinleştirilen diğer genel ayarları hızla ayarlamasına olanak tanır. Her şablon yalnızca o tasarım için anlamlı stil ayarlarını içerir. Sizin ve kullanıcılarınız için doğru stil ayarlarını sunan şablonları da benzer şekilde tasarlayabilirsiniz.

Tasarımcı > Stiller sekmesi.

Stiller sekmesine bir ayar eklemek için şunları yapmalısınız:

  • Ayarı oluşturmak için belgenizin <head> bölümüne bir <meta> etiketi ekleyin.
  • Meta etiket tarafından oluşturulan ayarları uygulamak için stilleri ve/veya HTML etiketlerini ayarlayın.

Aşağıdaki alt bölümlerde her işlemin nasıl gerçekleştirileceği açıklanmaktadır.

Ayarı oluşturmak için meta etiket ekleme

Gerekli <meta> etiket şu biçimi alır:

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

Burada:

  • <name> meta etiketi tanımlar. Buna, ayarın uygulanacağı stillerde ve HTML etiketlerinde başvurmanız gerekir.
  • <initial-value> stil için uygun bir varsayılan değerdir.
  • <data-type> kullanıcıların sağlayacağı değer türünü tanımlar. Bu ayar Stiller sekmesinde sunulan denetim türünü etkiler. Aşağıdaki tabloda listelenen değerlerden birini kullanmalısınız.
  • <label> ayar için Stiller sekmesinde gösterilecek metni belirtir.
Datatype değeri Açıklama
color #000 veya #1a32bf gibi etiket değerlerini kullanarak bir renk ayarlar. Stiller sekmesinde bir renk seçici denetimi oluşturur.
font Yazı tipi ailesi adı belirler. Yazı tipi yığınlarını tercih sırasına göre virgülle ayrılmış bir yazı tipi adları listesi kullanarak da ayarlayabilirsiniz. Stiller sekmesinde basit bir giriş alanı oluşturur.
number Birim olmadan bir sayısal değer ayarlar (değerle birlikte belirtilecek px veya em gibi birimlere izin vermek için "text" kullanın). Stiller sekmesindeki geçerli değeri artırmak/azaltmak için de kullanılabilecek yukarı/aşağı düğmelerinin bulunduğu bir giriş alanı oluşturur.
picture Bir görüntü kaynağı ayarlar (URL olarak). Stiller sekmesinde basit bir giriş alanı oluşturur.
text Hem metin hem de sayı içerebilecek bir değer ayarlar. Birim (örneğin, px veya em) içerebilecek sayısal değerler için bu veri türünü de kullanın. Stiller sekmesinde basit bir giriş alanı oluşturur.

Not

Stiller sekmesinde gösterilen etiket köşeli parantez içinde görünebilir, örneğin "[Stilim]". Köşeli parantezler, gösterilen metnin mevcut bir çevirisinin olmadığı anlamına gelir. Kullanıma hazır şablonlardan birini destekleyen bir değer (örneğin "Renk 1") seçerseniz bir çeviri kullanıma sunulur ve köşeli parantezler görünmez.

Not

Burada açıklandığı gibi bir <meta> etiket kullanarak belirlenen stil ayarı, sonraki bölümlerde açıklandığı gibi ayara en az bir stil veya HTML etiketinde de başvurulduğunda yalnızca Stiller sekmesinde gösterilir.

Stil ayarlarını başlığa uygulamak için CSS yorumları ekleme

Stiller sekmesinde yapılan ayarlar, eşleşen xrm/designer/setting meta etiketinin name özniteliğinin değerini içeren iki CSS yorumu ile bir CSS değerini çevreleyerek HTML belgenizin <head> bölümünde belirlenen CSS stillerine uygulanabilir. CSS yorumu çifti şu biçimi alır:

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

Burada:

  • <tag-name> ilgili Stiller sekmesi ayarını belirleyen xrm/designer/setting meta etiketinin ad özniteliğidir.
  • <value> kullanıcı ilgili Stiller sekmesi ayarını düzenlediğinde değiştirilecek bir değerdir.

Önemli

Bu CSS yorum çiftlerini yalnızca <head> bölümünün <style> etiketleri içinde tanımlanan stillerde ve sınıflarda kullanabilirsiniz. Tüm CSS stillerinin ayarlandığı yalnızca bir <style> etiket kümesi daha olmalıdır.

Stiller sekmesinde "Renk 1" olarak adlandırılan bir renk seçici denetimi oluşturan xrm/designer/setting meta etiketini görebileceğiniz bir örnek aşağıda verilmiştir. Böylece <h1> öğeleri için metin rengini belirlemek üzere bu ayara bir CSS stili uygulanır.

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

Stil ayarlarını gövdeye uygulamak için özellik-başvuru öznitelikleri ekleme

Stiller sekmesinde yapılan ayarlar ilgili her etikete aşağıdaki biçimde bir öznitelik ekleyerek belgenizin <body> bölümündeki tüm HTML etiketlerine öznitelik değerleri olarak uygulanabilir:

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

Burada:

  • <attr> oluşturulacak özniteliğin adıdır.
  • <tag-name> ayarı belirleyen meta etiketin name özniteliğinin değeridir.
  • Tek bir özellik-başvuru özniteliği içinde birden çok öznitelik kullanılması gerekirse bunlar bir noktalı virgülle ayrılmalıdır.

Belgede bir Hero görüntüsünü (başlığı) denetlemek için iki ayar oluşturan, Stiller sekmesinde "Hero görüntüsü" ve "Hero görüntüsü yüksekliği" denetimlerine sahip xrm/designer/setting meta etiketlerine bir örnek verilmiştir. property-reference özelliği bu ayarları uygulamak için bir <img> etiketinde kullanılır.

<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>

Bu örnekte <img> etiketi şuna benzer:

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