UP TITLE
Приветственное окно в зеро блоке при загрузке тильда сайта
Введение
Приветственное окно в зеро блоке при загрузке Tilda сайта – это инновационный способ привлечения внимания посетителей с самого первого момента. В этой статье мы поделимся с вами модификацией для тильды, которая будет показывать приветственное окно вашим посетителям при первой загрузке вашего сайта. Благодаря нашему скрипту вы сможете настроить время, в течение которого будет показываться приветственное окно. Как это работает, и почему это важно для вашего веб-ресурса? Давайте разберемся.
Зачем нужно приветственное окно в зеро блоке
Первое впечатление имеет огромное значение, особенно в виртуальном мире. Приветственное окно в zero block помогает создать положительное впечатление, мгновенно заинтересовывая посетителя и подталкивая к дальнейшему взаимодействию. Кроме того, приветственные окна используются очень редко. В большинстве случаев пользователь сразу попадает на главную страницу сайта. Наличие приветственного окна сделает вашего посетителя лояльным изначально, что сильно повлияет на конверсию вашего тильда сайта.
Приветственное окно в зеро блоке. Шаг за шагом
Для того, чтобы создать приветственное окно, вам понадобится всего лишь tilda zero block и ваша фантазия. В этом примере мы будем использовать видео фон, поверх которого будет анимированный текст:
  1. Создайте zero block
  2. Нажмите на кнопку «Редактировать блок», удалите стандартное наполнение и фоновую заливку
  3. В поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру 100
  4. Нажмите на кнопку «+» и выберите «Add Video»
  5. В настройках видео элемента в поле «TYPE» выберите «MP4»
  6. В поле «VIDEO URL» вставьте ссылку на ваше видео
  7. Получить ссылку на любой файл можно с помощью нашего расширения для браузеров, которое загружает ваши файлы в облачное хранилище и генерирует прямые ссылки на эти файлы
  8. Для параметра «AUTOPLAY» выберите свойство «Autoplay»
  9. Для параметра «CONTROLS» выберите «Hide»
  10. Для параметра «OBJECT FIT» выберите «Cover»
  11. Видео элемент разместите в «Window Container» и задайте ему 100 процентную ширину и высоту
  12. Добавьте текстовые элементы и анимируйте их с помощью базовой или пошаговой анимации
  13. В настройках блока найдите пункт «POSITION AND OVERFLOW»
  14. Для параметра «POSITION» выберите «Fixed»
  15. В «Z-INDEX» пропишите «999999999»
  16. Сохраните изменения и закройте зеро блок
  17. Откройте настройки зеро блока и присвойте ему класс «uc-welcome-block»
  18. После всех блоков на странице создайте html блок «Т123» и скопируйте в него код модификации:
<style>
    .uc-welcome-block { 
       display: none;
    }
</style>
 <script>
        document.addEventListener('DOMContentLoaded', function() {
            var sessionShown = sessionStorage.getItem('sessionShown');

            if (!sessionShown) {
                var loadingBlock = document.querySelector('.uc-welcome-block');
                loadingBlock.style.display = 'block';

                setTimeout(function() {
                    loadingBlock.style.transition = 'opacity 1s ease-in-out';
                    loadingBlock.style.opacity = '0';

                    setTimeout(function() {
                        loadingBlock.style.display = 'none';
                    }, 1000); // Скорость исчезновения блока

                    sessionStorage.setItem('sessionShown', 'true');
                }, 6000); // Длительность показа в милисекундах
            }
        });
    </script>
Заключение
Приветственные окна на Тильде – это не просто декорация, а мощный инструмент для привлечения, удержания внимания и улучшения пользовательского опыта. Их внедрение может стать ключевым шагом к успеху вашего онлайн-проекта.
Часто задаваемые вопросы
Часто задаваемые вопросы
  1. Какова основная цель приветственного окна?
  • Привлечение внимания посетителей и создание положительного первого впечатления.
  1. Могу ли я настроить приветственное окно без технических навыков?
  • Да, настройка приветственного окна на Тильде довольно проста и доступна даже без специальных знаний.
  1. Как приветственное окно влияет на SEO-позиции сайта?
  • Приветственные окна могут улучшить взаимодействие с сайтом, что может положительно сказаться на его позициях в поисковых системах.
  1. Как часто следует обновлять приветственное окно?
  • Регулярное тестирование и обновление приветственного окна помогут поддерживать его эффективность и актуальность.
  1. Могут ли приветственные окна повлиять на конверсию?
  • Да, правильно спроектированное и настроенное приветственное окно может увеличить конверсию и удержание аудитории на сайте.

© Mark Lungrin
Made on
Tilda