LIFEHACKOV.RU

Tilda Publishing

Двойные блоки в Tilda. Как сделать и зачем они нужны

Введение

Двойные блоки в Tilda — это как двойное дозирование вдохновения для ваших веб-проектов на платформе Tilda Publishing. Если вы уже знакомы с этой платформой, то знаете, что Tilda — это мощный инструмент для создания сайтов без необходимости в глубоких знаниях веб-разработки. Однако, когда дело доходит до создания уникального и креативного контента, двойные блоки в Tilda становятся настоящей находкой.

Что такое двойные блоки в Tilda? Это инструмент, позволяющий объединить два блока в один, что дает вам возможность создавать удивительные макеты и улучшать визуальное восприятие вашего сайта. Двойные блоки в Tilda обогащают ваши творческие возможности, позволяя воплощать в жизнь самые смелые идеи.

Теперь, давайте погрузимся в мир двойных блоков Tilda и рассмотрим, как они могут стать настоящими магическими инструментами в вашем арсенале.

Двойные блоки в Tilda: Множество возможностей

Двойные блоки в Tilda
Двойные блоки в Tilda

Двойные блоки предоставляют вам бескрайний океан возможностей для творчества. Они позволяют вам комбинировать различные элементы вашего сайта так, будто вы играете в роли виртуозного дирижера веб-оркестра. Вы можете сочетать текст и изображения, видео и кнопки, формы и графику – всё, что вам нужно, чтобы сделать ваш сайт неповторимым.

Двойные блоки в Tilda — это не только возможность улучшить визуальное оформление вашего сайта, но и способ подчеркнуть важные моменты и информацию. Вы можете выделить ключевые аспекты вашего контента, используя двойные блоки, и придать им особый акцент. Это как подчеркнуть текст маркером, только в веб-дизайне.

Как создать двойные блоки в Tilda. Пошаговая инструкция

Двойные блоки в Tilda
Двойные блоки в Tilda

Давайте перейдем от слов к делу и узнаем, как же сделать двойные блоки на вашем тильда сайте. Будем использовать zero block в связке с любыми другими блоками. Итак:

skillbox
  1. Создайте zero block там, где у вас должны быть двойные блоки
  2. Зайдите в редактор нулевого блока и удалите все элементы из него
  3. Удалите фоновый цвет этого блока и сохраните изменения
  4. После зеро блока создайте два любых блока, которые по поместим в пустой зеро блок
  5. Зайдите в настройки этих двух блоков
  6. В пункте «BLOCK CSS CLASS NAME» введите класс «uc-childblock»
  7. После всех блоков на странице создайте HTML блок «Т123»
  8. Нажмите на кнопку «Контент»
  9. В открывшемся поле вставьте следующий код:
<style>
    /* ID пустого блока */	
    #rec650586096 {
        display: flex;
    }

    .uc-childblock {
        width: 50%;
        height: 100%;
    }
    
</style>
<script>
    var zblock = document.getElementById ("rec650586096"); // ID пустого zero block
    let inblock1 = document.getElementById ("rec650586378"); //ID блока с контентом 
    let inblock2 = document.getElementById ("rec650586471"); //ID блока с контентом 
    

    zblock.appendChild(inblock1);
    zblock.appendChild(inblock2);
  
</script>

  1. Скопируйте ID пустого zero block и вставьте его в код, в указанные места
  2. Скопируйте ID блоков с контентом и вставьте их в код, в указанные места
  3. Сохраните изменения и опубликуйте страницу

Теперь, на вашем тильда сайте, вместо пустого zero block, вы увидите два блока с контентом, расположившихся друг рядом с другом. Это и есть двойные блоки. Если вы хотите создать тройной блок, то есть три блока в одном в ряд, то посмотрите нашу видео инструкцию.

Сила в двойных блоках: Вывод

Двойные блоки в тильде — это удивительный инструмент, который приносит двойную порцию креатива и вдохновения в мир веб-дизайна. Они позволяют вам создавать уникальные макеты, выделять важную информацию и экономить время. Не упустите возможность воспользоваться этим мощным инструментом и сделать ваш сайт неповторимым и привлекательным для посетителей. Двойные блоки в Tilda — это ключевая фраза для вдохновения и творчества в веб-дизайне.

Смотрите обучающие видео уроки по Тильде тут

Читайте также: Пагинация в Tilda

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Сайт функционирует за счет рекламы

Пожалуйста, выключи блокировщик рекламы, чтобы продолжить пользоваться сайтом