Web5X Блог

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

Web5X Блог

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

Поиск по блогу

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

Обновлено: 08.03.2018
22 комментариев
заставка - иконка с текстом - виджет конструктор сайта

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

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

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

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

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

 

Содержимое

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

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

Стили

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

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

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

Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

22 комментариев

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

    • A

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

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

    • A

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

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

        • A

          Выложите скрин на фотохостинг какой нибудь.
          У меня так. https://yadi.sk/i/BVqq0ZPsYLncFg
          https://yadi.sk/i/U85Ni1ikOD7qWg

          • 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;
            }

            • A

              Теперь понял. Нужно было так и описывать, что иконка слева.
              Используйте виджет «список с иконками» https://blog.web5x.ru/spisok-s-ikonkami-widget-elementor/
              Это для первой строчки, заголовка. Для второй, текста, любой подходящий.

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

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

    • A

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

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

    • A

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

      • Плохо, что не на одном уровне… Подскажите тогда как в css это сделать?

        • A

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

  • Приветствую. Как у иконки задать border-color?

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

    • A

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

Оставьте свой комментарий