주요 시사점
- Elementor 및 Elementor Pro에는 타임라인 위젯이 없으므로 Elementor 수평 타임라인에는 애드온 위젯이나 사용자 정의 CSS가 포함된 손으로 만든 컨테이너 행이 필요합니다.
- 마스터 애드온 타임라인 위젯은 타임라인 섹션 아래의 콘텐츠 탭에 있는 타임라인 스타일이라는 하나의 컨트롤을 사용하여 수직에서 수평으로 전환됩니다.
- 마스터 애드온 위젯의 수평 타임라인은 캐러셀이며, 네비게이션 컨트롤은 여섯 가지 옵션을 제공합니다: 화살표와 점, 화살표와 분수, 화살표, 점, 진행률 및 없음.
- 타임라인 위젯의 캐러셀 설정에는 캐러셀 또는 커버플로 레이아웃, 기본 속도 5000ms의 자동 재생, 호버 일시 중지, 스크롤할 슬라이드, 중앙 슬라이드 및 루프가 포함됩니다.
- 블로그 게시물로 구축된 게시물 타임라인은 수직으로 유지되므로 수평 레이아웃은 사용자 정의 타임라인 항목에서만 작동합니다.
Elementor 수평 타임라인은 날짜를 왼쪽에서 오른쪽으로 배치하고 각 카드 위의 선에 점을 두고 이를 따라 이동할 수 있는 화살표를 사용합니다. 엘리멘터 자체 타임라인 위젯이 없으므로 이 가이드에서는 다음을 사용합니다 마스터 애드온의 타임라인 위젯가로 레이아웃이 단일 드롭다운인 경우.
아래의 6 단계는 일반적인 수직 타임라인에서 시작하여 작업 캐러셀로 마무리됩니다. 모든 스크린샷은 테스트 페이지의 위젯이 있는 Elementor 4,3 에서 제공됩니다. 아직 타임라인을 배치하지 않은 경우 전체 타임라인 튜토리얼 기본부터 다룹니다.
목차
수평 타임라인이 더 나은 선택일 때
짧은 단계와 제한된 수직 공간이있을 때 수평 타임 라인을 사용하십시오. 세 장의 카드가있는 수직 타임 라인은 스크롤의 전체 화면 이상을 취할 수 있습니다. 동일한 세 장의 카드가 나란히 한 행에 들어 있기 때문에 수평 레이아웃이 홈 페이지와 랜딩 페이지에 표시되는 반면 수직 레이아웃은 긴 페이지에 대해.
| 요인 | 수평 타임라인 | 수직 타임라인 |
|---|---|---|
| 최고의 길이 | 3~8 개 항목 | 어떤 길이 |
| 필요한 공간 | 한 행 | 모든 아이템과 함께 성장합니다 |
| 방문자가 이동하는 방법 | 화살표, 점 또는 스와이프 | 페이지를 스크롤하는 중 |
| 일반적인 사용 | 프로세스 단계, 제품 로드맵, 연간 하이라이트 | 회사 연혁, 체인질로그, 긴 이야기 |
| 마스터 애드온의 소스 | 사용자 지정 타임라인 항목 | 사용자 정의 항목 또는 블로그 게시물 |
수평 타임라인은 일종의 회전목마입니다. 만약 두 항 중 어느 것이 당신의 디자인에 맞는지 확신이 서지 않는다면 elementor의 회전목마 대 슬라이더 차이를 설명합니다.
Elementor 에서 수평 타임라인을 만드는 방법
Elementor 와 Master Addon 이 설치되어 있어야 하며,그 다음 편집기에서 여섯 단계를 거쳐야 합니다. 아래 아무것도 사용자 정의 CSS 가 필요하지 않습니다.
1 단계: 타임라인 위젯 추가하기
Elementor로 페이지를 열고 위젯 패널을 검색하세요 타임라인 그리고 페이지 위로 드래그하세요. 세 개의 샘플 항목이 있는 수직 타임라인으로 도착합니다. 나가기 타임라인 유형 에 사용자 지정 타임라인가로 레이아웃은 사용자 정의 항목에만 제공되므로.
2단계: 타임라인 스타일을 수평으로 전환합니다
콘텐츠 탭에서 을 엽니다 타임라인 섹션과 변경 타임라인 스타일 수직 타임라인에서 가로 타임라인. 카드는 행으로 이동하고 선은 상단을 가로 질러 실행되며 각 지점은 그 위에 날짜가있는 카드 위에 위치합니다. 패널에 두 개의 새로운 섹션이 나타납니다: 탐색 및 회전 목마 설정.
3 단계: 항목 편집
아래 행을 클릭합니다 항목 열려면. 각 항목에는 세 개의 작은 탭이 있습니다: 콘텐츠,미디어 및 스타일.
- 쇼 요점 위에 무엇이 있는지 결정합니다: 날짜 또는 “1단계”와 같은 사용자 정의 라벨.
- 날짜 그리고 날짜 형식 날짜와 작성 방법을 설정합니다.
- 링크 전체 카드를 클릭 가능하게 만듭니다.
- 내용 편집기는 제목과 설명을 보유합니다. 제목 필드가 따로 없으므로 첫 번째 줄이 제목입니다.
- 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 미디어 탭은 카드에 이미지를 추가합니다.
넓은 이미지는 여기 있는 키 큰 이미지보다 더 잘 작동합니다. 세 장의 키 큰 사진이 텍스트를 화면 아래로 멀리 밀어냅니다.
4 단계: 탐색을 선택합니다
열다 네비게이션 방문자가 타임라인을 이동하는 방법을 섹션 및 선택합니다. 탐색 드롭다운에는 6가지 옵션이 있습니다.
| 탐색 옵션 | 방문자가 보는 것 | 좋은 |
|---|---|---|
| 화살표와 점 | 이전 및 다음 화살표와 슬라이드당 점 | 대부분의 타임라인 |
| 화살표와 분수 | 화살표와 2 / 6과 같은 카운터 | 점들이 혼잡해지는 긴 타임라인 |
| 화살표 | 화살표만 | 깔끔한 레이아웃 |
| 점들 | 점만 | 터치 우선 디자인 |
| 진행 | 회전목마가 전진하면서 채워지는 바 | 프로세스 단계 |
| 없음 | 스와이프 또는 자동 재생만 가능합니다 | 장식 스트립 |
드롭다운 아래에서 켤 수 있습니다 동적 총알?, 스크롤바를 추가합니다 스크롤바를 표시하시겠습니까?를 설정하고 위치를 설정하고 다음 및 이전 아이콘을 바꿉니다. 모바일에서 화살표를 숨기시겠습니까? 기본적으로 켜져 있으므로 전화 방문자에게 스와이프와 점이 남습니다.
5단계: 캐러셀 동작을 설정합니다
오픈 회전목마 설정 타임라인이 어떻게 움직이는지 제어하기 위해.
- 레이아웃: 평평한 행의 경우 회전식 회전식, 회전, 늘이기 및 깊이 제어 기능이 있는 3D 효과의 경우 커버플로우.
- 자동 재생 그리고 자동 재생 속도: 기본 속도는 5000ms이므로 5초마다 새 슬라이드가 제공됩니다.
- 호버에서 일시 중지합니다: 포인터가 타임라인 위에 있는 동안 자동 재생을 중지합니다.
- 스크롤할 슬라이드: 클릭당 이동하는 카드 수, 장치당 설정.
- 센터 슬라이드, 커서를 잡습니다 그리고 드래그 프리 모드 드래그의 느낌을 위해.
- 루프: 마지막 항목 이후 첫 번째 항목으로 돌아갑니다.
- 애니메이션 속도 (ms): 각 슬라이드 전환에 걸리는 시간은 기본적으로 500입니다.
실제 타임라인의 경우 자동 재생에 대해 두 번 생각해 보십시오. 날짜에는 순서가 있으며 누군가가 읽는 동안 카드가 미끄러져 나가는 것은 성가신 일입니다. 일시 중지를 통한 자동 재생은 공정한 중간 지점입니다.
6 단계: 화살표, 포인트 및 카드를 스타일링합니다
스타일 탭으로 전환합니다. 그것은 열 개의 섹션이 있습니다: 회전 목마 항목,레이아웃, 이미지,게시물, 카드,화살표, 날짜,줄, 포인트 및 탐색.
- 카드: 패딩, 테두리 반경, 제목 및 콘텐츠 색상, 그리고 초점이 맞춰진 카드에 대한 별도의 모양.
- 날짜: 각 지점 위의 날짜 또는 라벨의 타이포그래피 및 색상입니다.
- 라인: 트랙 색상과 두께.
- 포인트: 크기와 색상이 있는 일반 점, 아이콘 또는 이미지입니다.
- 네비게이션: 화살표, 점, 스크롤바의 색상과 크기.
페이지를 게시하고 전화로 테스트합니다. 행당 카드는 작은 화면에서 드롭되므로 텍스트가 여전히 맞는지 확인하십시오.
수직 레이아웃도 원하시나요? 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 타임라인 위젯 페이지에는 모든 레이아웃, 정렬 및 스타일 옵션이 한 곳에 나열되어 있습니다.
비디오 튜토리얼
이 비디오는 빈 페이지에서 타임라인을 구축하고 3:44에 가로 캐러셀로 전환합니다.
잘못되는 네 가지
수평 타임라인의 대부분의 문제는 이를 수직 타임라인처럼 처리하는 데서 비롯됩니다.
- 너무 많은 항목. 여덟시 정도 지나면 방문자는 클릭을 멈춥니다. 세로 타임라인을 사용하거나 연도별로 스토리를 분할합니다.
- 고르지 않은 카드 높이. 긴 설명 하나가 행을 늘립니다. 텍스트를 다듬거나 회전목마 설정에서 자동 높이를 켭니다.
- 첫 번째 카드 위에 화살표. 화살표가 콘텐츠 위에 있으면 탐색 섹션의 위치를 변경합니다.
- 블로그 포스트 기대. Post Timeline 유형은 수직입니다. 연속된 게시물의 경우 다음을 사용하십시오 블로그 위젯 회전목마 형태에서.
또한 읽어보세요: 20 Elementor 슬라이더 템플릿타임라인 슬라이더 디자인이 포함되어 있습니다.
자주 묻는 질문
Elementor Pro 없이 Elementor에서 수평 타임라인을 만들 수 있나요?
예. Elementor Pro 에는 타임라인 위젯도 포함되어 있지 않으므로 Pro 는 여기서 아무런 차이가 없습니다. Master Addon 과 같은 애드온에서 타임라인 위젯을 추가하고 타임라인 스타일을 가로 타임라인으로 설정하면 항목이 캐러셀이 됩니다.
Elementor 에서 가로 타임라인에 화살표를 어떻게 추가하나요?
콘텐츠 탭에서 탐색 섹션을 열고 화살표와 점,화살표와 분수 또는 화살표를 선택합니다. 그런 다음 화살표 위치를 설정하고 같은 섹션에서 다음 및 이전 아이콘을 바꿀 수 있습니다.
수평 타임라인 자동 재생이 가능합니까?
예. 회전목마 설정에서 자동 재생을 켜고 자동 재생 속도를 밀리초 단위로 설정합니다. 기본값은 슬라이드당 5 초인 5000 입니다. 방문자가 읽는 동안 호버에서 일시 중지하면 중지됩니다.
수평 타임라인은 반응형인가요?
예. 캐러셀이므로 태블릿과 휴대폰에서 카드를 더 적게 표시하고 방문자가 스와이프하여 이동합니다. 스크롤할 슬라이드는 장치별로 별도의 값을 갖습니다.
수평 타임라인에 블로그 게시물을 표시할 수 있나요?
수직형만 있는 Post Timeline 유형이 아닙니다. 손으로 게시물을 사용자 지정 Timeline 항목으로 추가하거나 게시물 캐러셀을 사용합니다.
최종 생각
Elementor 수평 타임라인은 하나의 설정과 두 개의 섹션으로 내려갑니다: 수평 타임라인으로 설정된 타임라인 스타일,그리고 자동 재생,루프 및 속도를 위한 6 가지 옵션과 회전목마 설정이 포함된 내비게이션 3~8 개의 짧은 카드로 유지하고 전화로 테스트합니다.
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 타임라인 위젯 페이지 다음을 포함하여 두 레이아웃의 라이브 데모가 있습니다 수평 로드맵 데모.
관련 읽기
2 응답
수평 레이아웃이 포스트 타임라인이 아닌 사용자 지정 타임라인 항목에서만 작동한다는 점은 놓치기 쉽고 빌드가 늦게 중단됩니다. 타임라인 스타일을 전환하기 전에 블로그 포스트 기반 타임라인이 수직으로 유지되므로 모든 항목이 사용자 지정 항목인지 확인하십시오. 실용적인 조정: 탐색을 화살표와 점으로 설정한 다음 좁은 전화기 너비에서 테스트합니다. 캐러셀 화살표가 카드를 붐비고 점으로 인해 독자가 스와이프하는 것이 더 명확해지기 때문입니다.
유용한 팁을 공유해 주셔서 감사합니다! 😊 타임라인 항목 유형을 확인하고 작은 화면에서 레이아웃을 테스트하면 예상치 못한 문제를 피할 수 있다는 점은 절대적으로 옳습니다. 이 점을 지적하고 다른 Master Addon 사용자가 더 좋고 반응이 빠른 타임라인을 구축할 수 있도록 도와 주셔서 감사합니다. 커뮤니티의 일원이 되어 주셔서 감사합니다!