Разбираемся с элементами навигации сайта и выбираем подходящий блок меню.
Итак, приступаем к созданию меню нашего лэндинга. Для этого идем в каталог блоков, находим вкладку «Меню». Выбираем из появившегося списка подходящий вариант. Возьмем, например блок «МЕ203А» (рис. 1а). Он наиболее информативный и хорошо подходит для демонстрации возможностей. Вы можете реализовать на своем сайте любой другой.
Выбранный блок скорее всего появится под обложкой. Переместим его на самый вверх сайта, где ему и место. Для этого воспользуемся настройками отображения блока, которые находятся в его правом верхнем углу (см. рис. 1б). На этой мини-панели, также можно скрыть блок, копировать, вырезать или удалить его.
Так, меню у нас на месте. Теперь можно адаптировать его под нужды проекта. Заходим в «Контент» и видим несколько вкладок, назначение которых, в принципе, интуитивно понятно. Пройдемся по ним по-порядку.
Открываем «Список пунктов меню». Поскольку у нас не многостраничный сайт, а лэндинг, то пункты меню будут ссылаться на его определенные блоки. Давайте организуем навигацию и продумаем, на какие части страницы будет попадать пользователь при нажатии.
На нашей странице будут следующие тематические блоки:
- О компании;
- Преимущества;
- Услуги;
- Команда;
- Контакты.
Прописываем их названия в соответствующих полях (см. рис. 2а). Чуть позже мы пропишем напротив каждого из них ссылки. Жмем кнопку «Сохранить и закрыть» или лучше «Сохранить» и двигаемся дальше.
Открываем вкладку «Дополнительно». Здесь добавляется информация, которая будет выводиться в левой и правой частях блока. Допустим это будет слоган компании (слева) и номер телефона с email (справа). Вводим свои данные и сохраняемся (см. рис. 2б).
Аналогичным образом добавляем значки и ссылки на социальные сети, если у Вас таковые имеются. Открываем вкладку «Ссылки на соц. сети» и вставляем их в соответствующие поля (см. рис. 2в). Сама ссылка, как мы помним берется из строки браузера. Например открываем ВКонтакте, копируем ссылку (см. рис. 2г) и вставляем ее в поле для VK.
Ну и, наконец, самое главное - ссылки меню. Пока что пункты нашего меню неактивны. Поскольку сайт у нас состоит из одной страницы, то нам нужно сделать так, чтобы ссылки ввели на определенные блоки этой страницы.
Самый простой способ - посмотреть в настройках, ID нужного блока и прописать его в виде "#recID" напротив соответствующего пункта меню, в поле "Ссылка". Нажимаем кнопку "Настройка" (см. рис. 3а) и спускаемся в самый низ. Там будет написан "block id" (см. рис. 3б).
Однако, есть более изящное решение. Им и воспользуемся. Tilda предлагает для подобных целей специальный блок - "Якорная ссылка". Он находится во вкладке "Другое" под номером "Т173" (см. рис. 4а). Выбираем его и идем во вкладку "Контент". Здесь одна единственная настройка - "Имя якорной ссылки".
Рекомендуется давать интуитивное понятные имена ссылок, чтобы потом не запутаться. Например, для блока "О нас" сделать ссылку "about" (см. рис. 4б), для блока с командой - "team" и т.п.
Делаем столько якорных ссылок сколько нужно в проекте. В нашем случае их потребуется 5: "about", "advantage", "services", "team", и "contacts". В дальнейшем мы расположим их НАД соответствующим блоком. Пока у Вас должна получится картина как на рисунке 5 (на сайте их не видно, ведь это не визуальный блок, а, по сути, управляющий).
Теперь возвращаемся во вкладку "Контент" блока меню и прописываем созданные нами якоря. Перед именем якорной ссылки обязательно следует поставить знак "#".
Обратите внимание, что имена ссылок должны совпадать вплоть до символа. Иначе якорь не сработает. Поэтому если имя получилось длинное, то лучше воспользоваться специальным подменю (см. рис. 6а). Нажимаем "Выбрать блок" и кликнув левой кнопкой мыши выбираем его.
В результате у нас должен получиться список пунктов меню с прописанными ссылками (см. рис. 6б). Все! Нажимаем кнопку "Сохранить и закрыть", а затем "Опубликовать".
Естественно, ссылки у нас пока никуда не ведут, поскольку нет самих блоков. Чтобы проверить, все ли у нас получилось, создадим блок "О нас" (заполнять его будем на следующем занятии).
Открываем библиотеку блоков, нажав значок "плюс" ПОД блоком с якорной ссылкой (см. рис 7а). Затем заходим во вкладку "О проекте", и выбираем любой понравившийся вариант блока, например "АВ603" (см. рис. 7б). Далее, публикуем страницу, и открываем ее. Если все сделано правильно, то при нажатии на пункт меню "О компании" мы переместимся к соответствующему блоку.
В принципе, все готово. Добавим лишь финальный штрих - сделаем так, чтобы при нажатии на пункт меню скролл к блоку с якорной ссылкой был не мгновенным, а плавным.
Такая "фишка" реализуется буквально в пару кликов. В Tilda есть целый ряд блоков, называемых модификаторами. Визуально на сайте они не видны, но выполняют определенные функции.
Открываем библиотеку блоков и чтобы не копаться долго в каталоге воспользуемся поиском. Нажмем на значок лупы (верхняя панель библиотеки) и в поисковой строке напишем "плавный" (см. рис. 8). Этого будет достаточно, чтобы нашелся нужный нам блок. Жмем на него. Все, больше ничего делать не нужно. Единственное, лучше сместить его в самый низ страницы.
Нажимаем кнопку "Опубликовать", чтобы изменения вступил в силу. Перезагружаем страницу сайта и проверяем. Теперь при нажатии на пункт меню, мы "поедем" к блоку плавно, а не рывком. Мелочь, а приятно!)
Результат занятия:
Ура! Мы создали полноценное меню, с работающими ссылками, логотипом компании и полезной информацией для посетителей. В следующем уроке наш сайт пополнится блоками "О компании" и "Преимущества".
