Tilda позволяет создавать многостраничные сайты без знания кода, но процесс добавления новых страниц часто вызывает вопросы у новичков. В отличие от одностраничников, где контент размещается на одном экране, многостраничные проекты требуют структурирования навигации и связки страниц между собой. В этой инструкции разберём, как добавить вторую страницу в проект на Tilda, избежав типичных ошибок: дублирования блоков, некорректных ссылок и проблем с индексацией.
Второй шаг – настройка SEO-параметров – часто игнорируется, хотя именно они влияют на видимость страницы в поиске. Tilda автоматически генерирует метатеги, но их нужно корректировать вручную: прописывать уникальный title (до 60 символов) и description (до 160 символов), добавлять ключевые слова в URL. Например, если первая страница – главная, то вторая может называться /services или /portfolio, а не /page2.
Чтобы страница отображалась в меню, её нужно привязать к навигационному блоку. В Tilda это делается через раздел «Меню» в настройках проекта. Если меню уже создано, достаточно добавить новую страницу в список и указать порядок отображения. Важно: ссылки в меню должны вести на конечные URL, а не на черновики – иначе поисковые системы проиндексируют неверные адреса. Проверяйте корректность ссылок через инструмент «Предпросмотр» перед публикацией.
После добавления страницы её контент можно наполнить блоками из библиотеки Tilda или импортировать с других страниц. Для ускорения работы используйте функцию «Копировать блоки» – это сэкономит время на верстку повторяющихся элементов (шапки, футера, форм обратной связи). Если на второй странице нужны уникальные стили, настройте их в разделе «Настройки страницы» – там можно изменить шрифты, цвета и отступы без влияния на остальные страницы проекта.
Как выбрать подходящий шаблон для новой страницы в Tilda
Tilda предлагает более 550 готовых блоков и 210 шаблонов страниц, но не все из них подойдут для вашей задачи. Начните с анализа цели страницы: лендинг для продажи услуги, каталог товаров, блог или страница «О компании». Например, для портфолио фотографа выбирайте шаблоны с галереями на 100% ширины (Zero Block), а для корпоративного сайта – структурированные макеты с разделами «Преимущества» и «Команда».
Обратите внимание на стиль оформления. В Tilda шаблоны разделены на категории: «Минимализм», «Креатив», «Бизнес», «Магазин». Если ваш бренд использует фирменные цвета #2A5C8A и #F5F0E6, ищите шаблоны с возможностью кастомизации палитры через настройки блока «Theme». Избегайте перегруженных дизайнов – для страницы с контактами достаточно 3-4 блоков: карта, форма обратной связи, телефон и адрес.
- Для лендингов: шаблоны с якорной навигацией (например, «Landing Page Pro») и встроенными триггерами (таймеры, pop-up).
- Для блогов: макеты с сеткой статей (блок «Post Feed») и боковой панелью для категорий.
- Для интернет-магазинов: шаблоны с корзиной (блок «Shopping Cart») и фильтрами товаров.
Проверьте адаптивность шаблона. В Tilda все макеты автоматически подстраиваются под мобильные устройства, но некоторые элементы могут отображаться некорректно. Откройте предпросмотр в режиме «Mobile» и убедитесь, что текст не выходит за границы экрана, а кнопки остаются кликабельными. Особое внимание уделите шрифтам: для заголовков используйте не менее 24px, для основного текста – 16px.
Изучите функциональные возможности. Если вам нужна интеграция с CRM, выбирайте шаблоны с формами, поддерживающими отправку данных в amoCRM или Bitrix24 (блок «Form»). Для страниц с отзывами подойдут макеты с каруселью (блок «Slider») или сеткой карточек (блок «Reviews»). Не забывайте про SEO: шаблоны с возможностью редактирования метатегов (title, description) и структурированных данных (Schema.org) помогут быстрее выйти в топ поиска.
Перед окончательным выбором протестируйте шаблон на реальном контенте. Скопируйте текст и изображения с вашего сайта в выбранный макет и оцените, как они вписываются в дизайн. Если блоки выглядят растянутыми или перегруженными, попробуйте другой вариант. В Tilda можно комбинировать элементы из разных шаблонов – например, взять заголовок из «Business Classic» и форму из «Startup». Экспериментируйте, но сохраняйте единообразие стиля.
Где найти кнопку создания дополнительной страницы в панели управления
После входа в личный кабинет Tilda откройте проект, в котором нужно добавить страницу. В верхней части экрана расположена горизонтальная панель инструментов – искомый элемент находится именно здесь. Кнопка «Добавить страницу» обозначена значком «+» в круге и подписью «Page» или «Страница» в зависимости от языка интерфейса.
Если панель не отображается, проверьте масштаб браузера – иногда элементы скрываются при уменьшении окна. Альтернативный способ: нажмите на название текущего проекта в левом верхнем углу, чтобы развернуть меню. В выпадающем списке выберите «Страницы проекта», затем кликните «Создать новую страницу» внизу окна.
В мобильной версии Tilda интерфейс адаптирован под сенсорные экраны. Кнопка «+» расположена в правом нижнем углу экрана, но для доступа к полному функционалу рекомендуется использовать десктопную версию. На планшетах панель инструментов отображается в полном объеме при горизонтальной ориентации.
| Расположение кнопки | Условия отображения | Действие |
|---|---|---|
| Верхняя панель инструментов | Десктопная версия, масштаб 100% | Клик по «+ Page» |
| Меню проекта (левый верхний угол) | Любая версия, при скрытой панели | Выбор «Создать новую страницу» |
| Правый нижний угол | Мобильная версия | Нажатие на «+» |
При работе с многостраничными проектами кнопка может смещаться вправо из-за заполнения панели инструментами других страниц. В этом случае используйте прокрутку горизонтальной панели или временно сверните ненужные вкладки, нажав на значок «⋮» рядом с названием страницы.
В режиме редактирования отдельной страницы кнопка создания новой страницы не исчезает, но может быть менее заметна. Обратите внимание на правую часть верхней панели – рядом с кнопками «Предпросмотр» и «Опубликовать» расположена иконка «+», дублирующая основную функцию.
Если кнопка не реагирует на клики, проверьте активные блокировки браузера (например, расширения для блокировки рекламы) или очистите кэш. Tilda использует динамическую загрузку элементов, и сбои в работе скриптов могут временно скрывать интерфейсные элементы.
Для быстрого доступа добавьте страницу через горячие клавиши: нажмите Ctrl + Shift + P (Windows) или Cmd + Shift + P (Mac). Этот метод работает независимо от текущего расположения кнопки в интерфейсе и ускоряет процесс при частом добавлении страниц.
Какие настройки URL и SEO-параметров нужно задать сразу
В Tilda выберите для страницы человекочитаемый URL – короткий, без лишних символов и транслитерации. Например, вместо /page12345 используйте /kontakty или /uslugi-seo. В разделе «Настройки страницы» → «SEO» заполните meta title (до 60 символов) и meta description (до 160 символов) – они должны содержать ключевые слова и призыв к действию. Избегайте дублирования заголовков с другими страницами сайта.
Включите индексацию страницы в настройках SEO, если она должна быть видна в поиске, и отключите для служебных разделов (например, «Спасибо за заказ»). Добавьте alt-тексты для всех изображений через редактор блока – используйте точные описания с ключевыми словами (например, «seo-специалист за работой» вместо «фото1»). Проверьте, чтобы канонический URL был указан корректно, особенно если страница дублирует контент с других разделов.
Как перенести блоки с первой страницы на вторую без потери стилей
Если блоки содержат динамические элементы (например, формы или галереи), после вставки на вторую страницу проверьте их работоспособность. Tilda автоматически обновляет ID элементов при копировании, но ссылки на внешние ресурсы (например, Google Sheets для форм) остаются прежними. Для проверки откройте настройки блока и убедитесь, что все интеграции активны – иначе данные не будут передаваться.
При работе с Zero Block перенос требует дополнительных действий. Скопируйте блок через контекстное меню, затем на новой странице вставьте его в тот же Zero Block. Если стили «слетели», откройте панель «Стили» и вручную примените сохранённые классы из исходного блока. Для ускорения процесса используйте таблицу соответствия классов:
| Тип блока | Часто теряемые стили | Как восстановить |
|---|---|---|
| Текстовый | Шрифт, межстрочный интервал, цвет | Выделить текст → «Стили» → выбрать из списка сохранённых |
| Галерея | Размер изображений, тени, анимация | Открыть настройки галереи → вкладка «Дизайн» → применить шаблон |
| Форма | Цвет кнопки, поля ввода, выравнивание | Редактировать форму → «Стили формы» → выбрать из пресетов |
Для массового переноса блоков используйте функцию «Дублировать страницу». Создайте копию первой страницы, затем удалите ненужные блоки – это гарантирует сохранение всех стилей и связей между элементами. Метод работает даже с кастомными шрифтами и анимациями, так как Tilda сохраняет оригинальные CSS-файлы страницы.
Если стили всё же потерялись, проверьте версию Tilda – в обновлениях 2023 года (начиная с версии 3.15) добавлена опция «Сохранить стили при копировании», доступная в настройках аккаунта. Для её активации перейдите в «Настройки» → «Расширенные» → включите соответствующий переключатель. После этого все копируемые блоки будут автоматически переносить стили без дополнительных манипуляций.
Какие элементы меню и навигации обновлять после добавления страницы
После создания второй страницы в Tilda проверьте главное меню сайта. В большинстве шаблонов оно расположено в хедере и содержит ссылки на ключевые разделы. Откройте редактор меню через панель «Меню и навигация» и добавьте новую страницу в список. Убедитесь, что порядок пунктов логичен: например, если страница посвящена услугам, разместите её после «О нас» и перед «Контактами».
Обновите мобильное меню, если оно отличается от десктопной версии. В Tilda мобильная навигация часто настраивается отдельно через блок «Menu» или «Burger». Проверьте, отображается ли новая страница в выпадающем списке, и скорректируйте отступы или шрифты при необходимости – на маленьких экранах текст не должен сливаться.
Если на сайте есть подвал (футер), добавьте ссылку на новую страницу в соответствующий раздел. Например, в блоке «Быстрые ссылки» или «Навигация». Избегайте дублирования ссылок из главного меню – в футере уместны вторичные страницы, такие как «Политика конфиденциальности» или «Доставка», если новая страница к ним относится.
Проверьте хлебные крошки (breadcrumbs), если они реализованы на сайте. Этот элемент помогает пользователям ориентироваться в структуре и должен отражать иерархию страниц. В Tilda хлебные крошки настраиваются через блок «Breadcrumbs» или вручную в коде страницы. Убедитесь, что новая страница корректно встраивается в цепочку, например: «Главная > Услуги > [Новая страница]».
Обновите внутренние ссылки на других страницах, если они ссылаются на тематически связанный контент. Например, на странице «О компании» может быть упоминание новой услуги – добавьте гиперссылку на соответствующий раздел. Используйте якорные ссылки (#section-id) для перехода к конкретным блокам, если страница длинная.
Если сайт использует выпадающие подменю, добавьте новую страницу в нужную категорию. Например, при создании страницы «SEO-продвижение» разместите её в разделе «Услуги» как подпункт. В Tilda это делается через настройку вложенности в редакторе меню – перетащите страницу на уровень ниже родительского пункта.
Проверьте кнопки призыва к действию (CTA), если они ведут на страницы с похожим контентом. Например, кнопка «Узнать больше» на главной может ссылаться на новую страницу о продукте. Измените текст кнопки, если это улучшит конверсию: вместо «Подробнее» используйте «Заказать консультацию» для страниц с услугами.
После всех изменений протестируйте навигацию в режиме предпросмотра. Перейдите по каждой ссылке, убедитесь, что они ведут на нужные страницы и открываются без ошибок. Особое внимание уделите мобильной версии – нажмите на все пункты меню, проверьте скорость загрузки и адаптивность. В Tilda для этого используйте кнопку «Предпросмотр» в верхней панели редактора.
Как проверить отображение новой страницы на разных устройствах
Первый шаг – использование встроенных инструментов браузера. В Chrome откройте страницу, нажмите F12 или Ctrl+Shift+I, затем Ctrl+Shift+M для переключения в режим эмуляции устройств. Выберите предустановленные профили: iPhone SE, iPad Pro, Galaxy Fold или задайте собственные параметры ширины и высоты экрана. Обратите внимание на DPR (Device Pixel Ratio) – для Retina-дисплеев он равен 2 или 3, что влияет на четкость изображений.
Проверьте адаптивность через изменение размеров окна браузера. Растягивайте окно по горизонтали и вертикали, фиксируя моменты, когда контент «ломается»: текст выходит за границы блоков, изображения растягиваются или обрезаются, кнопки перекрывают друг друга. Особое внимание уделите медиазапросам в CSS – если Tilda генерирует их автоматически, убедитесь, что точки перехода (breakpoints) соответствуют реальным устройствам: 320px (мобильные), 768px (планшеты), 1024px (десктопы).
Используйте реальные устройства для тестирования. Даже эмуляторы не воспроизводят особенности сенсорных экранов, скорость загрузки на мобильном интернете или работу сенсоров (гироскоп, акселерометр). Возьмите хотя бы одно Android-устройство (например, Samsung Galaxy A52 с экраном 6.5″ и разрешением 1080×2400) и iPhone (iPhone 13 с 6.1″ и 1170×2532). Проверьте, как отображаются шрифты – на iOS они могут быть чуть крупнее из-за настроек системы.
Платформы для кросс-браузерного тестирования ускорят процесс. BrowserStack или LambdaTest предоставляют доступ к сотням реальных устройств и браузеров через облако. Запустите тест на 5–7 популярных комбинациях: Chrome на Android 12, Safari на iOS 16, Firefox на Windows 11, Edge на macOS. Обратите внимание на рендеринг шрифтов (особенно если используете нестандартные гарнитуры) и работу JavaScript – некоторые скрипты Tilda могут конфликтовать с расширениями браузера.
Проверьте скорость загрузки страницы на мобильных сетях. В Chrome DevTools перейдите на вкладку Network, выберите режим Slow 3G или Fast 3G и обновите страницу. Если загрузка занимает больше 3 секунд, оптимизируйте изображения (формат WebP, сжатие через TinyPNG), отключите лишние анимации или перенесите тяжелые скрипты в конец страницы. Tilda позволяет отложить загрузку некритичных элементов через настройку «Lazy Load» в параметрах блока.
Тестируйте интерактивные элементы. Кнопки должны иметь минимальный размер 48x48px для удобного нажатия пальцем, а расстояние между ними – не менее 8px. Проверьте работу форм: поля ввода должны автоматически поднимать клавиатуру на мобильных устройствах, а валидация ошибок – отображаться корректно. Если на странице есть видео, убедитесь, что оно воспроизводится на iOS (где автовоспроизведение заблокировано без звука) и не перекрывает другие элементы при повороте экрана.
Последний этап – проверка в разных ориентациях. Переверните устройство в горизонтальный режим и оцените, как перестраивается контент. В Tilda можно задать отдельные стили для горизонтальной ориентации через медиазапрос @media (orientation: landscape). Если страница содержит таблицы или графики, убедитесь, что они не выходят за границы экрана и остаются читабельными. Для планшетов в горизонтальной ориентации часто требуется уменьшить отступы и увеличить размер шрифтов на 1–2 пункта.
Вопрос-ответ:
Можно ли добавить вторую страницу на сайт в Tilda, если я использую бесплатный тариф?
Да, в Tilda можно добавлять страницы даже на бесплатном тарифе, но с некоторыми ограничениями. В бесплатной версии доступно создание до 50 блоков на весь сайт, а также действует ограничение на количество страниц — обычно не более 2–3 (точное число зависит от текущих условий платформы). Если вам нужно больше страниц, придётся перейти на платный тариф, например, «Personal» или «Business», где таких ограничений нет. Также на бесплатном тарифе на страницах будет отображаться водяной знак Tilda, что может быть неудобно для коммерческих проектов.
Как скопировать уже существующую страницу в Tilda, чтобы не создавать её с нуля?
В Tilda есть удобная функция дублирования страниц, которая экономит время. Чтобы скопировать страницу, зайдите в панель управления сайтом, выберите нужную страницу в списке и нажмите на иконку с тремя точками рядом с её названием. В открывшемся меню выберите пункт «Дублировать». После этого появится новая страница с таким же содержимым и настройками, как у оригинала. Её можно сразу отредактировать: изменить заголовок, URL, добавить или удалить блоки. Это особенно полезно, если вы создаёте несколько похожих страниц, например, для разных товаров или услуг.
Почему после добавления второй страницы она не отображается в меню сайта?
Скорее всего, вы не добавили новую страницу в меню навигации. В Tilda меню настраивается отдельно, и новые страницы не появляются в нём автоматически. Чтобы исправить это, перейдите в раздел «Меню» в панели управления сайтом. Там вы увидите список всех страниц — найдите нужную и поставьте галочку напротив неё. Также можно настроить порядок отображения страниц в меню, перетаскивая их мышью. Если у вас кастомное меню (например, созданное через блок «Меню»), то его нужно редактировать вручную, добавляя ссылку на новую страницу в настройках блока.
Загрузка...
