Как добавить на сайт блок HTML-код?
1. На главной странице добавьте блок "HTML-код", нажав соответствующую кнопку.
2. Нажмите иконку "шестерёнка".
3. На вкладке вы увидите стандартный HTML-код, добавленный вместе с блоком в качестве примера. Вы можете удалить его и добавить свой.Разрешенные теги:
<a>, <b>, <blockquote>, <br>, <caption>, <code>, <dd>, <del>, <details>, <div>, <dl>, <dt>, <em>, <figcaption>, <figure>, <hr>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <i>, <iframe>, <img>, <ins>, <li>, <ol>, <p>, <picture>, <pre>, <q>, <s>, <script>, <source>, <span>, <strong>, <style>, <sub>, <summary>, <sup>, <table>, <tbody>, <td>, <th>, <thead>, <tr>, <u>, <ul>
Разрешенные атрибуты:
alt, cite, class, colspan, data-*, height, href, id, media, open, rel, rowspan, sizes, src, srcset, style, target, title,type, width
Чтобы вам было проще, мы добавили классы, которые позволят легко сделать стили как у стандартных блоков (особенно, повторение поведения desktop ⟷ mobile) .
Рекомендованные классы:
Классы ограничения ширины основного контейнера с боковыми отступами:
u-container, u-container-content
Классы, принудительно убирающие отступы:
u-pd-no, u-pd-top-no, u-pd-bottom-no, u-pd-left-no, u-pd-right-no
Классы вертикальных отступов блоков соответствующие цифре в настройке редакторов:
u-pd-top-1, u-pd-bottom-1, u-pd-top-2, u-pd-bottom-2, u-pd-top-3, u-pd-bottom-3
Классы стандартных горизонтальных отступов:
u-pd-default, u-pd-top-default, u-pd-bottom-default, u-pd-left-default, u-pd-right-default
Классы выравнивания текста:
u-text-left, u-text-center, u-text-rightКласс адаптивной таблицы:
u-table-default
- Если вы хотите изменить уже имеющийся блок, рекомендуем копировать его содержимое в режиме просмотра, чтобы не перенести лишнее, не нужное для обычных посетителей сайта. Для всех более современных блоков (Карточки, Текст, Карусель, Слайдер, Колонки, Вопрос-Ответ, Таймлайн, Ссылки) актуальные ссылки на стили будут вставлены автоматически по имени класса nh-*, для прочих вам может понадобиться написать стили самостоятельно.
- Для создания собственных классов используйте уникальные префиксы, например u-, во избежание наложения сторонних стилей (например, для часто используемых имен классов вроде block/column/row и т.д.), чтобы внезапно не оказалось, что стили других блоков начали влиять на ваши.
- Ссылку на элемент страницы вы можете сделать при помощи атрибута id, например, создать элемент <p id=”u-contacts”></p> и поместить где-то ссылку на него <a href=”https://yourdomain.tld/#u-contacts”>ссылка</a> или добавив в URL #u-contacts
- Изображения/фоны svg можно вставить через Data URI
4. Важно! Особенности использования блока HTML:
- Допустимо использовать только безопасные теги. При сохранении блока конструктор автоматически будет пытаться исправить, например, незакрытые теги, чтобы вёрстка страницы не сломалась.
- В блок нет возможности добавить iframe/script, для этого вы по-прежнему можете использовать блок GTM.
- HTML - свободный блок. Техническая поддержка конструктора не консультирует вас по содержимому блока. Техническая поддержка не проверяет корректность информации данных, вставленных в блок, не оценивает полученный вами результат ни по каким критериям. Всё что вы добавляете и как - вы делаете исходя только из своих знаний, а также полностью на свой страх и риск.
- Если вы сомневаетесь в необходимости добавления блока для какого-либо функционала или корректности его содержимого, используйте предусмотренные конструктором готовые блоки и виджеты, чтобы не нарушить работу сайта.