주요 시사점
- 이 8 개의 Elementor 타임라인 예제는 모두 하나의 위젯인 Master Addons 타임라인 위젯으로 제작되었으며 각 예제에는 열 수 있는 라이브 데모 페이지가 있습니다.
- 8 개의 타임라인 디자인 중 6 개는 수직이고 2 개는 수평 캐러셀로, 레이아웃이 사용되는 방식과 일치합니다: 긴 층의 경우 수직, 짧은 시퀀스의 경우 수평.
- 수직 예제는 타임라인 위젯의 네 가지 정렬 중 세 가지를 사용합니다: 카드 교체를 위한 중앙, 단측 목록은 왼쪽, 미러링된 단측 목록은 오른쪽.
- 8 개의 디자인 사이의 시각적 차이의 대부분은 타임 라인 위젯의 4 개의 스타일 섹션에서 온다: 카드, 날짜, 선 및 포인트.
- Elementor 및 Elementor Pro에는 타임라인 위젯이 포함되어 있지 않으므로 모든 Elementor 타임라인 템플릿은 설치되는 애드온에 따라 다릅니다.
좋은 Elementor 타임라인 예제는 찾기 어렵습니다. 왜냐하면 대부분의 데모는 lorem ipsum 이 있는 세 개의 회색 카드이기 때문입니다. 아래의 8 가지 디자인은 실제 이야기를 사용합니다: 장기 재건,교량 경간,임상 시험,제과점의 첫해. 모두 로 지어졌습니다 마스터 애드온 타임라인 위젯 그리고 각각은 라이브 데모를 가지고 있습니다.
모든 예제에서 좋은 점,디자인이 작동하게 하는 점,그리고 그 뒤에 있는 설정을 얻을 수 있으므로 자신의 페이지에 대한 템플릿으로 사용할 수 있습니다. 이전에 타임라인을 구축하지 않은 경우 로 시작하십시오 elementor 에서 타임라인을 만드는 방법.
목차
8개의 타임라인 예제를 한눈에 살펴보세요
레이아웃별로 먼저 고른 다음 분위기별로 고릅니다. 이 표는 어떤 Elementor 타임라인 디자인이 어떤 작업에 적합한지 보여줍니다.
| # | 디자인 | 레이아웃 | 이미지 | 좋은 |
|---|---|---|---|---|
| 1 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 100 X 100 X 100 X 100 X | 대체 재구축 | 수직, 중심 | 아니요 | 프로젝트 로그, 복원 |
| 2 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2 | 아치 이미지 필드 | 수직, 한 쪽 | 응, 아치형이야 | 계절별 또는 연간 메모 |
| 3 X 1000 X 1000 X 1000 X 100 X 100 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X | 올바른 조사 | 수직, 오른쪽 | 아니요 | 연대기, 사건 파일 |
| 4 X 1000 X 1000 X 1000 X 400 X 400 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 4 | 수평 제작 | 수평 회전목마 | 예 | 생산 단계 |
| 5 X 1000 X 1000 X 1000 X 100 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 5 | 분할 카드 주간 | 수직, 단일 열 | 아니요 | 주별 일정 |
| 6 X 1000 X 1000 X 1000 X 100 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X | 대체 아치 미디어 | 수직, 중심 | 응, 아치형이야 | 브랜드와 창업자 이야기 |
| 7 X 1000 X 10 | 라이트 카드 평가판 | 수직, 한 쪽 | 아니요 | 연구 및 프로세스 이정표 |
| 8 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 80 X 80 X 80 X 80 X 80 | 수평 연도 | 수평 회전목마 | 아니요 | 연도별 역사 |
1. 교대 재구축 타임라인
이것은 고전적인 Elementor 수직 타임 라인입니다: 카드는 중앙선의 왼쪽과 오른쪽을 번갈아 가며 번호가 매겨진 지점과 각 단계의 날짜가 있습니다. 데모는 3 년에 걸쳐 재건 된 파이프 오르간의 이야기를 들려줍니다.
복원,건설 일기 또는 단계가 명확한 모든 프로젝트에 사용하십시오. 숫자는 날짜를 읽기 전에도 순서를 지정합니다. 빌드하려면 중앙으로 설정된 수평 정렬,얇은 선,작은 포인트 및 페이지보다 약간 가벼운 카드 배경을 사용하십시오.
2. 아치 이미지 분야 타임라인
크림 배경의 일방적 인 타임 라인으로 각 항목에는 텍스트 옆에 아치 모양의 사진이 있습니다. 데모는 농장에 놓인 10 번의 겨울 울타리를 따릅니다.
필드 노트,계절 작업,여행 일지 또는 사진으로 유도되는 모든 것에 사용하십시오. 아치 자르기는 평범한 사진을 고의적으로 보이게합니다. 그것을 만들기 위해 일방적 인 정렬을 사용하고 상단 모서리에 큰 반경을 스타일,이미지, 테두리 반경으로 만 사용하십시오.
3. 오른쪽 정렬 조사 타임 라인
여기서 선은 오른쪽 가장자리를 따라 내려가고 카드는 왼쪽에 위치하며 오른쪽 정렬 텍스트가 있습니다. 일반적인 레이아웃의 거울입니다. 데모는 2 년 정보 요청의 연대기입니다.
조사,법률 또는 규정 준수 연대기 또는 사례 연구에 사용합니다. 비정상적인 정렬은 텍스트 전용 타임라인을 디자인한 것처럼 보이게 합니다. 이를 구축하려면 오른쪽,테두리가 있고 채우기가 없는 점으로 설정된 수평 정렬을 사용합니다.
4. 수평한 제작 타임라인
두 개의 수평 예제 중 첫 번째입니다. 월 라벨은 연두색 점 위에 있고 이미지 카드는 둥근 화살표 버튼으로 그 아래로 미끄러집니다. 데모는 5 단계로 제작된 브리지 스팬을 다룹니다.
제조 또는 생산 단계,또는 5 단계 프로세스에 사용합니다. 사진은 각 단계를 전달하고 텍스트는 세 줄로 유지됩니다. 빌드하려면 가로 타임라인으로 설정된 타임라인 스타일,화살표로 설정된 탐색 및 각 항목의 미디어 탭에 있는 이미지를 사용합니다.
수평 제작 데모를 엽니다. 회전목마 컨트롤은 에 설명되어 있습니다 elementor 에서 수평 타임라인을 만드는 방법.
5. 분할 카드 주 타임 라인
흰색 카드의 단일 중앙 열. 각 카드는 두 가지로 분할된다: 왼쪽에 주와 오른쪽에있는 내용으로 좁은 스트립. 데모는 박물관 rehang 주별로 계획되어 있습니다.
일정,스프린트 계획 또는 코스 개요에 사용하십시오. 라벨 열이 페이지 아래에 줄 지어 있으므로 카드를 읽지 않고 주를 스캔 할 수 있습니다. 그것을 구축하려면 날짜 대신 모든 항목에 사용자 정의 라벨 (“1 주 · 6 1 월”) 을 사용하여 부드러운 그림자가있는 가벼운 카드.
6. 교대 아치 미디어 타임 라인
다시 카드를 번갈아 가며 이번에는 흑백 사진을 각 카드 위에 아치로 자릅니다. 데모는 하나의 오븐과 은행 대출에서 시작하는 빵집의 첫 해입니다.
About 페이지,창립자 스토리 또는 소규모 비즈니스를 위한 Elementor 기록 타임라인에 사용합니다. 하나의 액센트 컬러와 흑백 사진으로 혼합된 화질의 그림을 세트처럼 보이게 합니다. 빌드하려면 Horizontal Align 을 Center 로 설정하고 항목당 이미지,Dates 및 Points 에서 동일한 액센트를 사용합니다.
7. 라이트 카드 평가판 타임 라인
짙은 보라색 배경의 라이트 카드로, 모두 선 한쪽에 호박색 점이 있습니다. 데모는 자금 조달부터 프로토콜 수정까지 임상 시험을 추적합니다.
연구 이정표,자금 조달 라운드 또는 승인 프로세스에 사용합니다. 카드와 배경의 대비가 작업을 수행하므로 카드에 테두리나 그림자가 필요하지 않습니다. 이를 구축하려면 가로 정렬을 왼쪽으로 설정하여 가벼운 카드 배경,작은 채워진 포인트를 사용합니다.
8. 수평 년 타임 라인
두 번째 수평 디자인은 라인 위에 큰 년 (1982, 1986, 1989) 을 각각 아래에 짧은 카드로 배치합니다. 데모는 등대 자동화의 16 년이며 타임 라인과 전후 테이블을 쌍으로 만듭니다.
연도별,제품 세대별,기념일별 회사 연혁에 활용하세요. 연도는 사람들이 역사에서 찾는 화면의 가장 큰 텍스트입니다. 이를 구축하려면 Horizontal Timeline,연도만 보유하는 Custom Label,액센트 색상의 대형 Dates 타이포그래피를 사용하세요.
열여섯 개 다 원해? 데모 뷰어입니다 Elementor 타임라인 위젯 페이지에는 변경 로그, 로드맵 및 이벤트 의제를 포함하여 8개와 8개가 더 포함되어 있습니다.
이것들을 템플릿으로 사용하는 방법
이 중 어느 것이든 다시 만들 수 있습니다 엘리멘터 몇 분 안에 타임라인 템플릿을 만드세요. 왜냐하면 차이점은 모두 설정에 있기 때문입니다. 전체 페이지를 올리려면 다음을 참조하세요 Elementor 페이지 템플릿.
- 타임라인 위젯을 추가하고 자신만의 항목을 입력하세요: 날짜 또는 라벨, 제목, 간단한 설명 및 선택적 이미지.
- 레이아웃을 선택합니다. 타임라인 스타일이 수직 또는 수평을 선택하고 스타일,레이아웃, 수평 정렬이 왼쪽,중앙, 오버레이 또는 오른쪽을 선택합니다.
- 색상과 일치시킵니다. 페이지 또는 컨테이너 배경을 먼저 설정한 다음 카드,날짜, 선 및 포인트를 설정합니다.
- Focused 상태를 확인합니다. 각 예제는 보기에서 항목에 약간 다른 카드 또는 포인트를 제공하므로 리더는 자신의 위치를 유지합니다.
- 전화로 보세요. 수직 타임라인은 작은 화면에서 한쪽으로 이동하고 수평 타임라인은 더 적은 수의 카드를 보여줍니다.
타임라인에 게시물을 표시하는 것은 자체 가이드가 있습니다: elementor의 타임라인에 블로그 게시물을 표시하는 방법.
또한 읽어보세요: 20 Elementor 슬라이더 템플릿여기에는 연도 사이의 실제 간격이 있는 타임라인 슬라이더가 포함됩니다.
자주 묻는 질문
Elementor에는 타임라인 템플릿이 함께 제공됩니까?
아니요. Elementor 와 Elementor Pro 에는 타임라인 위젯이 없으므로 템플릿 라이브러리에도 실제 타임라인이 없습니다. Elementor 의 타임라인 템플릿은 항상 애드온 위젯이나 사용자 지정 CSS 에 의존합니다.
회사 역사에 가장 적합한 타임라인 레이아웃은 무엇입니까?
교대로 수직 타임라인은 예제 6 과 같은 사진의 긴 역사에 적합합니다. 5 년 또는 6 개의 주요 연도가 있는 짧은 역사의 경우 예제 8 과 같은 수평 연도 타임라인은 공간을 덜 차지합니다.
이 타임라인 디자인을 어떤 테마에도 사용할 수 있나요?
예. 디자인은 타임라인 위젯의 자체 스타일 컨트롤이 있는 Elementor 편집기에서 만들어지므로 테마에 의존하지 않습니다. 글꼴은 위젯에서 설정하지 않는 한 사이트의 전역 타이포그래피를 따릅니다.
타임라인에는 몇 개의 항목이 있어야 합니까?
4~8 은 편안한 범위입니다. 4 이하에서는 간단한 목록이 더 명확합니다. 10 이상에서는 타임라인을 연도 또는 10 년으로 나누거나 각 카드를 제목과 한 줄로 줄입니다.
최종 생각
이 여덟 Elementor 타임 라인 예제는 대부분의 사이트가 필요로하는 레이아웃을 다룹니다: 두 개의 교대 디자인,세 개의 단면,단일 열 일정 및 두 개의 수평 캐러셀. 그들은 모두 하나의 위젯에서 왔으며 차이점은 네 가지 스타일 섹션에 있습니다: 카드,날짜, 선 및 포인트.
데모를 열고 가장 가까운 데모를 선택한 다음 버전으로 버전을 구축하세요 타임라인 위젯.
관련 읽기
