Как сделать кнопку с градиентом в zeroblock в tilda

Как сделать слайдер на Тильде из зеро-блоков

Приветствую! Подробная текстовая инструкция к видео о том, как сделать не полноэкранный слайдер на Tilda из zero-блоков.

Этапы создания слайдера

1. Создать зеро-блок и добавить в него необходимый контент. Это может быть что угодно: текст, изображения, различные элементы
2. В этом же zero-блоке создать шейп (shape), внутри которого будут находиться наши слайды. Разместить его в нужной части блока, где должен быть слайдер. Обязательно задать lazy-load: off, а также убрать заливку. Высота и ширина шейпа должны совпадать с высотой и шириной слайдов. Если слайды будут больше по размеру, чем шейп, то контент обрежется
3. Создать элементы для переключения слайдов. В моем примере на видео были стрелки. Вы можете создать точки, фигуры и т. д. Задать левой стрелке ссылку «#slider_left», а правой — «#slider_right». Как и для шейпа, задать lazy-load: off.
4. Создать слайды из зеро-блоков. У меня это 3 zero-блока, в которых находится по 2 карточки товаров. Обязательно всему контенту внутри зеро-блока задать выравнивание по window-контейнеру, а также «left» по оси X и «top» по оси Y. Это можно сделать в настройках элемента в правой панели
5. Добавить код. Я за основу брал код с сайта Тильдошной
6. Проставить ID блоков в html-код. Внутри самого кода на русском написано, где необходимо вставлять ID. Его можно найти в настройках блока. Класс шейпа берется через просмотр кода элемента на сайте. Если что-то в этом шаге не понятно, то на видео я все показываю на промежутке 7:57- 8:20. Также прописываем в конце кода высоту и ширину шейпа, который мы создали на 2 шаге

Адаптация под мобильные устройства:

В мобильной версии не поместится вместить две, три и более карточек. Поэтому 2 варианта:
1. Растянуть шейп вертикально и делать карточки внутри него тоже вертикально друг за другом. Все должно работать, как на ПК. Просто слайдер станет вертикальным и длинным.
2. Сделать горизонтально, чтобы карточки выходили за край устройства. И затем добавить горизонтальный скролл. Таким образом карточки будут листаться на мобильном пальцем горизонтально.

Пример, как это может выглядеть на одном из моих сайтов — linkparty.ru. А сам код для горизонтального скролла — https://romanyu.ru/skroll-s-uderzhaniem-knopki-myshi

Важно, чтобы не конфликтовал код, сделать два блока. Один слайдер для ПК с отображением с 1200рх и до бесконечности с моим кодом выше, а второй до 1200рх и с горизонтальным скроллом

Два и более слайдеров на одной странице:

Если Вы хотите сделать несколько таких слайдеров на одной странице, то не забудьте поменять в новом коде: класс шейпа, ID слайдов, ссылки на стрелки (например, «#slider_left1» и «#slider_right2»), а также ОБЯЗАТЕЛЬНО класс «tildoshnaya-slider-owl» смените на какой-нибудь другой (например, «tildoshnaya-slider-owl1»)

Если остались вопросы или Вы хотите заказать продающий лендинг, то напишите мне в соцсетях или в комментариях под видео.

Как добавить корзину в Zero Block или в меню в Tilda Publishing. Своя корзина в zero block.

Своя корзина в zero block или в меню? Zero Block – это продуманный инструмент для создания собственных блоков в Tilda Publishing. Одним из важных элементов любого сайта является навигационное меню, которое позволяет пользователям легко перемещаться по сайту. Очень удобно, когда все необходимые кнопки и ссылки находятся в одном меню, например иконка корзины.

В этой стать вы научитесь создавать свою собственную корзину товаров в конструкторе сайтов Тильда и помещать её в навигационное меню, сделанное из zero block.

Сохраните изменения и опубликуйте страницу. Ваша собственная корзина в zero block готова!

Заключение

Добавление корзины в Zero Block или в меню в Tilda Publishing может значительно улучшить пользовательский опыт и увеличить конверсию вашего сайта. Благодаря этой функции ваши посетители могут легко и быстро выбирать, и заказывать продукты или услуги прямо на вашем сайте. Кроме того, вы можете интегрировать платежные системы для облегчения процесса оплаты.

Аналогичным образом вы можете сделать свою иконку избранных товаров в zero block. Подробнее об этом вы можете узнать в одной из наших статей или на нашем YouTube канале.

создание уникальных сайтов на tilda

Хотите обойти конкурентов и повысить количество продаж?

Проанализирую проблемы вашей целевой аудитории. Сделаю правильную структуру, которая подтолкнет посетителя к покупке, напишу продающие заголовки и тексты. Тем самым решу потребности и «боли» вашей аудитории.

Проведу анализ всех конкурентов, определю их плюсы и минусы. На основе анализа оптимизирую и подчеркну все ваши сильные стороны. Подготовлю правильные офферы и лид магниты.