Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>22 окт 2021</li>

3 <li>0</li>

4 </ul>Настройка внутренних и внешних ссылок, переключение языков и мобильная версия.

5 Веб-дизайнер. Помогает бизнесу создавать эффектные и удобные сайты на Tilda.

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

7 Рассказываем, как с помощью инструментов Tilda сделать и настроить полноценное меню для вашего сайта.

8 Чтобы правильно настроить меню, сначала создадим страницу и несколько стандартных блоков.

9 Как создать страницу с базовыми блоками

10 <ul><li>Зайдите в настройки своего сайта на Tilda и нажмите кнопку "Создать новую страницу". В появившемся окне выберите "Пустая страница".</li>

11 <li>Внутри самой страницы нажмите на чёрную кнопку "Все блоки" и добавьте любые из них. Например: "Обложка", "О проекте", "Преимущества" и "Контакты".</li>

12 </ul>Изображение: Skillbox MediaСтраница готова. Теперь нужно её минимально настроить, чтобы будущее меню работало:

13 1. В правом верхнем углу нажмите на кнопку "Настройки".

14 2. Дайте название страницы и укажите её URL. Например, "Атриксис" и index.

15 Изображение: Skillbox MediaЕсли на вашем сайте только одна страница, она по умолчанию будет главной - около неё появится иконка с . В таком случае достаточно указать только имя.

16 3. Нажмите кнопку "Сохранить".

17 Изображение: Skillbox Media1. Нажмите на чёрную кнопку "Все блоки" и выберите подходящее меню в соответствующей вкладке. Например, МЕ201. Если меню появилось не вверху страницы, переместить его можно с помощью стрелки ↑.

18 Если вы знаете номер конкретного блока и не хотите долго искать его по категориям, его можно ввести в поиск в левом верхнем углу библиотеки блоков.

19 Изображение: Skillbox Media2. Наведите курсор на ваше меню и нажмите кнопку "Контент".

20 3. В появившемся окне откройте "Список пунктов меню" и укажите названия ваших блоков из главной страницы. Чтобы пунктов было больше трёх, нажмите на кнопку "Добавить пункты меню".

21 4. Если вам нужно поменять пункты меню местами, зажмите правой кнопкой мыши иконку и тяните её вверх или вниз.

22 5. Нажмите кнопку "Сохранить и закрыть".

23 Изображение: Skillbox MediaЧтобы меню работало, нужно привязать каждый пункт к конкретному блоку:

24 <ul><li>Наведите мышку на ваше меню, нажмите кнопку "Контент" и откройте список пунктов меню.</li>

25 <li>Наведите курсор на любой пункт меню и под правым полем нажмите на "Выбрать блок".</li>

26 <li>Выберите на сайте нужный блок.</li>

27 <li>В меню появится новая строка с хештегом # в начале - это ссылка на выбранный вами пункт меню.</li>

28 </ul>Пункт "Блог" будет вести на отдельную страницу, поэтому пока ничего здесь не выбирайте.

29 Изображение: Skillbox MediaЕсли на вашем сайте есть отдельная страница блога, важно добавить на неё ссылку в меню, иначе её никто не найдёт.

30 Чтобы научиться это делать, создайте ещё одну страницу на сайте:

31 <ul><li>В редакторе главной страницы в левом верхнем углу около названия сайта нажмите на иконку . В появившемся меню выберите "Создать новую страницу".</li>

32 <li>В появившемся редакторе страницы выберите пустую и нажмите на кнопку "Все блоки".</li>

33 <li>Выберите любой блок из категории "Новости и потоки", например FD101.</li>

34 <li>Чтобы переименовать страницу, нажмите на кнопку "Настройки" в правом верхнем углу. Затем укажите в названии "Блог", а в URL - blog. Сохраните изменения и опубликуйте страницу.</li>

35 </ul>Изображение: Skillbox MediaВернитесь на главную и откройте редактор меню. В строке "Блог" нажмите "Выбрать страницу", укажите свою страницу с блогом и сохраните её.

36 Изображение: Skillbox MediaОбратите внимание на разный синтаксис. Если ссылка из меню ведёт на блок внутри той же страницы, она прописана через хештег - #rec. Если на другую страницу, то через слеш - /blog.

37 Ссылку на другую страницу можно указать самостоятельно - просто напишите её адрес в соответствующем поле. Но в таком случае не нужно указывать её полный путь, иначе при смене доменного имени этот пункт работать не будет. Например, вместо mywebsite.com/blog нужно указать просто /blog.

38 Если у вас многостраничный сайт, то лучше сделать меню на отдельной странице и прикрепить его ко всем остальным. Тогда все изменения в меню будут автоматически применяться везде и вам не придётся постоянно всё корректировать.

39 <ul><li>Создайте новую страницу и выберите нужное меню. Например, ME204.</li>

40 <li>Пропишите в настройках страницы название и URL - header.</li>

41 <li>Наведите мышку на ваше меню и нажмите кнопку "Контент".</li>

42 <li>В появившемся окне откройте "Список пунктов меню" и укажите названия страниц, на которые будет вести меню.</li>

43 <li>У каждого пункта меню нажмите "Выбрать страницу" и выберите её.</li>

44 <li>Сохраните и опубликуйте страницу.</li>

45 </ul>Изображение: Skillbox MediaКак привязать меню сразу ко всем страницам

46 <ul><li>Перейдите в настройки сайта.</li>

47 <li>Откройте вкладку "Шапка и подвал".</li>

48 <li>Выберите в графе "Назначить шапку" страницу header.</li>

49 <li>Сохраните изменения.</li>

50 </ul>Изображение: Skillbox MediaТеперь в самом низу списка страниц сайта появился отдельный блок "Шапка и подвал", где лежит ваше меню. Его можно отредактировать в любой момент:

51 Изображение: Skillbox MediaЕсли нужно сделать так, чтобы это меню не отображалось на какой-то конкретной странице, то можно её отключить.

52 <ul><li>Перейдите в настройки страницы, где не должно показываться общее меню.</li>

53 <li>Зайдите в "Настройки" этой страницы в правом верхнем углу.</li>

54 <li>Перейдите во вкладку "Дополнительно".</li>

55 <li>Поставьте галку напротив пункта "Не использовать шапку на этой странице".</li>

56 <li>Сохраните изменения.</li>

57 </ul>Изображение: Skillbox MediaЕсли вы планируете делать сайт на двух языках, то нужно установить специальное меню, чтобы пользователи могли самостоятельно переключаться между разными версиями.

58 Меню, которые поддерживают смену языков: ME204, ME301, ME302, ME303, ME304, ME401, ME402, ME403.

59 <ul><li>Создайте страницу и добавьте меню с несколькими языками. Например, МЕ303.</li>

60 <li>Наведите курсор на блок с меню и нажмите кнопку "Контент".</li>

61 <li>Перейдите во вкладку "Языки" и укажите нужные, например Ru и En.</li>

62 <li>Прикрепите ссылки на соответствующие страницы: /ru и /en.</li>

63 <li>Сохраните изменения.</li>

64 <li>Перейдите в настройки страницы.</li>

65 <li>Укажите URL - ru.</li>

66 <li>Сохраните изменения.</li>

67 </ul>Изображение: Skillbox MediaЧтобы не перевёрстывать страницу под нужный язык, сделайте её дубликат и затем просто перепишите текст:

68 <ul><li>Зайдите в "Настройки" в правом верхнем углу страницы.</li>

69 <li>Выберите пункт "Действия".</li>

70 <li>Выберите "Дублировать страницу".</li>

71 <li>Перейдите на новую страницу.</li>

72 <li>Измените текст страницы с одного языка на другой (например, с русского на английский).</li>

73 <li>Зайдите в "Настройки".</li>

74 <li>Измените название страницы и URL. Например, напишите Food travel и en.</li>

75 <li>Сохраните и опубликуйте страницу.</li>

76 </ul>Изображение: Skillbox MediaТакой метод подойдёт для одностраничного сайта, так как вы будете переключаться между разными страницами. Для многостраничного сайта лучше сделать разные версии на разных доменах:

77 Изображение: Skillbox MediaЕсли вам не нравится, как выглядит стандартная мобилизация вашего меню, то его можно заменить. Например, можно сделать, чтобы в десктопной версии стояло меню ME204, а на мобильных экранах - ME401.

78 В Tilda есть возможность показывать блоки на экранах определённой ширины, а на других скрывать. С помощью этой особенности и нужно настроить дополнительное мобильное меню.

79 <ul><li>Выберите в библиотеке блоков нужное меню. Например, ME401.</li>

80 <li>Укажите в нём те же ссылки на блоки и страницы, что и в главном меню.</li>

81 <li>Наведите курсор на блок с главным меню и нажмите на "Настройки".</li>

82 <li>Настройте этому блоку диапазон видимости "больше 980 px".</li>

83 <li>Сохраните изменения.</li>

84 <li>Наведите мышку на блок меню для мобильных экранов и нажмите на "Настройки".</li>

85 <li>Настройте диапазон видимости "до 980 px".</li>

86 <li>Сохраните изменения.</li>

87 </ul>Теперь на телефонах и планшетах будет отображаться менюME401, а на больших мониторах - меню ME204.

88 Важно поставить одинаковые значения "от" и "до", чтобы на всех разрешениях экрана всегда отображалось нужное вам меню.

89 <a>Курс с трудоустройством: "Профессия Веб-дизайнер" Узнать о курсе</a>