Как объединить блоки в тильде
Перейти к содержимому

Как объединить блоки в тильде

  • автор:

Просим обратить внимание: техническая поддержка 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. Настройте ширину блоков в ряду и отображение на мобильных устройствах

Как сделать, чтобы одно меню накладывалось на первый блок, а второе появлялось при скролле?

Добавьте на страницу два блока основного меню, например, МЕ301. И задайте им следующие параметры:

Первое меню (остается на обложке):

Основные настройки → Поведение позиционирования → С наложением на следующий блок, но без фиксирования

 Второе меню (появляется при скролле):

Основные настройки → Поведение позиционирования → Фиксация при скролле и Основные настройки → Появление меню при прокрутке через N пикселей — 600px

Похожие вопросы
  • Как добавить вкладки и переключать блоки?
  • Как добавить меню второго уровня (многоуровневое меню)?
  • Как добавить одно меню на все страницы?
  • Как создать меню вида «хлебные крошки»?
  • Какие блоки меню фиксируются на мобильных?

Как соединить 2 блока в 1 и убрать часть border?

Всем привет, уже были подобные вопросы, но внутри небыло текста, что более проще.

390f9e160b6649c49591f73ff3fdae10.png

Как сверстать такой блок:

?

  • Вопрос задан более трёх лет назад
  • 1613 просмотров

Комментировать

Решения вопроса 2

BohdanK

9e374cac4b0843e6b9da7c7b71ca608d.JPG

Просто так, бордерами вы не сделаете, либо нужно добавить третий вспомогательный блок (ниже на картинке), либо добавить к блоку, который вверху слева, псевдокласс ::after и с помощью него скрыть границу, то есть зарисовать таким же цветом, как и фон страницы. Но тогда верхний блок должен быть фиксированной высоты.

Вот такой вариант с псевдоэлементом: https://jsfiddle.net/cchnc6t7/

Ответ написан более трёх лет назад

Комментировать

Нравится 1 Комментировать

Есть ли слои в Zero Block?

Да. Чтобы показать панель «Слои» в режиме редактирования Zero Block нажмите справа вверху на «. » (три точки) — откроется панель меню. Для включения слоёв нажмите на Layers: Hide/Show:

Каждый элемент отображается с соответствующей иконкой и названием:

Похожие вопросы
  • Как добавить стрелку в Zero Block?
  • Как добавить направляющие линии в Zero Block?
  • Как в Zero Block настроить увеличение изображения по клику?
  • Что такое Tooltip (тултип) в Zero блоке?
  • Как сделать анимацию на мобильных в Zero Block?

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

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