주요 시사점
- Elementor에는 로드맵 위젯이 없으므로 Elementor 로드맵은 일반적으로 각 항목이 하나의 기능 또는 단계인 타임라인 위젯으로 구축됩니다.
- 마스터 애드온 타임라인 위젯을 사용하면 각 항목에 날짜 대신 사용자 정의 레이블이 표시되며 이는 배송, 진행 중, 다음 작업 및 탐색과 같은 로드맵 상태에 적합합니다.
- 공개 제품 로드맵은 상태 라벨이나 분기에 가장 잘 작동합니다. 로드맵의 정확한 날짜가 고객이 기억하는 약속으로 바뀌기 때문입니다.
- 타임라인 위젯은 왼쪽, 중앙, 오버레이 또는 오른쪽 정렬을 사용하여 수직으로 로드맵을 표시하거나 화살표가 있는 수평 회전목마로 표시할 수 있습니다.
- 타임라인 위젯의 스타일 탭에서 초점이 맞춰진 상태는 방문자가 스크롤한 항목을 자신의 카드 배경과 포인트 색상으로 제공합니다.
Elementor 로드맵 페이지에는 고객에게 배송한 제품, 구축 중인 제품 및 다음에 출시될 제품이 표시됩니다. 엘리멘터 는 로드맵 위젯을 포함하지 않지만 로드맵은 날짜 대신 상태가 있는 타임라인이므로 타임라인 위젯이 작업을 수행합니다. 이 가이드에서는 다음을 사용합니다 마스터 애드온 타임라인 위젯.
예제는 4 가지 항목의 소프트웨어 로드맵입니다: 출하,진행 중,다음 위로 및 탐색. 코스 계획,시공 일정 또는 온보딩 프로세스에 대해 동일한 빌드가 작동합니다. 항목을 설정하고 레이블에 대한 날짜를 교환하고 레이아웃을 선택하고 단계를 스타일링합니다.
목차
제품 로드맵 페이지에 무엇이
제품 로드맵 페이지는 출시가 얼마나 가까운지 순서대로 계획된 작업을 나열합니다. 각 항목에는 세 가지가 필요합니다: 상태,짧은 이름 및 고객이 얻는 것에 대한 문장.
대부분의 공공 로드맵은 상태에 대해 두 가지 시스템 중 하나를 사용합니다:
| 시스템 | 예시 라벨 | 때 사용합니다 |
|---|---|---|
| 상태 라벨 | 배송, 진행 중, 다음 단계, 탐색 | 당신은 날짜에 약속하고 싶지 않습니다 |
| 시간 버킷 | 2027년 1분기, 2027년 2분기, 이후 | 당신은 숙소에서 계획하고 그들 뒤에 설 수 있습니다 |
| 정확한 날짜 | 2027년 3월 14일 | 날짜는 이벤트나 출시 등 고정되어 있습니다 |
상태 레이블은 소프트웨어에 가장 안전한 선택입니다. 공개 페이지의 미끄러진 날짜는 스크린 샷을 받고 “다음 위로”와 같은 레이블은 미끄러질 수 없습니다.
Elementor에서 로드맵을 구축하는 방법
Elementor 와 Master Addon 이 필요합니다. 로드맵 자체는 사용자 지정 타임라인으로 설정된 하나의 타임라인 위젯입니다.
1단계: 단계를 계획합니다
편집기를 열기 전에 목록을 작성하십시오. 네 개에서 여덟 개 항목은 충분합니다. 이 예에서는:
| 라벨 | 특징 | 한줄 설명 |
|---|---|---|
| 배송되었습니다 | 체크아웃 재설계 | 저장된 카트로 한 페이지 결제. |
| 진행 중 | 팀 작업 공간 | 공유 프로젝트, 역할 및 의견. |
| 다음 위로 | 모바일 앱 | 오프라인 모드가 있는 iOS 및 Android 앱. |
| 탐험하기 | 공개 API | 통합을 위한 Webhook 및 REST API. |
2 단계: 타임라인 위젯 추가하기
Elementor로 로드맵 페이지를 편집하고 위젯 패널을 검색하세요 타임라인 그리고 페이지로 드래그하세요. Keep 타임라인 유형 에 사용자 지정 타임라인니다. 위젯은 세 개의 샘플 항목으로 시작합니다. 사용 항목 추가 네 번째 또는 하나를 복사하기 위한 행의 중복 아이콘입니다.
위젯에 새로운? Elementor 에서 타임라인을 만드는 방법 모든 컨트롤을 통과합니다.
3 단계: 날짜를 사용자 정의 레이블로 바꿉니다
첫 번째 항목을 엽니다. 변경 쇼 날짜부터 사용자 정의 라벨그런 다음 에 상태를 입력합니다 라벨 필드. 콘텐츠 편집기에서 첫 번째 줄을 기능 이름이 있는 표제로 만들고 그 아래에 설명을 작성합니다.
각 항목에 대해 반복합니다.The optional 링크 field는 전체 카드를 클릭 가능하게 만드는데, 이는 배송된 기능을 릴리스 게시물이나 문서로 보내는 데 유용합니다.
4 단계: 레이아웃 선택하기
위의 중앙 레이아웃은 카드를 왼쪽과 오른쪽으로 번갈아 가며 배치합니다. 다른 두 레이아웃은 로드맵에 잘 맞습니다.
왼쪽 정렬. 스타일 탭에서 엽니다 레이아웃 및 설정 수평 정렬 왼쪽으로. 모든 카드는 라벨이 안에있는 한쪽에 앉습니다. 이것은 설명의 길이가 길어지면 스캔하기가 더 쉬운 목록처럼 읽혀집니다.
수평. 콘텐츠 탭에서 설정합니다 타임라인 스타일 수평 타임라인으로. 단계는 선 위에 레이블이 있는 캐러셀이 됩니다. 이는 한 행이 필요하므로 홈 페이지나 가격표 아래에 맞습니다.
캐러셀 설정이 포함되어 있습니다 elementor 에서 수평 타임라인을 만드는 방법.
5단계: 단계를 스타일링합니다
스타일 탭을 열고 네 개의 섹션을 통해 작업합니다.
- 카드: 패딩, 테두리 반경, 제목 및 콘텐츠 색상. 집중 탭은 방문자가 스크롤한 카드의 스타일을 지정합니다.
- 날짜: 상태 라벨의 타이포그래피 및 색상. 브랜드 색상이 포함된 굵은 글씨는 태그로 읽혀집니다.
- 라인: 배경은 전체 트랙이고 방문자가 스크롤할 때 진행 색상이 채워집니다.
- 포인트: 별도의 기본값, 호버 및 집중 색상이 있는 점, 아이콘 또는 이미지입니다.
각 항목에는 콘텐츠 패널에 자체 스타일 탭도 있으며,해당 항목의 포인트 및 색상 설정만 해당됩니다. 이를 사용하여 배송된 항목에 나머지 항목과 다른 포인트 색상을 부여하므로 완성된 작업이 한 눈에 보입니다.
먼저 더 많은 레이아웃을 보고 싶으신가요? X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X Elementor 타임라인 위젯 페이지에는 수평 로드맵을 포함한 라이브 데모가 있습니다.
로드맵에 무엇을 넣을 것인가
로드맵 페이지는 타임라인 위와 아래에 약간의 컨텍스트를 사용하여 더 잘 읽혀집니다.
- 짧은 소개 즉, 페이지가 얼마나 자주 업데이트되는지 알려줍니다.
- 피드백 링크 타임라인 아래 양식이나 기능 요청 보드에.
- 변경 로그 이미 배송된 것에 대해. 그만큼 Changelogs 위젯 같은 페이지에 버전 항목을 나열합니다.
- 숫자, 당신이 그들을 가지고 있다면. 의 행 카운터 업 위젯은 올해 출하된 기능을 보여줄 수 있습니다.
- 진행률 표시기입니다 하나의 큰 프로젝트의 경우 다음을 사용합니다 진행률 표시줄 위젯.
로드맵이 고객만을 위한 것이라면, 표시 조건 안내 로그아웃된 방문자로부터 섹션을 숨기는 방법을 보여줍니다.
자주 묻는 질문
Elementor에 로드맵 위젯이 있습니까?
아니요. Elementor 와 Elementor Pro 에는 로드맵이나 타임라인 위젯이 없습니다. 대부분의 Elementor 로드맵은 애드온의 타임라인 위젯으로 빌드되며 각 항목은 하나의 위상 또는 기능으로 사용됩니다.
Elementor 에서 날짜 없이 로드맵을 표시할 수 있나요?
예. Master Addons Timeline 위젯에서 각 항목에 대해 Show to Custom Label 을 설정하고 Shipped 또는 Next up 과 같은 상태를 입력합니다. 레이블은 포인트 옆의 날짜를 대신합니다.
공공 로드맵은 수직적이어야 할까요, 수평적이어야 할까요?
각 단계에 몇 줄의 설명이 있을 때는 수직으로 사용하고,로드맵이 다른 페이지 안에 있는 3~6 단계의 짧은 스트립일 때는 수평으로 사용합니다. 타임라인 위젯은 타임라인 스타일 컨트롤로 이 둘 사이를 전환합니다.
로드맵 항목을 완료한 대로 표시하려면 어떻게 해야 합니까?
라벨을 배송됨으로 변경하고 항목의 자체 스타일 탭에서 다른 포인트 색상을 지정합니다. 또한 릴리스 게시물에 링크를 추가하여 방문자가 변경된 내용을 읽을 수 있습니다.
최종 생각
Elementor 로드맵은 4~8 개의 사용자 지정 타임라인 항목,사용자 지정 라벨로 설정된 표시 및 각 라벨 필드의 상태가 포함된 하나의 타임라인 위젯입니다. 레이아웃의 중앙,왼쪽 또는 수평을 선택한 다음 카드,날짜, 줄 및 포인트 섹션을 사용하여 배송된 작업을 계획된 작업과 차별화시킵니다.
데모부터 시작하세요 타임라인 위젯 페이지 그리고 샘플 항목을 자신의 단계로 교체하십시오.
관련 읽기
