Как работать с модулем «Список из иконок»
С помощью модуля «Список из иконок» можно создать список услуг, качеств, видов товара или услуги. Для примера настройки этого модуля мы создадим такой список возможностей оплаты товара:
Как добавить модуль на страницу
- 1.
Войдите в режим редактирования сайта.
- 2.
Выберите строку, в которую хотите добавить модуль.
- 3.
Нажмите на серый плюс.
- 4.
Выберите нужный модуль:
Готово, теперь можете переходить к настройкам внешнего вида текста.
Настройки каждого модуля находятся в трёх вкладках: «Контент», «Дизайн», «Дополнительно».
Контент
Во вкладке «Контент» нажмите на
Вы перейдёте в режим настройки иконки. Здесь тоже есть три вкладки для настройки внешнего вида иконки «Контент», «Дизайн» и «Дополнительно».
Обратите внимание! Если вы хотите указать одинаковые настройки текста и иконок (например, цвет, шрифт, размер), удобнее это делать в общих настройках модуля во вкладке «Дизайн».
Во вкладке «Контент» в блоке «Контент» настройте текст и картинку для элемента списка. Чтобы выбрать иконку из предложенного списка, в параметре Использовать иконку переведите переключатель в положение ДА и выберите иконку:
Если вам не подходят предложенные иконки, можно загрузить своё изображение. Для этого в параметре «Использовать иконку» переведите переключатель в положение НЕТ и нажмите на знак плюса. Загрузите изображение:
В блоке «Подсказка» можно настроить всплывающую подсказку. Для этого в параметре Использовать всплывающую подсказку
переведите переключатель в положение ДА и введите текст, который должен отображаться в подсказке:Ниже в блоке «Фон» можно установить однотонный или градиентный фон для элемента списка.
Во вкладке «Дизайн» в блоке «Иконка» настраивается:
- закругление краёв иконки,
- рамка,
- тень.
В блоке «Изображение» настраивается:
- цвет фона иконки,
- отступ слева от изображения,
- размер иконки,
- закругление фона иконки,
- рамка.
В блоке «Подсказка» настраивается:
- с какой стороны будет отображаться подсказка: справа, слева, снизу, сверху,
- цвет фона подсказки,
- ширина,
- шрифт, цвет, размер, межбуквенный интервал, выравнивание текста внутри подсказки.
В блоке «Текст» настраивается шрифт, цвет, размер, межбуквенный интервал текста рядом с иконкой.
Во вкладке «Дополнительно» настраивается CSS и HTML-код для элемента.
Для продолжения настройки модуля выйдите из меню настроек элемента списка. Для этого в верхней части поля настроек нажмите на стрелку:
Добавьте и настройте остальные элементы списка.
Обратите внимание! Если вы указали индивидуальные настройки для каждого текста и иконки, в этой вкладке в блоках «Текст», «Иконка», «Изображение», «Подсказка» ничего устанавливать не нужно.
В блоке «Текст» можно настроить расстояние между иконкой и текстом, шрифт, цвет, размер, межбуквенный интервал, тень всего текста списка.
В блоке «Иконка» настраивается закругление краёв фона, рамка, тень всех иконок.
В блоке «Изображение» настраивается цвет фона, отступ слева, размер, закругление фона, рамка для всех изображений.
В блоке «Список элементов» настраивается:
- как будут располагаться элементы списка: в линию или колонкой,
- выравнивание: справа, слева или по центру,
- где будет находиться текст относительно иконок: сверху, снизу, по центру,
- что в начале: иконка или текст,
- пространство между строками,
- фон для всех строк,
- рамка для всех строк,
- тени.
С помощью блоков «Размеры» и «Отступы» настройте размер всего модуля и его положение на странице.
В блоке «Фильтр» можно изменить контрастность, насыщенность, яркость, прозрачность изображений.
В блоке «Анимация» настройте параметры появления модуля на странице (с затемнением, отскок, слайдер и др.).
Дополнительно
Эта вкладка предназначена для опытных пользователей, которые умеют работать с CSS и HTML. Также здесь можно настроить видимость элемента на разных устройствах, например, модуль будет отображаться только на компьютерной версии сайта. Как посмотреть внешний вид сайт на разных устройствах, описано в статье.
Помогла ли вам статья?
Да
0
раз уже
помогла
Как вставить иконки в конструкторе UniSender
Иконки нужны, чтобы направить читателя рассылки на важные страницы сайта. Например, на страницу с отзывами или в контакты. Картинка и подпись помогают подписчику понять, куда он попадет.
Кроме того, с помощью иконок удобно оформить звонок или отправку сообщения прямо из письма.
Разберемся, как добавить и настроить иконки в конструкторе.
Добавляем блок с иконками в письмо
Чтобы добавить иконки в письмо, перетащите блок «Иконки» в нужное место рассылки. Затем в свойствах блока добавьте необходимое количество иконок, используя кнопку «Добавить новую иконку».
По умолчанию вы получите иконку в форме звезды, но ее можно заменить на любую другую с помощью опции «Изменить картинку».
Добавляем ссылку к каждой иконке
Перейдем к настройке внешней ссылки. Чтобы открыть развернутые настройки, используйте переключатель «Подробнее» (1).
В строку «Url иконки» можно вставить ссылку на иконку на внешнем хранилище, если не хотите загружать ее в UniSender (2).
Обязательно заполните альтернативный текст (3). Если в почтовом ящике получателя изображения будут отключены, альтернативный текст поможет понять, в какой раздел сайта ведёт иконка.
Чтобы подписать иконку, используйте строку «Текст иконки» (4). Лучше вводить короткие названия, например, «Отзывы» или «Позвонить».
С помощью разных типов ссылки настройте действие при клике на иконку: открыть ссылку, отправить письмо, позвонить, отправить СМС (5).
Выбираем действие при клике на иконку
Разберем подробнее, какие действия можно выбрать в строке «Тип ссылки».
Открыть ссылку. При клике по иконке пользователь попадет на страницу сайта, которую вы укажите. Важно добавлять ссылки с протоколом http:// или https://.
Далее в выпадающем списке «Цель» выберите, как будет открываться ссылка — в новой вкладке или в текущей.
Отправить письмо. Читатель сможет отправить письмо на заданный email прямо из рассылки. Укажите, на какой email будет отправлено письмо. Также можете задать тему и написать текст письма. Но эти данные отправитель сможет редактировать.
Позвонить. При клике по иконке читатель сможет позвонить вам прямо из письма, если его браузер или почтовый клиент умеют обрабатывать протокол tel.
Отправить СМС. Работает по такому же принципу, что и ссылка «Позвонить», то есть при нажатии на иконку пользователь сможет написать СМС-сообщение на заданный номер.
Настраиваем блок с иконками
Выравнивание. Опция позволяет изменить расположение иконок в блоке ближе к левому краю, посередине, по правому краю.
Шрифт, цвет и размер шрифта. Выберите шрифт подписи иконок. Лучше использовать тот же, что и в письме. Цвет текста можно выбрать как из предложенной палитры, так и вставить его в виде шестнадцатеричного кода.
Размер иконок. По умолчанию иконки загружаются в размере 32 px. При желании их можно уменьшить до 16 px или увеличить до 64 px и 128 px. Выберите нужный размер в выпадающем списке.
Интервал между иконками. Позволяет отрегулировать интервал между иконками от 0 до 20 единиц.
Отступы иконок. Настраиваем отступы от внутренних стенок блока: как от конкретных сторон, так и по всему периметру.
Опция «Скрыть». Позволяет скрыть блок «Иконки» при просмотре на мобильном или на компьютере. Чтобы сбросить эту настройку, нажмите на крестик.
При таких настройках иконка не будет отображаться на мобильных устройствах
Услуги по разработке логотипов | ЛоготипMakr
Услуги по разработке логотипов
Услуги по разработке фирменного логотипа
Дизайн фирменного логотипа — это уникальный профессиональный логотип, который сообщает клиентам и пользователям, что представляет ваш бренд.
Успешные компании понимают, что их бренд рассказывает уникальную историю о том, кто они и чем они отличаются. Мы твердо верим, что ваш логотип — это первое психологическое семя, которое увидят ваши пользователи, которое не только выделит вас среди других, но и определит вашу ценность.
Воспроизвести видео
Пакеты логотипов
Как мы работаем
3-этапный процесс
Опишите свой логотип
Начните с заполнения нашей анкеты о стилях дизайна, цветах и шрифтах, которые вам нравятся. Это даст нам представление о типе логотипа, который вы ищете, и поможет нам разработать идеальный индивидуальный дизайн для вас.
Получение концепций дизайна
Ваша презентация дизайна доставляется по электронной почте. Теперь вы можете выбрать идеальную концепцию дизайна, оставить свой отзыв или запросить совершенно другие концепции при проведении следующей презентации.
Завершите ваш идеальный логотип
Внесите окончательные изменения в выбранную вами концепцию. Завершите выбор дизайна. Окончательные файлы для выбранного вами дизайна логотипа доставляются в формате изображения и вектора для использования в Интернете, социальных сетях и для профессиональной печати.
Выбрать пакет дизайна логотипа
Выберите пакет дизайна
Индивидуальный дизайн логотипа
Редизайн логотипа
- Разнообразие стилей индивидуального дизайна!
- НЕОГРАНИЧЕННОЕ концепций и ревизий!
- Шаблоны никогда не используются
- 4-6 дизайнов в каждой презентации
- 100% оригинальность
- 100% права собственности
- Доставка 2-3 рабочих дня
- Окончательные файлы высокого разрешения/вектора
- БОНУС: Индивидуальный набор для брендинга*
- Перед
- После
-
Подтяжка вашего текущего дизайна логотипа - Неограниченное количество изменений дизайна
- Шаблоны никогда не используются
- 2-4 дизайна в каждой презентации
- 100% оригинальность
- 100% права собственности
- Доставка 2-3 рабочих дня
- Окончательные файлы высокого разрешения/вектора
Индивидуальный дизайн против редизайна
2-минутное видео
Последняя работа
Выбрать пакет дизайна логотипа
vimeo.com/video/521635827?color&autopause=0&loop=0&muted=0&title=0&portrait=0&byline=0#t=»>Выбрать пакет дизайна логотипа
*БОНУС: Психологический брендинг
В ваш пакет индивидуального дизайна мы включаем специальный обзор «Психологический брендинг» вашей отрасли и применяем его к вашему дизайну. Наши ведущие дизайнеры-маркетологи выполняют эту задачу до создания презентации дизайна. Что это значит? Проще говоря, наша маркетинговая команда определит, что выделяет ваш бренд среди конкурентов, и поможет сопоставить внешний вид вашего бренда с вашим новым логотипом. Этот процесс, вероятно, является самой важной вещью, которую вы можете сделать, поскольку вам нужен не только потрясающе выглядящий логотип, но и эффективный логотип. Этот бонусный процесс является одной из многих причин, почему LogoMakr — лучший выбор для ваших профессиональных услуг по разработке логотипов!
Узнать больше
Последние выполненные проекты
дизайнов, тем, шаблонов и графических элементов Icon Designer, загружаемых на Dribbble
Посмотреть минимальные значки приложений
Минимальные значки приложений
Посмотреть набор иллюстраций Marklogic
Набор иллюстраций Marklogic
Просмотр наборов друзей — день 2
Наборы друзей — День 2
Посмотреть иллюстрированные иконы Klarna
Иллюстрированные иконки Klarna
Посмотреть подборку логотипов
Набор логотипов
Набор иконок пользовательского интерфейса Proemion
Посмотреть иконографию Дейбриджа
Иконография Дэйбриджа
Посмотреть стиль иконографии Атопы
Стиль иконографии Atopa
Посмотреть дизайн логотипа: 3Cevre
Дизайн логотипа: 3Cevre
Вид .
Посмотреть набор иконок
Набор иконок
Посмотреть JS
Посмотреть иллюстративные значки банка ключей
Иллюстративные значки Keybank
Посмотреть эскизы Космоса
Эскизы космоса
Просмотр SignOnSite
SignOnSite
Посмотреть иконографию восстановления ServPro
Иконография ServPro Restoration
Посмотреть руководство по фирменному стилю Tamochat
Руководство по фирменному стилю Tamochat
Вид .
Посмотреть ✨
Посмотреть эскиз робота
Эскиз робота
Просмотр дракона
Дракон
Посмотреть дизайн логотипа utm.