ZeroBlock Testimonials

Добавляем слайдер с отзывами в ZeroBlock в Tilda

Пример выполнен на базе блока Отзывы►TS206N
Порядок выполнения данного примера
1. Создали ZeroBlock и добавили элемент Shape c размерами
1 экран - 400х240рх

2,3,4 экран - 380х240рх
5 экран - 320х240px

2. Создали блок TS206N c настройками

- Ширина блока - 4 колонки
- Отступ слева - Без отступа
-Фото удалили
- Размер шрифта 14px
- Отступ сверху и снизу 0px

3. Добавляем код на страницу в блок Другое►Т123
В коде меняем класс своего Shape блока
tn-elem__507517421523595831624

И ID блока с отзывами #rec50752037

<style>
/*Задаём автовысоту у Shape*/
.testimonials1{
    height: auto !important;
}
/*Задаём внутренние отступы у Shape*/
.testim .tn-atom{
    padding: 20px 0 20px 0;
}
/*Задаём ширину блока с отзывами*/
    [data-record-type="798"] {
        width:400px;
    }
/*Задаём внутренние отступы для отзывов справа и слева*/    
    .t798__cell_padding-left {
    padding-left: 25px;
    padding-right: 25px;
}
/*Задаём внешние отступы и привязки для отзывов*/
  .t798 .t-col{
    margin-left: 0px !important;
    margin-right: 0px !important;
    float: none !important;
}
/*При ширине экрана меньше 480рх делаем ширину блока с отзывами 320рх*/
@media screen and (max-width: 480px){
 [data-record-type="798"] {
        width:320px;
}
/*Отменяем отсту справа*/
.t798__cell_padding-left {
    padding-right: 0px !important;
}
/*Задаём внутренние отступы у Shape*/
.testim .tn-atom{
    padding: 5px 0 10px 0;
}
}
</style>

<script>
//Добавляем класс к нашему Shape элементу в Zero
    $(".tn-elem__507517421523595831624").addClass("testimonials1 testim");
//Перемещаем блок с отзывами в элемент Shape в ZeroBlock    
    $("#rec50752037").appendTo(".testimonials1 .tn-atom");
</script>
Made on
Tilda