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

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

заставка - иконка с текстом - виджет конструктор сайта

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

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

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

Виджет "Иконка с текстом" предназначена для отображения иконки, с заголовком и описанием.  Макет отображения виджета может быть разный, например можно иконку разместить слева или справа, можно ее вписать в круг или квадрат, а можно вообще её повернуть на некоторый градус. Я частенько пользуюсь виджетом, что быстро сделать блок преимуществ и логотип для сайта. На момент написания статьи используется fontawesome версии 4.7. Список всех иконок можно посмотреть на офф. сайте FontAwesome 4.7

иконка с текстом - виджет конструктор сайта

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

 

Содержимое

- Иконка с текстом

  • Вид - вид отображения иконки, т.е обрамленная, вписанная или по умолчанию без ничего.
  • Выберите иконку - в выпадающем списке можно выбрать иконку ,вручную или через поиск вводом кода иконки.  Список всех иконок можно посмотреть на офф сайте FontAwesome.
  • Заголовок и описание - текстовая составляющая виджета т.е заголовок и описание.
  • Ссылка на - http ссылка на любой ресурс. Ссылка прикрепляется к иконки и заголовку. Описание остается нетронутым.
  • Позиция иконки - расположении иконки относительно текста: лево, верх, право.
  • HTML-тег заголовка - тег html для заголовка виджета. Необходимо менять при разработки семантики сайта.

Стили

- Иконка
У иконки возможно изменить стилевые свойства цвета иконки, как самой иконки, так и обрамления (или заполнения - для разного вида иконок свой стиль). Так же доступны отступы, размер иконки и угол поворота, толщина границ и ее скругление.

- Иконка при наведении
Для иконки при наведении на нее указателем мыши, доступны изменения ее цвета и установка вида анимации.

- Содержимое
Для заголовка доступны такие свойства как: отступ, цвет, типографика.  А для описания возможно изменить только цвет и типографика.

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

Иконка с текстом — виджет Elementor: 11 комментариев

  1. Добрый день! Купил Элементор ПРО и когда делаю иконки, то можно ставить не все инконки, большинство из низ просто светиться вопросительный знак и восклицательный. Кто сталкивался с таким?

    1. День добрый. Не сталкивался, всегда иконки отображались. Вы пробовали написать в поддержку ? Обычно без проблем помогают по версии ПРО

    1. День добрый. Только через написание стилей на вкладке Расширенные.
      Например selector .elementor-icon {border-color:#000 !important;}

  2. Добрый день! Почему у меня в мобильной версии иконка только сверху контента, разве нельзя никак поставить на одном уровне с текстом?

    1. День добрый. С помощью виджета не получится. Физически размеры не позволяют. Как выход вставить секцию и отдельно поместить иконку и отдельно текст. Тогда можно колонкам задать необходимое поведение для разных экранов.

        1. С помощью CSS в данном варианте совсем неправильно.
          Воспользуйтесь советом выше или же виджетом типа Call to Action

  3. Здравствуйте ! У меня не получается «Иконка с текстом » при наведени на текста должен активировать стили Иконку при наведении , Как решить ?

    1. Здравствуйте. По столь короткому описанию ошибки точно не решить. Нужен пример, сайт, что сделано итд.

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

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

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