Top.Mail.Ru
НАПИШИТЕ НАМ
Спасибо за обратную связь!

Как сделать слайдер из ZeroBlock на Tilda

Для слайдера можно использовать и стандартные блоки, но они не всегда подходят под нашу задачу. Поэтому мы покажем вам несколько способов создания слайдера из блоков Zero.
Время чтения: 1 мин
1 июля 2020 г.
Способ #1. Делаем слайдер со стрелочками в ZeroBlock для формата от 980 px
1
Для примера ниже мы использовали три блока Zero. Однако можно использовать любое их количество, если логически поразмышлять над кодом.
Также добавлен блок CR30N для слайдера.

1. Создаём нужное нам количество блоков Zero и делаем для них подходящий под наши задачи дизайн.

2. В этих же блоках создаём кнопки слайдера, с их помощью блоки будут сменять друг друга. Прописываем для кнопок ссылки: #sldleft и #sldright

3. В боковом меню (табам) прописываем ссылки #pers1,#pers2,#pers3...

4. Создаём блок CR30N, удаляем в нём все слайды и создаём новые в том количестве, сколько у нас Zero блоков.

5. Ставим Zero блокам ограничение в видимости: от 980 px.

6. Добавляем блоки T123, прописываем в них коды, которые предоставлены ниже.

Как будет выглядеть ваш слайдер:
К сожалению слайдер доступен для просмотра только на экранах от 980 px :(
SMM-СПЕЦИАЛИСТЫ
SEO-СПЕЦИАЛИСТЫ
ПРОГРАММИСТЫ
ВЕБ-ДИЗАЙНЕРЫ
ЗАГОРОДНЕВА ЮЛИЯ
БЕЛОВА АЛЕКСАНДРА
ИВАНОВА ДАРЬЯ
SMM-СПЕЦИАЛИСТЫ
SEO-СПЕЦИАЛИСТЫ
ПРОГРАММИСТЫ
КОНТЕКСТОЛОГИ
ДЕНИСОВ МИХАИЛ
ЗАГОРИНА ВИКТОРИЯ
САВЕЛЬЕВ СЕРГЕЙ
SMM-СПЕЦИАЛИСТЫ
SEO-СПЕЦИАЛИСТЫ
ПРОГРАММИСТЫ
КОПИРАЙТЕРЫ
КУЛИЖИНСКИХ АРТЁМ
НИКИТИНА АЛЁНА
СОТНИКОВА ТАТЬЯНА
С помощью этого скрипта мы перемещаем все ZERO блоки в слайдер CR30N
<script>
//ДЕЛАЕМ СЛАЙДЕР ИЗ ZEROBLOCK
$(document).ready(function(){
//Очищаем слайды
$(".t734"+" "+"[data-slide-index='0']").empty();
$(".t734"+" "+"[data-slide-index='1']").empty();
$(".t734"+" "+"[data-slide-index='2']").empty();
$(".t734"+" "+"[data-slide-index='3']").empty();

//Перемещаем блоки в слайды
$("#rec207431360").appendTo(".t734"+" "+"[data-slide-index='1']");
$("#rec207431361").appendTo(".t734"+" "+"[data-slide-index='2']");
$("#rec207431362").appendTo(".t734"+" "+"[data-slide-index='3']");

});

</script>
А с помощью этого донастраиваем управление слайдером с помощью табов и стрелок
<!--УПРАВЛЕНИЕ СЛАЙДЕРОМ -->
<style>
/*Скрываем штатные стрелки слайдера*/
.t734 .t-slds__arrow_container {
display: none;
}

</style>

<script>
//Управляем слайдером своими стрелками из Zero
//При клике на левую кнопку - крутим слайдер влево
$("[href = '#sldleft']").click(function() {
$(".t734 .t-slds__arrow_wrapper-left")[0].click();
return false;
});
//При клике на правую кнопку - крутим слайдер вправо
$("[href = '#sldright']").click(function() {
$(".t734 .t-slds__arrow_wrapper-right")[0].click();
return false;

});

//УПРАВЛЕНИЕ СЛАЙДЕРОМ ЧЕРЕЗ ТАБЫ
//При клике на конкретную персону , включаем конкретный слайд
$("[href = '#pers1']").click(function() {
$(".t734 .t-slds__bullet:eq(0)")[0].click();
return false;
});
$("[href = '#pers2']").click(function() {
$(".t734 .t-slds__bullet:eq(1)")[0].click();
return false;
});
$("[href = '#pers3']").click(function() {
$(".t734 .t-slds__bullet:eq(2)")[0].click();
return false;
});

</script>
Способ #2. Делаем слайдер со стрелочками в ZeroBlock
2
1. Создаём нужное нам количество блоков Zero и делаем для них подходящий под наши задачи дизайн.

2. Создаём блок CR30N, удаляем в нём все слайды и создаём новые в том количестве, сколько у нас Zero блоков.

3. Создаём копии первого и последнего ZeroBlock.


Как будет выглядеть ваш слайдер:
Здесь будет находиться заголовок первого слайдера
Здесь будет находиться текстовое описание
Здесь будет находиться заголовок первого слайдера
Здесь будет находиться текстовое описание
Здесь будет находиться заголовок третьего слайдера
Здесь будет находиться текстовое описание
Здесь будет находиться заголовок второго слайдера
Здесь будет находиться текстовое описание
Здесь будет находиться заголовок второго слайдера
Здесь будет находиться текстовое описание
Есть несколько нюансов.
• В блоке CR30N ОБЯЗАТЕЛЬНО добавляйте то количество карточек, какое количество слайдов собираетесь использовать.

• Учитывайте, что два слайдера могут конфликтовать между собой
Способ #3. Делаем слайдер с помощью блока ME603
3
1. Создаём несколько Zero блоков, которые будут у нас в слайдере, делаем для них дизайн.

2. Создаём блок ME603.

3. В блок ME603 вписываем заголовки наших Zero блоков, а также их ID.


Как будет выглядеть ваш слайдер:
Аудит
Контент-план
Продвижение
Реклама
Итоги

Instagram—аудит

Аудит позволяет найти слабые места и точки роста, сформировать стратегию контента и продвижения

Наш аудит

бесплатный—поверхостный
платный—глубокий

Что мы будем делать:

Изучим вашу нишу
Проанализируем аккаунт
Проверим, что сработало у конкурентов
Проанализируем целевую аудиторию
Проведём анализ полученных данных
Веб студия Спектр

Контент-план для Instagram

Согласовываем с вами на месяц всю логику постов, чтобы было понятно о чем писать в Instagram
Определяем стратегию взаимодействия с вашими будущими подписчиками
Что мы будем делать:
Составим план работ
Составим план продвижения
Подключим все сервисы, cоберём ц/а для рекламы
Оформим всё в документ
Веб студия Спектр

Продвигаем ваш Instagram

Изучим Вашу целевую аудиторию и сделаем все возможное, чтобы найти её даже в самых укромных уголках Instagram
Будем искать вам только целевых клиентов, а не пытаться накрутить случайных подписчиков
Что мы будем делать:
Масслайкинг
Массфоловинг
Ц/а по геопризнаку, по конкурентам
Проведение 2-х конкурсов или акций

Веб студия Спектр

Таргетированная реклама

Нельзя, просто взять и настроить без ошибок. Мы тестируем около 20-ти теорий. Те, которые не работают, просто отключаем
Протестируем каждый из возможных вариантов объявлений и стратегии в Instagram, подберем наиболее выгодный вариант
Что мы будем делать:
Выявим аудиторию и построим стратегию
Подготовим рекламные посты
Создадим правила рекламной кампании для удержания необходимой цены клика


Веб студия Спектр

Итоги

После месяца продвижения вашего аккаунта в Instagram подводим итоги
Что будет по результатам:
Отчеты
Статистика
Планы на следующий месяц
Выводы



Приз