TGPRINT

Виджеты

Блоки, из которых состоят страницы: доступные типы, создание и редактирование.

Обновлено:

Виджет — это переиспользуемый блок контента: каталог категорий, список частых вопросов, галерея, форма обратной связи, баннер. Из виджетов складываются главная и остальные страницы сайта: виджет создаётся здесь один раз и может быть размещён на любом количестве страниц; когда вы его меняете, изменение видно на всех. Библиотека виджетов находится в разделе Контент → Виджеты.

Библиотека виджетов
Контент → Виджеты: поиск, общее количество, кнопка Add Widget, метки типов и карточки, сгруппированные по типу.

Страница «Виджеты»

Сверху находятся поле поиска Search widgets by name or type..., общее количество виджетов и кнопка Add Widget. Под ними — ряд меток, по одной для каждого типа, у которого есть виджеты, с их количеством; нажмите на метку, чтобы перейти к соответствующей группе. Виджеты сгруппированы по типу, каждый на своей карточке.

Типы виджетов

Тип выбирается при создании и больше не меняется. Доступные типы:

  • Catalog Products — сетка категорий каталога; Recommended Products — товары, выбранные вами; Product Calculation — калькулятор товара со ссылкой на его карточку; Designs — шаблоны дизайна.
  • About Typography — рассказ о типографии (год основания, количество заказов); Advantages и Advantages Mini — списки преимуществ; Numeric Data — ключевые цифры; How Online Order Works — шаги онлайн-заказа; FAQ — вопросы и ответы; Testimonials — отзывы; Logos — логотипы партнёров; Links / Interlinking — список ссылок; News / Blog — статьи из раздела Блог.
  • Photo Carousel и Slider — изображения из папки в разделе Изображения и файлы; Gallery Masonry — галерея-мозаика; Ad Banner — рекламный баннер; Multi-Banner Grid — сетка баннеров (1×3, 3×1 или 2×2); Картинка с текстом — блоки «изображение + текст».
  • Contact Form — форма обратной связи; Timer — обратный отсчёт; Map with Pickup Points — карта филиалов и пунктов выдачи из раздела Доставка; Source Code — собственный HTML-код.

Примечание. Виджеты Source Code с именами вроде Before Calculator — Component или Under Product Image — Component создаются платформой автоматически, по пять на каждый товар: это HTML-зоны карточки товара. Такой виджет, оставленный пустым, на сайте не показывается.

Карточка виджета

На каждой карточке видны тип, название виджета (нажмите на него, чтобы отредактировать), короткий код-идентификатор (# и шесть символов — удобно, чтобы различать два виджета с одинаковым названием) и, если нужно, метка Desktop или Mobile.

  1. Переключатель Active / Inactive — неактивный виджет остаётся в библиотеке и его можно редактировать, но на сайт он не отдаётся.
  2. Clone widget (иконка копирования) — создаёт копию с названием, дополненным (Copy), неактивную, которую можно менять, не трогая оригинал.
  3. Delete widget (корзина) — удаляет виджет после подтверждения Delete this widget?.

Добавление виджета

  1. Нажмите Add Widget. Окно Add Widget перечисляет все типы.
  2. Выберите тип; откроется страница Create Widget.
  3. Заполните Name (внутреннее название, отображаемое в библиотеке и в конструкторе страниц), Device type (Universal — на всех экранах; Desktop или Mobile — только на соответствующих экранах) и Active.
  4. Заполните поля самого типа, раздел Внешний вид (стилистика + отступы) и SEO — см. ниже.
  5. Нажмите Save. Вы вернётесь в библиотеку, где виджет появится в группе своего типа.

Форма виджета

Редактирование виджета
Edit Widget: Links Interlinking — общие данные, блок заголовка, ссылки, раздел «Внешний вид», SEO и код установки.

Форма редактирования устроена одинаково для любого типа; различаются только поля в середине. Пример на снимке — виджет Links / Interlinking.

  1. Name, Device type, Active — общие данные.
  2. TITLE BLOCK — заголовок секции на сайте: Overline (мелкая строка сверху), Title, Subtitle (абзац под заголовком), Heading tag (уровень заголовка, H1–H6) и Alignment (Left, Center, Right). Advanced styling раскрывает выравнивание, цвет и размер каждой строки по отдельности.
  3. Поля самого типа. У Links / Interlinking: Раскладка + стиль ссылки (количество Колонки, Стиль ссылки — подчёркивание всегда, при наведении или без него — и иконка внешней ссылки), затем по одному блоку на каждую ссылку, с полями Якорь (текст), URL и Описание (мелкое); Добавить ссылку добавляет строку, корзина её удаляет.
  4. Внешний вид (стилистика + отступы) — Стиль (По умолчанию (из стиля сайта) или один из визуальных вариантов), Отступ сверху и Отступ снизу (По умолчанию (md) или фиксированный размер), Ховер карточки и Ховер изображения (По умолчанию (из глобальных настроек)). Значения по умолчанию берутся из раздела Дизайн; меняйте их, только если хотите, чтобы секция отличалась от остального сайта.
  5. SEO — Мета заголовок (максимум 70 символов), Мета описание (максимум 160) и Ключевые слова.
  6. Installation Code — HTML-фрагмент, идентифицирующий виджет, с кнопкой Copy.
  7. Нажмите Save.

Чтобы разместить виджет на странице, откройте её в разделе Контент сайта → Страницы и воспользуйтесь Add block → Link — см. Страницы.