uc-feed
vfeedtitle
- Для описаний потока
vfeeddescr
- Для ссылок на страничку потока
vfeedlink
- Для изображений потока
vfeedimg
- Для даты публикации потока
vfeeddate
- Для автора потока
vfeedauthor
- Для изображения автора потока
vfeedauthorimg
- Для числа просмотров потока
vfeedviews
- Для полного текста потока (если нужно отображать полный текст)
vfeedtext
- Для доп элементов потока, которые должны показываться скрываться вместе с карточкой
vfeedextra
- Для кнопки "Показать больше"
vfeedmore
- Для фонового элемента метки раздела потока
vfeedmarkbg
- Для текстового элемента метки раздела потока
vfeedmarktext
vzerofeed
vfeedsection
1. Создай на странице зероблок / зероблоки данные в которых тебе нужно связывать с потоками и задай ему / им любой класс в настройках зеро (он должен начинаться с "uc-"). Например
2. Укажи заданный тобой класс в генераторе
3. Перейди в раздел с твоими потоками (https://feeds.tilda.ru/), скопируй ID своих потоков из ссылки в адресной строке и укажи его в генераторе
- Для названий потока
4. Далее в своих зероблоках / зероблоке создай элементы, которые мы будем синхронизировать и задай им соответствующие классы
Важно: в этот класс в зависимости от того какой тип изображения у тебя в потоке может выводиться как изображение, так и видео или галерея
. Логика должна быть единой для всех - либо всем потокам изображение, либо всем потокам видео и тд. Галерея в отличии от видео и изображения требует чтобы у тебя в зероблоке изначально была создана именно галерея, а не просто shape, как в случае с видео или изображением.
Важно: при клике кнопка будет копировать твой самый нижний блок с указанным классом для синхронизации и вставлять его после текущего блока, после чего обновлять даннные для обоих блоков. Кнопка будет работать только при включенном режиме "опоры на группы" (в настройках генератора).
- сделай соответствующие кнопки для этого переключения и задай им класс:
- Задай кнопке для раздела "все" (она должна быть обязательно) ссылку - #
- Для остальных кнопок сделай ссылки по их ID, которые ты можешь получить в потоках Тильды. Для этого вернись в раздел с твоими потоками (https://feeds.tilda.ru/), выбери нужный тебе раздел и скопируй дополнительный ID в адресной строке. Он будет выглядеть примерно так (см. подсказку слева).
Скопируй этот ID и укажи его как ссылку (начианая с #) для соответствующей кнопки, что должна его включать
5. После этого объедини свои карточки для вывода потоков по группам (в первую группу будет выводиться первый пост из потока, во вторую - второй и тд), задай этой группе тип - Object и назначь этим группам класс
6. Чтобы задать правильный порядок вывода потоков, расположи группы в нужном тебе порядке в слоях (layers), где самый нижний слой будет выводиться первым, а верхний - последним
7. Если тебе нужно переключать разделы потоков, то:
8. Если тебе нужно переключать разделы и в некоторых из них карточек может быть мало, то чтобы не образовывалось пустое пространство на месте скрытых карточек, ты можешь включить в зероблоке автоматическую высоту вот так (см. подсказку слева)
9. Если у тебя должно быть разное число карточек потоков на разных разрешениях (например в пк много, а на мобильном ты не хочешь их все вертикально в узкую колонку под экран телефона выстраивать), то чтобы код понял это и вывел правильное количество карточек, укажи в настройках генератора число карточек к показу на разных разрешениях. Когда указываешь, то сначала пишешь разрешение ДО которого будет применяться это число, а затем пишешь число карточек. Например 480:1,3000:2 выведет на разрешениях 0-480px - 1 карточку, а на разрешениях 480-3000px - 2 карточки и тд.
– Если у тебя наблюдаются проблемы с sbs-анимацией по ховеру, то отключи "выравнивать слайды по центральному" и "сделать слайдер беконечным"
– Всегда делай количество слайдов в сумме больше чем "количество слайдов к показу" иначе слайдеру будет нечего прокручивать
– Нумерация слайдеров идет строго по порядку и начинается с первого, причём первый слайдер на странице должен быть обязательно!
– Фон для слайдов задается через шейп. По умолчанию фон прозрачный.
– При использовании с autoscale настройка "Изменять высоту зеро по высоте слайда" применяться не будет
– При использовании с autoscale включай его ТОЛЬКО в зеро с Html-элементом слайдера, а в самих слайдах не включай, иначе скейл будет задваиваться
– Не указывай никаких значений в "отступ между слайдами", если у тебя к показу только один слайд!
– Fade-эффект будет работать только при "количество слайдов к показу" = 1. Если поставить fade эффект и слайдов к показу = 3, то будет только 1 слайд
– Если используешь выравнивание слайдов по центральному или разрешить свайп больше чем на 1 слайд, то настройка "на сколько слайдов прокручивать за шаг" не будет применяться.
Важно!
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
Отчистить поля
Загрузить сохраненные значения
undefined
Стили кнопки активного раздела
undefined
undefined
Уверенным пользователям, которые каждый день зарабатывают на создании и верстке сайтов
Всё, что во Free и Pro на 1 месяц
и еще:
Pro на 1 год
2 990 ₽
Всё, что во Free
и еще:
У кого пока непрогнозируемая рабочая загрузка и расширение нужно только
в определенное время
Pro на 1 месяц
490 ₽
Для знакомства с сервисом и тестирования бесплатного функционала
Free
Этот мод доступен на PRO тарифе
Приоритетная поддержка
~50 новых модификаций, которые планируем выпустить в течение года
Обновления библиотеки с учетом изменений Tilda
ИИ-помощник с базовыми моделями
Возможность голосовать за новые моды и закрытый чат (скоро)
undefined
~25 Pro-модификаций
Генератор CSS
Распознавание блоков
Показать блоки т123
Автосохранение Zero-блока
Подсветка кода в т123
undefined
undefined
~20 бесплатных модификаций
Темная тема для Tilda
Кнопки быстрой публикации
Настройки меню в редакторе
123Zero Block
000000
000000
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Zero Block
000000
000000
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Zero Block
000000
000000
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.