Модификации для тильды https://estarikova.ru ru Sat, 16 May 2026 00:01:16 +0300 Как добавить дополнительные кнопки в попап BF503 https://estarikova.ru/tilda-mod/dobavlenie-knopok-v-bf503 https://estarikova.ru/tilda-mod/dobavlenie-knopok-v-bf503?amp=true Sun, 26 Apr 2026 11:36:00 +0300 Елена Старикова, разработчик сайтов на тильде Формы

Как добавить дополнительные кнопки в попап BF503

На Тильде есть удобный стандартный блок Popup: information (BF503). Обычно я использую этот блок для контактов: Свяжитесь со мной удобным способом и перечисляю мессенджеры. У блока BF503 есть ограничение: в него можно добавить не более двух кнопок, а мне этого не достаточно. В этой статье я покажу, как решить эту задачу с помощью небольшого фрагмента кода и готового конструктора.

Смотреть пример поп-апа

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

Шаг 1. Присвойте CSS-класс блоку BF503

Чтобы код знал, в какой именно попап добавлять кнопки, нужно дать блоку уникальное имя.
  1. Нажмите на блок BF503 и откройте его Настройки.
  2. Прокрутите настройки до самого низа — найдите поле BLOCK CSS CLASS NAME.
  3. Присвойте CSS-класс блоку. Впишите туда любое уникальное имя латинскими буквами. Примеры: uc-kontakty, uc-popup-links, uc-my-contacts
  4. Сохраните настройки блока.

Шаг 2. Используйте конструктор

  1. В поле CSS-класс блока в конструкторе ниже введите тот же класс, который вы указали в настройках блока.
  2. Выберите, сколько дополнительно кнопок хотите добавить: 2, 3 или 4. Для каждой кнопки укажите текст и ссылку.
  3. Нажмите Сгенерировать код и скопируйте результат.

Шаг 3. Вставьте код на страницу

  1. На той же странице в Тильде добавьте блок T123 (HTML-код).
  2. Вставьте скопированный код в этот блок.
  3. Сохраните и опубликуйте страницу.
Готово! Теперь при открытии попапа в нём появятся дополнительные кнопки. Они автоматически копируют стиль стандартных кнопок блока, поэтому будут выглядеть единообразно. Если в настройках вы задали разные стили для первой и второй кнопки, тогда все нечетные кнопки будут иметь стиль первой кнопки, а все четные — второй.

Конструктор кнопок

Заполните форму и скопируйте готовый код в блок T123.
1 CSS-класс блока
Введите класс из настроек блока BF503 (поле BLOCK CSS CLASS NAME)
2 Количество кнопок
3 Настройки кнопок
Предпросмотр
Готовый код

    

  






Как работает код
Сгенерированный код состоит из двух частей:
  • CSS — выравнивает кнопки в сетку по 2 в ряд. Если кнопок нечётное количество, последняя растягивается на всю ширину. На мобильных устройствах кнопки выстраиваются в одну колонку.
  • JavaScript — находит попап по CSS-классу, клонирует существующие кнопки (сохраняя их стили) и заменяет текст и ссылки на ваши. Код срабатывает автоматически при открытии попапа.
]]>