Конструктор иконок: Иконки конструктор — 1,943 бесплатных иконок

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

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

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

  1. 1.

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

  2. 2.

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

  3. 3.

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

  4. 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

Услуги по разработке логотипов

Услуги по разработке фирменного логотипа

Дизайн фирменного логотипа — это уникальный профессиональный логотип, который сообщает клиентам и пользователям, что представляет ваш бренд.

Успешные компании понимают, что их бренд рассказывает уникальную историю о том, кто они и чем они отличаются. Мы твердо верим, что ваш логотип — это первое психологическое семя, которое увидят ваши пользователи, которое не только выделит вас среди других, но и определит вашу ценность.