Скрыть блоки / элементы для неавторизованных / авторизованных пользователей
Чтобы отобразить ту или иную информацию для залогиненных пользователей, необходимо размещать страницу в группе личного кабинета. Но бывают случаи, когда для неавторизованных пользователей нужно показать один блок или элемент, а для авторизованных другой, при чём всё это на одной и той же странице.
- Выберите, хотите ли вы скрывать или совсем удалять блоки или элементы. Если просто скрывать, то в коде можно увидеть скрытые блоки и посмотреть содержимое.
- Через запятую напишите ID или классы блоков или элементов, которые необходимо скрывать для неавторизованных пользователей.
- Также через запятую укажите ID или классы блоков или элементов, которые необходимо скрывать для авторизованных пользователей.
- Разместите полученный код в блоке T123 в самом низу страницы.
Как скрыть блок в Тильде?
Возможны различные ситуации, когда нам необходимо скрыть определенную секцию, или блок, на сайте:
- блок находится пока в разработке;
- блок должен отображаться только на определенных разрешениях экрана;
- сайт находится в стадии тестирования и пока не ясно, нужен ли на нем определенный блок или его стоит удалить;
- другие ситуации.
Если что-то не получается, напишите мне, я помогу. Ситуации бывают разные, все их описать просто невозможно.
Как скрыть блок на Тильде совсем?
Переходим в режим редактирования страницы Тильды, наводим курсором мыши на нужный блок, появляется меню (выделено красным на рисунке ниже):
В этом меню есть кнопка ВКЛ/ВЫКЛ (выделено синим на рисунке выше).
С помощью этой кнопки происходит скрытие блока Тильды с экрана на опубликованном сайте.
При этом блок остается на странице, но он скрыт:
В любой момент можно его активировать и продолжить работу над ним. Все, что было сделано в блоке до этого, сохранится.
Достаточно снова навести курсором на блок, воспользоваться верхним правым меню, кнопкой ВКЛ/ВЫКЛ:
Не забываем, чтобы применились те или иные изменения на странице, ее необходимо опубликовывать:
Следующий вариант:
Как скрыть блок Тильды для определенных разрешений экранов, имеющихся в настройках Тильды?
Скрыть блок Тильды для конкретных экранов устройств, например, для мобильных, можно, изменив соответствующий параметр на вкладке НАСТРОЙКИ для конкретного блока:
Диапазон видимости на устройствах
Здесь достаточно просто подвигать ползунки в необходимое положение (выделено синим на рисунке выше), определяющее в каком диапазоне ширины экрана блок будет отображаться на сайте.
В примере ниже мы скрыли блок для экранов мобильных устройств шириной от 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. Блок снова исчезнет:
Таким образом, мы смогли отобразить блок Тильды на тех разрешениях экрана, которые нам были нужны, хоть эти размеры и не были предусмотрены стандартными настройками Тильды.
Надеюсь, пост помог Вам в решении Ваших задач.
Если что-то не получилось, напишите мне, я помогу. Ситуации бывают разные, все их описать просто невозможно.
Желаю Вам удачи в Вашем творчестве! 😉
Как сделать показ скрытых блоков по клику на любую кнопку или ссылку в Tilda
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
Связаться с нами
Задать вопрос
Купить шаблон
Стоимость 400 руб
Вы получаете данный пример на свой аккаунт в Тильда, сможете редактировать и изменять его под свои задачи
(доступно для аккаунтов Tilda Personal и выше)
Заказать установку примера
Стоимость услуги от 3000 руб
Вы можете заказать интеграцию данного примера, его модификацию под свои задачи, комбинацию для другой модификации или разработку кастомного решения.
Как скрыть блок через определенное время
Задача: на сайте выведен элемент, к примеру сообщение, через некоторое время нужно его срыть. Сделать такой прием можно с помощью JS таймера setTimeout() .
В JQuery всё проще – есть метод delay() , который выполняет задержку анимации для методов slideUp() , fadeOut() или hide() .
Скрытие динамически добавленных элементов
В случае если сообщения выводятся динамически, то лучше применить функцию, которая будет выводить и срывать элементы независимо друг от друга.
Потребуется пустой контейнер :
В него будут помещается сообщения, и удаляться через 3 секунды.
function set_message(text) < var $item = $(''); $item.appendTo($('.message-box')).delay(3000).slideUp(200, function()< $item.remove(); >); >
$('.btn-1').click(function()< set_message('This is an awesome message!'); >); $('.btn-2').click(function()< set_message('I agree that your message is awesome!'); >);
Предыдущая запись