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

Оформить доступ с промокодом
100
Как сделать 3 блока До/После GL09 на одной строке в Tilda
Before | After

Как сделать 3 блока До/После GL09 на одной строке в Tilda

1
Добавили на страницу блоки GL09 друг за другом и задали им класс uc-gl-in-line
2
Задали ширину блоков 12 колонок
3
Добавили код на страницу, в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Меняем расположение блока GL09 в две или три колонки, задаём общий цвет фона.
Длительность видео: 24 мин
Фрагмент видео
Библиотека для примера
<style>
@media screen and (min-width: 960px){
.uc-gl-in-line {
    padding: 0 !important;
}
.uc-gl-in-line .t410__col {
    margin: 0;
}
.maingl:before, .maingl:after{
    display:none;
}
.uc-gl-in-line .t410 .t-col {
    margin:0 auto;
    float: none;
    display: block;
}
.maingl.t-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        const gl09List = document.querySelectorAll('.uc-gl-in-line');
        if(gl09List!=null){
            const glWapper = document.createElement("div");
            glWapper.classList.add('glwrapper');
            glWapper.innerHTML = `<div class="maingl t-container"></div>`;
            const prevGlElem = gl09List[0].previousElementSibling;
            for (let i = 0; i < gl09List.length; i++) glWapper.querySelector('.maingl').appendChild(gl09List[i]);
            prevGlElem.insertAdjacentElement("afterEnd", glWapper);
        }else{
            console.log('uc-gl-in-line not fined');  
        };
    })();    
});    
</script>
Made on
Tilda