График работы: 10:00 - 19:00 Пн - Пт

Вкладки для Платформы LP

Мультитабс (вкладки) для Платформы LP можно настроить после приобретения исходных кодов по ссылке Скрипты для PlatformaLP.

Мультитабс — это скрипт для Платформы LP при помощи которого можно создавать табы (вкладки) любой уровни вложенности. Отличительной особенностью скрипта является то, что вся работа ведется в самом редакторе штатными средствами. Нет необходимости лезть в исходный код и править что-либо. Но в то же время скрипт позволяет тонко настроить CSS-стили для вкладок.

Еще одной интересной особенностью обладает этот скрипт: кнопки переключения табов могут дублироваться и находиться в любом месте в рамках группы вкладок. Мультитабс несмотря на свою простоту является мощным инструментом для создания самых разных комбинаций.

Что можно сделать при помощи этого скрипта:

  • менять изображение и характеристики товара при клике по миниатюрам (например, iPhone черный, белый, серый и т.д.);
  • можно добавить для карточки товара чекбокс (галочка), которая включает/отключает дополнительную услугу (например, галочка «Страхование +500 руб.»);
  • добавлять разделы «Отзывы», «Характеристики» и другие в карточках товаров;
  • создать рубрику Вопрос-ответ;
  • составить пошаговый навигатор (например, презентация или вопрос-ответ с кнопкой «Далее»);
  • применить для составления веток с решениями вопросов в зависимости от ситуаций (см. пример на рисунке ниже);
  • и многое другое…

Пример схемы с ветвлениями. Использование Мультитабс для составления веток с уточняющими вопросами. Т.е. пошаговое решение.

Схема выбора вариант ответа

Файлы ebody.html и head.html откройте в текстовом редакторе Блокнот.

Многоуровневые вкладки можно копировать, добавлять друг в друга, форматировать стили, а главное, делать это при помощи конструктора без каких-либо HTML-виджетов.

Вот пример самой простой вкладки:

Мультитабс — многоуровневые вкладки

Синий — это родительский блок.
Зеленый — блок кнопок переключения.
Красный — вкладки, которые содержат некоторый контент.

А вот так он выглядит на опубликованной странице

Простой таб для лендинга

Ниже вы найдете еще примеры. А теперь давайте приступим к настройке скрипта.

Настройка

Исходный код

Скопируйте в BODY исходный код из файла ebody.html

Теперь скопируйте в HEAD исходный код из файла head.html (не обязательно).

Здесь вы можете менять стили активных кнопок и других элементов переключения между вкладками.

Редактор

Добавьте элемент Блок в конструкторе и пропишите для него class=ptabs. Это будет у нас родительский блок (синий — прим., рамка не обязательна, но она упрощает восприятие при сборке вкладок).

Вкладки на Платформе LP

Добавьте новый Блок (красный) внутрь родительского (синего). Это будет ваша первая вкладка. Пропишите для него class=»alltabs tab1″, где tab1 соответствует номеру вкладки (tab2, tab3, … tabN).

Мультитабс — табы для Платформы LP

Теперь можете добавлять любые элементы внутрь нашей вкладки. Аналогично добавьте все остальные вкладки.

Сейчас добавьте Кнопки для переключения между табами. Для каждой кнопки необходимо прописать id и class. Задайте class=btab, а id=tab1 для первой кнопки, tab2 — для второй, tab3 — для третьей и т.д. Идентификаторы (id) вкладок могут начинаться сначала (tab1, tab2, …).

Табы для Платформы LP

В параметрах кнопок переключите «Действие кнопки» в положение «Ничего не делать».

Несколько вкладок для лендинга

Еще раз отмечу — кнопки переключения табов могут находиться в любом месте родительского Блока (синего).

Они могут повторяться внутри самих вкладок.

Кнопки переключения табов

Могут находиться в родительском Блоке (синем) и служить едиными переключателями между вкладками.

Переключатель между вкладками для Платформы LP

Или вы можете сделать пошаговый опросник.

Пошаговый опросник в Платформе LP

Все зависит только от ваших фантазий.

Примеры

В архиве вы найдете 2 файла с готовыми примерами example1.txt и example2.txt.

example1.txt — простейший пример для демонстрации структуры вкладок.
example2.txt — образец сложной карточки товара с велосипедами.

Добавьте новую секцию в редакторе. Зажмите SHIFT и кликните по значку «Стиль». Скопируйте исходный код из файла example1.txt или example2.txt в открытое модальное окно заменив содержимый код (json строку). После этого сохраните его.

Пример простых вкладок на Платформе LP

В результате получите готовую секцию с примерами.

Пример работы Мультитабс

Update

Обновление от 15.05.2017

  • Добавлена возможность прописывать свои типы элементов в HTML-коде (кнопки, выпадающий список, обычный список, ссылки и другие элементы).

Как настроить?

В конструкторе добавляете HTML-код и прописываете в него ваши элементы.

HTML табы для лендинга

Главное правильно указать селекторы class=”btab” и id=”tab + {номер_вкладки}”.

Выпадающий список
Допустим нужен выпадающий список. Тогда наш исходный код будет следующим:

Скрипт сам разберется с типом элемента будь это кнопка, выпадающий список, блок div или еще что-то. Главное, чтобы для этих элементов были применимы события onclick и onchange (для select).

Маркированный список
Следующий пример демонстрирует маркированный список:

Обновление от 26.05.2017

  • Добавлена поддержка предпросмотра в конструкторе