Добавьте панель прогресса чтения в WordPress (элементатор)

Прочтение Прогресс Бар является бесплатным Мастер Аддоны расширение, которое добавляет тонкую полосу к верхней или нижней части экрана и заполняет его, как посетители прокрутить вниз страница. вы переключаете его на каждой странице или публикации в Elementor's Page Settings, затем установить положение, высоту, отслеживать цвет, цвет заливки и скорость анимации.Это подходит для длинных статей, учебных пособий, документации и юридических страниц, где читатели любят знать, сколько осталось.

Это расширение отслеживает прокрутку. Чтобы показать гол или счет в виде линии, круга или указателя, используйте Виджет Прогресс Бар. Для списка брусков навыков используйте Прогресс Барс.

Настройки страницы панели прогресса чтения с положением, установленным наверху, высоту, цвета и скорость анимации, рядом со страницами политики конфиденциальности с синей полосой вверху
Страница политики конфиденциальности с синей полосой выполнения чтения вверху, рядом с разделом "Плотина выполнения чтения" внутри "Настройки записи Elementor"

Включите его на страницу, сверху или снизу

Откройте страницу или публикацию в Elementor, щелкните значок шестеренки Настройки страницы (Настройки публикации на сообщениях) и разверните Прогресс-бар чтения раздел. Включить Включить панель выполнения чтения и набор Должность вверху или внизу. планка закреплена на краю экрана и заполняется от 0 до 100%, когда посетитель прокручивает от верхней части страницы к нижней.

  • Настройка сохраняется на страницу, поэтому включите ее на длинные публикации и оставьте на коротких страницах. Общего коммутатора нет.
  • Работает на страницах и постах, построенных с помощью Elementor, так как коммутатор живет в Настройках Страниц Elementor.
  • Прогресс охватывает всю высоту страницы, включая заголовок, комментарии и нижний колонтитул, а не только текст статьи.
  • Для вошедших в систему пользователей панель перемещается вниз под строкой администратора WordPress.

Высота, цвета и скорость анимации

Набор Высота от 0 до 100px (5px по умолчанию). Цвет фона раскрашивает пустую дорожку (по умолчанию белую) и Цвет Заполнения раскрашивает прогресс (синий #007bff по умолчанию). Скорость анимации устанавливает, насколько плавно заполнение следует за прокруткой, от 0 до 1000 миллисекунд, по умолчанию 50.

  • Вы можете выбрать глобальные цвета из комплекта Elementor для дорожки и заполнить ее.
  • Бар размером от 3 до 6px заметен, не закрывая заголовок.
  • Более низкая скорость анимации кажется более прямой, более высокой - более плавной, но немного отложенной.
Краудфандинговая статья со строкой выполнения чтения рядом с устройством выбора цвета заполнения, показывающая глобальные цвета комплекта

Elementor Pro Progress Tracker против панели выполнения чтения

У Elementor Pro есть виджет Progress Tracker, который выполняет аналогичную работу с большим количеством опций. Вот как они сравниваются.

ОсобенностьElementor Pro Progress TrackМастер Аддоны Прогресс чтения Бар
ЦенаНужен Элементор ПроБесплатно с главными дополнениями
Как ты добавляешьВиджет, обычно помещаемый в шаблон заголовка или одной публикацииПереключатель в Настройках Страницы каждой страницы
ФормыГоризонтальный или круговойГоризонтальная планка
ТрекиВся страница, содержимое публикации или селектор CSSВся страница
Процентная меткаДа, опциональноНет
РазмещениеКуда бы вы ни поместили виджет с вариантами направленияЗакрепляется в верхней или нижней части экрана

Выберите "Трекер прогресса" Elementor Pro, если он вам нужен в каждом сообщении из одного шаблона, кругового стиля или только для прохождения статьи. Выберите "Площадь выполнения чтения" для бесплатной простой панели на выбранных страницах. Соедините его с бесплатным Оглавление виджет на длинных постах.

Просмотрщик шаблонов
Фейсбук
Твиттер
ватсап
Копировать ссылку
Купить сейчас
Блог о путешествиях с фиолетовой полосой
Блог о путешествиях с фиолетовой полосой
Направляющая шестерни с толстой зеленой полосой
Направляющая шестерни с толстой зеленой полосой
Документы Dark API с тонкой голубой полосой
Документы Dark API с тонкой голубой полосой
Новости, прочитанные долго, с нижней красной полосой
Новости, прочитанные долго, с нижней красной полосой
Эссе журнала Dark с нижней золотой полосой
Эссе журнала Dark с нижней золотой полосой
Урок курса с массивной оранжевой полосой
Урок курса с массивной оранжевой полосой
Темный пример с розовой полосой
Темный пример с розовой полосой
Примечания к выпуску с синей полосой внизу
Примечания к выпуску с синей полосой внизу
Чтение строки прогресса на странице терминов
Чтение строки прогресса на странице терминов

Как добавить панель прогресса чтения в WordPress

Вам нужен Elementor и бесплатный плагин Master Addons с отредактированной страницей или публикацией в Elementor.

  1. Установить и активировать Мастер-адреса от WordPress.orgи проверьте, включена ли панель выполнения чтения Основные дополнения, расширения.
  2. Откройте сообщение или страницу с помощью Elementor.
  3. Щелкните значок шестерни, чтобы открыть Настройки страницы (Настройки публикации на сообщениях).
  4. Расширять Прогресс-бар чтения и включить Включить панель выполнения чтения.
  5. Выберите "Верхняя" или "Нижняя", затем установите высоту, цвет фона, цвет наполнения и скорость анимации.
  6. Обновите страницу и прокрутите ее на передней панели, чтобы проверить панель.

Часто задаваемые вопросы для чтения Прогресс-бара

Узнайте о наиболее часто задаваемых пользователями запросах о панели прогресса чтения и найдите ответы в одном месте.
Является ли бар Reading Progress бесплатным?

Да. это бесплатное расширение в плагине Master Addons на WordPress.org и работает с бесплатным Elementor. он показывает на телефонах и планшетах тоже, фиксированный к верхнему или нижнему краю.

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

Это замедлит мой сайт?

Нет. Он добавляет небольшой встроенный сценарий и несколько строк CSS на страницах, где он включен, без дополнительных файлов или изображений.

Вся страница. заполнение проходит от верхней части страницы до самого нижнего, поэтому заголовки, комментарии и нижние колонтитулы тоже имеют значение. Elementor Pro's Progress Tracker может отслеживать только содержимое сообщения, если вам это нужно.

Виджеты и расширения трендовых элементов

Создавайте сложные веб-сайты за меньшее время.

Расширение Master Addons Glassmorphism для Elementor: карты из матового стекла с элементом управления значением размытия, установленным в 20px

Стекломорфизм

Главная Бесплатный элемент Расширение стекломорфизма: эффект матового стекла в одном переключении Стекломорфизм - это матовый...
Посмотреть детали
Расширение Master Addons Container Extras для Elementor: контейнер с максимальной шириной 1400px, с регуляторами максимальной ширины, максимальной высоты, минимальной ширины и минимальной высоты

Дополнительные контейнеры

Главная Элементор Контейнер Максимальная ширина и максимальная высота Контролирует контейнер Дополнительно является бесплатным Мастер...
Посмотреть детали
Расширение Master Addons Patterns для Elementor: герой со стилем Purple Gradient Grid Left, еще тремя стилями шаблонов и панелью Enable Pattern

Шаблоны

Главная 70+ бесплатных шаблонов фона элементара - это бесплатное расширение Master Addons, которое добавляет...
Посмотреть детали
Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик

Дубликатор сообщений/страниц

Главная Дублировать страницы Элементор и сообщения в один клик Пост/Пейдж Дупликатор является бесплатным Мастер...
Посмотреть детали
Основные дополнения, какие элементы расширения для Elementor: зависание виджета члена команды в редакторе с надписью "Основные дополнения для Elementor" (член команды)

Какой Элемент

Главная Идентифицируйте любой виджет элементара при наведении на "Какой элемент" является бесплатным расширением главных дополнений...
Посмотреть детали