Как сделать боковой вылет текста в блоке 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__btn').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>