Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
1) Нужно создать под каждый блок отдельную страницу и настроить его. Таких блоков по горизонтали может быть от двух до четырех. Так-же, добавляем код#1 на страницы с блоками.
2) Переходим на основную страницу и добавляем код#2. В нем находится два элемента iframe. Если нам нужно больше блоков по горизонтали, продублируйте строку кода с элементом iframe и измените в ней номер:
4) Добавляем код#4 и в нем указываем высоту блоков:
.halfblock <
height: 100vh;
>
Можно указать в пикселях 500px или в vh (100vh это 100% высоты экрана).
Важно: в iframe страница попадает полностью, поэтому, если у вас нет годовой подписки в блоках не на всю высоту экрана будет отображаться лейбл вот так. Проблему можно решить, например, добавлением большого отступа на 1000px (блок DV05).
И указываем ширину каждого блока, копируя этот код:
.halfblock1 <
flex: 400px 0 0;
>
flex: 1 0 0; — остаток. Если у нас два блока и у одного блока поставить 400 пикселей, а у второго 1 0 0, тогда второй блок будет занимать (100% ширины экрана — 400 пикселей)
flex: 50% 0 0; — половина ширины экрана
flex: 400px 0 0; — 400 пикселей
5) Если нужно задать другое поведение блоков при определенной ширине экрана, добавляем код 5
Можно добавить display: none и блок не будет отображаться:
.halfblock1 <
display: none;
>
Или можно добавить код#6, чтобы на телефонах блоки перестраивались в столбец.
Если на странице нужно еще в другом месте поставить несколько таких блоков, тогда нужно изменить класс элементов, например с halfblock1, на halfblock2-1.
Модификация дает возможность разместить по горизонтали на одном экране от 2 до 4 разных блока.
Как работает модификация:
1. Создайте отдельные страницы под каждый блок из ряда и добавьте код#1
2. Добавьте на основную страницу код#2 и код#3 — они отвечают за отображение блоков из отдельных страниц в ряд. Блоки будут отображаться в iframe.
3. Настройте ширину блоков в ряду и отображение на мобильных устройствах
Эффект наложения блока при скролле
Модификация добавляет эффект наложения одного блока на другой при скролле страницы. Применить можно к любым стандартным блокам и zero block, которые укажешь в коде. Демо решения.
Как сделать эффект наложения блока при скролле
Для реализации эффекта высота блока должна быть больше высоты экрана.
- Укажи в настройках id всех блоков через запятую, которым нужно добавить эффект.
- Скопируй этот код и вставь на свой сайт. Памятка по вставке кода.
Совмещаем Zero Block и блок с товарами
Идея совмещения двух блоков заключается в наложении элементов верхнего блока на нижний. Для этого в Zero Block выставляется настройка Overflow:Visible и элементы располагаются за нижней границей блока.
Пошаговая инструкция:
- Подготавливаем блок с 4 товарами
- Над ним создаём Zero Block
- В общих настройках устанавливаем Overflow:Visible
- Добавляем шейп таким образом, чтобы он выходил за нижнюю границу видимой области Zero Block
- В рамках 3-х колонок макетной сетки размещаем любые элементы
- Адаптируем блок под мобильные устройства, чтобы контент не наезжал на нижний блок
- Сохраняем. Опубликовываем. Готово!
Совет:
Также, похожее наложение можно использовать с другими блоками. Особенно это удобно когда в стандартном блоке есть настройка отступа слева.
Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
С помощью модификации вы сможете зафиксировать блок сверху или снизу экрана при скролле и заставить отлипнуть в нужном месте. Работает как с блоками из библиотеки, так и с Zero Block.
Модификация: прилипание блока
За модификацию спасибо Дмитрию и Эдуарду
Блок фиксируется в верхней части экрана после того, как пользователь доскроллит до нужного места
Фиксация сверху без отлипания
1) Добавьте в нужном месте блок, который будет прилипать к верхней части экрана.
2) Добавьте код #1 в блок Т123 из категории «Другое».
3) Замените в коде id прилипающего блока. Id можно найти в самом низу настроек блока. Формат — #rec135372713.
/* Sticky блок - замените на Id блока который должен прилипнуть */ #rec135372713 < position: sticky; position: -webkit-sticky; z-index: 999; top: 0px; >.t-records Блок фиксируется вверху экрана, когда до него доскроллит пользователь, и отлипает в нужном месте.
Фиксация сверху с отлипанием
1) Добавьте блок, который будет прилипать к верху экрана.
2) Добавьте код #2 в блок Т123 из категории «Другое»
3) Укажите в коде Id прилипающего блока и блока, после которого прилипание отключится. Id можно найти в самом низу настроек блока. Формат — #rec135372713.
/* Sticky блок - замените на Id блока который должен прилипнуть */ #rec135372713 < position: sticky; position: -webkit-sticky; z-index: 999; top: 0px; >.t-records Блок будет зафиксирован в нижней части экрана с начала страницы и отлипнет в нужном месте.
Фиксация снизу с отлипанием
1) Добавьте блок, который будет фиксироваться внизу экрана. Расположите блок в месте, где должно произойти отлипание. Если блок должен быть зафиксирован до конца страницы, расположите его в самом низу.
2) Добавьте код #3 в блок Т123 из категории «Другое».
3) Укажите в коде Id блока, прилипающего к низу. Id можно найти в самом низу настроек блока. Формат — #rec135372713.
/* Sticky блок - замените на Id блока который должен прилипнуть */ #rec135372713 < position: sticky; position: -webkit-sticky; z-index: 999; bottom: 0px; >.t-records