Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как сделать боковой вылет текста в блоке SV401 в Tilda
CONSTRUCTION
Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
INTERIOR DESIGN
Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
DESIGN AND BUILD
Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
HOUSE RENVATION
Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit

Как сделать боковой вылет текста в блоке SV401 в Tilda

1
Создали блок SV401 и задали такие настройки:
  • кол-во блоков в ряду - 2
  • Карточки -выравнивание - по левому краю/ вертикальное выравнивание - по верху
  • Цвет фильтра #000000 - 70% (верх и низ)
  • Анимация при наведении - Видимость контента - Показать контент сразу
2
Кнопкам задали подписи, но ссылки не задаём. Их указали в коде

let linkBtn = [
'#popup:subscribe',
'#popup:subscribe',
'#popup:subscribe',
'#popup:subscribe'
];
3
Добавили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём вылет текста в блоке.
Добавляем скроллбар для ограничения высоты текстовой части. Длительность видео: 11 мин
Фрагмент видео
Библиотека для примера

<script>
$(document).ready(function(){
    
let linkBtn = [
        '#popup:subscribe',
        '#popup:subscribe',
        '#popup:subscribe',
        '#popup:subscribe'
    ];
    
    
$('.t851__table').each(function(index){
    let imgSrc = $(this).find('.t851__img').attr('src');
    $(this).append('<div class="t851__table_image-wrapper"><img class="t851__table_image" src="'+imgSrc+'"></div>');

    $(this).find('.t851__button-container .t-card__btn-wrapper').wrap('<a class="t851__link_btn" href="'+linkBtn[index]+'" target="">');
    
    
    
    
    
});

$('.t851__cell').click(function(){
    if( $(this).hasClass('slidemode') ){
        $(this).toggleClass('slidemode');    
    }else{
        $('.t851__cell').removeClass('slidemode');
        $(this).toggleClass('slidemode');    
    };
});
});
</script>





<style>
.t851__descr {
    max-height: 320px;
    overflow-y: auto;
}
.slidemode+div.t851__table_image-wrapper,
.slidemode .t851__bg
{ width: 30%}
.t851__button-container , .t851__textwrapper {
    width: 70%;
}
div[data-record-type="851"] ::-webkit-scrollbar-thumb {
        background: #b6142c;
        border-radius: 1px;
}
div[data-record-type="851"] ::-webkit-scrollbar {
        width: 3px;
        background: #efefef;
}
.t851__table { display: block}
img.t851__img { display: none}
.t851__link { height: 100%}

.t851__col {margin-bottom: 40px;}
.t851__container {
    display: flex;
    flex-wrap: wrap;
}
.t851__bg {width: 100%}
.t851__table {height: 100% !important}
.t851__button-bottom .t851__button-container {position: absolute}
.t851__button-container , .t851__textwrapper,
.t851__table_image-wrapper, img.t851__table_image , .t851__bg
{transition: all 0.5s ease-in-out}
.t851__textwrapper {
    background-color: #fff;
    height: auto;
}
.t851__button-bottom .t851__textwrapper { position: relative}
.t851__button-container {background-color: #fff}
.t851__button-container , .t851__textwrapper {
    transform: translateX(100%);
    box-sizing: border-box;
}
.t851__cell.slidemode .t851__button-container ,
.t851__cell.slidemode .t851__textwrapper {
    transform: translateX(0%);
}

.t851__overlay {opacity: 0.6}
.t851__cell:hover .t851__overlay { opacity: 1}
.t851__cell {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    cursor:pointer;
    padding-bottom: 90px;
    box-sizing: border-box;
}
.t851__button-bottom .t851__button-container { left: auto}
.t851__table_image-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
img.t851__table_image { 
    width: 60%;
    max-width: 210px;
}
.t851__table:hover .t851__table_image { transform: scale(1.1)}
.slidemode+div.t851__table_image-wrapper { width: 30%}

@media screen and (max-width: 960px){
.t851__col_mobile-grid {width: 100%}
}
@media screen and (max-width: 640px){
.t851__button-bottom .t851__button-container {right: 0px}
}
@media screen and (max-width: 460px){
.slidemode+div.t851__table_image-wrapper { width: 0%}
.t851__button-container , .t851__textwrapper {width: 100%}
}
</style>

Tilda Newsletter
Subscribe to our email newsletter for useful tips and valuable resources, sent out every month
Made on
Tilda