Как сделать вложенный таб блок в ZeroBlock в Tilda
ОСНОВЫ ИНТЕРНЕТ-МАРКЕТИНГА
1
АНАЛИЗ
2
EMAIL-ПРОДВИЖЕНИЕ
3
СММ-ПРОДВИЖЕНИЕ
4
ТАРГЕТИРОВАННАЯ РЕКЛАМА
5
Занятие №1
Занятие №2
Занятие №1. Цели интернет-маркетинга и инструменты их достижения
Маркетинг – это деятельность, которая ставит своей целью получение прибыли с помощью удовлетворения потребностей покупателей. Это очень обобщенное определение, показывающее суть любых маркетинговых мероприятий – умение продать товар или услугу целевой аудитории.
Посмотреть часть лекции
ОСНОВЫ ИНТЕРНЕТ-МАРКЕТИНГА
1
АНАЛИЗ
2
EMAIL-ПРОДВИЖЕНИЕ
3
СММ-ПРОДВИЖЕНИЕ
4
ТАРГЕТИРОВАННАЯ РЕКЛАМА
5
Занятие №1
Занятие №2
Занятие №2. Продолжение интернет-маркетинга
Маркетинг – это деятельность, которая ставит своей целью получение прибыли с помощью удовлетворения потребностей покупателей. Это очень обобщенное определение, показывающее суть любых маркетинговых мероприятий – умение продать товар или услугу целевой аудитории.
Посмотреть часть лекции
ОСНОВЫ ИНТЕРНЕТ-МАРКЕТИНГА
1
АНАЛИЗ
2
EMAIL-ПРОДВИЖЕНИЕ
3
СММ-ПРОДВИЖЕНИЕ
4
ТАРГЕТИРОВАННАЯ РЕКЛАМА
5
Занятие №1
Занятие №2
Занятие №1. Анализ продукта и целевая аудитория проекта (запись)
Анализ целевой аудитории можно сделать самому, не прибегая к услугам специализированных агентств. В процессе анализа целевой аудитории можно найти новые решения и возможности для бизнеса.
Посмотреть часть лекции
Занятие №3
ОСНОВЫ ИНТЕРНЕТ-МАРКЕТИНГА
1
АНАЛИЗ
2
EMAIL-ПРОДВИЖЕНИЕ
3
СММ-ПРОДВИЖЕНИЕ
4
ТАРГЕТИРОВАННАЯ РЕКЛАМА
5
Занятие №1
Занятие №2
Занятие №2. Анализ - продолжение
Анализ целевой аудитории можно сделать самому, не прибегая к услугам специализированных агентств. В процессе анализа целевой аудитории можно найти новые решения и возможности для бизнеса.
Посмотреть часть лекции
Занятие №3
ОСНОВЫ ИНТЕРНЕТ-МАРКЕТИНГА
1
АНАЛИЗ
2
EMAIL-ПРОДВИЖЕНИЕ
3
СММ-ПРОДВИЖЕНИЕ
4
ТАРГЕТИРОВАННАЯ РЕКЛАМА
5
Занятие №1
Занятие №2
Занятие №3. Анализ - продолжение
Анализ целевой аудитории можно сделать самому, не прибегая к услугам специализированных агентств. В процессе анализа целевой аудитории можно найти новые решения и возможности для бизнеса.
Посмотреть часть лекции
Занятие №3
ОСНОВЫ ИНТЕРНЕТ-МАРКЕТИНГА
1
АНАЛИЗ
2
EMAIL-ПРОДВИЖЕНИЕ
3
СММ-ПРОДВИЖЕНИЕ
4
ТАРГЕТИРОВАННАЯ РЕКЛАМА
5
Email продвижение, как построить всю цепочку
Email-маркетинг – эффективный инструмент взаимодействия с аудиторией. С его помощью компания может решать разные задачи: делиться важной информацией, стимулировать продажи, собирать обратную связь и т. п.
Посмотреть часть лекции
ОСНОВЫ ИНТЕРНЕТ-МАРКЕТИНГА
1
АНАЛИЗ
2
EMAIL-ПРОДВИЖЕНИЕ
3
СММ-ПРОДВИЖЕНИЕ
4
ТАРГЕТИРОВАННАЯ РЕКЛАМА
5
СММ продвижение
SMM-продвижение - это метод раскрутки бренда, через платформы популярных социальных сетей. Создаётся контент, который будет распространяться через социальные сети, тем самым привлекать внимание их пользователей.
Посмотреть часть лекции
ОСНОВЫ ИНТЕРНЕТ-МАРКЕТИНГА
1
АНАЛИЗ
2
EMAIL-ПРОДВИЖЕНИЕ
3
СММ-ПРОДВИЖЕНИЕ
4
ТАРГЕТИРОВАННАЯ РЕКЛАМА
5
Занятие №1
Занятие №2
Занятие №1. Таргетированная реклама
В переводе с английского target означает «цель». Мишень таргетированной рекламы – пользователи, которые интересуются тем или иным товаром / услугой. Простыми словами, таргетированная реклама – это инструмент, который позволяет специалистам показывать свои рекламные объявления строго определенной категории пользователей. Таргет, как еще называют таргетированную рекламу, очень эффективен и сравнительно дешев, потому что платить можно только за показы рекламы, а показывать только людям, которые действительно могут и хотят совершить покупку.
Посмотреть часть лекции
ОСНОВЫ ИНТЕРНЕТ-МАРКЕТИНГА
1
АНАЛИЗ
2
EMAIL-ПРОДВИЖЕНИЕ
3
СММ-ПРОДВИЖЕНИЕ
4
ТАРГЕТИРОВАННАЯ РЕКЛАМА
5
Занятие №1
Занятие №2
Занятие №2. Продолжение
В переводе с английского target означает «цель». Мишень таргетированной рекламы – пользователи, которые интересуются тем или иным товаром / услугой. Простыми словами, таргетированная реклама – это инструмент, который позволяет специалистам показывать свои рекламные объявления строго определенной категории пользователей. Таргет, как еще называют таргетированную рекламу, очень эффективен и сравнительно дешев, потому что платить можно только за показы рекламы, а показывать только людям, которые действительно могут и хотят совершить покупку.
Посмотреть часть лекции

Как сделать вложенный таб блок в ZeroBlock в Tilda

1
Пример состоит из 5 основных вкладок и добавлены внутренние вкладки в основные. Всего 9 ZeroBlock
У первой - 2 вкладки
У второй - 3 вкладки
У пятой - 2 вкладки
Создали ZeroBlock и добавили в него 5 элементов Text для основных вкладок. Задали им классы
dbltab-a_1 , dbltab-a_2 , dbltab-a_3 ...
2
В первый же блок добавили 2 Button для внутреннего таба.
Задали им классы smtab-a_1-1 , smtab-a_1-2
Адаптировали, а затем дублировали этот блок и поменяли в нём контент для Занятия 2
3
Дублировали блок и заменили контент для 2ой основной вкладки.
Тут уже будет 3 Button для внутреннего таба с классами
smtab-a_2-1 , smtab-a_2-2 , smtab-a_2-3
4
Далее создаём 2 копии блока без внутренних табов. Просто заменили контент и всё.
5
Создаём последние 2 Zero для 5го основного пункта, у него будет 2 внутренних таба.
Задаём им классы smtab-a_3-1 , smtab-a_3-2
6
Добавляем код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём основной и вложенный таб блок из ZeroBlock.
Делаем несколько сборок на странице.
Фрагмент видео
Библиотека для примера
<script>
$( document ).ready(function() {
//Прописываем классы табов
let classTab = ['a'];
//Объединяем блоки в секции
$.each(classTab, function(index,value) {
    let zeroGrp = "";  let tabCl = '.dbltab-'+value+'_1';
    $(tabCl).addClass('act-tab');
    $(tabCl).each(function( index ) { zeroGrp += '#'+$(this).closest('.t-rec').attr('id')+',' });
    $(zeroGrp.slice(0, -1)).wrapAll('<div class="tabsgroup"></div>');
    //Прописываем атрибуты нашим вкладкам
    let tabsRec = $(tabCl+":first").closest('.t-rec');
    let tabsBtnNum = tabsRec.find('div[class*="'+value+'"]').length;
    for (let i=1; i<=tabsBtnNum;i++){ $('.dbltab-'+value+'_'+i).attr('data-tab-index',i)};
    //Создаём внутренние секции
    let tabSect = '.smtab-'+value+'_1-1';
    let mainGroup = $(tabSect).closest('.tabsgroup');
    let numOfSmTab = mainGroup.find('div[class*="smtab-"]').length;
    for (let i=1; i<=numOfSmTab;i++){ 
        let zeroSection = ""; 
        let tabS = '.smtab-'+value+'_'+i+'-1';
        $(tabS).each(function( index ) { zeroSection += '#'+$(this).closest('.t-rec').attr('id')+',' });
        $(zeroSection.slice(0, -1)).wrapAll('<div class="t-rec sectiongroup"></div>');
    };
});
//Оставляем только 1ый видимый блок из набора
$('.tabsgroup').each(function() {
    $(this).children('.t-rec:not(:first)').addClass('outV outI posAn');
});
//Оставляем только 1ый видимый блок из секции
$('.sectiongroup').each(function() {
    $(this).children('.t-rec:not(:first)').addClass('outV outI posAn');
});
//Переключение блоков
function changeTab(em,el){
    em.height( em.children('.t-rec:eq('+el+')').height() );
    em.children('.t-rec:eq('+el+')').removeClass('outV outI');
    em.children('.t-rec').not(':eq('+el+')').addClass('outV outI');
    em.find('.act-tab').removeClass('act-tab');
    em.find('.tn-elem[data-tab-index="'+(el+1)+'"]').addClass('act-tab');
};

//При клике на основной таб
$('div[class*="dbltab-"]').click(function(){    
    let blkNum = +$(this).attr('data-tab-index')-1;
    let tabsGroup = $(this).closest('.tabsgroup');
    tabsGroup.children('.t-rec').addClass('outV outI');
    changeTab(tabsGroup,blkNum);
});

//При клике на внутренний таб
$('div[class*="smtab-"]').click(function(){    
    let activeGroup = $(this).closest('.tabsgroup');
    let activeSection = $(this).closest('.sectiongroup');
    let activeSectionBlock = $(this).closest('.t-rec');
    let className = $(this).attr('class');
    className = className.split(' ');
    let indexBtn = 0;
    for (let i=0; i<className.length;i++){
        if( className[i].includes('smtab-') ){ 
            indexBtn = +className[i].split('-')[2];
            activeSection.find('div[class*="smtab-"]').removeClass('act-sm-tab');
            activeSection.find('.'+className[i]).addClass('act-sm-tab');
        };
    };
    activeSection.children('.t-rec').addClass('outV outI');
    activeSection.height( activeSection.children('.t-rec:eq('+(indexBtn-1)+')').height());
    activeGroup.height( activeSection.children('.t-rec:eq('+(indexBtn-1)+')').height());
    activeSection.children('.t-rec:eq('+(indexBtn-1)+')').removeClass('outV outI');
});

//При ресайзе
$(window).resize(function() {clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){ 
    $('.act-sm-tab').click(); $('.act-tab').click();
}, 2000);});

});
</script>

<style>
  .t-rec.posAn{
    position : absolute;
    width:100%;
    top:0;
}
.outV{opacity:0}
.outI{z-index:-1}
.tabsgroup , .outInd { position: relative}
.tabsgroup { overflow: hidden}
.tn-elem[class*="dbltab"],
.tn-elem[class*="smtab-"]
{ 
    cursor:pointer;
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; 
    -webkit-user-select: none;   
    -khtml-user-select: none;   
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;      
}
.stoptab{pointer-events:none}
.timestep{ transition:all 500ms ease-in-out}
.tn-elem[class*="dbltab"] .tn-atom {
    transition: all 0.1s ease-in-out;
}
.tn-elem[class*="dbltab"] .tn-atom:hover {
    color: #767676 !important;
}
</style>
Made on
Tilda