Меню

Тильда шапка мобильной версии



Как сделать обложку сайта: практические советы арт-директора

Основное правило при создании обложек: главное — это текст, фотография стоит на втором месте.

Сообщение важнее всего, а фоновое изображение задает правильную атмосферу. Поэтому стоит подобрать фотографию, которая не затрудняет чтение и соответствует тематике сайта.

При этом фотография не обязательно должна прямо иллюстрировать ваше предложение. Фотография — это фон, поэтому она может просто поддерживать коммуникацию. Например, обложка Tilda Education — девушка делает исследование, но это не значит, что сайт посвящен только исследованиям. В данном случае обложка — это настроение. Она вдохновляет и погружает в контекст.

Бесплатные изображения для сайта можно найти на профессиональных фотостоках, распространяющих картинки по лицензии Creative Commons Zero (CC0). Это значит, что изображение освобождено от ограничений авторского права, то есть его можно как угодно использовать и изменять, в том числе в коммерческих целях.

Примеры ресурсов с качественными изображениями: Unsplash, Pexels, Stocksnap, Rawpixel.

В идеале фотография для обложки должна быть пустой по центру: без сюжета и мелких деталей.

Текст на первом экране практически всегда располагается по центру. Если важный объект или сюжет спрятать под заголовком, его никто не увидит, а читать текст станет сложнее.

Фотография в обложке — это фон, который задает определенную атмосферу. Он может помочь усилить ваше сообщение, а может остаться незамеченным.

В целом, главное, чтобы посетитель легко прочитал текст. Например, у вас сайт конференции. На обложке написано название конференции, дата, время и место проведения. Если текст сливается с фоном и плохо читается, человек может просто не обратить внимания, проскроллить и не найти важную информацию.

Когда текст читается хорошо, то удачная фотография сделает его сильнее. Например, на обложку вы ставите фото с прошлой конференции. Люди видят, как проходят ваши события — у вас был большой зал и много людей, или наоборот камерная обстановка. Фотография заменяет пару-тройку абзацев текста. Но сначала все-таки люди должны узнать про место и время.

Моя цель — подобрать такое изображение, чтобы пользователь точно понял тему страницы. Это значит, что фотография должна отражать тему либо конкретно (интерьер со стульями для мебельной мастерской), либо косвенно (красивое морское побережье для лендинга турагентства). Чтобы подобрать изображение с косвенной темой, нужно понять, что в итоге получит клиент, или поставить фотографию с атрибутами, характерными именно для этой темы.

Вот несколько примеров шаблонов, которые сделали дизайнеры Тильды. Каждый из шаблонов — пример разного подхода к подбору обложки:

Источник

Mo-Ti Level Up — список всех видеоинструкций

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Выводим нужную дату по графику в стандартный или ZeroBlock. Скрываем и показываем нужные блоки по заданным диапазонам дат.
Длительность видео 21 минута

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём выделенный центральный слайд, выводим индекс текущего слайда и создаём свои кнопки управления. Длительность видео 13 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Помещаем в ZeroBlock блок GL09 до/после и создаём их переключение через кнопки.
Длительность видео 31 минута

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Сохраняем отображение вкладок в видео кнопок на мобильной версии.
Длительность видео: 12 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём слайдер нужной ширины с фоном через блок TS103N в Тильда.
Длительность видео: 17 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём переключение группы элементов в ZeroBlock при клике на кнопки в этом блоке.
Длительность видео: 28 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём переключатель из шейпа в ZeroBlock и переключаем два тарифных блока PL105.
Длительность видео: 15 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Формируем калькулятор из блока BF402N, получаем цены из подготовленного прайса.
Длительность видео: 29 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём элемент для выбора количества столовых приборов в корзине.
Длительность видео: 14 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём калькулятор по транспортировке авто по прайсу с условиями.
Длительность видео: 29 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём подпись для слайдов поверх фото.
Меняем расположение заголовка и описания для фото.
Длительность видео: 13 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Формируем прайс в блоке TX16N на базе блока PL310.
Перемещаем во все или в конкретную вкладку.
Длительность видео: 16 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Выводим отображение миниатюры в большом виде, отправляем продукт в корзину с нужной картинкой.
Длительность видео: 25 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём карусель слайдер из комбинации блоков ZeroBlock + GL10
Длительность видео: 21 минута

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём меню в ZeroBlock, которое при скролле изменяет цвет фона и текста внутри.
Длительность видео: 32 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём раскрывающийся текст в блоке CL10.
Форматируем и стилизуем элементы выпадающего текста. Длительность видео: 37 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём конструктор-форму для заказа продукта в ZeroBlock. Выстраиваем зависимость между картинкой и параметрами товара.
Длительность видео: 60 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём карусель-слайдер для товаров на базе блока ST305N. Разбираем настройки слайдера.
Длительность видео: 18 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём миниатюрки и один общий баннер.
Выводим картинки из миниатюр в баннер, добавляем эффекты выделения. Длительность видео: 19 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Меняем расположение блока GL09 в две или три колонки, задаём общий цвет фона.
Длительность видео: 24 мин

Подписка к видеоинструкции на платной основе

Как сделать info-popUp в нерабочие часы на сайте в Tilda

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём уведомление о нерабочих часах.
Изменяем условия показа по времени и дню недели.
Меняем контент и блоки по заданным условиям.
Длительность видео: 33 минуты

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Меняем количество полей в пошаговой форме, опираясь на положение RangeSlider.
Длительность видео: 17 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

При определённом количестве товара в корзине делаем бесплатную доставку.
Длительность видео: 11 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Добавляем управление звуком фонового видео.
Создаём собственные кнопки управления в Zero.
Длительность видео: 19 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём карточку товара в Zero.
Делаем выбор размера, цвета и цены по прайсу.
Длительность видео: 35 мин

Читайте также:  Как почистить голубую норку шапку

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём зависимость между текстом и слайдом в GL21. Добавляем иконку активного слайда.
Длительность видео: 15 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Добавляем иконки и прайс в блок TX16N.
Вписываем фон и ссылки в блок.
Длительность видео: 17 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Отправляем заявку из формы прямо в платёжную систему, используя возможности корзины ST100.
Длительность видео 22 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём прайс-калькулятор из формBF204N.
Делаем переключение калькуляторов через ZeroBlock.
Длительность видео 23 минуты

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Добавляем кнопки в карточку товаров.
Кнопки вызова popup окна, формы или переход по ссылке.
Длительность видео 29 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём карточку товара в Zero и передаём данные из неё в корзину. Картинку, название, параметры и артикул.
Длительность видео: 21 минута

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём слайдер-переключатель из нескольких разных элементов в одном ZeroBlock
Длительность видео: 33 минуты

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Показываем и скрываем нужное поле при клике на заданный checkbox в форме.
Длительность видео: 31 минута

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Изменяем вид radio переключателя и добавляем картинки.
Длительность видео: 23 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём scrollbar для текстового элемента. Стилизуем и настраиваем параметры.
Длительность видео: 23 минуты

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Делаем ограничение на кол-во выбранных галочек в форме. Работаем с несколькими формами.
Длительность видео: 28 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём скользящую подпись для логотипов в ZeroBlock.
Длительность видео: 23 минуты

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём плавное переключение для слайдера GL20 при помощи кнопок в ZeroBlock.
Длительность видео: 32 минуты

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Добавляем дополнительные вкладки в блок ME603.
Изменяем ширину табов в одной строке.
Длительность видео: 26 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём боковое меню из Zero на базе ME405.
Вызываем меню по клику на ссылку или кнопку.
Длительность видео: 21 минута

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём вложенность из связки блоков ME603.
Выстраиваем зависимость между вкладками.
Длительность видео: 21 минута

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём аккордеон в 2 колонки. Меняем состав колонок. Создаём несколько блоков.
Длительность видео: 19 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём карусель-слайдер для товаров, изменяем настройки работы слайдера, добавляем кастомные кнопки управления. Длительность видео: 34 минуты

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаем переключение между ZeroBlock своими кнопками.
Длительность видео: 34 минуты

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём градиент для кнопки и других элементов. Изменяем параметры градиента прямо на сайте.
Длительность видео: 47 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Добавляем выбор упаковки для товара в корзине.
Используем несколько видов упаковок.
Длительность видео: 22 минуты

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Добавляем новые вкладки в блок ME602, изменяем ширину блока в пикселях и процентах.
Длительность видео: 31 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Активируем нужную вкладку при переходе на страницу. Создаём свои кнопки управления. Длительность видео: 32 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Указываем конкретно на определённый вид доставки в корзине, по которому нужно проводить особый расчёт. Длительность видео: 16 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём автоматически обновляемый DeadLine, применяем его к заголовкам разных блоков.
Длительность видео: 25 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём сетку товаров или услуг и отправляем данные о выборе посетителя в форму обратной связи.
Длительность видео: 27 мин.

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

При выборе определённого вида доставки показываем или скрываем требуемые поля.
Длительность видео: 19 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Добавляем иконки в блок ME602. Делаем вид на мобильном , как на десктопе, а затем на десктопе как на мобильном.
Длительность видео: 33 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём боковой инфо-виджет из Zero. Размещаем его в любой стороне экрана.
Длительность видео: 27 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём смену контента по клику. Создаём разные элементы, меняем их компоновку, расположение и состав. Длительность видео 35 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Выполняем скрытие и показ других блоков, переход на другую страницу, скрытие корзины после окончания таймера.
Длительность видео: 23 минуты

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём триггер-переключатель вместо галочки checkbox в форме в Tilda.
Длительность видео: 16 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём скрытие и раскрытие слишком больших отзывов в блоке TS205 в Tilda.
Длительность видео: 9 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём открытие и раскрытие ZeroBlock по клику на кнопку. Делаем плавный переход через градиент.
Длительность видео: 17 мин

Читайте также:  Деловое письмо шапка письма английскому

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём скрытый текст, который показывается с подменой основного текста.
Длительность видео: 14 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём меню в ZeroBlock, применяем стили активных ссылок меню при нажатии и скролле по странице. Длительность видео: 23 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём калькулятор ремонта гаджетов на базе штатной формы Tilda.
Длительность видео: 20 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём плавное изменение итогового числа в форме ZeroBlock.
Длительность видео: 20 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём конструктор товара в Tilda в ZeroBlock.
Выводим блок по выбранным параметрам товара.
Длительность видео: 24 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Добавляем Яндекс Карту со своими метками. Создаём взаимодействие меток с элементами на сайте.
Длительность видео 31 минута

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём список категорий в ZeroBlock с переключением зависимых блоков.
Длительность видео: 17 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём зависимость между выпадающими списками в форме стандартного блока и ZeroBlock.
Длительность видео: 21 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Содержание:
1. Создаём ZeroBlock
2. Добавляем в него слайдер
3. Прописываем зависимость между слайдером и элементами в ZeroBlock

Добавляем слайдер в ZeroBlock и создаём зависимые элементы при смене слайдов.
Длительность видео: 38 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Отправляем форму на нужный приёмщик, анализирую выбор пользователя.
Длительность видео 16 мин.

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Делаем смену картинок при наведении на список из текстовых ссылок или shape объектов.
Длительность видео 22 минуты

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём выпадающее меню из штатных блоков. Добавляем фото в меню, для визуального обозначения категории.
Длительность видео 16 минут

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём калькулятор в ZeroBlock для аннуитетных платежей с использованием отрицательной степени. Длительность видео 16 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём переключение блоков из Zero, добавляем элементы управления из цифр и кнопок.
Длительность видео 32 минуты

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём псевдо поп-ап из ZeroBlock. Размещаем элементы на разных слоях.
Длительность видео: 20 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Создаём таблицу, передаём данные из текущей строки в форму обратной связи.
Длительность видео 18 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Как сделать soundButton в ZeroBlock в Tilda
Создаём кнопки для управления звуком в Zero и регулятор громкости. Длительность видео 23 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

Как сделать показ скрытого блока через свою кнопку и блок BF703 в Tilda
Длительность видео: 21 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Пример работы

При выборе определённого вида доставки изменяем возможный вид оплаты для пользователя.
Длительность видео: 12 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.

Создаём собственную кнопку для формы в Zero. Применяем к ней эффекты, изменяем форму и положение.
Длительность видео: 24 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.

Создаём заголовки и контент для аккордеона использую ZeroBlock.
Длительность видео: 22 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.

Создаём смену фото при наведении на другой объект. Создаём несколько блоков. Пробуем другую анимацию. Длительность видео: 38 мин

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.

Делаем сложный калькулятор в ZeroBlock со свободным позиционированием элементов.
Длительность видео 33 мин.

Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём таб меню из ZeroBlock
2. Компануем карточки и элементы
3. Создаём контентные блоки с элементами анимации
4. Редактируем код

Делаем блок с табами (вкладками) , который управляет несколькими ZeroBlock.
Длительность видео 20 мин.
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём пример на базе ZeroBlock
2. Отключаем мобильную версию
3. Создаём штатное меню
4. Добавляем слайдер из блоков

Применяем эффект поэкранного скролла FullPage на странице в Tilda.
Длительность видео: 17 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём ZeroBLock
2. Создаём в нём калькулятор
3. Создаём зависимость между фото и выпадающим списком
4. Добавляем дополнительные параметры для блока ST200
5. Ограничиваем выбор нулевого товара

Создаём калькулятор товара в ZeroBlock и передаём данные в корзину.
Длительность видео: 34 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём карточки в Zero
2. Разбираемся как выполнить адаптацию сложной группы объектов
3. Работаем с панелью слоёв

Создаём ZeroBlock с карточками в два слоя. Показываем скрытый контент по клику.
Длительность видео: 27 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём калькулятор в форме
2. Настраиваем блок ST200 на получение данных
3. Добавляем больше 3-х параметров в карточку товара
4. Делаем фото нормального размера в корзине

Создаём калькулятор в форме и при нажатии кнопки, от отправляем все данные с параметрами в корзину.
Длительность видео: 21 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём вкладки управления в ZeroBlock
2. Выбираем блоки для основного контента
3. Прописываем нужные ID блоков в код скрипта
4. Изменяем текстовые элементы брэндов на картинки

Создаём вкладки в два уровня с использованием ZeroBlock.
Длительность видео: 27 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём все элементы в ZeroBlock
2. Производим индексацию ссылок
3. Производим каскадную адаптацию группы объектов
4. Изучаем настройки стилей и скрипта

Читайте также:  Схема вязания популярных шапок

Создаём карточки в ZeroBlock с эффектом заполняющего фона scalebackground при наведении курсора.
Длительность видео: 21 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём выпадающее меню из блока FT302
2. Создаём выпадающее меню из блока FT301
3. Создаём выпадающее меню на 10 заголовков и множество пунктов

Создаём большое выпадающее меню из связки блоков ME301+FT302
Длительность видео: 15 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём поле с автоподстановкой для статичных форм штатных блоков
2. Создаём поле с автоподстановкой для для popUp форм штатных блоков
3. Создаём поле с автоподстановкой для для ZeroBlock
4. Создаём поле с автоподстановкой для Корзины
5. Создаём подготовленный список данных в Excel

Добавляем возможность подстановки списка похожих наименований при вводе данных в поле формы.
Длительность видео: 14 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём форму из примера
2. Добавляем несколько форм
3. Меняем визуальные настройки кнопок
4. Уменьшаем количество способов связи
5. Добавляем выбор связи в корзину

Создаём в форме кнопки выбора связи с различными полями
Длительность видео: 22 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём слайдер в ZeroBlock со своими кнопками переключения.
2. Создаём несколько слайдеров на странице
3. Создаём текстовый слайдер

Используя элементы ZeroBlock и скрипт, создаём простой слайдер-переключатель в Tilda
Длительность видео: 15 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём таб-слайдер из примера
2. Создаём слайдер со своими кнопками без табов

Создаём несколько ZeroBlock и объединяем их в слайдер. Создаём свои элементы для управления слайдером. Соединяем всё это в один блок. Длительность видео: 27 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём иксированную кнопку на азе BF701
2. Вставляем своё изображение в кнопку BF701
3. Содаём фиксированную кнопку в ZeroBlock способ 1
4. Создаём фиксированную кнопку в ZeroBlock способ 2

Создаём кнопку, которая при скролле остаётся всегда в одном месте. Рассматриваем 3 способа
Длительность видео: 16 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём основное меню в ZeroBlock
2. Выставляем привязки элементов в ZeroBlock
3. Создаём выпадающие меню из ZeroBlock
4. Прописываем нужные ID в коде данного примера

Создаём основное и выпадающее меню из ZeroBlock.
Длительность видео: 19 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём кнопку с анимацией в ZeroBlock
2. Настраиваем зависимую анимацию
3. Меняем ссылки у кнопок
4. Создаём дополнительные кнопки

Создаём сложную кнопку в ZeroBlock с произвольным расположением элементов и анимацией.
Продолжительность видео: 20 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создам вкладки из примера
2. Создаём вкладки без иконок и треугольников
3. Добавляем ещё вкладки
4. Добавляем дополнительные текстовые элементы
5. Добавляем кнопки во вкладки

Создаём классический блок с табами (вкладками) в условиях одного ZeroBlock
Длительность видео: 31 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Делаем показ/скрытие одного блока
2. Делаем показ/скрытие трёх блоков
3. Создаём кастомный плавный скролл
4. Пробуем работать не только с кнопкой
5. Как разбить текст на участки и скрывать/открывать нужный
6. Как скрывать отдельный элемент, а не блок целиком
7. Блоки с инииализацией
8. Как работать в ZeroBlock со скрытием
9. Как создать несколько таких объектов
10. Как изменить надпись скрыто/открыто

Показ и скрытие блоков при клике на элементы , содержащие заданную ссылку.
Длительность видео: 32 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.

Длительность видео: 10 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём слайдер из примера
2. Создаём несколько слайдеров на странице
3. Создаём слайдер из слайдов разной высоты
4. Создаём слайдер со своими кнопками

Создаём слайдер из нескольких ZeroBlock. Несколько слайдеров на странице.
Длительность видео: 30 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Пример работы
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:

1. Создаём popUp окно из ZeroBlock
2. Создаём несколько окон из ZeroBlock

Создаём обычный ZeroBlock со своими настройками, а затем делаем из него PopUp окно.
Длительность видео: 33 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём меню из примера
2. Создаём меню со статичным фоном
3. Как избежать «скачков» на сайте
4. Меню наползает на заголовок
3. Появление меню через N-пикселей
4. Статичное и фиксированное меню из ZeroBlock, варианты комбинаций

Создаём меню, которое всегда следует за нами при скролле сайта из ZeroBlock
Длительность видео: 14 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём ZeroBlock на типичном примере
2. Создаём и настраиваем правильно GL01
3. Перемещаем GL01 в ZeroBlock
4. Адаптируем ZeroBlock
5. Активируем автослайдинг
6. Приближаем стрелки фото
7. Создаём свои стрелки управления для слайдера

Создаём слайдер в ZeroBlock с использованием блока GL01.
Длительность видео: 26 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём счётчик в Яндекс Метрика
2. Подключаем счётчик к Tilda
3. Как проверить отправку событий через Yandex Debug
4. Настраиваем штатные цели — клик по кнопке, открытие popUp, отправка формы.
5. Настраиваем нештатные цели — клик по ссылке, клик по объекту , переход а сторонний ресурс
6. Типы условий — Посещение страницы, JavaScript событие, Составная цель
7. Создание составной цели

Рассматриваем различные вариации создания событий и целей при работе с Яндекс Метрикой в Tilda.
Длительность видео: 43 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём в ZeroBlock списки как на примере
2. Проводим правильную разметку ссылками
3. Создаём координатную карту перемещения объектов
4. Создаём анимацию перемещения элементов

Создаём собственный выпадающий список в ZeroBlock. Анимируем перемещение элементов.
Длительность видео: 21 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём аккордеон как в примере в ZeroBlock
2. Прописываем анимацию для остальных элементов в ZeroBlock
3. Добавляем вкладки с объёмным контентом
4. Добавляем больше самих вкладок
5. Используем 2-а способа создания аккордеона — лёгкий и сложный

Создаём список с выпадающими вкладками аккордеон в ZeroBlock.
Длительность видео: 28 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём эффект для блока из примера
2. Применяем эффект к нескольким разным блокам
3. Применяем эффект к изображениям в одном блоке
4. Применяем эффект в ZeroBlock
5. Используем различные фото фильтры/маски перехода

Применяем Distortion Hover Effect для различных блоков и изображений в Tilda.
Длительность видео: 22 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём эффект для блока из примера
2. Создаём эффект для других блоков
3. Создаём эффект для ZeroBlock
4. Изменяем настройки лупы

Добавляем эффект приближения лупы при наведении на фотографии в разных блоках.
Длительность видео: 17 мин
Подписка к видеоинструкции на платной основе

Видеоинструкция данного примера доступна в архиве
mo-ti Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём блок из примера
2. Добавляем ещё несколько фото в набор
3. Добавляем дополнительное изменение текста

Создаём карточку товара с изменением фото и отправкой в корзину в ZeroBlock
Длительность видео: 17 мин
Подписка к видеоинструкции на платной основе

Источник