Скрипт слайдера
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Инфо блок для импорта слайдера
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Инфо блок для импорта аккордеона
Скрипт табов
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки табов перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент табов, кнопка настроек появится на панели инструментов справа.
Инфо блок для импорта табов
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
Всё под рукой
Все необходимые функции в одном месте — быстро и без лишних действий
Подробнее
Лёгкий старт
Начните использовать сервис за пару минут без сложных настроек
Подробнее
Удобный интерфейс
Продуманный дизайн помогает сосредоточиться на главном
Подробнее
Быстро и эффективно
Экономьте время с помощью оптимизированных процессов
Подробнее
Скрипт слайдера
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Обычный слайдер flex: slider_main
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
Всё под рукой
Все необходимые функции в одном месте — быстро и без лишних действий
Подробнее
Лёгкий старт
Начните использовать сервис за пару минут без сложных настроек
Подробнее
Удобный интерфейс
Продуманный дизайн помогает сосредоточиться на главном
Подробнее
Быстро и эффективно
Экономьте время с помощью оптимизированных процессов
Подробнее
Скрипт слайдера
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Обычный слайдер flex+components: slider_main
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
Всё под рукой
Все необходимые функции в одном месте — быстро и без лишних действий
Подробнее
Лёгкий старт
Начните использовать сервис за пару минут без сложных настроек
Подробнее
Удобный интерфейс
Продуманный дизайн помогает сосредоточиться на главном
Подробнее
Быстро и эффективно
Экономьте время с помощью оптимизированных процессов
Подробнее
Скрипт слайдера
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Обычный слайдер+инструкция: slider_main
Страницы (точки), укажите их стиль в настройках в HTML слайдера:
  • 1 — basic. Базовый стиль – для Shape меняется прозрачность точки. Если задать точку с помощью Button можно гибко настроить вид неактивной и активной точки (состояние Hover кнопки). Если задать в кнопке цифру - включится автоматическая нумерация страниц.
  • 2 — capsule. Капсула – точка текущей страницы отличается по ширине и прозрачности. Поддерживается Shape и Button
  • 3 — scale. Машстаб – точка текущей страницы отличается по масштабу. Поддерживается Shape и Button
  • 4 — custom. Свой стиль. Нарисуйте две точки рядом и задайте им стиль dot. Первая точка – неактивная, вторая точка – текущая. Если у вас сложная точка, объедините все элементы одной точки точки в одну группу (отдельная группа для активной и отдельная для неактивной) и задайте группам класс dot.
Красная рамка — область слайдера, сколько карточек попадает в нее, столько и будет одновременно видно в режимах fade, grow, space. Можно менять количество видимых карточек на разных брейкпоинтах. Если задать этому контейнеру (tf_slider) параметр overlow hidden, содержимое слайдера будет обрезаться по этой рамке. При публикации рамка будет скрыта.
  1. Создай карточки для слайдера и объедини содержимое каждой карточки в отдельную группу типа Object.
  2. Задай каждой карточке класс slide.
  3. Объедини все карточки в одну общую группу типа Object, включи у нее AutoLayout и задай класс tf_slider.
  4. Направление AutoLayout у tf_slider задает тип слайдера: горизонтальный или вертикальный.
  5. Настрой gap между карточками и размер видимой области tf_slider. Сколько карточек помещается в эту область, столько и будет видно одновременно.
  6. Если на разных брейкпоинтах должно быть разное количество карточек, меняй размер tf_slider отдельно для каждого брейкпоинта.
  7. Для кнопки «назад» задай класс tf_slider-prev, для кнопки «вперед» задай tf_slider-next.
  8. Для текущего номера страницы используй tf_slider-current, для общего количества страниц используй tf_slider-total.
  9. Если делаешь стрелки и нумератор, их можно расположить где удобно относительно слайдера: рядом, сверху, снизу или в разных частях блока.
  10. Если нужны точки, нарисуй рядом неактивную и активную точки, если используешь для точек Shape, или сделай точку кнопкой и задай ей свойство Hover для активного состояния через набор компонентов. После этого задай каждой точке класс dot, объедини их в общий контейнер с AutoLayout и задай ему класс tf_slider-dots.
  11. Если в одном Zero Block несколько слайдеров, используй общий суффикс у всех связанных классов. Например: tf_slider-1, tf_slider-prev-1, tf_slider-next-1, tf_slider-dots-1, tf_slider-current-1, tf_slider-total-1. Для следующего слайдера используй -2, -3 и так далее.
  12. Настрой слайдер через панель настроек.
Скрипт слайдера
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Конфиг+инструкция: slider_main
  1. Создайте карточки для слайдера, для этого объедините содержимое карточек в группы типа Object.
  2. Задайте каждой карточке класс slide
  3. Объедините все карточки в одну группу типа Object и задайте ей свойство Autolayout и присвойте класс tf_slider
  4. Настройте gap (расстояние между карточками) и ширину видимой части слайдера tf_slider (красная рамка). Сколько карточек попадет в эту ширину, столько и будет одновременно видимы.
  5. За счет изменения ширины tf_slider вы можете настроить разное количество карточек на разных брейкпоинтах.
  6. Задайте классы для кнопок слайдера: для кнопки «назад» tf_slider-prev, для кнопки «вперед» tf_slider-next
  7. Для счетчика текущей страницы слайдера задайте класс у текстового поля tf_current, для счетчика общего количества страниц задайте класс tf_total
  8. Добавьте точки (страницы), присвойте им класс dot
  9. Объедините точки в общую группу, задайте ей свойство Autolayout
  10. Все элементы навигации можно располагать в разных частях экрана, или удалить, если не нужны (оставить только стрелки)
  11. Если в одном Зероблоке больше чем один слайдер, последующим слайдерам задавайте имя
  • Слайдер: tf_slider-1
  • Кнопки: tf_slider-prev-1, tf_slider-next-1
  • Точки: tf_slider-dots-1
  • Счетчики: tf_current-1, tf_total-1
  • Для второго/третьего слайдера: tf_slider-2, tf_slider-3 и т.д.
12. Настройте параметры слайдера в HTML блоке
Скрипт слайдера
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Конфиг слайдера: slider_config
Скрипт слайдера
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
Всё под рукой
Все необходимые функции в одном месте — быстро и без лишних действий
Подробнее
Лёгкий старт
Начните использовать сервис за пару минут без сложных настроек
Подробнее
Удобный интерфейс
Продуманный дизайн помогает сосредоточиться на главном
Подробнее
Быстро и эффективно
Экономьте время с помощью оптимизированных процессов
Подробнее
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
Всё под рукой
Все необходимые функции в одном месте — быстро и без лишних действий
Подробнее
1
/
1
Слайдер одностраничный: slider_config
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
Аккордеон на flex: slider_config
  1. Создай отдельную группу типа Object для заголовка и задай ей класс tf_accordion-header.
  2. Создай отдельную группу типа Object для контента и задай ей класс tf_accordion-content.
  3. Объедини заголовок и контент в один общий контейнер пункта и расположи их друг под другом.
  4. Если открытому пункту нужен свой фон, цвет или подложка, заверни такой контейнер в еще одну группу типа Object.
  5. Собери все такие контейнеры в один общий контейнер (группу) и задай ему класс tf_accordion.
  6. Если нужна стрелка, добавь ее в заголовок и задай ей класс tf_accordion-arrow. Вместо отдельной стрелки можно использовать любую кнопку внутри заголовка: скрипт автоматически будет воспринимать иконку этой кнопки как стрелку.
  7. Если в одном Zero Block несколько аккордеонов, задай каждому root уникальный класс, например tf_accordion-1, tf_accordion-2 и так далее.
  8. Если нужна ручная настройка параметров, выдели HTML-блок аккордеона или сам аккордеон и открой кнопку настроек на панели Tildify Elements.
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Аккордеон на обычных группах: slider_config
  1. Создай отдельную группу типа Object для заголовка и задай ей класс tf_accordion-header.
  2. Создай отдельную группу типа Object для контента и задай ей класс tf_accordion-content.
  3. Объедини заголовок и контент в один общий контейнер пункта и расположи их друг под другом.
  4. Если открытому пункту нужен свой фон, цвет или подложка, заверни такой контейнер в еще одну группу типа Object.
  5. Собери все такие контейнеры в один общий контейнер (группу) и задай ему класс tf_accordion.
  6. Если нужна стрелка, добавь ее в заголовок и задай ей класс tf_accordion-arrow. Вместо отдельной стрелки можно использовать любую кнопку внутри заголовка: скрипт автоматически будет воспринимать иконку этой кнопки как стрелку.
  7. Если в одном Zero Block несколько аккордеонов, задай каждому root уникальный класс, например tf_accordion-1, tf_accordion-2 и так далее.
  8. Если нужна ручная настройка параметров, выдели HTML-блок аккордеона или сам аккордеон и открой кнопку настроек на панели Tildify Elements.
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Аккордеон конфиг+инструкция: slider_config
  1. Создай отдельную группу типа Object для заголовка и задай ей класс tf_accordion-header.
  2. Создай отдельную группу типа Object для контента и задай ей класс tf_accordion-content.
  3. Объедини заголовок и контент в один общий контейнер пункта и расположи их друг под другом.
  4. Если открытому пункту нужен свой фон, цвет или подложка, заверни такой контейнер в еще одну группу типа Object.
  5. Собери все такие контейнеры в один общий контейнер (группу) и задай ему класс tf_accordion.
  6. Если нужна стрелка, добавь ее в заголовок и задай ей класс tf_accordion-arrow. Вместо отдельной стрелки можно использовать любую кнопку внутри заголовка: скрипт автоматически будет воспринимать иконку этой кнопки как стрелку.
  7. Если в одном Zero Block несколько аккордеонов, задай каждому root уникальный класс, например tf_accordion-1, tf_accordion-2 и так далее.
  8. Если нужна ручная настройка параметров, выдели HTML-блок аккордеона или сам аккордеон и открой кнопку настроек на панели Tildify Elements.
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Аккордеон конфиг: slider_config
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
1
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
Всё под рукой
Все необходимые функции в одном месте — быстро и без лишних действий
Подробнее
Лёгкий старт
Начните использовать сервис за пару минут без сложных настроек
Подробнее
Удобный интерфейс
Продуманный дизайн помогает сосредоточиться на главном
Подробнее
Быстро и эффективно
Экономьте время с помощью оптимизированных процессов
Подробнее
2
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
3
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Аккордеон горизонтальный: slider_config