На Тильде есть удобный стандартный блок Popup: information (BF503). Обычно я использую этот блок для контактов: Свяжитесь со мной удобным способом и перечисляю мессенджеры. У блока BF503 есть ограничение: в него можно добавить не более двух кнопок, а мне этого не достаточно. В этой статье я покажу, как решить эту задачу с помощью небольшого фрагмента кода и готового конструктора.
Смотреть пример поп-апа
Смотреть пример поп-апа
Пошаговая инструкция
Шаг 1. Присвойте CSS-класс блоку BF503
Чтобы код знал, в какой именно попап добавлять кнопки, нужно дать блоку уникальное имя.
- Нажмите на блок BF503 и откройте его Настройки.
- Прокрутите настройки до самого низа — найдите поле BLOCK CSS CLASS NAME.
- Присвойте CSS-класс блоку. Впишите туда любое уникальное имя латинскими буквами. Примеры: uc-kontakty, uc-popup-links, uc-my-contacts
- Сохраните настройки блока.
Шаг 2. Используйте конструктор
- В поле CSS-класс блока в конструкторе ниже введите тот же класс, который вы указали в настройках блока.
- Выберите, сколько дополнительно кнопок хотите добавить: 2, 3 или 4. Для каждой кнопки укажите текст и ссылку.
- Нажмите Сгенерировать код и скопируйте результат.
Шаг 3. Вставьте код на страницу
- На той же странице в Тильде добавьте блок T123 (HTML-код).
- Вставьте скопированный код в этот блок.
- Сохраните и опубликуйте страницу.
Готово! Теперь при открытии попапа в нём появятся дополнительные кнопки. Они автоматически копируют стиль стандартных кнопок блока, поэтому будут выглядеть единообразно. Если в настройках вы задали разные стили для первой и второй кнопки, тогда все нечетные кнопки будут иметь стиль первой кнопки, а все четные — второй.
Конструктор кнопок
Заполните форму и скопируйте готовый код в блок T123.
Как работает код
Сгенерированный код состоит из двух частей:
- CSS — выравнивает кнопки в сетку по 2 в ряд. Если кнопок нечётное количество, последняя растягивается на всю ширину. На мобильных устройствах кнопки выстраиваются в одну колонку.
- JavaScript — находит попап по CSS-классу, клонирует существующие кнопки (сохраняя их стили) и заменяет текст и ссылки на ваши. Код срабатывает автоматически при открытии попапа.
