Помощь по конструктору сайтов
Скидка до 36% на тарифные планы конструктора сайтов. Акция до 12.11 Узнайте больше

Как добавить на сайт блок HTML-код?

Блок доступен на всех страницах в шаблоне "Новый" на тарифном плане "Профессионал". Вы можете добавить несколько таких блоков.

1. На главной странице добавьте блок "HTML-код", нажав соответствующую кнопку.
Добавление блока HTML2. Нажмите иконку "шестерёнка".
Вход в редактор блока HTML3. На вкладке вы увидите стандартный 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

Вкладка блока HTML
  • Если вы хотите изменить уже имеющийся блок, рекомендуем копировать его содержимое в режиме просмотра, чтобы не перенести лишнее, не нужное для обычных посетителей сайта. Для всех более современных блоков (Карточки, Текст, Карусель, Слайдер, Колонки, Вопрос-Ответ, Таймлайн, Ссылки) актуальные ссылки на стили будут вставлены автоматически по имени класса 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 - свободный блок. Техническая поддержка конструктора не консультирует вас по содержимому блока. Техническая поддержка не проверяет корректность информации данных, вставленных в блок, не оценивает полученный вами результат ни по каким критериям. Всё что вы добавляете и как - вы делаете исходя только из своих знаний, а также полностью на свой страх и риск.
  • Если вы сомневаетесь в необходимости добавления блока для какого-либо функционала или корректности его содержимого, используйте предусмотренные конструктором готовые блоки и виджеты, чтобы не нарушить работу сайта.
На всех мониторах страны.
На визитке каждого.
Создать сайт бесплатно