NLM126 • Время настройки: 3 минуты
Открытие страницы в Iframe на Тильде
Модификация позволяет встроить любую страницу вашего сайта или сайта клиента в попап если в Тильде включена настройка «Разрешить вставить в iframe». Важно многие сайты отказывают в разрешении вставки своего сайта в чужой, из соображении безопасности. В модификации вы можете настроить ссылку на страницу, которую хотите встроить, ссылку для кнопки вызова всплывающего окна, цвет фона, отступы внутри попапа, кастомизация крестика.
Она работает в связке с другими нашими решениями, чтобы вы могли пройти весь путь от макета до запуска сайта, не привлекая разработчиков.
Эта модификация — часть системы инструментов для работы с Тильдой
Перенесите макет в Тильду за 10 минут
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Плагин для Figma
AI-ассистент
Генератор CSS-стилей
Модификации
Расширение для Тильды
Работайте с модификациями внутри привычного редактора Тильды
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Ваш персональный AI-ассистент для Тильды
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Стандартные блоки Tilda не вписываются в дизайн?
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Добавьте уникальные функции в один клик
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
Для корректной работы модификации включите поддержку jQuery. Подробнее. Как это сделать: Настройка сайта > Еще > Подключить jQuery на страницах сайта.
Посмотрите, как будет выглядеть модификация на вашем сайте.
Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Открыть страницу в iframe
Нажмите на кнопку, чтобы открыть всплывающее окно с другим сайтом или страницей
Открыть другую страницу Смотрите, как быстро установить модификацию
Инструкция
Для того чтобы встроить другую страницу или сайт в попапе вашего сайта, нужно заполнить следующие поля:
Общие настройки iframe
1. «Ссылка в кнопке» — Придумайте ссылку для кнопки, при нажатии которой будет всплывать попап с iframe;
2. «Адрес страницы» — Укажите ссылку на страницу вашего сайта, который вы хотели бы открыть во всплывающем окне на другой странице вашего сайте. Также модификация может встроить в попап страницы сторонних сайтов, если у них включена настройка «Разрешить встраивать сайты в frame».
Важно: ссылка на встраиваемый сайт должна иметь такой же протокол как и ваш основной сайт, т. е. http=http или https=https;
3. «Цвет фона iframe» — Укажите цвет фона для фона iframe, в котором будет отображаться другой сайт;
4. «Отступы слева/справа» — В этом поле вы можете указать отступы слева и справа внутри попап;
5. «Отступы сверху/снизу» — В этом поле вы можете указать отступы сверху и снизу внутри попап;
6. «Z-index» — В этом поле нужно настроить z-index для попапа. Z-index простыми словами это слои, как в торте. Значение указывается цифрами, чем больше цифра, тем выше будет находиться слой;
7. «Ширина iframe в мобильной версии (%)» — В этом поле вы можете задать ширину iframe в мобильной версии. Значение указывается в %. Рекомендуется указать 100%;
8. «Высота iframe в мобильной версии (%)» — В этом поле вы можете задать высоту iframe в мобильной версии. Значение указывается в %. Рекомендуется указать 100%;
9. «Закрывать iframe при клике вне его» — При активации данной функции, iframe будет закрываться при клике вне области попапа;
10. «Предзагружать iframe» — При активации данной функции сайт или страница будет предзагружаться до открытия попапа.
11. «Закрывать iframe при клике вне его» — Если активировать данную функцию, то попап будет закрываться при клике вне зоны страницы;
12. «Блокировать скролл страницы при открытом попапе» — Если активировать данную функцию, то страница не будет скроллится пока попап будет открыт;
13. «При открытии ссылок внутри iframe, закрывать iframe» — Данная функция позволит осуществлять переход по ссылкам на отдельные страницы, а не открывать их внутри iframe. Настройка работает только для страниц в рамках одного домена;
Кастомизация иконки закрытия
14. «Размеры крестика» — Размеры иконки крестика для закрытия попапа;
15. «Цвет обводки крестика» — Цвет обводки иконки крестика для закрытия попапа;
16. «Цвет крестика» — Цвет иконки крестика для закрытия попапа;
17. «Цвет крестика в мобильной версии» — Цвет крестика в мобильной версии для закрытия попапа;
18. «Фон крестика» — Фон иконки крестика для закрытия попапа;
19. «Фон крестика при наведении» — Фон крестика при наведении для закрытия попапа;
20. «Фон крестика в мобильной версии» — Фон крестика в мобильной версии для закрытия попапа;
21. «Цвет плашки в мобильной версии» — Цвет плашки под иконкой закрытия;
22. «Расстояние сверху до крестика (px)» — Расстояние сверху до крестика. Значение указывается в px;
23. «Расстояние справа до крестика (px)» — Расстояние справа до крестика. Значение указывается в px;
24. Добавляете блок Т123 и вставляете в него сгенерированный HTML код.
Важно:
Общие настройки iframe
1. «Ссылка в кнопке» — Придумайте ссылку для кнопки, при нажатии которой будет всплывать попап с iframe;
2. «Адрес страницы» — Укажите ссылку на страницу вашего сайта, который вы хотели бы открыть во всплывающем окне на другой странице вашего сайте. Также модификация может встроить в попап страницы сторонних сайтов, если у них включена настройка «Разрешить встраивать сайты в frame».
Важно: ссылка на встраиваемый сайт должна иметь такой же протокол как и ваш основной сайт, т. е. http=http или https=https;
3. «Цвет фона iframe» — Укажите цвет фона для фона iframe, в котором будет отображаться другой сайт;
4. «Отступы слева/справа» — В этом поле вы можете указать отступы слева и справа внутри попап;
5. «Отступы сверху/снизу» — В этом поле вы можете указать отступы сверху и снизу внутри попап;
6. «Z-index» — В этом поле нужно настроить z-index для попапа. Z-index простыми словами это слои, как в торте. Значение указывается цифрами, чем больше цифра, тем выше будет находиться слой;
7. «Ширина iframe в мобильной версии (%)» — В этом поле вы можете задать ширину iframe в мобильной версии. Значение указывается в %. Рекомендуется указать 100%;
8. «Высота iframe в мобильной версии (%)» — В этом поле вы можете задать высоту iframe в мобильной версии. Значение указывается в %. Рекомендуется указать 100%;
9. «Закрывать iframe при клике вне его» — При активации данной функции, iframe будет закрываться при клике вне области попапа;
10. «Предзагружать iframe» — При активации данной функции сайт или страница будет предзагружаться до открытия попапа.
11. «Закрывать iframe при клике вне его» — Если активировать данную функцию, то попап будет закрываться при клике вне зоны страницы;
12. «Блокировать скролл страницы при открытом попапе» — Если активировать данную функцию, то страница не будет скроллится пока попап будет открыт;
13. «При открытии ссылок внутри iframe, закрывать iframe» — Данная функция позволит осуществлять переход по ссылкам на отдельные страницы, а не открывать их внутри iframe. Настройка работает только для страниц в рамках одного домена;
Кастомизация иконки закрытия
14. «Размеры крестика» — Размеры иконки крестика для закрытия попапа;
15. «Цвет обводки крестика» — Цвет обводки иконки крестика для закрытия попапа;
16. «Цвет крестика» — Цвет иконки крестика для закрытия попапа;
17. «Цвет крестика в мобильной версии» — Цвет крестика в мобильной версии для закрытия попапа;
18. «Фон крестика» — Фон иконки крестика для закрытия попапа;
19. «Фон крестика при наведении» — Фон крестика при наведении для закрытия попапа;
20. «Фон крестика в мобильной версии» — Фон крестика в мобильной версии для закрытия попапа;
21. «Цвет плашки в мобильной версии» — Цвет плашки под иконкой закрытия;
22. «Расстояние сверху до крестика (px)» — Расстояние сверху до крестика. Значение указывается в px;
23. «Расстояние справа до крестика (px)» — Расстояние справа до крестика. Значение указывается в px;
24. Добавляете блок Т123 и вставляете в него сгенерированный HTML код.
Важно:
- Если вы встраиваете страницу сайта на Тильде, нужно перейти в настройки сайта → Ограничить доступ → включите галочку «Отключить защиту от фреймов». Настройка доступна после подключения своего домена.
Сгенерируйте код для своего сайта
Обратите внимание!
Чтобы участвовать в бонусной программе, авторизуйтесь — после входа ваша реферальная ссылка будет автоматически добавлена при копировании.
Подробнее о реферальной программе
Скопировать обычную ссылку
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Наши видеоинструкции позволяют внедрять модификации за 2−5 минут даже без технических знаний. Всё делается прямо в редакторе Тильды, без ручного редактирования кода
У нас есть оперативная техподдержка, которая поможет решить любые вопросы с установкой, настройкой или конфликтами нашего кода. Мы работаем без выходных с 11:00 до 19:00.
Мы уделяем особое внимание стабильности и надежности: все модификации проходят тестирование и корректно работают на Тильде, даже после крупных обновлений платформы. Регулярно добавляем новые эффекты и дорабатываем существующие, чтобы вы всегда могли реализовать дизайнерские идеи без перебоев.
Нет, все модификации доступны по подписке — вы получаете полный доступ к нашей библиотеке из более чем 200 модификаций и эффектов, а также ко всем новым обновлениям без доплат.
В каталоге есть фильтры по задачам и подробные описания с примерами. Если не уверены — напишите нам, мы подскажем оптимальное решение под ваш проект.
Мы постоянно расширяем каталог, дорабатываем функционал текущих модификаций и учитываем пожелания пользователей. У нас есть публичный роадмеп, и самые востребованные решения мы добавляем в библиотеку в первую очередь — расскажите о своей задаче, и, возможно, она появится в ближайших обновлениях.
Новые модификации и улучшения выходят почти каждую неделю. Мы быстро реагируем на изменения в Тильде: если платформа обновляется, мы оперативно корректируем код, чтобы все работало стабильно и без сбоев.
Да, у нас есть короткие видеоуроки, подробные текстовые инструкции и поддержка, которая подскажет на любом этапе.
Все решения оптимизированы для работы на Тильде. Если возникнут вопросы — поддержка поможет подобрать оптимальную конфигурацию для вашего проекта.
Наш сервис работает с 2021 года, нам доверяют десятки тысяч веб-дизайнеров и агентств по всей России и СНГ. Мы регулярно получаем положительные отзывы и кейсы от пользователей.