Web5X - Готовые сайты

Блог о создании сайта, конструкторе сайтов и Elementor

основное изображение виджет иконка elementor

Иконка — виджет Elementor

Виджет иконка предназначен для размещение в контенте страниц иконки. Количество иконок в данном виджете достаточно большое, а именно это все иконки из FontAwesome. На момент написания статьи используется fontawesome версии 4.7. Список всех иконок можно посмотреть на офф. сайте FontAwesome 4.7

Когда мы создаем сайт нам нужна не просто иконка, но и изменить ее цвет, размер, вписать ее в круг итд. И в этом нам тоже поможет конструктор веб сайтов Elementor.

иконка в констукторе сайта

На рисунке выше представлены различные вариации иконок созданные с помощью настроек свойств виджета. Самая первая иконка, это иконка по умолчанию т.е как только разместили виджет. А теперь посмотрим на свойства виджета

Содержимое

- Иконка

  • Вид - вид иконки (без обрамления, вписанная или обрамленная)
  • Иконка - выбор иконки из списка. Список иконок можно посмотреть на офф сайте.
  • Ссылка - ссылка иконки.
  • Выравнивание - выравнивание иконки относительно блока

 

Стили

- Иконка

  • Основной цвет - цвет иконки. Если выбран тип иконки "Вписанная" то основной цвет это цвет заполнения вокруг иконки.
  • Второстепенный цвет - второй цвет иконки. При типе иконки "Обрамленная",  второстепенным цветом является заполнение вокруг иконки. А цвет иконки и обводка это основной цвет.
  • Размер - размер иконки
  • Отступ внутри - отступ внутри иконки для типа иконок обрамленная или вписанная.
  • Повернуть - возможность повернуть иконку на нужной угол относительно центра иконки.
  • Толщина границы - толщина границы обрамления при типе иконки "обрамленная ".
  • Скругление углов - скругление углов границы при типе иконки "обрамленная ".

- Иконка при наведении

  • Основной цвет - цвет иконки при наведении на иконку
  • Второстепенный цвет - второстепенный цвет при наведении на иконку
  • Анимация при наведении - анимация иконки при наведении на иконку. Возможно выбрать один из множества способов анимации.

=======================================================================
Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
=======================================================================

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Блог о создании сайта, конструкторе сайтов и Elementor.
Авторские права © 2017-2020 . Все права защищены.
Готовые сайты на web5x.ru
Политика конфиденциальности