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

Как наложить один блок на другой в тильде

  • автор:

Эффект наложения блока при скролле

Модификация добавляет эффект наложения одного блока на другой при скролле страницы. Применить можно к любым стандартным блокам и zero block, которые укажешь в коде. Демо решения.

Как сделать эффект наложения блока при скролле

Для реализации эффекта высота блока должна быть больше высоты экрана.

  1. Укажи в настройках id всех блоков через запятую, которым нужно добавить эффект.
  2. Скопируй этот код и вставь на свой сайт. Памятка по вставке кода.

Совмещаем Zero Block и блок с товарами

Идея совмещения двух блоков заключается в наложении элементов верхнего блока на нижний. Для этого в Zero Block выставляется настройка Overflow:Visible и элементы располагаются за нижней границей блока.

Пошаговая инструкция:

  1. Подготавливаем блок с 4 товарами
  2. Над ним создаём Zero Block
  3. В общих настройках устанавливаем Overflow:Visible
  4. Добавляем шейп таким образом, чтобы он выходил за нижнюю границу видимой области Zero Block
  5. В рамках 3-х колонок макетной сетки размещаем любые элементы
  6. Адаптируем блок под мобильные устройства, чтобы контент не наезжал на нижний блок
  7. Сохраняем. Опубликовываем. Готово!

Совет:

Также, похожее наложение можно использовать с другими блоками. Особенно это удобно когда в стандартном блоке есть настройка отступа слева.

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

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

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

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

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

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

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

Как на Тильде сделать ссылку

Стоит начать с того, что в работе с Тильдой существует несколько различных ситуаций, в которых вам может понадобиться сделать ссылку:

  1. Создание ссылки в тексте.
  2. Создание ссылки в готовом блоке.
  3. Создание ссылки с элемента в Zero Block.
  4. Создание якорной ссылки.

Создание ссылки в тексте

Самое простое, что может быть в Тильде. Чтобы сделать ссылку, нужно кликнуть на текст в готовом блоке, при этом вверху появится панель с функциями. Выделите мышкой часть текста, которую вы хотите сделать ссылкой и нажмите в верхнем меню на иконку скрепки. В поле «Укажите ссылку» введите относительную (если это ссылка на внутреннюю страницу на Тильде) или абсолютную (если это внешняя ссылка) ссылку. Отметьте чекбокс «Открыть ссылку в новой вкладке», если это внешняя ссылка.

Ниже вам будут доступны дополнительные настройки: цвет текста, цвет и толщина линии, rel=»nofollow».

Создание ссылки в готовом блоке

Чтобы на Тильде сделать ссылку в любом готовом блоке, необходимо навести на блок и нажать на кнопку «Контент» в левом верхнем углу блока. В зависимости от категории блока (меню, плитка и ссылка, форма и кнопка и т. д.) нужно выбрать поле, в котором предусмотрено место для добавления ссылки. В указанное место необходимо добавить ссылку вручную, либо нажать на ссылки «Выбрать страницу» или «Выбрать блок». Здесь также можно отметить чекбокс «Открыть в новой вкладке», если ссылка должна открываться в новой вкладке.

Создание ссылки с элемента в Zero Block

В зависимости от того, с какого типа элемента в Zero Block нужно сделать ссылку, мы выполняем различные действия. Принцип добавления ссылки в текстовый блок такой же как для готового блока. Необходимо дважды кликнуть по текстовому блоку и в открывшейся панели нажать на иконку скрепки. Далее появляется панель, описанная в главе «Создание ссылки в тексте».

Чтобы на Тильде сделать ссылку с элементов Image и Shape, необходимо кликнуть на элемент левой кнопкой мыши, затем нажать на кнопку Settings в правом нижнем углу. В открывшемся окне открываем секцию Link и указываем ссылку в поле URL. Также можно настроить дополнительные параметры: Target (открывать или нет в новом окне) и Rel Nofollow (запрет перехода по ссылке для поискового робота).

Для элемента Button все идентично предыдущим двум элементам, но в окне настроек отсутствует секция Link. Ссылка указывается в поле URL.

Создание якорной ссылки

Бывают ситуации, когда ссылка должна вести не на отдельную страницу, а на конкретный блок внутри существующей или отдельной страницы. В этом случае нам на помощь приходит якорная ссылка. Чтобы на Тильде сделать якорную ссылку, необходимо в Библиотеке блоков нажать на категорию «Другое» и там выбрать блок Т173. Разместите его перед тем блоком, на который вы хотите ссылаться.

Наведите на созданный блок и в левом верхнем углу нажмите на «Контент». В поле «Имя якорной ссылки» укажите латиницей название для якорной ссылки. Хорошо, если оно будет по смыслу соответствовать блоку, на который вы хотите ссылаться.

Далее переходите к тому элементу, который должен ссылаться на выбранный блок. Это может быть один из элементов, описанных в предыдущих разделах. Необходимо указать имя якорной ссылки, поставив перед ним значок решетки. Пример якорной ссылки: #contacts. Если вы хотите указать ссылку на блок на другой странице, вы просто добавляете перед якорной ссылкой адрес этой страницы: /path/#contacts

Возможен еще один вариант. Вы можете навести на блок, на который хотите сослаться и в левом верхнем углу нажать на «Настройки». Необходимо прокрутить в самый низ окна и скопировать значение в поле Block ID — это имя уникальной якорной ссылки блока. Ее необходимо прописать в том месте, откуда вы хотите сделать якорную ссылку.

Если у вас остались вопросы о том, как на Тильде сделать ссылку, пишите их в комментариях к этой статье.

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

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