UP TITLE
Баннер в тильде из зеро блока
Как создать баннер в тильде из зеро блока
Создание привлекательного баннера на сайте — важный шаг в любом бизнесе, стремящемся выделиться в онлайн-пространстве. Один из популярных инструментов для этого — Tilda. А если вам нужна максимальная гибкость и креативность, то использование Зеро Блока в Тильде для создания баннера — отличный выбор. В этой статье мы подробно разберём, как создать баннер в Тильде, используя Зеро Блок, и поделимся полезными советами и рекомендациями.
Как создать баннер в тильде из зеро блока
Как создать сторис в Тильде
Предлагаем вам пошаговую инструкцию по созданию баннера в тильде из зеро блока:
  1. Cоздайте зеро блок в любом месте вашей страницы или в header, если у вас многостраничный тильда сайт
  2. Откройте настройки зеро блока, нажмите на «BLOCK CSS CLASS NAME», в появившемся поле введите класс «uc-banner»
  3. Откройте редактор зеро блока и удалите из него все элементы
  4. Удалите фоновую заливку блока
  5. В поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру «100»
  6. Найдите пункт настроек «POSITION AND OVERFLOW» и в подменю «POSITION» выберите «Fixed»
  7. Создайте ваш баннер любым удобным для вас способом
  8. На баннере создайте элемент, который будет закрывать ваш баннер
  9. Нажмите правой кнопкой мыши на этот элемент и выберите «Add CSS Class Name»
  10. В появившемся поле пропишите класс «close-banner»
  11. ВАЖНО! Все элементы, из которых состоит баннер, включая кнопку закрытия, должны быть добавлены в WINDOW CONTAINER! Для этого нажмите на «+CONTAINER», в подменю «CONTAINER» выберите «Window Container»
  12. «AXIS X» и «AXIS Y» настройте в соответствии с тем, где именно вы хотите расположить баннер. Например, если баннер должен быть расположен в правом нижнем углу, то в «AXIS X» и «AXIS Y» нужно выбрать «Right» и «Bottom»
  13. После того, как настроите ваше баннер, сохраните и закройте зеро блок
  14. После всех блоков на странице или в header создайте html блок «Т123»
  15. Нажмите не кнопку «Контент», скопируйте туда код модификации и опубликуйте страницу
<style>
  .uc-banner {
            height: 100vh !important;
            transition: opacity 0.5s ease-out;
            z-index: 9999999999999999;
        }
    .close-banner {
        cursor: pointer;
        user-select: none;
    }
    .fade-out {
            opacity: 0;
            visibility: hidden;
        }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
            var banner = document.querySelector('.uc-banner');
            var closeButton = document.querySelector('.close-banner');

            if (banner && closeButton) {
                // Проверяем, есть ли в sessionStorage информация о закрытии баннера
                if (sessionStorage.getItem('bannerClosed') === 'true') {
                    banner.classList.add('fade-out');
                }

                // Обработчик события нажатия на кнопку закрытия
                closeButton.addEventListener('click', function() {
                    banner.classList.add('fade-out');

                    // Сохраняем информацию о том, что баннер закрыт
                    sessionStorage.setItem('bannerClosed', 'true');
                });
            } else {
                console.error('Элемент не найден на странице.');
            }
        });
</script>
Создание баннера в Тильде с использованием Зеро Блока — это возможность полностью контролировать внешний вид и функциональность вашего сайта. Зеро Блок предоставляет свободу творчества и позволяет создавать уникальные и привлекательные баннеры, которые помогут вам выделиться среди конкурентов. Воспользуйтесь этим мощным инструментом, чтобы сделать ваш сайт ещё более привлекательным и эффективным!

© Mark Lungrin
Made on
Tilda