Web5X Блог

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

Web5X Блог

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

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

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

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

Наверно каждый составлял различные списки на своем сайте, будь то просто сайт-визитка или landing page. Список может использоваться в различных целях, от перечня ссылок на какие то документы, до перечисления преимуществ или же включенный услуг.

Обычно в wordpress мы создаем список с помощью редактора, простым выделение параграфов и нажимаем на кнопку "Маркированный список". В итоге получаем обычный список с маркеров в начале т.е точкой (по умолчанию). А что если нужно больше? Например поставить иконку перед элементом или безошибочно задать ссылку, а может установить разделитель строк. Все это возможно с помощью конструктора сайта и соответствующего виджета.

Виджет "Список с иконками" предназначен для отображения обычного маркированного списка с маркером в виде иконки. Виджет достаточно прост и не содержит в себе особых настроек, лишь стилевые настройки. Каждый элемент списка, это группа настроек в которой задается текст, иконка и ссылка при необходимости.

виджет список с иконками для конструктора сайтов

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

Стили

- Список

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

- Иконка

  • Цвет - Общий цвет иконок списка. Свой цвет иконок для всех элементов списка
  • Размер - размер иконок списка, т.е общий размер всех иконок виджета.

- Текст

  • Отступ текста - отступ между текстом и иконкой.
  • Цвет текста - общий цвет текста для текстовых элементов виджета
  • Типографика - размер шрифта, название, насыщенность итд для текстов виджета.
Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

21 комментарий

  • Спасибо за помощь! Теперь точно знаю, что это у меня где-то багает.

  • Попробуйте на живом примере. Добавьте в плагин редиректа ссылку https://web.archive.org/web/20210720100123if_/https://www.mos.ru/pgu/common/landing/03_ГУ МВД России по г. Москве/приложение №2 к заявлению (сведения о трудовой деятельности).docx, а далее добавьте куда делать редирект: https://docs.yandex.ru/docs/view?url=https://web.archive.org/web/20210720100123if_/https://www.mos.ru/pgu/common/landing/03_ГУ МВД России по г. Москве/приложение №2 к заявлению (сведения о трудовой деятельности).docx. Для чистоты проверьте обе ссылки через адресную строку. Если редирект получится, значит в самом деле что-то не так у меня.

  • Мне хотелось бы припрятать адрес ссылки типа https://docs.yandex.ru/docs/view?url= https://domen/файл_word.docx (в этом случае файл https://domen/файл_word.docx откроется на сервисе яндекса). А вместо него был бы виден адрес https://domen/файл_word.docx. В обыкновенных ссылках любой прятатель ссылок это делает. Только не в случае со списком с иконками. Можете что-то посоветовать?

    • A

      В данном случаи (если таких ссылок не много) то проще поставить плагин типа менеджера редиректов, пример https://ru.wordpress.org/plugins/eps-301-redirects/
      и делать редиректы с нужных ссылок на внешнии.

      • Попробовал. Результат тот же. К сожалению.

        • A

          В смысле тот же результат, если подходы к реализации разные? Указанный плагин делает редирект с одного адреса на другой, а не скрывает ссылки или подменяет.

          • Не делает редирект. Никто не видит ссылку в списке с иконками. Ни один плагин. По крайней мере мне ещё не попался.

            • A

              Я специально проверил. Добавил в плагин редиректа ссылку http://сайт/doc.zip , далее в том же плагине добавил куда делать редирект, сайт web5x.ru . Потом в виджет в элементор добавил ссылку и проверил на фронте. Редирект происходит. Если у Вас не так, видимо проблема уже не в плагинах.

  • Мой коммент не опубликовали(

    • A

      Комментарии публикуются после проверки. В выходные многие отдыхают , в том числе и я.

  • Подскажите. Есть список с иконками и к каждому элементу установлена ссылка вида /directory/stranica. При сохранении получаем на выходе https://domain.com/directory/stranica
    Но если я хочу глобальный виджет на разные страницы, то я должен буду написать ./stranica, и если модуль глобальный, то на странице разной директории я должен получить разные url. Например на странице https://domain.com/directory если поставлю виджет, то будет ссылка https://domain.com/directory/url-элемента
    а на странице https://domain.com/directory2 я получу ссылку https://domain.com/directory2/url-элемента
    Но при добавлении ссылки вида ./stranica он изменяет ссылку на выходе таким видом «http://./stranica»
    Как это исправить?

    У меня есть услуги, например ремонт платы, замена платы, установка платы. И есть города (их сотни). И не хочется для каждой страницы (ремонт платы, замена платы, установка платы) делать отдельный виджет. А если я сделаю глобальный виджет со ссылкой вида ./stranica, то на странице каждой услуги ссылка будет вести на нужный город нужной услуги. Но такого вида ссылку он не разрешает. Как обойти или пофиксить?

    • A

      Думаю тут есть сразу два варианта. Например написать js и запускать на страницы для иконок для замены их адреса.
      Без js, можно написать шоткод на php который будет так же получать текущий адрес и добавлять необходимой. Этот шоткод используется в поле url через динамический тег.

  • Добавила в настройки темы в консоли. Расположение иконок не изменилось, не встало на начало каждого пункта списка. Может еще что-то можно туда вставить?
    Благодарю за Ваше время!

  • Здравствуйте. Благодарю за содержательную информацию. У меня есть вопрос по поводу виджета «Список с иконками». При его использовании если текст одного пункта из списка занимает 3-4 строки, то иконка становится на уровне 2-3 строки (посередине текста пункта). А хочется, чтобы иконка всегда находилась возле первого слова текстового пункта. Чтобы каждая иконка была возле каждого первого слова нового пункта списка. Это возможно?

Добавить комментарий для Ольга (Отменить ответ)