Вывести блоки в несколько колонок

Как сделать колонки из блоков
Пример работы скрипта
#rec492069402
#rec492069944,#rec492070741
#rec492069183
  • Hight Quality
    We are a leading firm in providing quality and value to our customers. Each member of our team has at least 5 years of legal experience.
  • Good Support
    Our managers are always ready to answer your questions. You can call us at the weekends and at night. You can also visit our office for a personal consultation.
Работу данного скрипта видно только на десктопных устройствах. На мобильных Тильда распределяет содержимое колонок вертикально.
#rec409535626,.uc-docs
#rec409542612,.uc-scripts
Инструкция
  • 1
    Добавьте на страницу блок с текстом в 2, 3 или 4 колонки, добавьте класс uc-cols
    Скрипт работает с блокам CL01, CL03, CL04
  • 2
    Установите скрипт со стилями на страницу в HTML-блок
    Код должен быть установлен ниже блока с контентом: в самом конце страницы или в подвале
  • 3
    Добавьте ID блоков, которые вы хотите отобразить в колонках, в текст колонок в нужном вам порядке
    Вы можете добавлять по несколько блоков в каждую колонку, перечисляя их через запятую. Посмотреть как.
  • 4
    Опубликуйте страницу
    Наслаждайтесь результатом!
Скрипт

<style>
.uc-cols ul{
    list-style-type: none;
}
</style>
<script>
    fillCols('.uc-cols');
    
    function fillCols(id) {
        const $wrapper = $(id);
        $wrapper.find('.t-col').each(function() {
            const blockId = $(this).text().trim();
            let $block = $(blockId);
            $block.find('.t-col').removeClass('t-col');
            
            $(this).empty();
            $(this).append($block);
        });
    } // Инструкция по работе со скриптом https://trilda.ru/kak-dobavit-bloki-v-kolonki-tilda
</script>
Важно! Обратите внимание, что некоторые блоки в Tilda, которые сами по себе могут иметь разную ширину, должны быть сделаны в 12 колонок, без отступов. Иначе возможно кривое отображение.
Вопросы и комментарии
Made on
Tilda