NLM095 • Время настройки: 1 минута
Бегущая строка из картинок на Тильде
С помощью данной модификации можно сделать из галереи блока GL11 бегущую строку, с возможностью настройки угла наклона, анимации по скроллу и z-indexа.
Посмотрите, как будет выглядеть модификация на вашем сайте.
Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Смотрите, как быстро установить модификацию
Инструкция
1. Для создания эффекта бегущей строки, необходимо добавить на страницу галерею блока GL11. И загрузить туда необходимые изображения.
2. В генераторе заполняешь поля:
«Настройки для экранов от 640px»:
«Настройки для экранов до 640px»:
Заполняешь следующие поля «Скорость анимации», «Отступ между карточками (рх)», «Высота изображений (рх)», «Ширина изображения (px)», «Смещение сверху (px)» для экранов до 640px.
Дополнительно можно настроить следующие параметры:
3. Копируешь сгенерированный HTML код и вставляешь его в блок Т123.
Имей в виду:
2. В генераторе заполняешь поля:
- «id блока GL11»;
- «Скорость анимации в мобильной версии» — отдельно можно настроить скорость для мобильной версии;
- «Направление движения» — выбираешь необходимое направление;
- «Скругление изображений (рх)» — настройка отвечает за радиус скругления углов изображений;
- «Угол наклона» — угол наклона бегущей строки (может быть отрицательным);
- «z-index блока» — это поле необходимо заполнять в случае, если на странице находится несколько элементов, которые наслаиваются друг на друга (или будут наслаиваться в случае включения настройки «анимация по скроллу»). Чем выше этот параметр тем выше будет находиться элемент по отношению к другим элементам, во время применения эффекта. Соответственно, если ставишь низкое значение, например 1, то бегущая строка будет располагаться под элементами;
«Настройки для экранов от 640px»:
- «Скорость анимации» — данное поле является настройкой скорости движения бегущей строки. В случае, если включаешь настройку «анимация по скроллу», то данная настройка отвечает за скорость движения при скроллинге;
- «Отступ между карточками (рх)» — настройка регулирует расстояние между изображениями;
- «Высота изображений (рх)» — настройка определяет высоту изображений;
- «Ширина изображения (px)» — настройка задает ширину изображений;
- «Смещение сверху (px)» — настройка, которая позволяет сдвинуть бегущую строку выше (если отрицательное значение) или ниже (если не отрицательное значение) позволит наехать на другой блок или под элементы в Зеро блоке (если z-index выставлен);
«Настройки для экранов до 640px»:
Заполняешь следующие поля «Скорость анимации», «Отступ между карточками (рх)», «Высота изображений (рх)», «Ширина изображения (px)», «Смещение сверху (px)» для экранов до 640px.
Дополнительно можно настроить следующие параметры:
- «Анимация по скроллу» — скорость прокрутки для данной настройки можно выставить в поле «Скорость движения»;
- «Останавливать при наведении»;
- «Убирает анимацию в мобилке»;
- «Убрать фоновый отступ» — настройка убирает «фоновый отступ», если есть угол наклона;
- «Включить режим ссылок» — включите настройку для добавления ссылок к изображениям при клике на них. В блоке GL11 в поле «Заголовок изображения при увеличении» добавьте необходимые ссылки. Убедитесь, что увеличение изображения по клику в блоке GL11 отключено.
3. Копируешь сгенерированный HTML код и вставляешь его в блок Т123.
Имей в виду:
- Увеличение изображения по клику настраивается в галерее GL11;
- Ширина блока GL11 должна быть 100%.
Сгенерируйте код для своего сайта
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Бегущая строка Тильда — зачем она нужна и как её использовать правильно
Бегущая строка в Тильде помогает показать больше визуального контента без длинного блока. Логотипы партнёров, фотографии проектов, карточки брендов, отзывы, категории или подборку работ можно пустить в движение и не заставлять пользователя вручную листать галерею.
Модификация NLM095 от Nolim превращает стандартную галерею GL11 в бегущую строку из изображений. Ты загружаешь картинки в привычный блок Тильды, а модификация добавляет движение, направление, отступы, скругления, угол наклона и другие настройки.
Модификация NLM095 от Nolim превращает стандартную галерею GL11 в бегущую строку из изображений. Ты загружаешь картинки в привычный блок Тильды, а модификация добавляет движение, направление, отступы, скругления, угол наклона и другие настройки.
Как установить за 3 минуты
Сначала добавь на страницу галерею GL11 и загрузи в неё изображения. Лучше сразу подготовить картинки в одном стиле: одинаковая высота, близкие пропорции, без лишних мелких деталей.
Затем открой генератор на странице модификации, укажи ID блока GL11, выбери направление движения, скорость, отступ между изображениями, высоту, ширину, скругление и угол наклона. Скопируй готовый код, вставь его в блок T123 и опубликуй страницу.
Затем открой генератор на странице модификации, укажи ID блока GL11, выбери направление движения, скорость, отступ между изображениями, высоту, ширину, скругление и угол наклона. Скопируй готовый код, вставь его в блок T123 и опубликуй страницу.
Где использовать бегущую строку
Бегущая строка хорошо работает в блоках с логотипами клиентов, партнёрами, фотографиями проектов, примерами работ, товарами, категориями, интерьерными кадрами, обложками курсов или брендами. Это удобный способ показать много изображений, но не занимать половину страницы.
Например, на сайте студии можно пустить в строку логотипы клиентов. В интернет-магазине — показать категории или подборку товаров. На странице мероприятия — фотографии спикеров, партнёров или атмосферные кадры.
Например, на сайте студии можно пустить в строку логотипы клиентов. В интернет-магазине — показать категории или подборку товаров. На странице мероприятия — фотографии спикеров, партнёров или атмосферные кадры.
Почему GL11 — удобная база
Плюс модификации в том, что изображения остаются в стандартной галерее Тильды. Их можно заменить, удалить или переставить без правки кода. Ты работаешь с привычным блоком, а эффект бегущей строки добавляется поверх.
Если нужно сделать изображения кликабельными, можно включить режим ссылок. В этом случае ссылки добавляются в поле заголовка изображения в GL11, а увеличение изображения по клику лучше отключить, чтобы действия не конфликтовали.
Если нужно сделать изображения кликабельными, можно включить режим ссылок. В этом случае ссылки добавляются в поле заголовка изображения в GL11, а увеличение изображения по клику лучше отключить, чтобы действия не конфликтовали.
Как не перегрузить страницу
Бегущая строка хорошо привлекает внимание, но её не стоит использовать в каждом втором блоке. Если на странице слишком много движущихся элементов, пользователь перестаёт понимать, что главное.
Лучше использовать одну-две строки на странице: например, одну с логотипами партнёров, вторую — с фотографиями проектов. Скорость движения лучше делать спокойной, чтобы изображения можно было рассмотреть, а не просто увидеть мелькание.
Лучше использовать одну-две строки на странице: например, одну с логотипами партнёров, вторую — с фотографиями проектов. Скорость движения лучше делать спокойной, чтобы изображения можно было рассмотреть, а не просто увидеть мелькание.
Что проверить после публикации
После установки проверь строку на десктопе и мобильной версии. Изображения не должны быть слишком мелкими, обрезаться по важным деталям или наезжать на соседние блоки. Если строка наклонена или частично заходит на другой блок, проверь z-index и смещение сверху.
Отдельно посмотри поведение при наведении и на мобильных устройствах. Если строка отвлекает от чтения, можно уменьшить скорость, отключить анимацию на мобильной версии или использовать более спокойные изображения.
Отдельно посмотри поведение при наведении и на мобильных устройствах. Если строка отвлекает от чтения, можно уменьшить скорость, отключить анимацию на мобильной версии или использовать более спокойные изображения.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Добавь на страницу блок GL11 (галерея) и загрузи в него изображения — логотипы, фотографии, иконки. Открой nolim.cc/images-ticker, в генераторе укажи ID блока GL11, задай скорость и направление прокрутки. Скопируй код и вставь в блок «HTML-код». Бегущая строка на Тильде заработает сразу после публикации.
Да. Модификация NLM095 адаптирована для мобильных экранов: на маленьких устройствах скорость прокрутки автоматически снижается, чтобы пользователь успевал читать/видеть контент. Тач-свайп временно останавливает анимацию.
Да, это один из самых популярных сценариев. Загружаешь логотипы в GL11, настраиваешь бегущую строку из логотипов тильда через генератор Nolim — получаешь классический блок «Нам доверяют». Дополнительно можно настроить паузу при наведении курсора.
Было: агентство перечисляло клиентов текстовым списком — никто не читал.
Стало: добавили бегущую строку тильда с логотипами 15 известных брендов. Посетители стали проводить на странице на 20% дольше, а конверсия в заявку выросла — логотипы как социальное доказательство работают лучше текста.
Стало: добавили бегущую строку тильда с логотипами 15 известных брендов. Посетители стали проводить на странице на 20% дольше, а конверсия в заявку выросла — логотипы как социальное доказательство работают лучше текста.