Как выполнить показ скрытых блоков нажатием на кнопку в Tilda publishing

Введение

Показ скрытых блоков в Tilda Publishing.

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

Что такое скрытые блоки в Tilda Publishing.

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

Как скрыть блок в Tilda Publishing.

В Tilda Publishing можно скрыть любой блок. Сейчас мы рассмотрим это на конкретном примере.

Итак, для того, чтобы скрыть блок в тильде, выполните следующие шаги:

1. Нажмите на кнопку «+», чтобы добавить блок.
2. В открывшемся меню выберите «Zero Block».
3. Зайдите в редактор зеро блока, нажмите на кнопку «+» и выберите Add Button.
4. Нажмите правой кнопкой мыши на кнопку и выберите пункт add css class name.
5. В соответствующем поле придумайте и введите class name для вашей кнопки. (Пример: show_block).
6. Сохраните изменения и выйдите из zero block.
7. Нажмите на кнопку «+» и добавьте блок, который вы хотите скрыть. Это может быть как стандартный блок, так и zero block.
8. Зайдите в настройки добавленного блока, пролистайте в самый низ и нажмите на пункт add css class name.
9. Придумайте и введите class name, но помните, что в этом случае перед вашим class name необходимо прописать «uc-». (Пример: uc-hidden_block).
10. Сохраните изменения в блоке.

Подготовительные шаги выполнены. Теперь необходимо добавить html блок. Для этого:

1. В конце всех блоков вашей страницы нажмите на кнопку «+», найдите пункт «Другое» и выберите «HTML блок».
2. Нажмите на кнопку «Контент». Вы попадете в среду разработки.
3. Скопируйте туда следующий код:

<script>
//Скрываем блок
$(document).ready(function() {
$('.uc-hidden_block').hide();
});
</script>

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

Как реализовать показ скрытых блоков в Tilda Publishing при нажатии на кнопку.

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

1. Перейдите в «Контент» html блока.
2. Скопируйте следующий кусок кода и вставьте сразу после фрагмента (« $(‘.uc-hidden_block’).hide(); »):

//Выполняем проверку и, в результате проверки, скрываем или показываем блок при клике на кнопку
$('.show_block').click(function() {
	If($('.uc-hidden_block').is(':visible')) {
		$('.uc-hidden_block').fadeOut('slow');
} else {
		$('.uc-hidden_block').fadeIn('slow');
}
});

Финальный скрипт будет выглядеть следующим образом:

<script>
        //Скрываем блок
        $(document).ready(function() {
            $('.uc-hidden_block').hide();
        //Выполняем проверку и, в результате проверки, скрываем или показываем блок при клике на кнопку    
        $('.show_block').click(function() {
	        if($('.uc-hidden_block').is(':visible')) {
		        $('.uc-hidden_block').fadeOut('slow');
            } else {
		        $('.uc-hidden_block').fadeIn('slow');
            }
            });
        });
</script>

Корректное отображение изображений в скрытом блоке.

Если вы скрыли стандартный блок с галереей или с содержанием любых других изображений, то после отображения этого блока, вы обнаружите, что изображения отображаются плохо либо вовсе не отображаются. Чтобы это исправить, необходимо у тех изображений, которые находятся в скрываемом блоке, отключить функцию «ленивой загрузки», то есть «lazy load».

Как отключить lazy load без конвертирования в zero block.

У конкретных изображений lazy load можно отключить только в zero block. Но что делать, если есть необходимость отключить эту функцию у картинки, которая находится в стандартном блоке? Есть только один способ. Заминка в том, что этот способ отключит lazy load не только у определенной картинки, но и на всей странице.

1. Зайдите в настройки сайта.
2. Спуститесь в самый низ и выберите пункт «Ещё».
3. Поставьте галочку рядом с пунктом «Выключить Lazy Load изображений».

Как стилизовать кнопку, выполняющую показ скрытых блоков в Tilda.

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

1. Перейдите в html блок.
2. Скопируйте и вставьте следующий код до или после скрипта, обернутого в теги <script></script>:

<style>
   .show_block {
       cursor: pointer; //Изменяем курсор при наведении на кнопку
       background-color: linear-gradient(90.04deg, #41F271 1.98%, #1D9884 107.88%); //Добавляем кнопке градиентный фон
   }
</style>

Заключение.

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

Следуя нашим простым инструкциям, вы можете легко добавлять и настраивать скрытые блоки на своем сайте в Tilda.

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

Узнайте как сделать своё избранное в tilda и добавить его в zero block в нашей статье или на YouTube канале.

Важно!

Обязательно прочитайте инструкцию по установке модификации.
Она может отличаться от инструкции из видео!