Как найти кнопку тильда

Как сделать навигацию
на сайте удобной

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

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

Сделать меню навигации для сайта лаконичным

Меню — один из главных инструментов навигации на сайте. Его удобство будет критическим.

При создании меню старайтесь использовать не более 4−5 пунктов и в целом не перегружать его большим количеством элементов. Если пунктов меню все-таки получается много, как вариант, можно использовать меню «гамбургер».

Поставить ссылку на главную страницу на логотип

Пункт «Главная» в меню — это пережитки навигации сайта 90-х. Вместо этого сделайте кликабельный логотип.

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

Кстати, чтобы на Тильде сделать ссылку на главную страницу, достаточно поставить просто косую черту (/) вместо полного адреса в настройках блока.

Сделать меню на одностраничном сайте

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

Если информации много, добавьте меню с ссылками на разделы страницы — это упростит навигацию.

Чтобы сделать на Тильде меню с ссылками на разные блоки внутри страницы, в настройках контента меню пропишите в ссылках номера этих блоков (номер каждого блока указан в его настройках), либо используйте якорные ссылки.

Зафиксировать меню

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

Для того, чтобы сделать фиксированное меню в настройках блока в разделе «Основные настройки» выберите вариант позиционирования меню «Фиксация при скролле».

Выделить активный пункт меню для постраничной навигации

Меню может показывать в каком разделе сайта находится пользователь, выделяя пункт, который относится к данному разделу.

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

Такие же настройки можно применить и для пункта меню, на который наведена мышь. Не стоит переусердствовать, пункт меню достаточно выделить одним или двумя параметрами.

Добавить индикаторы (точки) для определения местоположения

Индикаторы в виде точек не отвлекают внимание от контента, но подсказывают в какой части страницы находится посетитель.

На Тильде у таких навигаторов есть также всплывающая подсказка с названиями разделов для удобной навигации по сайту . Блок находится в категории «Меню» под номером ME604.

Показать процесс загрузки и прокрутки страницы

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

На Тильде блок индикатора находится в категории «Другое» под номером Т228. Чтобы индикатор работал, разместите блок в самом верху страницы.

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

Индикатор прокрутки страницы — очень наглядный пример навигации. Он подсказывает, в каком месте страницы находится пользователь, и загружается по мере прокрутки страницы вниз. Использовать индикатор прокрутки страницы есть смысл, когда длина страницы превышает 3−4 экрана.

Чтобы добавить индикатор прокрутки на Тильде, используйте блок T333 из категории «Другое». В настройках блока можно задать цвет и толщину индикатора.

Выделить кнопку с более важным действием

Из двух соседних кнопок более важная должна визуально выделяться.

Обычно первая кнопка целевого действия страницы, например — «Записаться на мероприятие», «Купить курс», «Посетить первый урок бесплатно». Вторая кнопка менее значительна, в большинстве случаев это ссылка на дополнительную информацию: «Подробнее», «О нас», «Как это работает».

Самое простое — использовать яркий цвет для фона кнопки. Она должна быть контрастной по отношению к кнопке меньшего значения. Для второй кнопки достаточно использовать цветной бордюр без заливки, либо фон нейтрального цвета.

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

Скрыть часть контента

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

Хороший прием — написать на кнопке какое именно количество элементов, она скрывает.

Скрыть часть контента можно несколькими способами:

Кнопка «Показать еще». Она находится в разделе «Форма и кнопка» под номером BF703.

Текст в раскрывающихся блоках. Отличный вариант для длинных списков с услугами или ответами на вопросы. Его можно найти в разделе «Текстовый блок» под номером TX16.

Вкладки с раскрывающимся контентом. Находятся в разделе «Меню» под номерами ME602 и ME603. Эти блоки позволяют создавать на странице несколько вкладок и показывать разный контент по клику на соотвествующую вкладку в рамках одной страницы.

Добавить кнопку навигации «Наверх»

Кнопка «Наверх» помогает пользователю из любого места страницы быстро попасть в ее начало.

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

В Тильде блок с кнопкой «Наверх» находится в разделе «Форма и кнопка» под номером BF702.

Проследить, чтобы в конце страницы не было «тупика»

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

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

Задать понятный URL адрес страницы

URL (Uniform Resource Locator) — это единообразный адрес, указывающий путь к интернет ресурсу. Иными словами, это ссылка, которая отображается в адресной строке браузера.

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

Для понятных упорядоченных URL адресов существует термин ЧПУ (человекопонятный URL). ЧПУ состоит из понятных пользователю слов, а не из системного адреса (в Тильде системный адрес страницы будет выглядеть, например, так: /page4652188.html).

Первая часть (https://) показывает метод, который используется для получения доступа к интернет ресурсу. Протокол HTTP используется чаще всего.

Вторая часть адреса — это имя вашего домена, адрес, по которому сайт можно найти в сети. Если сайт многостраничный, www.mysite.com будет адресом главной страницы, все остальные разделы и подразделы по порядку прибавляются к адресу через косую черту.

Если это одностраничный лендинг с разделами, лучше использовать якорные ссылки с понятными названиями, например #about или #contacts, так как они тоже отображаются в адресной строке.

Адрес страницы в Тильде можно поменять в разделе «Настройки страницы». Если вы хотите использовать несколько слов в адресе страницы, прописывайте их через дефис «-» либо через символ подчеркивания «_». Например, /about-us или /our_works.

«Хлебные крошки» (навигационная цепочка) — это навигационный элемент, который помогает пользователю отслеживать свой путь перемещения по сайту.

Обычно они располагаются в начале страницы и показывают путь от главной страницы к разделам сайта. Все пункты навигационной цепочки являются ссылками из предыдущего раздела.

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

Главная страница > Раздел сайта > Подраздел сайта > Страница

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

Для того, чтобы сделать путь из хлебных крошек на Тильде, достаточно добавить на страницу блок ME605 «Хлебные крошки» из раздела «Меню». Разместить его можно, например, под обложкой. В контенте блока пропишите названия пунктов и проставьте ссылки на соответствующие страницы. Блок можно копировать из одной страницы и вставлять в другую, добавляя по одному новому пункту навигационной цепочки.

Подведем итоги

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

Акцентируйте внимание пользователя на значимых кнопках. Сделайте их ярче и задайте дополнительные настройки для анимации кнопки при наведении мышью.

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

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

Кнопка «Наверх» поможет пользователю быстро вернуться в начало страницы. Используйте ее на страницах с большим количеством контента для удобной навигации на сайте.

Избегайте «тупика» в конце страницы. Предложите пользователю просмотреть похожие материалы по теме страницы либо установите ссылки, которые ведут на главную, следующую или предыдущую страницы.

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

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

Текст: Ира Смирнова и Юлия Засс
Иллюстрации, дизайн и верстка: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо!

• →
• →

Как сделать поиск в Тильде

Рассмотрим все блоки с поиском, а также покажу, как сделать красивый поиск в Zero-block

Время чтения статьи около 7 минут.
Также, после статьи, есть подробная видеоинструкция

УСЛУГИ

Блоки для реализации поиска

До недавнего времени, реализовать поиск на Tilda Publishing, который вписывался в дизайн сайта и выглядел нормально, было очень сложно. Учитывая, что сам поиск на сайтах реализуют в шапке сайта.

И выбора особо не было, как кодом реализовывать поиск, который будет нормально смотреться.
Но Тильда выкатила отличный блок с поиском, который закрывает большинство потребностей разработчиков на Tilda. Поэтому начнем с него.

1-й блок T985

Сейчас в Тильде появился отличный блок для поиска, который находится в разделе «Другое —> Блок T985»
Этот блок поиска открывается в pop-up (всплывающем) окне.
Самое прикольное, что мы можем этот блок открывать по ссылке, а ссылку можем эту повесить на любой элемент на странице, где можно дать ссылку.

Еще одна из фичей этого блока, то что можно сделать подсказки возле окна поиска. Для этого в блоке для подсказок, через запятую перечисляем нужные нам запросы. Особенно это полезно для SEO-продвижения сайта

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

Какие настройки у этого блока есть:

1. Выбрать где осуществлять поиск по сайту, есть 4 варианта: по всему сайту, по каталогу, по страницам и по постам (эти настройки есть у всех блоков с поиском)
2. Мы можем настроить стиль иконки и ее расположение, а также детально настроить для мобильной верстки. Эта настройка нужна, если вы будете использовать стандартную (встроенную) кнопку для открытия поиска
3. Можем изменить стиль самого поля для поиска. Задать скругление углов, настроить цвет обводки, фона, текста и тд.
4. В дополнительных настройках, мы можем задать сколько результатов будет отображаться на странице и отключить стандартную иконку поиска в этом блоке. Эта галочка нужна только тогда, когда вы хотите сделать, чтобы окно поиска открывалось только по заданной ссылке на каком то элементе

2-й блок T838

Самый простой, но и от этого топорный блок. В стандартной тильдовской реализации, его использовать на сайте очень сложно. Куда можно вписать такой огромный блок с полем и кнопкой?
Ну точно не в меню. Либо нужно знать css и попробовать его как-то стилизовать.

Единственная вариация его применения, где более-менее он бы смотрелся, это наложить его на зеро блок. Но до этого, тоже не каждый додумался бы.
Про этот способ я говорил в серии видео «Создание интернет-магазина на Тильде с нуля»

В контенте блока мы можем только задать «Подсказку для поля поиска» и текст для кнопки. Кстати, если вам не нужна кнопка поиска, то можно ее убрать, удалив текст из этого поля.

Какие есть настройки:

1. Где искать (по всему сайту, по каталогу, по страницам и по постам)
2. Задать ширину блока
3. Задать отступ слева
4. Немного настроек стиля, это цвет бордюра, фона, текста, радиус скругления и цвет иконки
5. И стилизовать кнопку «Искать»

3-й блок ME901

Этот блок находится не в разделе «Другое», а в разделе «Меню», в самом низу, просто потому, что он находится в блоке для навигации. 
Этот блок относительно неплох (не в плане поиска, а плане реализации меню для сайта), но у него есть один жирный минус.

Есть у него особенность, этот блок раскрывается при ширине экрана более 1500 пикселей, а в свернутом виде он в бургере, при ширине, меньше 1500 px. Из-за этой особенности, возникает конфликт с другими блоками из категории «Меню». Ну и выглядит сама страница с развернутым меню странновато, из-за больших отступов по краям слева и справа

Что есть у него в Контенте:

• Только «Подсказка значения в поле ввода поиска»

Теперь по настройкам:

1. Как и во всех поисках, это где искать
2. Можно отключить/включить сам поиск в этом блоке
3. Стилизовать поле для ввода — только нижний бордюр
4. Так как самой кнопки «Найти» нет, то и отсутствует настройка стилей для кнопки

А теперь самое интересное
Кастомный поиск для Zero block

Что мы сделаем?
Мы возьмем блок Т838 (2-й блок), настроим и стилизуем его, как нам надо, потом с помощью строчки скрипта, перенесем его в нужное нам место в зеро блоке

Также я приложу css стили, для дополнительных стилистических возможностей

Я показываю, как я выношу поиск в шапку сайта, между лого и номером телефона, вы же можете выбрать любое место на сайте

Приступаем

1. Для начала в зеро блоке, где хотим сделать наш поиск, создаем новый слой, для этого нажимаем слева на плюсик и выбираем «Add HTML»
2. Два раза жмем на этот слой, открывается код, удаляем все оттуда и вставляем вот этот код:

<div class = "searchinput"></div>

3. Устанавливаем левый верхний край там, где хотим, чтобы начинался наш блок с поиском, на скрине у меня на 4 колонке с небольшим отступом от верхнего края. Ширину этого слоя не регулируем, это сделаем через настройки блока поиска Т838
4. Нажимаем Save и выходим
5. Добавляем ниже блок Т 838 из раздела Другое
6. Убираем отступы сверху и снизу, а также убираем отступ от левого края, устанавливаем ширину блока (на скрине это 4 колонки), настраиваем стиль для поля и кнопки (если она будет)
7. Добавляем ниже блок Т123 html-код
8. В контент блока добавляем вот такой код:

<style>
    /*Настройки для кнопок*/
    .t838 .t-submit {
    /*Отступ слева и справа*/    
    padding-left: 20px !important;
    padding-right: 20px !important;
    /*Высота кнопки*/
    height: 40px  !important;
    }
    
    .t838 .t-input {
    /*Высота поля ввода*/
    height: 40px !important;
    }
</style>


<script>
$( document ).ready(function() {
    //Перемещаем блок с поиском в Zero
    $("#rec477940719").appendTo(".searchinput");
});
</script>

9. В строке 21, меняем #rec477940719 на id блока T838. Для этого идем в настройки блока, листаем в самый низ и там последняя строка Block id: и копируем его начиная с решетки
10. Сохраняем и опубликовываем страницу.
11. Если все работает, то идем в наш Зеро блок и настраиваем адаптацию поиска под все разрешения. На мобилках (все про мобильную адаптацию), я обычно этот слой скрываю, на его место, ставлю иконку поиска и ставлю ссылку на блок с поиском, блок №1 в этой статье
12. Чтобы результаты поиска выводились, а не скрывались за другим слоем, нам надо зайти в настройки Zero блока, где у нас поиск и поставить Overflow — Visible.
13. Идем в настройки сайта => Еще => Ставим галочку «Разрешить внутренний поиск по сайту (для блоков T838, T985, ME901)» Иначе поиск работать не будет

ВАЖНО!!! Все изменения будут видны, только на опубликованной странице

Какие настройки стиля есть в этом коде

1. padding-left и padding-right — это отступы в кнопках от края текста. Если у вас нет кнопки Найти, то эта настройка вам не нужна
2. height — здесь задается высота поля/кнопки. Там подписано для какого элемента задается

Код №1

Этот код добавляем в Зеро блок в то место, где должен быть поиск

<div class = "searchinput"></div>

Код №2

Этот код добавляем в блок T123

<style>
    /*Настройки для кнопок*/
    .t838 .t-submit {
    /*Отступ слева и справа*/    
    padding-left: 20px !important;
    padding-right: 20px !important;
    /*Высота кнопки*/
    height: 40px  !important;
    }
    
    .t838 .t-input {
    /*Высота поля ввода*/
    height: 40px !important;
    }
</style>


<script>
$( document ).ready(function() {
    //Перемещаем блок с поиском в Zero
    $("#rec477940719").appendTo(".searchinput");
});
</script>

Комментарии к статье

Подпишитесь на новинки