Как оптимизировать создание многостраничного сайта

Делимся советами и инструментами, которые помогут ускорить работу над многостраничным сайтом на Тильде и сделать её удобнее.
Создание многостраничного сайта и поддержание его в актуальном состоянии — работа, которая требует времени, планирования и системности. В Тильде есть инструменты, которые помогают сделать этот процесс удобнее и тратить меньше ресурсов на обновление всех страниц.

В этой статье поделимся советами о том, как быстрее редактировать контент на многостраничных сайтах и создавать дизайн новых страниц, как поддерживать порядок в проектах и удобнее организовать совместную работу над ними.
Читайте также:
Как создать сайт. Пошаговое руководство
Пять базовых шагов создания сайта, особенности платформы Tilda, ссылки на нужные ресурсы и полезные советы.

Настройка главной навигации сайта

В любом многостраничном сайте есть обязательные блоки и страницы, которые помогают сделать навигацию понятной и удобной: главная страница, меню и подвал сайта, а также страница 404. Они нужны, чтобы зашедший на ваш сайт человек мог легко в нём сориентироваться и быстро найти нужную информацию. В этом разделе рассказываем, что следует учесть при создании этих блоков и страниц сайта, и как настроить их в Тильде.
Назначьте главную страницу сайта, с которой будет начинаться ваш проект
Главная страница — это визитная карточка вашего сайта, которая должна объяснять, что вы предлагаете и чем можете быть полезны зашедшему на сайт человеку. На главной нужно разместить основную информацию, которую вы хотите донести, а за подробностями отправлять пользователя на другие страницы сайта. Например, вы можете добавить блок с отзывами, показать несколько из них и добавить кнопку, которая будет вести на отдельную страницу с остальными отзывами.
В Тильде главная страница назначается в Настройках сайта в разделе «Главная страница».
Главную можно назначить в настройках сайта из списка всех страниц в проекте
Чтобы человек мог попасть на главную с любого раздела сайта, ссылку на неё добавляют в шапку, которую ещё называют «хедер». Ссылку ставят на логотип компании — это устоявшийся паттерн, которому лучше следовать.
Задайте шапку сайта и добавьте меню для удобной навигации (Header)
Хедер — это блок в верхней части страницы. Для всех страниц сайта делают одинаковую шапку, чтобы человеку было удобно ориентироваться в страницах, а владельцу сайты было легче её редактировать. Обычно она состоит из меню — навигации по основным разделам, логотипа, кнопки с призывом к действию. В шапку также можно добавить контактный номер телефона, ссылки на социальные сети и город, в котором находится компания.
Рекомендации по оформлению меню на сайте:
  • Меню должно быть лаконичным и содержать ссылки на основные страницы сайта, чтобы человек мог быстро найти нужный раздел.

  • Пунктов меню не должно быть слишком много. Оптимальное количество — 5 или меньше. Если у вас их больше, можно сделать двухуровневое меню и второстепенные пункты разместить в подразделы основной навигации.

  • Названия пунктов лучше делать из одного ёмкого слова. Например: Портфолио, Цены, Отзывы.

  • Меню не должно быть занимать слишком много места на экране и отвлекать от контента.
Чтобы разместить хедер сразу на всех страницах сайта, нужно создать отдельную страницу, поместить на неё элементы, затем перейти в Настройки сайта → Шапка и подвал и назначить созданную страницу как шапку.
Дизайн меню сайта и применение на практике
Подробный гайд про различным видам меню и как сделать их на Тильде.
Сделайте подвал и дайте ссылки на важные разделы сайта (Footer)
Подвал — это блок в конце сайта, который обычно дублируется на всех страницах. Он может содержать ссылки на страницы сайта, копирайт, контакты и другую важную информацию. Подвал для всех страниц создаётся аналогично хедеру: создайте новую страницу, оформите футер, перейдите Настройки сайта → Шапка и подвал и назначьте эту страницу как подвал (footer).
Какую информацию можно разместить в подвале:
  • Контактные данные. Это могут быть адрес, телефон, электронная почта. Если собрать эту информацию в одном месте, посетитель сайта сможет быстро с вами связаться.

  • Социальные сети. Если вы ведёте социальные сети — добавьте на них ссылки в футер. Так человек сможет познакомиться с вашим контентом, а ваши аккаунты получат новых подписчиков.

  • Ссылки на другие страницы сайта. Не все страницы сайта можно размеcтить в шапке, но их можно вынести в подвал. Это могут ссылки на страницу о компании, блог, вакансии и так далее.

  • Ссылка на политику конфиденциальности. Если вы собираете и обрабатываете данные посетителей сайта, обязательно разместите политику конфиденциальности на отдельной странице и добавьте на неё ссылку в подвал. Для создания политики обработки персональных данных воспользуйтесь конструктором.

  • Информация о разработчике сайта. Если сайт сделан на заказ, работающий над ним дизайнер может добавить в подвал кликабельную ссылку на своё портфолио.

  • Копирайт. В подвале можно разместить знак охраны авторского права ©. Его цель — предупредить о том, кому принадлежат права на материалы, размещённые на сайте, и защитить их от копирования.

  • Чтобы вдохновиться идеями оформления подвала, загляните в галерею #madeontilda или сайт с подборками футеров Footer.
Создайте страницу 404, чтобы сообщить человеку об ошибке
Страница 404 — это страница, которая открывается, если запрашиваемый сайт невозможно найти. Например, вы разместили в социальных сетях ссылку на статью в блоге или на раздел с историей компании, а потом страницу удалили или поменяли её адрес. Если не задать страницу ошибки, пользователь увидит стандартное сообщение в браузере, что такой страницы не существует и просто закроет вкладку. А если попадёт на созданную вами 404 страницу, то с большей вероятностью останется на вашем сайте и получит положительный пользовательский опыт.
Зачем создавать страницу 404:
1
Объяснить, почему появилась ошибка

Расскажите, что случилось и что могло привести к ошибке. Давать полный список возможных причин не нужно — главное, чтобы пользователь понимал, что ничего не сломалось и сайт всё ещё может принести ему пользу.

Текст на экране объясняет, почему не произошла ошибка, а кнопка возвращает пользователя на главную страницу сайта.

https://lobzik.spb.ru/404

2
Поднять настроение

Постарайтесь отвлечь и настроить человека на хороший лад. Например, добавьте забавную фразу и иллюстрацию. Но следите, чтобы смысл всё ещё легко считывался, и посетитель понимал, что это страница ошибки.

Забавное сообщение об ошибке, которое поддерживает тематику сайта — итальянскую пекарню.

https://heymam.ru/404

3
Вернуть человека на сайт

Не забудьте оставить ссылку на главную сайта или возможность выйти в меню, чтобы посетитель мог найти нужную страницу и не покинул сайт.

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

https://online.synchronize.ru/404

В Тильде настроить страницу 404 ошибки можно в несколько кликов: добавьте новую страницу в вашем проекте, оформите её, потом перейдите в «Настройки сайта» → «Еще» → «Страница 404» → выберите нужную страницу из списка, сохраните, а затем опубликуйте все страницы.
Создание новых страниц и их обновление
Многостраничный сайт может состоять из десятков, а иногда и сотен страниц. Если на каждой из них менять контент в блоках и каждый раз с нуля создавать дизайн уйдёт много времени. Чтобы создание каждой страницы и обновление контента происходило быстрее, воспользуйтесь специальными инструментами Тильды. Для контента — alias-блоками, Потоками, блоками из категории Список страниц, а для оформления — единым стилем для ссылок, Моими блоками и Избранным. Ниже рассказываем о каждом из них подробнее.
Используйте Alias-блоки для быстрой замены контента в повторяющихся блоках
Представьте, что у вас есть блоки с одинаковым содержимым на разных страницах и вы хотите регулярно менять их контент. Например, баннер с предложением для новых покупателей, который вы обновляете каждый месяц и показываете на главной и внутренних страницах сайта. Как это сделать без необходимости править блок отдельно для каждой страницы? Поможет Alias-блок T213.
В библиотеке блоков Тильды Alias-блок находится в категории «Другое»
Alias — это точное отображение другого блока. Если внести изменения в оригинальный блок, они сразу отобразятся во всех элиасах этого блока. Это удобно, когда вы хотите добавить регулярно обновляемые блоки, например, расписание или список свежих статей, на несколько страниц сайта. Все изменения нужно будет вносить только один раз в блок-оригинал.
Как настроить Alias в Тильде:
1
Добавьте блок, который нужно будет отобразить на нескольких страницах. Он может быть в любом месте сайта.
2
Найдите в самом низу настроек этого блока ID — уникальный идентификатор, при помощи которого Alias связывается с оригинальным блоком. Скопируйте его.
3
Там, где должна быть копия блока, разместите блок Т213 из категории «Другое». В контенте Alias-блока вставьте скопированный ранее ID.
4
Теперь при внесении изменений в оригинальный блок, они будут применяться и к Alias-блоку. Таких дубликатов может быть любое количество, изменения будут применяться ко всем. Не забудьте опубликовать страницы после внесения изменений.
Задайте один стиль ссылок, чтобы не оформлять каждую отдельно
Задавать стиль для каждой ссылки на сайте неудобно, особенно когда их много. Чтобы не делать этого вручную, настройте внешний вид всех ссылок в Настройках сайта. Одинаковое оформление подчеркнёт аккуратность и внимание к деталям. Вы можете указать толщину и цвет подчёркивания, цвет ссылок и подчёркивания при наведении. Раньше ссылки в вебе выделялись голубым цветом и подчёркиванием. Сейчас на это можно не ориентироваться — выбирайте оформление, которое сочетается с дизайном вашего сайта.

Где найти: Настройки сайта → Шрифты и цвета → Цвета → Дополнительные настройки
Сохраняйте и переиспользуйте блоки со своим дизайном, чтобы ускорить создание страниц
Если на разных страницах сайта вы используете блоки с одинаковым дизайном и придерживаетесь единого стиля, используйте функцию «Мои блоки». Она позволяет создать свою дизайн-систему, сократить время на дизайн блоков и быстрее создавать новые страницы сайта.

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

Она работает так: вы добавляете на страницу базовый или нулевой блок, редактируете его, затем нужно перейти в Настройки блока и нажать «Добавить блок в библиотеку». После этого в библиотеке появится новая категория «Мои блоки», где будут храниться блоки с вашим собственным дизайном.
Добавляйте блоки в избранное для быстрого доступа к ним
Чтобы при создании новых страниц не приходилось долго искать часто используемые блоги, можно сохранять их в специальной категории — «Избранное». Для этого найдите блок в библиотеке, наведите курсор на правый верхний угол и нажмите на иконку со звёздочкой. После этого в библиотеке появится отдельная категория с вашей подборкой блоков.

Собственные подборки можно создавать отдельно для каждого проекта. Это позволит содержать Избранное в порядке и сэкономить время на поиск нужного блока.
Сохранённые блоки хранятся в браузере. Поэтому для доступа к ним используйте тот браузер, в котором вы добавляли блоки в Избранное.
Используйте относительные ссылки, чтобы при смене домена не пришлось их все обновлять
Добавляя на страницу ссылку на другой раздел сайта, лучше использовать относительные ссылки. Так, если изменится домен сайта, ссылки останутся рабочими и вам не придётся их менять. В относительной ссылке указывается не полный адрес страницы, а только путь к странице без домена.
Например, https://tilda.education/articles-no-code — это абсолютная ссылка, а /articles-no-code – относительная.
Попробуйте Потоки для быстрой вёрстки статей и постов
Часто на многостраничных сайтов компаний создаются блоги с экспертными статьями. Это не только хорошо сказывается на SEO, но и повышает доверие посетителей сайта. Для создания постов в блоге удобно использовать Потоки. Это специальный блочный редактор, в котором можно быстро добавлять нужные элементы, например, текст и изображения, видео. Такой процесс вёрстки ускоряет выпуск постов и позволяет создать аккуратную статью даже без опыта дизайна.

Вывести готовые тексты на нужные страницы сайта можно, используя блоки из категории «Новости и потоки». Так вам не придётся на каждой странице добавлять новые посты: они будут обновляться автоматически.

На посты в Потоках не распространяется ограничение, которое действует для всех сайтов на Тильде — 500 страниц в проекте. А значит, вы сможете написать столько статей, сколько нужно для ваших целей.
Используйте блоки из категории «Список страниц» для быстрого добавления ссылок на другие разделы сайта
Блоки из этой категории позволяют отображать ссылки на страницы сайта в одном месте. Это может пригодиться, например, для сайта-портфолио, когда нужно на главную страницу добавить ссылки на описание кейсов, или для многостраничного сайта школы английского языка, чтобы перечислить доступные курсы с активными ссылками на них. Если сделать это с помощью «Списка страниц» вам не придётся добавлять фотографии, название и описание для ссылки вручную: оно подтянется автоматически из настроек добавляемых страниц. А если вы поменяете эти данные, например, зададите другое название или изображение, они также обновятся в используемом блоке.

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

Подробную инструкцию на настройке блоков читайте в статье Справочного центра «Блоки из категории «Список страниц».
Страницы, которые нужно отобразить в блоке, выбираются из общего списка всех страниц
Наведение порядка в проекте
Если сайт состоит из большого количества страниц, ориентироваться в них может быть сложно. Например, можно случайно опубликовать черновой вариант или удалить что-нибудь важное. Рассказываем, что поможет ориентироваться в проекте, держать его в порядке и легко находить нужные страницы.
Включите продвинутый режим страниц, чтобы ориентироваться в проекте было удобно
В личном кабинете Тильды для удобной работы в проектах с большим количеством страниц можно включить «Продвинутый режим страниц». В этом режиме доступны дополнительные функции, которые помогают сделать работу со страницами в проекте удобнее: поиск, сортировка, редактирование название страницы и url-адреса, а также массовые действия со страницами, например, удаление, публикация или перенос в папку. А если в вашем проекте более 100 страниц, включится пагинация по 100.
Подвигайте ползунок, чтобы сравнить, как выглядит отображение страниц проекта в обычном режиме и продвинутом.
Баннер с предложением активировать продвинутый режим появляется, если проект состоит из 20 страниц и больше. Отключить настройку можно через Профиль → Включить продвинутый режим интерфейса.
Упрощайте навигацию по страницам сайта внутри личного кабинета Тильды
Чтобы в проекте многостраничного сайта было легче ориентироваться, воспользуйтесь инструментами личного кабинета для упорядочивания страниц: лейблами, комментариями и папками
1
Лейблы

Это теги для страниц, которые видны только в Тильде. С их помощью удобно фильтровать и выделять страницы. В лейблах можно указывать стадии работы над проектом — в работе, прототип, опубликовано — или цель страницы: запись на мероприятие, подписка на рассылку и так далее. Лейбл кликабелен: если нажать на него, отобразятся все страницы с таким тегом. Чтобы задать его, перейдите в Настройки страницы → Дополнительно.
2
Комментарии

Комментарии нужны для более подробных пометок, которые отображаются только в личном кабинете. Их можно оставлять для себя или для клиента, если вы делаете сайт на заказ. Например, написать, каких блоков на странице не хватает или что нужно ещё доработать. Комментарии задаются также в настройках страницы.
3
Папки

Помогают сгруппировать страницы сайта. Чтобы создать папку, зайдите в Настройки страницы → Дополнительно и нажмите «Создать новую папку». В папку можно поместить все страницы, кроме главной, Header и Footer.
Переносите черновики страниц в архивную папку, чтобы случайно их не опубликовать
Архивная папка нужна для страниц сайта, которые не планируются к публикации. Она может пригодиться в случаях, когда нужно переопубликовать все страницы сайта и при этом пропустить черновые страницы. Для этого вы можете поместить их в отдельную папку и пометить её как архивную.
Страницы из архивной папки не публикуются
Перемещайтесь между страницами через хедер в редакторе
Когда вы редактируете страницу сайта и хотите перейти на следующую, воспользуйтесь выпадающим списком в шапке редактора. Там же можно переименовать текущую страницу, добавить новую, воспользоваться поиском или перейти в настройки любой из страниц. Так вам не нужно будет выходить из режима редактирования и тратить время на перемещение между разделами личного кабинета.
Через выпадающий список можно перейти к нужной странице, создать новую и открыть окно с настройками
Совместная работа над сайтом
Иногда над сайтом может работать не один человек, а несколько. Например, дизайнер создаёт страницы и настраивает их внешний вид, а копирайтер правит тексты в блоках. В таком случае могут пригодиться две функции Тильды — «Сотрудники» и комментарии к блокам. Давайте разберём, зачем они нужны.
Подключите функцию «Сотрудники», чтобы дать доступ к проекту нескольким людям
Если над сайтом будут работать несколько человек с разных аккаунтов — предоставьте им доступ к проекту с помощью функции «Сотрудники». Для каждого аккаунта можно настраивать права доступа. Например, разрешать вносить изменения в проект, но не публиковать их. Это также будет полезно для безопасности: если человек перестает работать на проекте, доступ можно отозвать без смены пароля в основном аккаунте.
Функция добавления сотрудников к проекту находится в Настройках сайта → Сотрудники
Используйте комментарии к блокам, чтобы оставить заметки для команды
Для каждого блока на странице можно оставлять комментарии. Это пригодится, например, если необходимо объяснить, почему блок скрыт, и оставить для себя или для команды сообщение. Написать комментарий и отметить его как «выполненный» может любой человек, у которого есть доступ к проекту.
Полезные материалы тех, кто хочет больше узнать про создание сайтов

Автор: Анастасия Степанова

Иллюстрации, дизайн и верстка: Мария Слабуха

Читайте также:
Бесплатный онлайн курс, который научит создавать эффективные посадочные страницы
Курс, который научит вас продвигать свой сайт
Теоретический курс Никиты Обухова по веб-дизайну
Бесплатный учебник по веб-анимации с примерами и правилами использования