Вы когда-нибудь пытались создать вертикальный трекер прогресса вместо традиционной полосы прокрутки? Если нет, то просмотрите эту статью до конца, чтобы узнать, как создать его с помощью Elementor Pro.
Но прежде чем приступить к основной теме, давайте сначала вспомним, что такое трекер прогресса.
Трекер прогресса — это индикатор прогресса, который информирует пользователя о ходе текущего процесса, такого как установка приложения, обновление, чтение статьи и т. д. И есть два типа:
- le линейный трекер прогресса
- le круговой трекер прогресса
Вы также можете прочитать: Elementor: Как создать карту эффекта из портфолио
В этом уроке мы покажем вам, как шаг за шагом вставить вертикальный индикатор прогресса в раздел, содержащий архивы постов.
Создайте трекер прогресса
Во вкладке элементы с панели инструментовElementor, введите в строку поиска Трекер прогресса. Затем перетащите виджет в раздел.
Затем появится индикатор выполнения. По умолчанию он ориентирован горизонтально. Но не волнуйтесь, позже вы увидите, как расположить его по вертикали.
Индикатор прогресса создан, давайте внесем необходимые изменения для получения желаемого результата.
Смотрите также: Elementor: Как создать карту эффекта из портфолио
Редактировать содержимое трекера прогресса
Здесь вы выберете тип трекера и с чем он связан.
Основные настройки:
- типичный трекер: здесь значение по умолчанию горизонтальный. Однако при прокрутке списка вниз тип CIRCULAIRE также предлагается вам. Оставьте значение по умолчанию.
- Прогресс относительно: во второй настройке выберите значение селектор. Этот выбор вызовет дополнительную настройку: Селектор.
- Селектор: Это поле предназначено для получения идентификатора объекта, к которому будет привязан трекер.
Выберем архив публикаций, так как именно к нему привязан наш трекер.
В его панели настроек перейдите на вкладку «Дополнительно», затем введите значение в поле CSS-идентификатор.
Далее вернитесь на панель трекера и заполните поле «Селектор» в меню. содержание.
Наконец, установите ориентацию индикатора прогресса вправо.
Изменить стиль трекера прогресса
На этом шаге мы настроим параметры индикатора прогресса, а также фон последнего.
Начните с установки индикатора выполнения.
Читайте также: Elementor: как создать галерею изображений
- Корректирование цвет прогресса позволяет выбирать между классической прогрессией и градиентной прогрессией. В нашем примере выберите первый вариант. Однако каким бы ни был выбор, появляется настройка оттенок.
- Установить lимеет цвет используя глобальную цветовую палитру или палитру цветов.
- Тип границы: у вас тут шесть предложений(нет, полный, двойной, пунктирный, пунктирный, канавка). Выбирайте полную границу.
- ширина: Это нужно для придания толщины границе вашего индикатора прогресса.
- Радиус границы: По умолчанию индикатор прогресса выглядит как прямоугольник. Изменяя его радиус, его конечности становятся закругленными.
Наконец, установите склоны настройки фона. Вы замечаете, что возвращаются почти те же настройки. Поэтому ограничьтесь теми, которые были упомянуты заранее.
Изменить дополнительные параметры отслеживания прогресса
Для завершения нашей работы установим следующие вкладки: эффекты движения, преобразование и пользовательский CSS.
Начнем с вкладки Пользовательский CSS. Выберите его, затем вставьте следующий код в соответствующее поле. Позволяет определить ширину трекера. Таким образом, он устанавливает ширину равной 50% высоты окна.
Далее поверните трекер в вертикальном направлении. Для этого выберите подменю трансформатор, включите поворот, затем введите 90 в пустое поле. Это повернет наш виджет на 90 градусов, что даст вам желаемое вертикальное положение.
Чтобы выровнять наш виджет на том же уровне, что и первые сообщения, примените смещение 145.
На этом уровне, если мы прокрутим нашу страницу, вы увидите, что наш индикатор прогресса исчезает, пока мы прокручиваем нашу страницу. содержание.
Чтобы преодолеть эту проблему, вы откроете вкладку Эффекты движения, затем выведите команду Штырь и выберите ан барельефа.
На этот раз, прокручивая вниз, мы можем видеть, как наш трекер прогресса постепенно заполняется по мере того, как мы перемещаемся по нашему архиву сообщений.
Получите Elementor Pro прямо сейчас!
Заключение
Так ! Вот и все, что касается этой статьи, в которой показано, как создать вертикальный трекер прогресса..
Добавление интерактивных элементов, таких как вертикальный индикатор прогресса, при создании сайт действительно может вывести его на новый уровень, сделав его более интуитивным. Кроме того, его можно связать со всей страницей или с содержание публикации и даже к любому другому конкретному элементу страницы. Поэтому знание того, как его использовать, будет дополнительным преимуществом.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
