Как работать с модулем «Список из иконок»

С помощью модуля «Список из иконок» можно создать список услуг, качеств, видов товара или услуги. Для примера настройки этого модуля мы создадим такой список возможностей оплаты товара:

Как добавить модуль на страницу

1. 1.

   Войдите в режим редактирования сайта.

2. 2.

   Выберите строку, в которую хотите добавить модуль.

3. 3.

   Нажмите на серый плюс.

4. 4.

   Выберите нужный модуль:

Готово, теперь можете переходить к настройкам внешнего вида текста.

Настройки каждого модуля находятся в трёх вкладках: «Контент», «Дизайн», «Дополнительно».

Контент

Во вкладке «Контент» нажмите на знак плюса:

Вы перейдёте в режим настройки иконки. Здесь тоже есть три вкладки для настройки внешнего вида иконки «Контент», «Дизайн» и «Дополнительно».

Обратите внимание! Если вы хотите указать одинаковые настройки текста и иконок (например, цвет, шрифт, размер), удобнее это делать в общих настройках модуля во вкладке «Дизайн».

Во вкладке «Контент» в блоке «Контент» настройте текст и картинку для элемента списка. Чтобы выбрать иконку из предложенного списка, в параметре Использовать иконку переведите переключатель в положение ДА и выберите иконку:

Если вам не подходят предложенные иконки, можно загрузить своё изображение. Для этого в параметре «Использовать иконку» переведите переключатель в положение НЕТ и нажмите на знак плюса. Загрузите изображение:

В блоке «Подсказка» можно настроить всплывающую подсказку. Для этого в параметре Использовать всплывающую подсказку переведите переключатель в положение ДА и введите текст, который должен отображаться в подсказке:

Ниже в блоке «Фон» можно установить однотонный или градиентный фон для элемента списка.

Во вкладке «Дизайн» в блоке «Иконка» настраивается:

• закругление краёв иконки,
• рамка,
• тень.

В блоке «Изображение» настраивается:

• цвет фона иконки,
• отступ слева от изображения,
• размер иконки,
• закругление фона иконки,
• рамка.

В блоке «Подсказка» настраивается:

• с какой стороны будет отображаться подсказка: справа, слева, снизу, сверху,
• цвет фона подсказки,
• ширина,
• шрифт, цвет, размер, межбуквенный интервал, выравнивание текста внутри подсказки.

В блоке «Текст» настраивается шрифт, цвет, размер, межбуквенный интервал текста рядом с иконкой.

Во вкладке «Дополнительно» настраивается CSS и HTML-код для элемента.

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

Добавьте и настройте остальные элементы списка.

Обратите внимание! Если вы указали индивидуальные настройки для каждого текста и иконки, в этой вкладке в блоках «Текст», «Иконка», «Изображение», «Подсказка» ничего устанавливать не нужно.

В блоке «Текст» можно настроить расстояние между иконкой и текстом, шрифт, цвет, размер, межбуквенный интервал, тень всего текста списка.

В блоке «Иконка» настраивается закругление краёв фона, рамка, тень всех иконок.

В блоке «Изображение» настраивается цвет фона, отступ слева, размер, закругление фона, рамка для всех изображений.

В блоке «Список элементов» настраивается:

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

С помощью блоков «Размеры» и ​​«Отступы» настройте размер всего модуля и его положение на странице.

В блоке «Фильтр» можно изменить контрастность, насыщенность, яркость, прозрачность изображений.

В блоке «Анимация» настройте параметры появления модуля на странице (с затемнением, отскок, слайдер и др.).

Дополнительно

Эта вкладка предназначена для опытных пользователей, которые умеют работать с CSS и HTML. Также здесь можно настроить видимость элемента на разных устройствах, например, модуль будет отображаться только на компьютерной версии сайта. Как посмотреть внешний вид сайт на разных устройствах, описано в статье.

Помогла ли вам статья?

Да

0
раз уже помогла

Модуль иконка — Готовые сайты с системой управления

Текст под иконкой

Нажмите на данный текст для редактирования.

Текст под иконкой

Нажмите на данный текст для редактирования.

Текст под иконкой

Нажмите на данный текст для редактирования.

Текст под иконкой

Нажмите на данный текст для редактирования.

Текст под иконкой

Нажмите на данный текст для редактирования.

Текст под иконкой

Нажмите на данный текст для редактирования.

Текст под иконкой

Нажмите на данный текст для редактирования.

Текст под иконкой

Нажмите на данный текст для редактирования.

Текст под иконкой

Нажмите на данный текст для редактирования.

Текст под иконкой

Нажмите на данный текст для редактирования.

Текст под иконкой

Нажмите на данный текст для редактирования.

Текст под иконкой

Нажмите на данный текст для редактирования.

Текст под иконкой

Нажмите на данный текст для редактирования.

Функциональность

• При наведении на иконку – иконка и текст окрашивается выбранным цветов, а маленькая иконка в центре становится белой.

• Цвет иконки и текста можно менять

• Стиль иконки можно менять – это или квадратная иконка или круглая

• На выбор доступно огромное количество иконок в формате UTF-8

• При появлении модуля в блоке вывода — блок вывода меняет своё поведение и производит выравнивание всех модулей по центру (по умолчанию — выравнивание по левому краю)

Адаптивность

В настройках модуля можно задать два адаптивных типа поведения:

• С фиксированной шириной и высотой

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

   

• С шириной заданной в процентах, высота выравнивается по содержимому.

  Для разных типов устройств (настольные компьютеры, ноутбуки, планшеты, смартфоны)  можно задать – какой процент области может занимать модуль на том или ином устройстве.

  Например, мы можем показывать  12 изображений на различных устройствах так:

  • на настольных компьютерах:  2 ряда по 6 модулей
  • на ноутбуках 3 ряда по 4 модуля
  • на планшетах 4 ряда по 3 модуля
  • на смартфонах 6 рядов по 2 модуля

Пример адаптивности с фиксированной шириной и высотой для 4 модулей: 

Административная панель

Функциональность

• Управление показом — везде / только на компьютерах / только на телефонах / отключить
• Возможность вывода модуля в любом доступном блоке вывода
• Возможность изменить порядок следования внутри блока

• Установка типа адаптивного поведения: с фиксированным размером и обтеканием по левому краю и установки ширины модуля в процентах на разных типах устройств.

• Установка размера, ширины / высоты модуля в пикселях для адаптивного поведения с фиксированным значением

• Установка ширины модуля в процентах для разных типов устройств

• Мгновенное визуальное изменение размеров иконок
• Установка отступа по ширине / по высоте
• Выбор иконки

• Установка стиля иконки: круглая / квадратная

• Выбор эффекта появления

• Редактирование текста на иконке

• Редактирование цвета иконки
• Установка ссылки, ведущую с текста на любую страницу
• Визуальное редактирование модуля и просмотр результата после применения
• Возможность размещать текст, изображения, видео

Настройка модуля

Последнее обновление: 17 июня 2022 г.

При создании модуля доступно несколько параметров, влияющих на то, где модуль виден, как он идентифицируется и как он редактируется. Модули отображаются локально как папки с суффиксом .module . Внутри этой папки находятся файлы, составляющие настройки модуля, и код, используемый для его рендеринга. Конфигурация хранится в файле meta.json. Поля настраиваются отдельно в файле fields.json. Большую часть конфигурации также можно изменить с помощью редактора модулей в Design Manager.

Добавление значка

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

1. открыть модуль в менеджере дизайна,
2. , когда в редакторе модулей значок рядом с заголовком и типом модуля является кнопкой. При выборе этой кнопки появляется поле загрузки значка.
3. Загрузите/выберите свой значок, и теперь вы сможете увидеть его в редакторе страниц и менеджере дизайна.

Добавьте значок с помощью CLI

Чтобы добавить значок при локальной разработке , откройте файл meta.json модуля и добавьте или измените значение параметра icon , чтобы оно было SVG из файлового менеджера.

// мета.json
{
«глобальный»: ложь,
«host_template_types»: [«СТРАНИЦА»],
«icon»: «http://example.com/hubfs/code.svg»,
«label»: «Блок кода»,
«smart_type»: «НЕ_СМАРТ»,
«is_available_for_new_content»: правда,
«inline_help_text»: «Этот модуль предназначен для фрагментов кода.»
}

Создание иконки модуля

Значки модуля должны представлять собой файл .svg и размером не более 10 КБ . Для достижения наилучших результатов ваша иконка должна быть довольно простой и использовать только один цвет. Если ваш значок использует более одного цвета, он будет автоматически преобразован для вас. Отображаемый значок модуля по умолчанию представляет собой значок гаечного ключа и кисти.

Изменение этикетки

Метка, используемая при отображении модулей в редакторе, может быть настроена отдельно от имени модуля. Это полезно при локальной разработке, поскольку у вас может быть имя, которое имеет смысл для вас, в то время как создатели контента видят другое. Локально вы изменяете параметр label , чтобы установить метку. В менеджере дизайна есть поле в редакторе модулей под названием модуля.

Сделать модуль глобальным

Для обычных модулей содержимое каждого экземпляра модуля на странице, электронной почте или шаблоне независимо. В некоторых случаях полезно иметь возможность использовать один и тот же контент для всех экземпляров модуля. Установка global на true делает это.

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

Контроль того, где модуль доступен для использования

Модули могут быть ограничены определенными типами содержимого посредством того, как hostTemplateTypes настроен. Модули также можно скрыть, чтобы их нельзя было добавить непосредственно на страницы, установив is_available_for_new_content на false . Модули, созданные для меню навигации и поиска, являются хорошими кандидатами для сокрытия с помощью is_available_for_new_content .

Оба они также могут управляться через редактор модулей.

Добавление зависимостей CSS и JavaScript

В дополнение к использованию module.css и module.js для добавления CSS и JavaScript, которые будут добавлены на все страницы, содержащие экземпляр модуля, общие зависимости между модулями могут быть присоединены с помощью css_assets и js_assets . Пути могут быть абсолютными или относительными к файлу meta. json .

// мета.json
{
«css_assets»: [{ «путь»: «../путь/к/файлу.css» }],
«js_assets»: [{ «путь»: «../путь/к/файлу.js» }]
}

Предупреждение: При использовании относительных путей для ссылок на зависимости выполняется hs fetch --overwrite для обновления модуля для локальной разработки перезапишет относительные пути абсолютными путями.

мета.json

Вы можете добавить параметры из таблицы ниже в файл meta.json модуля.

Поделитесь своим отзывом

Была ли эта статья полезной?
Да
Нет

Извините, для работы этой формы обратной связи требуется JavaScript.

Эта форма используется только для обратной связи по документации. Узнайте, как получить помощь с HubSpot.

Основы и навигация для модулей eRA

Для повышения удобства использования модули eRA постепенно переходят на упрощенный, современный, удобный для мобильных устройств внешний вид экранов. Новый внешний вид и новая навигация динамически адаптируются к различным экранам и размерам шрифта, что делает работу в Интернете более эффективной на выбранном вами устройстве. Новые элементы пользовательского интерфейса предлагают согласованный набор инструментов, которые можно использовать в разных модулях. Новый верхний и нижний колонтитулы экономят место, оставляя больше рабочего пространства для выполнения ваших задач.

В этом разделе рассматриваются новые элементы навигации и пользовательского интерфейса, которые вы можете увидеть на обновленных экранах. Все модули в конечном итоге будут использовать одну и ту же структуру для создания пользовательского интерфейса и навигации по экранам. Экраны старого стиля будут сосуществовать с обновленными экранами во время перехода к новому внешнему виду. Не все показанные здесь элементы экрана будут отображаться во всех модулях.

Прочтите этот раздел, чтобы узнать о:

• Верхний/нижний колонтитул для модулей eRA
• Навигация к модулям и внутри них
• Столбец «Действия» и то, как его можно заменить раскрывающимся списком с многоточием (тремя точками) в строке
• Стандартные инструменты для столов

Верхний и нижний колонтитулы

На всех экранах в eRA Commons появляется буква А. В переходный период вы увидите как старые, так и новые экраны в eRA Commons и модулях eRA.

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

Первый значок слева — это меню приложений. В меню «Приложения» отображаются все приложения, доступные пользователю, вошедшему в систему, как показано ниже:

.

Другие значки в заголовке

Ссылки на Министерство здравоохранения и социальных служб.

Ссылка на гранты.nih.gov.

Ссылки на общую страницу службы поддержки eRA Service Desk.

Ссылки на страницу контактных лиц eRA.

Значок человека показывает вашу информацию для входа, учреждение, ссылку для изменения пароля, настройки электронной почты и ссылку для выхода:

Динамический заголовок

Ниже, на узком экране, большинство элементов в заголовке скрыты, но они всплывают при нажатии на значок сетки в правом верхнем углу, обведенный внизу.

Обновленный нижний колонтитул

Нижний колонтитул чистый и предлагает только важную информацию, организованную в столбцы.

Навигация внутри модуля

Аббревиатура модуля, обведенная внизу слева, позволяет быстро увидеть, в каком модуле вы работаете.

Разделы модулей перечислены вверху, при этом текущий раздел выделен серым цветом и обведен кружком выше.

Чтобы перейти к экранам, доступным в каждом разделе, щелкните имя раздела, чтобы открыть раскрывающийся список со всеми именами экранов, как показано ниже.

Если размер экрана мал, все названия разделов приложения свернуты под трехстрочным значком, как показано ниже.

При нажатии трехстрочный значок показывает всю навигацию по модулям в вертикальной форме внизу.

Столбец действий заменен меню с многоточием

Действия, доступные для каждой строки таблицы, могут отображаться под значком с многоточием из трех точек вместо Actions столбец, как показано ниже. Это происходит, если нужно отобразить три или более действий. Если в списке указан только один элемент действия, то в столбце это действие будет указано в заголовке, а в теле столбца будет стоять «x».

Стандартные инструменты для таблиц

Таблицы стали более изящными благодаря инструментам для отображения данных, которые вы хотите видеть.

Фильтр

Ввод текста фильтра обеспечивает мгновенную фильтрацию списка по мере ввода, при этом количество найденных результатов обновляется по мере ввода. Текст, который вы вводите в фильтре, выделяется в таблице.

Инструмент выбора строк/массового действия

Используйте инструмент массовых действий, чтобы выбрать все или отменить выбор, а также показать только выбранные строки или все строки. Другие инструменты массового действия также могут позволить вам отметить или снять флажки для всех видимых в данный момент строк (например, найденных при вводе текста фильтра).

Отметить все отмечает все флажки независимо от количества отображаемых страниц записей. Другими словами, если доступно 10 страниц записей, из которых в настоящий момент видна только первая страница, Отметить все отмечает все включенные флажки на всех страницах. В отличие от этого, Check All Visible помечает только те включенные флажки на видимой в данный момент странице. См. Навигация по страницам ниже, чтобы узнать, как перемещаться между страницами данных.

Средство выбора столбцов

Нажмите, чтобы выбрать видимые столбцы в таблице, установив или сняв их флажки. Выбор столбца действует только до тех пор, пока вы не перейдете на другой экран.

Сортировка столбцов

Щелкните заголовки столбцов для сортировки по этому столбцу.

Скачать и распечатать

Используйте средство загрузки, показанное ниже, для экспорта данных таблицы в Excel или PDF или для печати.