Easily build and manage your community with the bbPress forum plugin
bbPress is a forum software with a twist from the creators of WordPress. Easily setup discussion forums inside your WordPress powered site.
Optimize your site for search engines with Yoast SEO for WordPress
Yoast SEO allows you to easily optimize your WordPress site with one plugin for all search engines. It allows for real time content analysis of your blog entries and has many more features to streamline your site. A premium version of the plugin is also available.
Build great forms with GravityForms
Although Enfold has a great and simple form builder for everyday contact forms, sometimes what you need is something more sophisticated with a lot more options. Thats where GravityForms shines!



Use Slider Revolution for beautiful slides
Although the plugin is not included as part of the theme (other than the Layerslider Plugin, which is) the theme will show an extra template builder element for the Slider Revolution Plugin for easier integration with our layouts. No Matter with Layer Based Slider you prefer, we got you covered!
Open your own WooCommerce Online Store

WooCommerce is now the most popular eCommerce platform on the web, so you can rest assured you're in good company. Build beautiful and functional stores without any hassle by using our Enfold Theme in conjunction with WooCommerce.
Use LayerSlider for amazing custom animations. The plugin is the only one included in the theme

Our goto slider when it comes to complex layer-based animation sliders. The Plugin is included as part of the theme but no worries, if you don't use we wont load it, to take care of your server resources.
Mailchimp Newsletter Integration
Our goto slider when it comes to complex layer-based animation sliders. The Plugin is included as part of the theme but no worries, if you don't use we wont load it, to take care of your server resources.
Manage and organize events with this amazing plugin
A solid, feature-rich calendar and events management suite that's scalable from soup to nuts. Also comes with a Pro version and a ton of extensions. Definitely check it out!
Create sites with multiple languages with Enfold and WPML
WPML allows running fully multilingual websites with WordPress, making it easy to translate WordPress pages, posts, tags, categories and themes. And since our Themes are optimised for WPML the whole experience gets even better!

Как сделать сделать горизонтальный блок с табами в ZeroBlock в Tilda

Как выполнили данный пример:

1. Создали основной блок управления в ZeroBlock
2. Добавили в него элементы для каждой карточки. Каждого по 9 штук
Image , Shape , Text , Button
3. Добавили 9 ZeroBLock с контентом
4. Добавили скрипт на страницу
Скрипт вставляется в блок ДРУГОЕ►Т123

В коде заменили:
//Прописываем класс к нашему таб-меню
$('#rec101355931').addClass('tabmenu');

//Прописываем наши скрытые блоки var hideblock = ["#rec101688753","#rec102181936","#rec102195870","#rec102215272","#rec102217024","#rec102218189","#rec102219950","#rec102224944","#rec102227380"];
СПИСОК ВСЕХ ВИДЕО
Видеоинструкция данного примера
Видеоинструкция данного примера доступна в архиве
mo-tilda Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём таб меню из ZeroBlock
2. Компануем карточки и элементы
3. Создаём контентные блоки с элементами анимации
4. Редактируем код

Делаем блок с табами (вкладками) , который управляет несколькими ZeroBlock.
Длительность видео 25 мин.
Подписка к видеоинструкции на платной основе
Фрагмент видео
<style>
/*Серый цвет для иконок*/
.tabmenu div[data-elem-type="image"] .tn-atom {
   filter: grayscale(1);
   opacity:0.5;
}
/*Плавность анимации для Shape*/
.tabmenu div[data-elem-type="shape"] {
    transition: all 0.3s ease-in-out;
}
/*Класс активной иконки*/
.activeicon, .hovericon{
    opacity:1!important;
    filter: grayscale(0) !important;
}
/*Класс активного Shape*/
.activeshape, .hovershape{
     margin-top: -20px;
}
</style>

<script>
$(document).ready(function() {
    //Прописываем класс к нашему таб-меню
    $('#rec101355931').addClass('tabmenu');
    //Прописываем наши скрытые блоки
     var hideblock = ["#rec101688753","#rec102181936","#rec102195870","#rec102215272","#rec102217024","#rec102218189","#rec102219950","#rec102224944","#rec102227380"];
    //Добавляем классы к нашим скрытым блокам
     $(hideblock[0]).addClass('tabcontent');var i = 0; var number = 0;
     for(let i = 1; i < hideblock.length; i++){
     $(hideblock[i]).addClass('tabcontent t400__off');};  
  
    //Эффект при наведении на вкладку
     $('.tabmenu div[data-elem-type="button"]').hover(function(){ 
      number = $('.tabmenu div[data-elem-type="button"]').index(this);     
      $('.tabmenu div[data-elem-type="image"]:eq('+number+') .tn-atom').addClass('hovericon');
      $('.tabmenu div[data-elem-type="shape"]:eq('+number+')').addClass('hovershape');     
	  }, function(){ 
	  $('.tabmenu div[data-elem-type="image"]:eq('+number+') .tn-atom').removeClass('hovericon');
      $('.tabmenu div[data-elem-type="shape"]:eq('+number+')').removeClass('hovershape');
	  });
    //Добавляем активную вкладку при загрузке страницы
        $('.tabmenu div[data-elem-type="image"]:first .tn-atom').addClass('activeicon');
        $('.tabmenu div[data-elem-type="shape"]:first').addClass('activeshape');
    //При нажатии на вкладку
    $('.tabmenu div[data-elem-type="button"]').click(function(e) {e.preventDefault();
        //Вычисляем номер нашего таба         
        number = $('.tabmenu div[data-elem-type="button"]').index(this);
       //Удаляем классы акивного состаяния
        $('.tabmenu div[data-elem-type="image"] .tn-atom').removeClass('activeicon');
        $('.tabmenu div[data-elem-type="shape"]').removeClass('activeshape');
       //Делаем активным данную вкладку
        $('.tabmenu div[data-elem-type="image"]:eq('+number+') .tn-atom').addClass('activeicon');
        $('.tabmenu div[data-elem-type="shape"]:eq('+number+')').addClass('activeshape');
       //Добавляем класс скрытия для контентных блоков
       $('.tabcontent').addClass('t400__off'); 
       //ПОказываем нужный контентый блок
       $(hideblock[number]).removeClass('t400__off');
});
});
</script>
Made on
Tilda