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