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