Показать наш конструктор рамок и паспарту на странице вашего сайта, чтобы посетители могли подобрать раму, не уходя с сайта. Это займёт 10–15 минут. Программировать не нужно: вы один раз копируете готовый «код» и вставляете его в специальный блок.
План: всего пять шагов
- Открыть страницу-генератор
- Настроить, как будет выглядеть окно
- Скопировать код
- Вставить код на сайт — выберите свой сайт: Tilda, WordPress, Wix или обычный HTML
- Проверить результат
Что такое «код» и что нужно перед началом
Код в этой инструкции — это короткий текст из нескольких строк, который начинается с <iframe. Вы его не пишете: генератор соберёт его сам. Вам нужно только скопировать его и вставить в нужное место. Это как скопировать и вставить абзац текста.
Что вам понадобится:
- Доступ к редактированию вашего сайта — вы можете войти в его редактор и менять страницы.
- Сайт на адресе с «https» (замочек рядом с адресом в браузере). У современных сайтов так по умолчанию.
- 10–15 минут и немного внимания. Ничего не сломается: страницу всегда можно вернуть, как было.
Шаг 1. Откройте страницу-генератор
Откройте в браузере адрес artsnet.store/frame/embed.html (можно нажать на ссылку). Это наша страница «Встроить конструктор на свой сайт»: на ней вы настраиваете окно и получаете готовый код.
Шаг 2. Настройте, как будет выглядеть окно
В верхней части страницы четыре группы настроек. Если вы не уверены — оставьте всё как есть: по умолчанию окно уже выглядит хорошо. Что здесь можно изменить:
- Размер (1). «Ширина: на всю ширину блока» — окно растянется на весь блок вашей страницы, это лучший выбор. «Высота, px» — оставьте 760 или больше. Если конструктор упирается в край, увеличьте высоту.
- Убрать из окна (2). Поставьте галочку рядом с тем, что посетителям видеть не нужно: заголовок, верхнее меню, чат, целые колонки или отдельные блоки настроек. Если сомневаетесь — оставьте галочки, которые стоят по умолчанию.
- Язык (3). Русский или English — на каком языке будет интерфейс.
- Оформление (4). Цвет кнопок и акцентов можно подобрать под цвета вашего сайта.
Под настройками находится предпросмотр — там сразу видно, как окно будет выглядеть у вас на сайте. Меняйте настройки и смотрите результат.
Шаг 3. Скопируйте код
Прокрутите страницу вниз до раздела «2. Скопируйте код». В большом поле — готовый код. Нажмите кнопку «Скопировать код». Вы увидите зелёную надпись «Код скопирован. Вставьте его на свой сайт.» Всё, код теперь в «буфере обмена» — как скопированный текст.
Не закрывайте вкладку и ничего больше не копируйте, пока не вставите код на сайт: новое копирование заменит наш код. Если случайно потеряли — просто вернитесь на страницу-генератор и нажмите «Скопировать код» ещё раз.
Шаг 4. Вставьте код на свой сайт
Теперь откройте редактор вашего сайта в новой вкладке и найдите страницу, где должен появиться конструктор. Дальше действуйте по разделу для вашего сайта. Названия кнопок в редакторах иногда меняются — ориентируйтесь на смысл и расположение.
Tilda
1. Откройте нужную страницу в редакторе Tilda. Между блоками нажмите «+» (Добавить блок). В открывшейся библиотеке блоков слева выберите раздел «Другое», а в нём блок «T123 — HTML-код».
2. У появившегося блока нажмите кнопку «Контент». В окне «HTML-код» щёлкните мышью в пустое поле и вставьте код: Ctrl + V (на Mac — Cmd + V). Нажмите «Сохранить и закрыть».
3. Нажмите «Опубликовать страницу» в правом верхнем углу. Пока вы не опубликовали, посетители изменений не увидят.
WordPress
1. Откройте нужную страницу для редактирования. Вверху слева нажмите синюю кнопку «+» (Добавить блок). В строке поиска наберите html и выберите блок «Произвольный HTML» (в английской версии — «Custom HTML»).
2. Щёлкните в поле блока и вставьте код: Ctrl + V. Нажмите «Обновить» (или «Опубликовать», если страница новая).
Wix
1. В редакторе Wix слева нажмите «＋» (Добавить элементы). Выберите «Встроить код», затем «Встроить HTML» (в английском Wix: Add → Embed Code → Embed HTML). На странице появится прямоугольный блок.
2. У блока нажмите «Ввести код». В окне «Настройки HTML» в поле «Код» вставьте код (Ctrl + V) и нажмите «Обновить». Затем растяните блок мышью за края до нужного размера (по высоте — не меньше, чем задано в коде) и нажмите «Опубликовать» справа вверху.
Обычный HTML-сайт (или другой конструктор сайтов)
Если у вас обычный сайт из файлов: откройте нужный файл страницы (например, index.html) в текстовом редакторе — подойдёт «Блокнот». Найдите строку <body> и вставьте код внутрь неё — на то место, где должен быть конструктор. Сохраните файл (Файл → Сохранить) и загрузите его на хостинг так же, как обычно обновляете сайт.
<body> (1), затем сохраните файл (2)В других системах (например, Битрикс, InSales, Ucoz, Shopify, Joomla) ищите блок с названием вроде «HTML-код», «Произвольный код», «Embed», «Виджет» — и вставляйте код туда так же. Если такого блока нет, обратитесь в поддержку вашего сайта: попросите «вставить iframe-код на страницу».
Шаг 5. Проверьте результат
Откройте страницу вашего сайта так, как её видят посетители (в новой вкладке или в режиме инкогнито) и обновите её клавишей F5. Вы должны увидеть конструктор прямо на странице.
☐ Окно конструктора видно на странице. ☐ Можно загрузить фото и подобрать раму. ☐ Окно не обрезано снизу (если обрезано — увеличьте высоту, см. ниже). ☐ На телефоне тоже открывается.
Если что-то не получилось
- На странице пусто или написано «отказано в подключении». Проверьте: вы опубликовали страницу; адрес вашего сайта начинается с
https://; код вставлен целиком, от<iframeдо</iframe>. Некоторые редакторы вырезают такой код в обычном «текстовом» блоке — нужен именно блок «HTML-код». - Вместо кода на странице виден сам текст «<iframe…». Код вставлен в обычный текстовый блок. Удалите его и вставьте в блок для HTML-кода (см. шаг 4).
- Окно слишком маленькое или обрезано. Вернитесь на страницу-генератор, увеличьте высоту (например, до 900), заново скопируйте код и замените им старый на вашей странице.
- Не работает камера. Оставьте в коде
allow="camera…"(по умолчанию так и есть) и разрешите доступ к камере, когда браузер спросит. - Хочу изменить настройки позже. Просто получите новый код в генераторе и замените им старый на странице. Внутри окна ничего менять не нужно.
- Хочу убрать конструктор. Удалите блок с кодом на вашей странице и опубликуйте её.
Не нашли ответа — напишите нам через контакты: укажите, на каком сайте вы работаете, и пришлите ссылку на страницу.
Далее: встраивание: вопросы и ответы · генератор кода · установка приложения · к оглавлению