Настройка видимости блоков на странице
Используйте настройки видимости на сайте или в уроках, чтобы показывать или скрывать блоки в зависимости от категорий пользователей, типов устройств, времени и других параметров. Каждый пользователь будет видеть версию страницы, предназначенную именно для него.
Посмотрите, как настроить видимость блоков, в коротком видео:
В статье:
- Как настроить видимость блоков в новом конструкторе
- Как настроить видимость блоков в старом конструкторе
Ссылка на это место страницы: #nastrojka-vidimosti-blokov-v-novom-konstruktore
Как настроить видимость блоков в новом конструкторе
Настройки видимости доступны для блоков:
- на страницах сайта;
- в блоге;
- в уроках типа «Визуальный конструктор» или «Видеоурок».
Важно! Не используйте настройку видимости блоков в виджетах. Из-за ужесточения браузерами политики по межсайтовому взаимодействию корректная работа этого функционала в виджетах не гарантируется.
С помощью условий вы можете как показывать, так и скрывать блоки от разных категорий пользователей или в зависимости от типа устройств, времени и других параметров.
Например, у вас есть два предложения: со скидкой и без нее. Предложение со скидкой могут купить те, кто уже что-то покупал ранее. Для этого нужно добавить на страницу две формы с разными предложениями и показывать форму со скидкой одному сегменту, а предложение без скидки скрыть от этого сегмента.
Ниже в статье разберем подробнее, как работает каждое условие.
Условия видимости/скрытия блоков:
Любой — блок виден (скрыт) для любого пользователя.
Авторизован — блок виден (скрыт) только для авторизованных пользователей, гостям блок будет доступен.
Не авторизован — блок виден (скрыт) от гостей и виден только авторизованным пользователям.
Является покупателем — блок виден (скрыт) от тех пользователей, у кого есть Покупка.
Не является покупателем — блок виден (скрыт) от тех пользователей, кто еще не имеет Покупки.
Эл. адрес подтвержден — блок виден (скрыт) для пользователей с подтвержденным эл.адресом.
Эл. адрес не подтвержден — блок виден (скрыт) для пользователей с неподтвержденным эл.адресом.
Администратор — блок виден (скрыт) только для администраторов.
Сотрудник — блок виден (скрыт) только для сотрудников.
В группе — блок виден (скрыт) пользователям, которые состоят в определенной группе. Группу можно выбрать только одну.
Если необходимо выбрать несколько групп, воспользуйтесь условием «В сегменте».
В сегменте — блок виден (скрыт) пользователям определенного сегмента.
Смотрит через приложение — блок виден (скрыт) пользователям, если они просматривают его в мобильном приложении GetCourse.
В стране — блок виден (скрыт) для пользователей определенной страны. Страна пользователя определяется по IP-геолокации.
Как снять страницу с публикации?
Чтобы снять с публикации отдельную страницу, вам нужно зайти в «Настройки страницы» → «Дополнительно» → нажать кнопку «Снять»:
Похожие вопросы
- Как добавить ссылку на конкретное место на странице (якорь)?
- Как добавить кнопку?
- Как добавить свой HTML, CSS или Javascript-код?
- Как сделать всплывающее окно?
- Как добавить видео?
Этот ответ был вам полезен?
Просмотры: 22851
Сообщить о нарушении прав
Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму
Как связаться с поддержкой
Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc
Как скрыть блок в Тильде?
Возможны различные ситуации, когда нам необходимо скрыть определенную секцию, или блок, на сайте:
- блок находится пока в разработке;
- блок должен отображаться только на определенных разрешениях экрана;
- сайт находится в стадии тестирования и пока не ясно, нужен ли на нем определенный блок или его стоит удалить;
- другие ситуации.
Если что-то не получается, напишите мне, я помогу. Ситуации бывают разные, все их описать просто невозможно.
Как скрыть блок на Тильде совсем?
Переходим в режим редактирования страницы Тильды, наводим курсором мыши на нужный блок, появляется меню (выделено красным на рисунке ниже):
В этом меню есть кнопка ВКЛ/ВЫКЛ (выделено синим на рисунке выше).
С помощью этой кнопки происходит скрытие блока Тильды с экрана на опубликованном сайте.
При этом блок остается на странице, но он скрыт:
В любой момент можно его активировать и продолжить работу над ним. Все, что было сделано в блоке до этого, сохранится.
Достаточно снова навести курсором на блок, воспользоваться верхним правым меню, кнопкой ВКЛ/ВЫКЛ:
Не забываем, чтобы применились те или иные изменения на странице, ее необходимо опубликовывать:
Следующий вариант:
Как скрыть блок Тильды для определенных разрешений экранов, имеющихся в настройках Тильды?
Скрыть блок Тильды для конкретных экранов устройств, например, для мобильных, можно, изменив соответствующий параметр на вкладке НАСТРОЙКИ для конкретного блока:
Диапазон видимости на устройствах
Здесь достаточно просто подвигать ползунки в необходимое положение (выделено синим на рисунке выше), определяющее в каком диапазоне ширины экрана блок будет отображаться на сайте.
В примере ниже мы скрыли блок для экранов мобильных устройств шириной от 0 до 320 пикселей:
Информация о том, на каких экранах будет отображаться блок, доступна в верхнем левом меню конкретного блока при наведении на него курсора мыши:
Как видите, все довольно просто.
В том случае, если нам достаточно указать предусмотренные Тильдой брейк-пойнты (точки перехода от одного экрана к другому):
- 320 пикселей,
- 480 пикселей,
- 640 пикселей,
- 980 пикселей,
- 1200 пикселей.
Обратимся в таком случае к пользовательскому коду!
Как скрыть блок Тильды для любых нестандартных разрешений экранов, не предусмотренных настройками Тильды?
Многое, что невозможно сделать с помощью стандартных настроек Тильды, мы сделаем с помощью пользовательского кода, в том числе в данном конкретном случае.
Добавим на страницу блок T123 HTML-код, если еще не добавлен.
Допустим, наш блок необходимо отобразить на экранах разрешения от 600 до 1000 пикселей (пример условный).
- от 0 до 599 пикселей
- от 1001 пикселя и выше
Напишем в блок Т123 код:
@media screen and (min-width: 1001px)#rec339649170 display: none;>
>
@media screen and (max-width: 599px) #rec339649170 display: none;>
>
где #rec339649170 — это id нашего блока, который можно найти на вкладке НАСТРОЙКИ блока, в самом низу.
Опубликуем изменения, переходим на страницу и видим, что на мониторе ПК (более 1000 пикселей) наш блок не отображается:
С помощью инструментов разработчика поменяем ширину экрана — менее 1000 px. Наш блок появится:
Продолжим уменьшать ширину блока до диапазона менее 600px. Блок снова исчезнет:
Таким образом, мы смогли отобразить блок Тильды на тех разрешениях экрана, которые нам были нужны, хоть эти размеры и не были предусмотрены стандартными настройками Тильды.
Надеюсь, пост помог Вам в решении Ваших задач.
Если что-то не получилось, напишите мне, я помогу. Ситуации бывают разные, все их описать просто невозможно.
Желаю Вам удачи в Вашем творчестве! 😉
Как сделать навигацию
на сайте удобной
Рассказываем, как помочь пользователю легко ориентироваться с помощью навигации по сайту. Статья будет полезна дизайнерам, предпринимателям и маркетологам, которые хотят создать удобный сайт самостоятельно. Поможет в этом продуманная навигация по сайту.
Мы рассмотрим 13 способов улучшения навигации на сайте с помощью простых инструментов за минимальное количество времени. В Тильде есть много готовых блоков с элементами навигации, из которых можно выбрать наиболее подходящий для вашего проекта вариант.
Сделать меню навигации для сайта лаконичным
Меню — один из главных инструментов навигации на сайте. Его удобство будет критическим.
При создании меню старайтесь использовать не более 4−5 пунктов и в целом не перегружать его большим количеством элементов. Если пунктов меню все-таки получается много, как вариант, можно использовать меню «гамбургер».
Советы и инструкции по дизайну удобного меню сайта
sistersbakery.ru
www.linelo.ru
fyrclothes.tilda.ws/story01
Поставить ссылку на главную страницу на логотип
Пункт «Главная» в меню — это пережитки навигации сайта 90-х. Вместо этого сделайте кликабельный логотип.
Сейчас уже сложилась устойчивая модель: при клике на логотип происходит переход в начало главной страницы. Поэтому смело удаляйте «Главная» из меню и не забывайте добавить ссылку для логотипа.
Кстати, чтобы на Тильде сделать ссылку на главную страницу, достаточно поставить просто косую черту (/) вместо полного адреса в настройках блока.
Слеш ( / ) в поле «ссылка» будет вести на первый экран главной страницы сайта.
Сделать меню на одностраничном сайте
Меню также может быть навигатором внутри одной страницы, когда вы делаете лендинг или лонгрид.
Если информации много, добавьте меню с ссылками на разделы страницы — это упростит навигацию.
Чтобы сделать на Тильде меню с ссылками на разные блоки внутри страницы, в настройках контента меню пропишите в ссылках номера этих блоков (номер каждого блока указан в его настройках), либо используйте якорные ссылки.
Якоря и ссылки внутри страницы
Зафиксировать меню
Чтобы посетитель в любой момент мог найти нужный раздел, можно сделать фиксированное меню — оно всегда будет оставаться в поле зрения при скролле. Такая навигация для сайта будет хорошим решением.
Для того, чтобы сделать фиксированное меню в настройках блока в разделе «Основные настройки» выберите вариант позиционирования меню «Фиксация при скролле».
Выделить активный пункт меню для постраничной навигации
Меню может показывать в каком разделе сайта находится пользователь, выделяя пункт, который относится к данному разделу.
В настройках Тильды можно установить дополнительные параметры отображения активного пункта меню. Есть несколько вариантов выделения активного пункта меню: можно изменить его насыщенность, непрозрачность и цвет. Кроме того, активный пункт меню можно подчеркнуть или зачеркнуть.
Такие же настройки можно применить и для пункта меню, на который наведена мышь. Не стоит переусердствовать, пункт меню достаточно выделить одним или двумя параметрами.
Добавить индикаторы (точки) для определения местоположения
Индикаторы в виде точек не отвлекают внимание от контента, но подсказывают в какой части страницы находится посетитель.
На Тильде у таких навигаторов есть также всплывающая подсказка с названиями разделов для удобной навигации по сайту . Блок находится в категории «Меню» под номером ME604.
Показать процесс загрузки и прокрутки страницы
Анимация загрузки страницы подскажет пользователю, что процесс идет, и контент загружается.
На Тильде блок индикатора находится в категории «Другое» под номером Т228. Чтобы индикатор работал, разместите блок в самом верху страницы.
В настройках блока можно задать цвет индикатора загрузки. Лучше использовать цвет, который будет выделяться на фоне контента и не сольется с цветом меню или обложки.
Индикатор прокрутки страницы — очень наглядный пример навигации. Он подсказывает, в каком месте страницы находится пользователь, и загружается по мере прокрутки страницы вниз. Использовать индикатор прокрутки страницы есть смысл, когда длина страницы превышает 3−4 экрана.
Чтобы добавить индикатор прокрутки на Тильде, используйте блок T333 из категории «Другое». В настройках блока можно задать цвет и толщину индикатора.
Выделить кнопку с более важным действием
Из двух соседних кнопок более важная должна визуально выделяться.
Обычно первая кнопка целевого действия страницы, например — «Записаться на мероприятие», «Купить курс», «Посетить первый урок бесплатно». Вторая кнопка менее значительна, в большинстве случаев это ссылка на дополнительную информацию: «Подробнее», «О нас», «Как это работает».
Самое простое — использовать яркий цвет для фона кнопки. Она должна быть контрастной по отношению к кнопке меньшего значения. Для второй кнопки достаточно использовать цветной бордюр без заливки, либо фон нейтрального цвета.
Помимо настроек стиля кнопок в Тильде есть дополнительные настройки, где можно отрегулировать стиль кнопки при наведении на нее мышью. В настройках можно указать цвет кнопки, бордюра, поменять насыщенность, цвет и шрифт текста, а также добавить тень и отрегулировать скорость анимации при наведении.