Financial Services Creatio, customer journey edition
Базовая функциональность Creatio
Это документация Creatio версии 7.16.0. Мы рекомендуем использовать новую версию документации.

Элемент HTML (Smart block)

Элемент [HTML] или “Smart block” (Рис. 1) позволяет добавить в шаблон письма пользовательский HTML-код, отметить в нем переменные (текст, цвет шрифта или изображения) и настроить пользовательские макросы для редактирования.

Рис. 1 — Добавление элемента [HTML] в шаблон письма

adding_smartblock_from_toolbar.gif 

Используйте элемент [HTML] для настройки пользовательских стилей, таких как эллиптическое скругление углов, неоднородные границы, использование нескольких фоновых изображений и т. п. Также при помощи этого элемента вы можете загрузить в систему шаблоны, сверстанные в другом программном обеспечении. Для этого достаточно добавить весь HTML-код такого шаблона в элемент [HTML].

На заметку

Для использования данного элемента необходимы знания в области web-дизайна и HTML-верстки.
Ваш код будет добавлен в шаблон без каких-либо дополнительных проверок на ошибки. При использовании HTML-элемента рекомендуется проверять результаты, например, путем отправки тестового письма.

HTML-макросы

Вы можете добавить пользовательские макросы в HTML-код элемента [HTML]. При отправке email-сообщения Creatio заменяет указанные макросы значениями, указанными в настройках элемента [HTML]. Обновленная функциональность элемента HTML позволяет отметить в коде элемента переменные (текст, цвет шрифта или изображения) и настроить пользовательские макросы для редактирования.

Когда пользователь создает макрос, дизайнер контента генерирует соответствующее поле и сопоставляет значение поля с макросом. Если макрос используется несколько раз в одном и том же элементе [HTML], то значение поля будет сопоставлено с каждым экземпляром макроса.

По умолчанию в системе доступны следующие типы макросов:

Новая строка — однострочный макрос. Подробнее >>>

Новый текст — могострочный макрос. Подробнее >>>

Новая картинка — макрос изображения. Подробнее >>>

Новый цвет — макрос подбора цвета. Подробнее >>>

Добавить макрос в HTML-код

1.Выберите элемент [HTML] в шаблоне письма и кликните [Редактировать HTML] на панели настройки элемента.

2.Выделите часть кода, которую необходимо заменить на макрос.

3.Кликните правой кнопкой мыши на выделенном фрагменте кода. Отобразится контекстное меню макроса.

На заметку

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

4.В меню выберите тип макроса, который необходимо добавить (Рис. 2). Вы можете создать новый макрос или добавить в код еще один экземпляр ранее созданного макроса. Назначение и примеры добавления каждого типа макроса описаны ниже в блоках Макрос “Новая строка”, Макрос “Новый текст”, Макрос “Новая картинка” и Макрос “Новый цвет”.

Рис. 2 — Выбор типа макроса

macro_context_menu_create_new_string_macro.png 

Если в элементе [HTML] уже добавлены макросы, то они также отобразятся в контекстном меню.

5.Укажите заголовок выбранного макроса в области [Конструктор макросов] справа (Рис. 3).

Рис. 3 — Добавление заголовка макроса

scr_html_element_configuration_macro_constructor_area_changing_values.png 

6.Нажмите [Сохранить].

В результате новое поле с указанным заголовком отобразится в области настройки элемента [HTML] справа (Рис. 4). Изменение значения в этом поле повлечет за собой обновление всех экземпляров макроса в элементе [HTML].

Рис. 4 — Новое поле макроса

scr_html_element_new_macro_field.png 

Удалить макрос из HTML-кода

1.Выберите элемент [HTML], из которого необходимо удалить макрос, и кликните [Редактировать HTML] на панели его настройки.

2.В области [Конструктор макросов] справа кликните content_section_item_view_model_remove_icon00059.png рядом с макросом, который необходимо удалить (Рис. 5).

Рис. 5 — Удаление поля макроса

scr_html_element_deleting_a_macro_field.png 

3.Нажмите [Сохранить].

В результате в HTML-кое все экземпляры макроса будут заменены текущим значением макроса. Макрос не будет отображаться на панели настройки элемента [HTML].

Макрос “Новая строка”

Этот тип макроса используется для добавления короткого однострочного текста (Рис. 6).

Рис. 6 — Настройка макроса “Новая строка”

adding_string_macros.gif 

Все текстовые разделители будут добавлены в значение макроса в исходном виде. Это означает, что некоторые разделители, в частности, пробелы, табуляция и переносы строки, или последовательности таких разделителей будут отображаться как один пробел. Вдобавок, при редактировании поля нажатие кнопки Enter не приводит к появлению нового символа.

В результате текст будет отображаться в одну строку при условии, что пользовательские правила CSS не запрещают такого поведения.

Макрос “Новый текст”

Этот тип макроса используется для добавления длинного многострочного форматированного текста (Рис. 7).

Рис. 7 — Настройка макроса “Новый текст”

adding_text_macros.gif 

При заполнении поля макроса “Новый текст” новые строки преобразовываются в разрывы строк, несколько пробелов заменяются неразрывными пробелами, символы табуляции заменяются четырьмя неразрывными пробелами. При редактировании нажатие кнопки Enter приводит к появлению новой строки.

В результате отображаемый текст сохраняет форматирование исходного текста, добавленного при настройке макроса.

Макрос “Новая картинка”

Этот тип макроса используется, чтобы указать или отредактировать значение атрибута “src” контейнера <img> или значение CSS-свойства “url”.

При создании макроса дизайнер контента создает поле, в котором указывается источник изображения (scr_field_image_proper00060.png). Используя это поле, вы можете добавить изображение в шаблон письма. Изображение можно загрузить с компьютера или указать его URL-адрес (Рис. 8).

Рис. 8 — Добавление макроса “Новая картинка”

adding_pic_macros.gif 

На заметку

Поле scr_field_image_proper00061.png поддерживает URI данных. Вы можете вставить изображение в кодировке base64 вместо URL.
Изображения в кодировке base64 являются частью HTML-кода сообщения и обычно не фильтруются почтовыми клиентами, которые по умолчанию не позволяют загружать внешние изображения.

Макрос “Новый цвет”

Этот тип макроса используется, чтобы задать или изменить настройки цвета встроенных стилей и используемых элементов (Рис. 9).

Рис. 9 — Настройка макроса “Новый цвет”

adding_color_macros.gif 

При создании макроса дизайнер контента создает поле для подбора цвета. Макрос сгенерирует шестнадцатеричный код цветовой схемы RGB, которому предшествует знак “#“, например, “#0d2e4e”.

Смотрите далее

Обзор элементов дизайнера контента

Создание простого шаблона

Как сформировать шаблон

Был ли данный материал полезен?

Как можно улучшить эту статью?