Наверно каждый составлял различные списки на своем сайте, будь то просто сайт-визитка или landing page. Список может использоваться в различных целях, от перечня ссылок на какие то документы, до перечисления преимуществ или же включенный услуг.
Обычно в wordpress мы создаем список с помощью редактора, простым выделение параграфов и нажимаем на кнопку "Маркированный список". В итоге получаем обычный список с маркеров в начале т.е точкой (по умолчанию). А что если нужно больше? Например поставить иконку перед элементом или безошибочно задать ссылку, а может установить разделитель строк. Все это возможно с помощью конструктора сайта и соответствующего виджета.
Виджет "Список с иконками" предназначен для отображения обычного маркированного списка с маркером в виде иконки. Виджет достаточно прост и не содержит в себе особых настроек, лишь стилевые настройки. Каждый элемент списка, это группа настроек в которой задается текст, иконка и ссылка при необходимости.
На примере выше, мы видим примеры виджета. Первый в списке, это виджет по умолчанию. Для данного виджета доступны различные стилевые настройки, а именно: расстояние, выравнивание, цвет иконки и текста, размеры, типографика и разделители. Ниже рассмотрим подробнее.
Стили
- Список
- Растояние - расстояние между элементами списка.
- Выравнивание - выравнивание всего списка относительно колонки.
- Разделитель - граница разделителя между элементами списка. При включении опции отображения разделителя, станут доступны и его свойства (стиль границы, толщина, цвет и ширина границы)
- Иконка
- Цвет - Общий цвет иконок списка. Свой цвет иконок для всех элементов списка
- Размер - размер иконок списка, т.е общий размер всех иконок виджета.
- Текст
- Отступ текста - отступ между текстом и иконкой.
- Цвет текста - общий цвет текста для текстовых элементов виджета
- Типографика - размер шрифта, название, насыщенность итд для текстов виджета.
Список с иконками — виджет Elementor: 21 комментарий
Здравствуйте. Благодарю за содержательную информацию. У меня есть вопрос по поводу виджета «Список с иконками». При его использовании если текст одного пункта из списка занимает 3-4 строки, то иконка становится на уровне 2-3 строки (посередине текста пункта). А хочется, чтобы иконка всегда находилась возле первого слова текстового пункта. Чтобы каждая иконка была возле каждого первого слова нового пункта списка. Это возможно?
Ссылка к этому вопросу:
https://olgachurikova.com/spisoksikonkami/
День добрый. К виджету добавьте свои стили. Как пример
selector li.elementor-icon-list-item {align-items: normal;}
selector .elementor-icon-list-icon {padding-top:5px;}
Благодарю! Как это делается? Возможно в бесплатной версии?
В бесплатной версии возможно, если добавить стили через настройки темы в консоли ворпресс. Стили добавлять без selector
Как делается… не описать, это нужно знать или уметь.
Благодарю за помощь!
Проблема решена.
Всех благ Вам!
Добавила в настройки темы в консоли. Расположение иконок не изменилось, не встало на начало каждого пункта списка. Может еще что-то можно туда вставить?
Благодарю за Ваше время!
Благодарю за помощь!
Проблема решена.
Всех благ Вам!
Подскажите. Есть список с иконками и к каждому элементу установлена ссылка вида /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, то на странице каждой услуги ссылка будет вести на нужный город нужной услуги. Но такого вида ссылку он не разрешает. Как обойти или пофиксить?
Думаю тут есть сразу два варианта. Например написать js и запускать на страницы для иконок для замены их адреса.
Без js, можно написать шоткод на php который будет так же получать текущий адрес и добавлять необходимой. Этот шоткод используется в поле url через динамический тег.
Мой коммент не опубликовали(
Комментарии публикуются после проверки. В выходные многие отдыхают , в том числе и я.
Мне хотелось бы припрятать адрес ссылки типа https://docs.yandex.ru/docs/view?url= https://domen/файл_word.docx (в этом случае файл https://domen/файл_word.docx откроется на сервисе яндекса). А вместо него был бы виден адрес https://domen/файл_word.docx. В обыкновенных ссылках любой прятатель ссылок это делает. Только не в случае со списком с иконками. Можете что-то посоветовать?
В данном случаи (если таких ссылок не много) то проще поставить плагин типа менеджера редиректов, пример https://ru.wordpress.org/plugins/eps-301-redirects/
и делать редиректы с нужных ссылок на внешнии.
Попробовал. Результат тот же. К сожалению.
В смысле тот же результат, если подходы к реализации разные? Указанный плагин делает редирект с одного адреса на другой, а не скрывает ссылки или подменяет.
Не делает редирект. Никто не видит ссылку в списке с иконками. Ни один плагин. По крайней мере мне ещё не попался.
Я специально проверил. Добавил в плагин редиректа ссылку http://сайт/doc.zip , далее в том же плагине добавил куда делать редирект, сайт web5x.ru . Потом в виджет в элементор добавил ссылку и проверил на фронте. Редирект происходит. Если у Вас не так, видимо проблема уже не в плагинах.
Попробуйте на живом примере. Добавьте в плагин редиректа ссылку 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. Для чистоты проверьте обе ссылки через адресную строку. Если редирект получится, значит в самом деле что-то не так у меня.
Да, работает и с такими длинными адресами.
Спасибо за помощь! Теперь точно знаю, что это у меня где-то багает.