기존 스크롤 막대 대신 수직 진행률 추적기를 만든 적이 있습니까? 그렇지 않은 경우이 기사를 끝까지 탐색하여 다음을 사용하여 만드는 방법을 찾으십시오. Elementor 프로.
그러나 주요 주제를 다루기 전에 먼저 진행률 추적기가 무엇인지 생각해 보겠습니다.
진행률 추적기는 애플리케이션 설치, 업데이트, 기사 읽기 등과 같은 진행 중인 프로세스의 진행 상황을 사용자에게 알려주는 진행률 표시기입니다. 그리고 두 가지 유형이 있습니다.
- le 선형 진행 추적기
- le 원형 진행 추적기
다음을 읽을 수도 있습니다. Elementor: 포트폴리오에서 효과 카드를 만드는 방법
이 튜토리얼에서는 게시물 아카이브가 포함된 섹션에 수직 진행률 표시기를 단계별로 삽입하는 방법을 보여줍니다.
진행률 추적기 만들기
탭에서 요소 도구 패널에서Elementor, 검색창에 입력 진행 추적기. 그런 다음 위젯을 섹션으로 끕니다.
그러면 진행 표시기가 나타납니다. 기본적으로 가로 방향입니다. 하지만 걱정하지 마세요. 나중에 세로로 정렬하는 방법을 알게 될 것입니다.
진행률 표시기가 생성되고 있으므로 원하는 결과를 얻기 위해 필요한 수정을 가해 보겠습니다.
진행률 추적기 콘텐츠 편집
여기에서 추적기의 유형과 관련 항목을 선택합니다.
주요 설정은 다음과 같습니다.
- 전형적인 추적기: 여기서 기본값은 수평. 그러나 목록을 아래로 스크롤하면 유형 원형의 도 제공됩니다. 기본값을 유지합니다.
- 에 대한 진행률: 이 두 번째 설정에서 값을 선택합니다. 셀렉터. 이 선택은 추가 설정을 불러옵니다: 선택자.
- 선택자: 이 필드는 추적기가 부착될 개체의 식별자를 수신하기 위한 것입니다.
우리의 트래커가 첨부된 요소이기 때문에 출판 아카이브를 선택합시다.
설정 패널에서 고급 탭으로 이동한 다음 필드에 값을 입력합니다. CSS ID.
그런 다음 추적기 패널로 돌아가 메뉴에서 선택기 필드를 완성합니다. 내용.
마지막으로 진행 표시기의 방향을 오른쪽으로 설정합니다.
진행률 추적기의 스타일 변경
이 단계에서는 진행 표시기의 매개변수와 후자의 배경을 구성합니다.
진행 표시기를 설정하여 시작하십시오.
- 조정 진행 색상 클래식 진행과 그라데이션 진행 중에서 선택할 수 있습니다. 이 예에서는 첫 번째 옵션을 선택합니다. 그러나 무엇을 선택하든 설정이 나타납니다. 뢰르.
- 설정색깔이 있다 전체 색상 팔레트 또는 색상 선택기를 사용합니다.
- 테두리의 종류: 여기에 XNUMX개의 제안이 있습니다(없음, 전체, 이중, 점선, 점선, 홈). 전체 테두리를 선택하십시오.
- 폭: 진행 표시기의 테두리에 두께를 주기 위함입니다.
- 경계 반경: 기본적으로 진행률 표시기는 직사각형처럼 보입니다. 반지름을 수정하면 끝이 둥글게 됩니다.
마지막으로 설정 piste 배경 설정. 돌아오는 설정이 거의 동일하다는 것을 알 수 있습니다. 그러므로 앞서 언급한 것으로 제한하십시오.
진행률 추적기 고급 옵션 변경
작업을 완료하기 위해 다음 탭을 설정합니다. 모션 효과, 변형 및 사용자 정의 CSS.
먼저 탭부터 시작하겠습니다. 맞춤 CSS. 그것을 선택한 다음 해당 필드에 다음 코드를 삽입하십시오. 트래커의 너비를 정의할 수 있습니다. 따라서 너비를 창 높이의 50%로 설정합니다.
다음으로 트래커를 세로 방향으로 회전합니다. 이렇게 하려면 하위 메뉴를 선택합니다. 변신 로봇, 회전을 활성화한 다음 빈 필드에 90을 입력합니다. 그러면 위젯이 90도 회전하여 원하는 수직 위치를 제공합니다.
위젯을 첫 번째 게시물과 같은 수준으로 정렬하려면 오프셋 145를 적용하세요.
이 수준에서 페이지를 스크롤하면 스크롤하는 동안 진행률 표시기가 사라지는 것을 볼 수 있습니다. 내용.
이 문제를 해결하기 위해 탭을 엽니다. 모션 효과, 다음 명령을 드롭 다운 핀 선택하고 EN BAS.
이번에는 아래로 스크롤하여 게시물 아카이브를 이동하면서 진행률 추적기가 점차 채워지는 것을 볼 수 있습니다.
지금 Elementor Pro를 받으세요!
결론
그래서 ! 수직 진행률 추적기를 만드는 방법을 보여주는 이 기사의 내용은 여기까지입니다..
생성할 때 수직 진행률 표시기와 같은 대화형 요소를 추가합니다. 웹 사이트 더욱 직관적으로 만들어서 실제로 다음 단계로 넘어갈 수 있습니다. 또한 전체 페이지나 다음 페이지에 링크될 수 있습니다. 내용 출판물은 물론 페이지의 다른 특정 요소에도 적용됩니다. 따라서 사용 방법을 아는 것이 추가적인 이점이 될 것입니다.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
