Tilda · 6 мин чтения

PDF на сайте Тильда: как оформить документ для чтения с телефона

Каждый третий человек, который скачивает прайс или договор с лендинга, открывает его с телефона. Если pdf на сайте тильда весит 8 МБ и открывается в неудобном системном вьювере с мелким шрифтом, человек закрывает вкладку и пишет в чат «а можно просто текстом прислать». Я собирал документы для десятка проектов на Тильде, от лендингов услуг до интернет-магазинов: прайсы, договоры оферты, презентации, инструкции к товару. Почти каждый раз дело было не в самой загрузке файла, а в том, как он выглядит и весит на экране шириной 375 пикселей.

Как загрузить PDF на сайте Тильда: блок Файл и кнопка со ссылкой

Самый быстрый способ, без единой строчки кода: добавить на страницу блок «Файл» (он лежит в категории блоков «Другое»). После установки блока нажимаете «Добавить файл», выбираете PDF на компьютере, и Тильда сама загружает его в свою CDN-папку и превращает в кнопку с именем файла. Текст на кнопке, её цвет и иконку можно переписать в настройках блока, я обычно меняю системное «document.pdf» на человеческое «Скачать прайс на 2026 год» или «Открыть договор оферты».

Второй вариант, если файл нужно прикрепить не отдельным блоком, а к уже существующей кнопке, картинке или пункту меню: в настройках ссылки выбираете тип «Файл» вместо «URL» и подгружаете тот же PDF. Ссылка на документ подставится автоматически, и не придётся городить лишний блок ради одной кнопки.

При загрузке крупного файла Тильда сама подскажет в окне загрузки, если он превышает допустимый размер, так что до публикации стоит один раз прогнать файл через блок и посмотреть, проходит ли он без ошибок.

Кнопка скачивания или встроенный просмотр PDF на сайте

Поведение кнопки зависит от устройства и браузера, и это стоит учитывать заранее. На iPhone Safari чаще всего открывает PDF прямо во вкладке, во весь экран, с жестами масштабирования. На Android многие браузеры вместо этого молча скачивают файл в папку «Загрузки», и человеку нужно самому туда пойти и найти документ. Для короткого прайса это не страшно, а вот для презентации, которую вы хотите показать «здесь и сейчас» на встрече или в переписке, разрыв между «открылось» и «скачалось куда-то» бывает критичным.

Способ показа Что видит человек с телефона Когда ставлю
Кнопка «Скачать PDF» (блок Файл) Файл уходит в загрузки или открывается системным вьювером Договоры, прайсы, инструкции, где важно, чтобы файл остался у человека
Iframe с прямой ссылкой на PDF Документ открывается сразу на странице, без перехода в другое приложение Презентации, каталоги, когда нужно удержать человека на сайте
Разворот PDF в картинки через галерею Листает как ленту фотографий, шрифт всегда читаемый без зума Короткие буклеты и офферы страниц до 10-15

Верстка документа под экран смартфона

Сама структура PDF решает больше, чем настройки блока на Тильде. Презентация, свёрстанная альбомным листом под проектор, на телефоне превращается в мучение: чтобы прочитать строчку, человек то приближает, то уводит документ вбок, и так на каждом слайде. Я для таких случаев в моей практике переверстывал презентацию в книжный формат A4 с одной колонкой текста, разбивал длинные слайды на несколько последовательных страниц, и обратная связь от заказчиков становилась заметно спокойнее, жалоб на «не могу прочитать с телефона» переставали присылать.

Что проверяю в самом файле перед публикацией:

  • Основной текст не мельче 14-16 пунктов, сноски и подписи не мельче 10-11
  • Книжная ориентация листа для документов, которые читают с телефона, а не показывают на экране
  • Один смысловой блок на страницу, без сплошного текста на весь лист без отступов
  • Контрастный текст, тёмный на светлом, без декоративных светло-серых шрифтов

Бесплатный материал

🎁 Полезный скрипт в подарок

Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.

Без спама. Отписка в 1 клик.

Вес PDF и скорость загрузки на мобильном интернете

Тяжёлый PDF на мобильной сети грузится долго даже при нормальном сигнале, а на переходе между вышками просто обрывается. На практике стараюсь укладывать презентацию из десятка слайдов с картинками в 1-2 МБ, а простой текстовый прайс на пару страниц кладу в 300-500 КБ.

Что чаще всего раздувает файл и что с этим делаю:

  • Картинки на 300 dpi для печати вместо 150 dpi для экрана, поэтому пересохраняю их под веб перед вставкой в документ
  • Встроенные шрифты целиком, хотя используется десяток символов, поэтому включаю подмножество шрифта при экспорте
  • Скриншоты в PNG там, где хватило бы JPG, поэтому конвертирую фотографии и скриншоты в JPG перед вставкой
  • Экспорт «для печати» вместо пресета «для веба» в Acrobat или InDesign, который сам сжимает изображения и убирает лишнюю графику

Тильда отдаёт файл со своей CDN, так что на скорость отдачи хостинг почти не влияет, весь выигрыш в том, сколько весит сам PDF.

Свой просмотрщик PDF через Zero Block и код

Если кнопки скачивания недостаточно и документ должен открываться прямо на странице без перехода, добавляю блок Zero Block с HTML-кодом и вставляю iframe, который смотрит прямо на ссылку загруженного PDF. Ссылку на файл беру из настроек уже добавленного блока «Файл» или из файлового менеджера Тильды.

<div style="width:100%; height:80vh;">
  <iframe src="https://your-project.tilda.ws/docs/document.pdf"
          style="width:100%; height:100%; border:0;"
          title="Просмотр документа">
  </iframe>
  <p>Если документ не открылся, <a href="https://your-project.tilda.ws/docs/document.pdf" download>скачайте PDF</a>.</p>
</div>

Большинство современных мобильных браузеров умеют показывать PDF прямо во встроенном iframe без сторонних сервисов, поэтому ссылка на скачивание под iframe остаётся просто подстраховкой на случай, если у кого-то встроенный просмотр не сработает.

Когда нужна доработка сложнее одного iframe

Простой встроенный просмотр закрывает большинство задач, но иногда нужно больше: постраничная навигация со своим счётчиком прочитанных страниц, показ документа только после ввода email, или аналитика того, кто и сколько скроллил PDF перед звонком менеджеру. Такие вещи в стандартный блок Тильды не завёрнуть, тут нужна кастомная доработка Тильды. Простая правка вроде красивой страницы предпросмотра документа стоит от 3 000 ₽, а связка с аналитикой чтения или рассылками стоит от 40 000 ₽.

Обновление документа без разбитых ссылок

Когда прайс или презентация меняются раз в квартал, важно, чтобы обновление файла не превратилось в поиск всех мест на сайте, где на него стоит ссылка. Если просто заменить файл внутри того же блока «Файл», ссылка на кнопке в большинстве случаев обновится автоматически вместе с блоком. А вот если прямую ссылку на PDF когда-то скопировали и вставили в письмо, в QR-код на визитке или в другой раздел сайта вручную, при повторной загрузке файла в хранилище Тильды этот отдельный адрес может перестать работать.

Чтобы не разгребать такие обрывы, держу один блок или страницу вида «Документы» с кнопками, а во внешние каналы (письма, QR-коды, соцсети) отправляю ссылку на эту страницу, а не на сам файл. Меняется PDF внутри блока, а внешняя ссылка на страницу остаётся прежней.

Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.

Частые вопросы

Можно ли открыть PDF на Тильде без перехода на другую страницу

Да, для этого добавляю Zero Block с iframe, который ссылается прямо на загруженный файл. Документ открывается на той же странице, а кнопку-скачивание оставляю рядом как запасной вариант.

Почему PDF на телефоне грузится дольше, чем на компьютере

Обычно дело не в телефоне, а в мобильной сети и в весе самого файла. Презентация в 8-10 МБ на нестабильном сигнале может не догрузиться вообще, поэтому я и стараюсь укладывать документы в 1-2 МБ ещё на этапе экспорта.

Как защитить PDF от скачивания на сайте Тильда

Полностью запретить скачивание нельзя: если браузер показывает файл, человек всегда может сохранить его через системные средства. Можно снизить количество случайных скачиваний, например показывать документ только во встроенном просмотре без прямой кнопки «Скачать», но от целенаправленного копирования это не спасает.

Нужно ли делать отдельную мобильную версию PDF

Отдельный файл под мобильные обычно не нужен, если изначально верстать документ книжной ориентацией, крупным шрифтом и без переусложнённых таблиц. Один и тот же PDF при таком подходе нормально читается и с телефона, и с компьютера.

Есть задача?

Обсудим в мессенджере

Расскажите, что нужно сделать — отвечу в течение 4 часов в рабочее время. Первая консультация бесплатно.

Продолжая пользование настоящим сайтом Вы выражаете своё согласие на обработку Ваших персональных данных (файлов куки) с использованием Yandex.Metrika.
Понятно