Споделяне чрез


Използване на персонализирани атрибути за разрешаване на функциите за дизайнер в имейли, страници и формуляри

Програмите за дизайн на съдържание съдържат едновременно и графичен редактор, и редактор за HTML код. HTML кодът, който те генерират, е съвместим с всеки инструмент за рендиране на HTML, но те също така поддържат и няколко персонализирани атрибута, които поддържат елементите за дизайн чрез плъзгане и пускане и общите настройки за стил, предоставени от графичния редактор. Шаблоните за съобщения по подразбиране и шаблоните за страници, предоставени с Dynamics 365 Customer Insights - Journeys тях, използват тези персонализирани атрибути, за да ви улеснят да ги персонализирате по определени начини. Можете също да използвате тези персонализирани атрибути, когато проектирате свои собствени шаблони.

Съвет

Microsoft не предоставя поддръжка за персонализиран HTML в имейли.

Обобщение за етикети и атрибути

Таблицата по-долу предоставя бърза справка за персонализираните атрибути и метаетикети, описани в тази тема.

Персонализиран атрибут Описание
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> Когато този етикет присъства в документа <head> , разделът "Дизайнер " ще предостави функции за плъзгане и пускане. Ако този етикет не присъства, разделът Designer предоставя опростения редактор на цяла страница. Повече информация: Показване на кутията с инструменти и разрешаване на редактиране с плъзгане и пускане
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> Когато този етикет присъства в <head> на вашия документ, шрифтовете, изброени в списъка < с> шрифтове (разделени с точка и запетая), ще бъдат добавени към менюто с шрифтове в лентата с инструменти за форматиране за текстови елементи. Повече информация: Добавяне на нови шрифтове към лентата с инструменти за текстови елементи
<div data-container="true"> … </div> Обозначава началото и края на контейнер, където потребителите могат да плъзгат и пускат елементи за дизайн. Повече информация: Създаване на контейнер, където потребителите могат да добавят елементи на дизайна
<div data-editorblocktype="<element-type>"> … </div> Обозначава началото и края на елемент за дизайн. Стойността на атрибута указва какъв е типът на елемента (текст, изображение, бутон и т.н.). Някои елементи от дизайна поддържат допълнителни атрибути тук. Повече информация: Идентифицирайте елементите на дизайна и елементите за заключване в изгледа на дизайнера
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> Този етикет дефинира настройка за стил в целия документ, която потребителите могат да редактират с помощта на раздела Designer>Styles . Повече информация: Добавяне на настройки към раздела "Стилове"
/* @<tag-name> */ … /* @<tag-name> */ Използвайте CSS коментари като тези, за да заобиколите стойност, която CSS трябва да се контролира от настройка на стил, където <tag-name> е стойността на атрибута name за мета тага, който е установил настройката. Повече информация: Добавяне CSS на коментари за прилагане на настройките за стил в главата
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" Поставете този атрибут във всеки HTML таг, за да поставите атрибут със стойност, контролирана от настройка на стил, където <attr> е името на атрибута, който трябва да бъде създаден, а <tag-name> е стойността на name атрибута за мета тага, който е установил настройката. Повече информация: Добавяне на атрибути за препратка към свойства, за да се приложат настройките на стила в тялото

Останалите секции в тази тема предоставят повече информация относно това как се използва всяка от функциите, под формата на обобщение в таблицата.

Показване на кутията с инструменти и разрешаване на редактиране с плъзгане и пускане

Можете да поставите HTML код, разработен в инструмент на друг производител, директно в раздела HTML на дизайнера, за да започнете да създавате дизайн много бързо. Когато направите това обаче, разделът Designer ще се покаже като един RTF текстов редактор, който предоставя лента с инструменти за форматиране на текст и показва всички изображения, връзки и стилове, включени във вашия HTML, но не предоставя по друг начин разделите Toolbox, Properties или Styles или функционалност за плъзгане и пускане (този опростен изглед на Designer понякога се нарича редактор нацяла страница). Можете обаче да разрешите функцията за плъзгане и пускане за всеки поставен дизайн, като добавите следния мета етикет към <head> раздела на документа:

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

Изображението по-долу показва същия дизайн в режим на редактиране на цяла страница (ляво) и режим на плъзгане и пускане (дясно). Единствената разлика е, че дизайнът вдясно включва метаетикет, така че функцията за плъзгане и пускане е разрешена, е се показва страничният панел.

Редактор на цяла страница срещу редактор с плъзгане и пускане.

Бележка

Когато използвате редактор на цяла страница, все още можете да изберете, редактирате и стилизирате текст с помощта на лентата с инструменти за форматиране на текст (показана), а можете и да щраквате двукратно върху изображения, връзки и други елементи, за да зададете свойствата им с помощта на изскачащ диалогов прозорец. Лентата с инструменти включва и бутона Помощ за редактиране за добавяне на динамично съдържание, като например стойности на Бутонът за персонализиране.полета, извлечени от записа на контакт на всеки получател.

Създаване на контейнер, където потребителите могат да добавят елементи за дизайн

В раздела Designer потребителите могат да редактират само съдържание, съдържащо се в елемент на структура, и могат да плъзгат само нови елементи на проекта в тези части на документа, които са зададени като контейнери за данни. Следователно можете да създадете шаблони, където някои области (извън контейнерите) са заключени за редактиране в раздела Проектиране , докато други (вътре в отключени контейнери) ще приемат редакции и плъзгано съдържание.

Използвайте <div> етикети, които включват атрибута data-container="true" , за да създадете контейнери с данни, като например:

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

Всеки текст или HTML тагове, които са вложени в двойка div-tag на контейнер за данни и не са част от елемент за проектиране, ще създадат неплъзгаща се, нередактируема област между две плъзгащи се области. Например:

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

Бележка

Когато редакторът на цяла страница е разрешен, всички функции за плъзгане и пускане са забранени и можете да редактирате цялото съдържание в раздела Designer , включително съдържание извън div таговете (които нямат ефект в редактора на data-container цяла страница).

Заключване на контейнер в изгледа „Дизайнер”

Можете да заключите контейнер, за да направите цялото му съдържание само за четене в раздела Designer . Ако заключеният контейнер съдържа елементи за проектиране, цялото съдържание и настройки за тези елементи ще останат заключени и разделът Свойства никога няма да се покаже за тях, дори ако ги изберете.

Можете да използвате функцията за заключване на контейнер, за да заключите контейнер, когато приключите с добавянето и конфигурирането на компоненти от дизайна за него.

За да заключите контейнер, добавете data-locked="hard" атрибута към етикета на контейнера, ето така:

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

Бележка

Можете също да заключите съдържание на ниво елемент от дизайна. Ако дадено съдържание е заключено на ниво контейнер, тази настройка отхвърля състоянието на заключване/отключване на всички елементи от дизайна в този контейнер. Повече информация: Заключване на елементи в изглед на дизайнер

За да наложите допълнително заключване на контейнери, можете да ограничите достъпа до раздела HTML , което ще попречи на избраните потребители да получат достъп до кода (където в противен случай биха могли да победят тази настройка). Повече информация: Контролиране на достъпа до дизайнерските функции

Идентифициране на елементите за дизайн

Всеки път, когато добавяте елемент за проектиране с помощта на раздела Designer , редакторът вмъква двойка етикети, за да маркира началото и края на елемента, и създава HTML, необходим за показване на елемента, както е указано в настройките му в <div> раздела Свойства .

Елементите за проектиране са маркирани с <div> етикети, които включват атрибут на формуляра data-editorblocktype="<element-type>", където стойността на този атрибут идентифицира типа на елемента, който е. Например следният <div> етикет създава текстов елемент:

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

Следващата таблица изброява наличните стойности за атрибута data-editorblocktype .

Име на елемента за дизайн Тип на елемента data-editorblocktype стойност на атрибута
Елемент тип текст Общ елемент за дизайн Text
Елемент тип изображение Общ елемент за дизайн Image
Елемент тип разделител Общ елемент за дизайн Разделител
Елемент тип бутон Общ елемент за дизайн Бутон
Елемент на блок със съдържание Общ елемент за дизайн Съдържание
(Този тип елемент на проектиране включва data-block-datatype="<block-type>" и атрибут, който идентифицира кой тип блок съдържание е, където <блоковият тип> има стойност или text или image.)
Елемент тип маркетингова страница Имейл Маркетингова страница
Елемент тип събитие Имейл Събитие
Елемент тип проучване Имейл Проучване
Елемент тип формуляр Формуляр FormBlock
Елемент тип поле Съдържание на формуляр Име-поле-поле<>, например: Поле-имейл
Елемент тип абонаментен списък Съдържание на формуляр SubscriptionListBlock
Елемент тип препращане на приятел Съдържание на формуляр ForwardToFriendBlock
Елемент тип „не изпращай имейли” и елемент тип „запомни ме” Съдържание на формуляр Field-checkbox
(Всеки от тези елементи създава квадратчета с отметка и от друга страна се различават по своите вътрешни настройки.)
Елемент тип бутон за подаване Съдържание на формуляр SubmitButtonBlock
Елемент тип бутон за нулиране Съдържание на формуляр ResetButtonBlock
Елемент тип captcha Съдържание на формуляр CaptchaBlock

За повече информация за всеки от тези елементи за проектиране вижте препратка къмелементи на проектиране.

Важно

Когато работите върху раздела HTML , трябва да избягвате да редактирате каквото и да е съдържание между <div> таговете на вашите дизайнерски елементи, защото резултатите от това могат да бъдат непредсказуеми и вашите редакции вероятно ще бъдат презаписани от дизайнера така или иначе. Вместо това използвайте раздела Designer , за да управлявате съдържанието и свойствата на вашия елемент за проектиране.

Заключване на елементи в изгледа „Дизайнер”

Можете да заключите съдържанието и свойствата на всеки елемент от дизайна, като добавите следния атрибут към отварящия <div> му таг:

data-protected="true"

Например:

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

Когато елемент от проекта е маркиран като защитен, потребителите, работещи в раздела Designer за страница или имейл, няма да могат да редактират свойствата или съдържанието на елемента. Този атрибут винаги е включен за елемента на блок със съдържание, но можете да го добавите към всеки тип елемент от дизайна, за да го защитите. Всеки елемент на дизайна, който включва този атрибут, се показва като оцветен в раздела HTML , за да покаже, че е защитен, но все още можете да го редактирате там, ако настоявате. Задайте този атрибут на „false“ (или просто го премахнете), за да премахнете защитата от елемента от дизайна.

Бележка

Можете също да заключите съдържание на ниво контейнер, което ще отхвърли състоянието на заключване/отключване на всички елементи от дизайна в този контейнер. Повече информация: Заключване на контейнер в изглед на дизайнер

За да наложите допълнително заключване на съдържанието, можете да ограничите достъпа до раздела HTML , което ще попречи на избраните потребители да имат достъп до кода (където в противен случай биха могли да победят тази настройка). Повече информация: Контролиране на достъпа до дизайнерските функции

Импортиране на външно създаден HTML код в дизайнера

Можете да използвате всеки инструмент, който искате, за да създадете първоначалното оформление на HTML и съдържанието на маркетингов имейл, страница или формуляр. Когато вашият HTML е готов, просто го поставете в съответния дизайнер и след това добавете всички Dynamics 365 Customer Insights - Journeys функции, от които се нуждаете, както е описано в следващите подраздели.

Импортиране на HTML кода ви

За да въведете HTML, създаден външно, в дизайнера, започнете, като направите следното:

  1. Създаване на нов маркетингов имейл, страница или формуляр в Dynamics 365 Customer Insights - Journeys.
  2. Отидете в раздела Проектиране>на HTML на дизайнера.
  3. Изчистете цялото съдържание от раздела HTML и го поставете в HTML кода, създаден отвън.
  4. Отидете в раздела Дизайнер>на дизайна на дизайнера и проверете вашия дизайн.
  5. Ако работите с маркетингов имейл, не забравяйте да използвате помощно редактиране , за да поставите цялото необходимо съдържание и връзки (включително връзка към центъра за абонамент и адреса на физическия подател).

Съвет

Тъй като току-що сте поставили във външен HTML, вашият дизайн вероятно не включва никакъв код, който е специфичен за Dynamics 365 Customer Insights - Journeys, така че дизайнерът показва редактора на цяла страница, който предоставя функции за основно форматиране на текст, форматиране на изображения и (за имейли) подпомагане на редактирането за добавяне на динамично съдържание. За повече информация как да работите с редактор на цяла страница вижте Показване на кутията с инструменти и разрешаване на редактиране с плъзгане и пускане. Ако редакторът на цяла страница предлага цялата необходима функционалност, използвайте го за фина настройка на дизайна и след това го използвайте както обикновено. Ако предпочитате да използвате редактора с плъзгане и пускане, за да направите фина настройка на вашия дизайн, вижте следващия раздел за информация как да го разрешите.

Разрешаване на редактор с плъзгане и пускане след импортиране

Ако искате да разрешите пълнофункционалния редактор с плъзгане и пускане и/или да добавите разширени елементи на дизайна, докато работите в изгледа Designer , можете лесно да го направите, като редактирате допълнително импортирания HTML код, както следва:

  1. Върнете се в раздела Проектиране>на HTML на дизайнера.

  2. Разрешете редактора с плъзгане и пускане, като добавите необходимия мета етикет към <главната> секция на документа, както е описано в Показване на кутията с инструменти и разрешете редактирането с плъзгане и пускане.

  3. Направете следното, ако е необходимо, докато работите върху раздела Проектиране на>HTML :

    • Във всяка част от вашия проект, където искате да можете да плъзнете един или повече елементи за проектиране, добавете код, за да създадете контейнер за данни, както е описано в Създаване на контейнер, където потребителите могат да добавят елементи за проектиране.
    • Ако предпочитате да позиционирате елементи за проектиране директно в кода си, без да използвате плъзгане и пускане, можете да въведете необходимия код директно в раздела Проектиране на HTML>. Елементите, които добавяте по този начин, няма да поддържат плъзгане и пускане, но ще предоставят настройки в панела Свойства на раздела Дизайнер на дизайни>. Можете да поставяте само елементи на текст, изображение, разделител и бутон, като използвате тази техника (създаване на контейнери и използване на плъзгане и пускане за други видове елементи на дизайна). Вижте таблицата след тази процедура за HTML структурите, необходими за създаване на всеки един от тези елементи; копирайте/поставете този код директно от таблицата, ако е необходимо.
  4. Сега можете да отидете в раздела Дизайнер на проекти>и да плъзнете елементи за проектиране във всеки от контейнерите, които сте задали, и след това да използвате панела Свойства , за да конфигурирате всеки елемент на проектиране, който сте плъзнали или поставили директно във вашия код.

Тип елемент на дизайна Поставяне на този код Бележки                                                     
Text <div data-editorblocktype="Text"><p> Enter your text here</p></div> Можете да въведете HTML съдържание между <p> таговете директно тук или да отидете в дизайнера , за да използвате редактора на RTF текст, за да го направите.
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> Най-лесният начин да промените източника на изображение и/или връзката на изображението, е да отидете на Дизайнер и да използвате панела Свойства. Но можете също да редактирате следните атрибути директно в HTML:
  • Задайте връзката и/или заглавието на изображението, като редактирате атрибутите на <a> елемента.
  • За да премахнете връзката от изображението, изчистете съдържанието на атрибутите href и title на <a> елемента (но запазете атрибутите и кавичките, като например href="").
  • Задайте източника на изображение, като редактирате атрибута на <img> елемента.
Не редактирайте друга част от кода.
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> Не редактирайте никаква част от този код директно в редактора на HTML. Вместо това отидете на дизайнера и използвайте панела Свойства .
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" Не редактирайте никаква част от този код директно в редактора на HTML. Вместо това отидете на дизайнера и използвайте панела Свойства .

За повече информация как се показват елементите за проектиране в кода вижте Идентифициране на елементи за проектиране.

Добавяне на нови шрифтове в лентата с инструменти за елементи тип текст

Елементите тип текст предоставят изскачаща лента с инструменти за форматиране в дизайнера, която включва меню за прилагане на шрифт към избрания текст.

Селекторът на шрифтове за текстови елементи.

За да добавите нови шрифтове към този селектор на шрифтове, добавете <meta> етикет, който използва следния формуляр към документа <head> :

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

Където <font-list> е разделен с точка и запетая списък с имена на шрифтове.

Добавяне на настройки към раздела „Стилове”

Една удобна функция на готовите шаблони е, че те предоставят глобални настройки на стила в раздела Стилове , които позволяват на потребителите бързо да регулират семейството шрифтове, цветовата палитра и други глобални настройки, активирани за шаблона. Всеки шаблон включва само тези настройки на стил, които имат смисъл за този конкретен дизайн, а вие можете по същия начин да създавате шаблони, които предоставят само правилните настройки за стил за вас и потребителите ви.

Разделът

За да добавите настройка към раздела Стилове , трябва да направите следното:

  • Добавете етикет към на вашия документ, <meta> за да <head> създадете настройката.
  • Задайте стилове и /или HTML етикети, които прилагат настройките, създадени от метаетикета.

Подсекциите по-долу обясняват как да направите всяко от тези неща.

Добавяне на метаетикет за създаване на настройка

Необходимият <meta> етикет има следната форма:

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

Където:

  • <name> идентифицира мета тага, който също трябва да посочите в стиловете и HTML таговете, където ще се приложи настройката.
  • <Начална стойност> е подходяща стойност по подразбиране за стила.
  • <> тип данни идентифицира типа стойност, която потребителите ще предоставят. Тази настройка засяга типа на контролата, която се представя в раздела Стилове . Трябва да използвате една от стойностите, изброени в следващата таблица.
  • <етикет> задава текста, който трябва да се показва в раздела Стилове за настройката.
Стойност на тип данни Описание
color Задава цвят с помощта на стойности с хеш етикет като #000 или #1a32bf. Създава контрола за избор на цвят в раздела Стилове.
font Задава име на семейство шрифтове. Можете също да настроите купове шрифтове, като използвате разделен със запетаи списък с имена на шрифтове по реда на предпочитание. Създава просто поле за въвеждане в раздела Стилове.
number Задава числова стойност без единица (използвайте текст, за да позволите единици като px или em да бъдат зададени заедно със стойността). Създава поле за въвеждане с бутони нагоре/надолу, които могат да се използват и за увеличаване/намаляване на текущата стойност в раздела Стилове .
picture Задава източник на изображение (под формата на URL адрес). Създава просто поле за въвеждане в раздела Стилове.
text Задава стойност, която може да включва и текст и числа. Също така използвайте този тип данни за числови стойности, които могат да включват единица (като px или em). Създава просто поле за въвеждане в раздела Стилове.

Бележка

Етикетът , показан в раздела Стилове , може да се появи в квадратни скоби, като например "[Моят стил]". Квадратните скоби указват, че показаният текст няма наличен превод. Ако изберете стойност, поддържана от който и да е от предварително подготвените шаблони (например „Цвят 1”), тогава ще има превод, така че квадратните скоби няма да се покажат.

Бележка

Настройка на стил, установена с помощта на <meta>етикет, както е описано тук, се показва само в раздела Стилове , когато тази настройка също е посочена в поне един действителен стил или HTML етикет, както е описано в следващите раздели.

Добавяне на CSS коментари за прилагане на настройки за стил в заглавката

Настройките , направени в раздела Стилове, могат да бъдат приложени към CSS стилове, <head> установени във вашия HTML документ, CSS като обградите стойност с два CSS коментара, които съдържат стойността на name атрибута за съответстващия xrm/designer/setting мета таг. Двойката CSS коментари приема следната форма:

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

Където:

  • <tag-name> е атрибутът name за мета тага xrm/designer/setting , който установява съответната настройка на раздела Styles .
  • <value> е стойност, която ще бъде заменена, когато потребителят редактира съответната настройка на раздела Стилове .

Важно

Можете да използвате тези двойки CSS коментари само в стилове и класове, дефинирани в <style> таговете в раздела <head> . Освен това трябва да има само един набор от <style> тагове, като всички CSS стилове са настроени там.

Ето един пример, където можете да видите xrm/designer/setting мета етикет, който създава контрола за избор на цвят, наречена "Цвят 1" в раздела Стилове . След това стил CSS прилага тази настройка, за да установи цвета на текста за <h1> елементите.

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

Добавяне на атрибути за справка за свойство за прилагане на настройки за стил в основния текст

Настройките , направени в раздела Стилове, могат да се прилагат като стойности на атрибути към всеки HTML етикет в на документа <body> чрез добавяне на атрибут от следния формуляр към всеки съответен етикет:

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

Където:

  • <attr> е името на атрибута, който трябва да бъде създаден.
  • <tag-name> е стойността на name атрибута за мета тага, който е установил настройката.
  • Множество атрибути, ако е нужно, могат да бъдат разделени с точка и запетая в рамките на единичен атрибут за препратка към свойство.

Ето един пример, където можете да видите xrm/designer/setting мета тагове, които създават две настройки за управление на изображение на герой (банер) в документа, с контроли, наречени "Изображение на герой" и "Височина на изображението на героя" в раздела Стилове . След това свойството property-reference се използва в етикет за реализиране на <img> тези настройки.

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

Така че, в този пример, тагът <img> ще се разреши на нещо като:

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