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

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

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

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

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

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

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

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

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

 

Содержимое

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

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

Стили

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

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

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

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

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

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

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

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

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

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

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

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

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

  4. Добрый день. Подскажите как-то возможно выровнять иконку с текстом по центру колонки?

    1. Здравствуйте. По умолчанию и так по середине колонки. А на вкладке Стиль, есть возможность изменить выравнивание.

      1. У меня выравнивается слева, сюда к сожалению прикрепить не могу (((
        Не знаю как объяснить, может выровнять в секции по центру. У меня иконка с текстов только слева в секции выравнивается, других возможностей не вижу в стиле.

          1. https://prnt.sc/11ok60r

            Вот такая иконка с текстом по центру секции… Иконка должна быть слева, а не наверху, а все вместе выравниваться в центре секции на всю ширину. Те настройки что в элементоре не помогают. Решила вопрос стилями без иконок. Если кому пригодится выглядит вот так:

            h1::before {
            content: » «;
            background: #373737;
            width: 50px;
            height: 2px;
            position: relative;
            left: 0;
            top: -10px;
            display: inline-block;
            margin-right: 10px;
            }

              1. Спасибо. Да это один шикарных вариантов, но к сожалению нет возможности выбрать у текста H1, а надо именно H1 чтобы текст был.

                  1. единственное что может подойти — fa-minus, но он короткий и толстый. По дизайну никак (((
                    Оставлю стилем как сделала.
                    Спасибо, что не оставили вопрос без внимания! )))

  5. Здравствуйте, если вставил svg в иконку и выставил границу, можно заголовок вставить не снизу границы иконки, а вставить выше границы. Чтобы иконка и текст были в одной рамке?

    1. День добрый. Нет, нельзя. Если только не виджетом, а вручную, создав секцию и обрамив ее.

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

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

Реклама

Готовые сайты за 3000 рублей. Купить готовый сайт с конструктором это реально. А создать сайт можно дешево, быстро и просто. Купить сайт на web5x.ru

Конструктор сайтов Elementor Pro вы можете отдельно купить от 49$
Купить Elementor Pro

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