Elementor에서 타임라인을 만드는 방법(수직, 수평 및 포스트 타임라인)

엘리멘터 자체 타임라인 위젯이 없습니다무료 버전이나 Pro의 경우. Elementor 페이지에 타임라인을 추가하려면 애드온에서 타임라인을 추가하세요. 이 가이드는 무료의 타임라인 위젯을 사용합니다 마스터 애드온 블로그 게시물에서 자체적으로 구축되는 수직 레이아웃, 수평 캐러셀 및 타임라인을 다루는 플러그인입니다.

아래의 모든 스크린 샷은 마스터 애드온 3,2 와 Elementor 4,2.4 에서 나온 것입니다. 사용자 정의 타임 라인,레이아웃 및 전체 스타일 탭 모두 무료입니다. 포스트 타임 라인은 Pro 가 필요하며,올어지는 위치에 레이블이 지정됩니다.

시청하고 싶다면 이 비디오에서는 5분 이내에 동일한 단계를 다룹니다.

플러그인 없이 Elementor에서 타임라인을 만들 수 있나요?

네,간단한 단측 타임라인의 경우입니다. Elementor 의 컨테이너는 네 단계로 할 수 있습니다:

1. 상위 컨테이너를 추가하고 방향을 설정합니다 칼럼 그리고 0과의 간격입니다. 이것이 전체 타임라인을 유지합니다.
2. 각 항목에 대해 내부 컨테이너를 추가합니다. 아래 스타일 → 테두리를,좌변에만 2px 너비의 단단한 테두리를 설정하고,문자가 지우도록 왼쪽 패딩을 추가합니다. 함께 쌓이면 그 테두리가 선이 됩니다.
3. 각 항목 안에 날짜의 제목과 설명의 텍스트 편집기를 입력하세요.
4. 점에 대한 Icon 위젯을 추가합니다. 아래 고급 → 레이아웃, 위치를 로 설정합니다 절대 그리고 그것이 경계선에 앉을 때까지 오프셋으로 그것을 쿡쿡 찌르십시오.

그러면 애드온이 없는 왼쪽 정렬 타임라인이 제공됩니다. 왼쪽과 오른쪽이 번갈아 나타나는 레이아웃,가로 버전 또는 스크롤에서 애니메이션되는 카드는 얻을 수 없습니다. 양자 레이아웃은 휴대폰에서 한 열로 축소되어야 하기 때문에,교대에는 사용자 정의 CSS 와 더불어 자신만의 반응 규칙이 필요합니다.

또한 유지 관리 속도가 느려집니다. 모든 새로운 마일스톤은 구축할 또 다른 컨테이너이고 손으로 배치할 또 다른 도트입니다. 위젯은 선,마커, 교대 및 중단점을 설정으로 유지하므로 항목을 추가하는 것은 한 번의 클릭입니다.

기본 Elementor 설치에서 위젯 패널에서 “타임라인”을 검색하면 정확히 하나의 결과인 Master Addons 위젯이 다시 나타납니다.

플러그인 설치

WordPress 대시보드에서 다음으로 이동합니다 플러그인 → 플러그인 추가를 검색합니다 Elementor용 마스터 애드온을 설치한 다음 활성화합니다. Elementor 로 아무 페이지나 열고 위젯 패널을 검색합니다 타임라인.

활성화 후 아무 것도 나오지 않으면 확인하십시오 마스터 애드온 → 위젯 라이브러리 그리고 타임 라인이 켜져 있는지 확인하십시오. 위젯은 사용하지 않는 코드를 프런트 엔드에서 분리하기 위해 개별적으로 비활성화 할 수 있으며,신경 쓰면 어쨌든 가치가 있습니다 Elementor 페이지 속도.

Elementor에서 타임라인을 추가하는 방법은 단계별로 진행됩니다

1 단계: 위젯을 페이지로 드래그하십시오

Elementor로 페이지를 편집하고 검색하세요 타임라인그리고 컨테이너로 끌어 넣습니다. 이미 3 개의 샘플 항목이 채워진 상태로 도착하므로,무엇이든 변경하기 전에 각 필드가 무엇을 하는지 확인할 수 있습니다.

2 단계: 타임라인 유형을 선택합니다

콘텐츠 탭에서 을 엽니다 타임라인 섹션. 첫 번째 드롭 다운은 타임라인 유형.

사용자 지정 타임라인 무료입니다. 각 항목을 직접 입력하면 회사 기록, 제품 로드맵 또는 이벤트 일정에 대해 원하는 내용을 입력하고 내용이 고정되고 편집됩니다.

타임라인 게시 마스터 애드온 프로 기능입니다. 그것은 당신의 워드 프레스 게시물을 읽고 그들로부터 타임 라인을 구축,그래서 게시물을 게시하는 것은 그 자체로 항목을 추가합니다. 더 아래에 그것에 섹션이 있습니다.

3 단계: 수직 또는 수평 선택

두 번째 드롭다운은 타임라인 스타일.

수직은 중앙선의 왼쪽과 오른쪽을 번갈아 가며 카드로 페이지를 따라 내려갑니다. 수평은 화살표가있는 회전 목마처럼 항목을 나란히 놓습니다. 둘 다 무료이며 항목을 잃지 않고 어느 시점에서든 전환 할 수 있습니다.

지금 알 가치가 있는 한 가지 한계: 타임라인 스타일은 사용자 지정 타임라인에만 나타납니다. Post Timelines 는 수직으로만 되어 있으며,종류를 전환하면 드롭다운이 사라집니다.

4단계: 항목을 편집합니다

언더 항목, 각 항목은 리피터 행입니다. 하나를 클릭하여 엽니다.

각 행에는 콘텐츠 탭과 미디어 탭이 있습니다. 중요한 필드:

• 쇼: 날짜 또는 사용자 정의 레이블. 날짜는 당신에게 날짜 선택기를 제공합니다; 사용자 정의 레이블은 당신이 달력 날짜 대신 라인에 “Q3 2026”또는 “설립”을 얻는 방법입니다,무엇이든 쓸 수 있습니다.
• 날짜 형식: presets plus Custom.Custom 은 PHP 날짜 문자열을 취하므로 F Y “2019 년 6 월” 을 인쇄하고 이정표 타임라인이 변경 로그처럼 보이지 않도록 합니다.
• 링크: 카드 전체를 클릭할 수 있게 합니다. 카드의 텍스트에 이미 링크가 포함되어 있으면 그대로 두십시오. 링크 내부의 링크는 잘못된 HTML이고 브라우저는 그 중 하나를 삭제하기 때문입니다.
• 콘텐츠 상자는 전체 편집기입니다. 제목란이 따로 없습니다, 항목의 제목은 제목 3으로 여기에 들어갑니다.
• 미디어 탭은 카드에 이미지를 추가하고 해상도를 설정합니다.

항목 추가 새 행을 생성하고 복사 아이콘이 하나를 복제하고 행을 드래그하여 재정렬합니다.

5 단계: 게시하고 살펴보기

네 항목, 월과 년으로 포맷 된 날짜, 마커에 플래그 아이콘, 무료 플러그인에 모두.

카드는 양면이 번갈아 가며 배치되지 않은 채 날짜가 각 카드 반대편에 놓입니다.

스크롤할 때까지 카드가 비어 있는 것처럼 보이는 이유

타임라인 카드는 보기로 스크롤될 때 숨겨지고 애니메이션으로 시작되며 스크롤 위치에 가장 가까운 지점은 집중된 상태를 취하며 포인트 섹션에서 별도로 스타일을 지정합니다.

따라서 스크린샷 도구,PDF 내보내기 또는 스크롤되지 않는 페이지 속도 감사에서 접기 아래에 배치된 타임라인이 비어 있는 것처럼 보입니다. 페이지를 스크롤하면 항목이 나타납니다.

Elementor에서 수평 타임라인을 만듭니다

세트 타임라인 스타일 가로 타임라인으로 이동하면 레이아웃이 회전합니다: 항목이 나란히 놓이고, 점이 가로선의 카드 위에 놓이고, 화살표가 스크롤됩니다.

탐색 아래의 스타일 탭에 화살표가 구성되어 있습니다. 두 개의 컨트롤,혼합하기 쉽습니다:

• 배치 회전목마 내부 또는 외부에 있습니다.
• 위치 왼쪽 위에서 오른쪽 아래로 앉는 곳입니다.

배치에 속하는 값으로 위치를 설정하면 화살표가 첫 번째 항목 위에 있는 왼쪽 상단 모서리에 떨어집니다. 외부 배치가 있는 하단 중앙은 안전한 페어링이며 스크린샷에서 사용하는 것입니다.

수평은 랜딩 페이지의 제품 출시 시퀀스처럼 접힌 부분 위의 4 ~ 6 개의 강력한 이정표에 적합합니다. 6 개의 항목을 지나면 독자는 스캔 할 수없는 콘텐츠를보기 위해 화살표를 반복적으로 클릭하고 수직이 승리합니다. 수직은 또한 사람들이 기대하는 상하 독서가 가능한 전화기에 더 안전한 내기입니다. 당신이 선택하는 것은 무엇이든간에 당신과 비교하여 확인하십시오 반응형 중단점 배송하기 전에 두 레이아웃이 다르게 붕괴되기 때문입니다.

라인, 포인트, 카드를 스타일링합니다

스타일 탭에는 11개의 섹션이 있습니다: 회전목마 항목, 레이아웃, 이미지, 게시물, 카드, 화살표, 날짜, 줄, 포인트, 탐색 및 패턴.

라인 중심선의 색상과 두께를 설정합니다. 카드 배경, 테두리, 그림자 및 패딩을 처리합니다. 날짜 그리고 타이포그래피 컨트롤은 입력 텍스트를 글꼴 시스템과 일치시킵니다.

포인트 는 시간을 보낼 만한 섹션이다.Its 유형 컨트롤은 각 마커에 있는 것을 선택하며, 여기에는 세 개의 상태 탭이 있습니다: 기본값, 호버 그리고 집중된. Focused 는 리더의 스크롤 위치에 가장 가까운 항목에 적용되므로 스타일을 지정하지 않은 상태로 두는 것이 리더가 스크롤을 지나가는 동안 타임 라인을 플랫 목록으로 읽게 만드는 것입니다. 세 가지 모두 스타일 지정.

세트 유형 아이콘과 마커에는 여기 스크린샷에서 사용하는 아이콘이 있습니다. 바로 앞쪽 끝에서 확인하세요: 마커가 빈 원으로 렌더링되면 아이콘이 로드되지 않은 것이며,Type 을 다시 기본값으로 전환하면 항상 작동하는 일반 색상의 점이 제공됩니다.

블로그 게시물에서 타임라인 구축

타임라인 유형을 전환합니다 타임라인 게시 그리고 패널은 완전히 바뀝니다. 엔트리를 입력하는 대신 어떤 포스트를 끌어올지 설명하고,위젯은 그것들로부터 타임라인을 구축합니다.

설정할 가치가 있는 컨트롤:

• 제목 표시, 제목 링크 그리고 제목 태그. 제목 태그를 H2 또는 H3 으로 설정하여 제목 순서의 페이지 H1 아래에 게시물 제목이 위치하도록 합니다. 이는 언제 중요한 제목 순서 규칙과 동일합니다 elementor 에서 블로그 페이지 만들기.
• 이미지 표시 그리고 이미지 해상도 추천 이미지를 카드에 넣으세요.
• 날짜 형식 그리고 시간 형식. 기본값은 날짜 옆에 있는 시간을 인쇄하며,이 시간은 마일스톤 타임라인에서 이상하게 읽혀집니다. 시간 형식을 없음으로 설정하거나 사용자 지정 날짜 형식을 사용합니다.
• 페이지당 게시물, 오프셋 게시물 수, 우편 주문 그리고 주문 기준.
• 카테고리, 태그별로 필터링하세요, 저자 그리고 제외할 게시물입니다 쿼리를 좁혀 하나의 타임 라인은 “뉴스의 모든 것”이 될 수 있고 다른 타임 라인은 직접 선택한 세트가 될 수 있습니다.
• 링크 활성화 전체 카드를 클릭 가능하게 만듭니다. 사용자 정의 버전과 동일한 경고: 카드 콘텐츠에 자체 링크가 있으면 끄십시오.

게시물을 직접 읽기 때문에 이 버전은 a로 깔끔하게 삭제됩니다 테마 빌더 아카이브 또는 단일 템플릿이며 게시할 때 자체적으로 업데이트됩니다. Post Timeline 은 의 일부입니다 마스터 애드온 프로.

사용자 정의 또는 게시물 타임라인: 어느 것

게시물을 게시하는 데 항목이 추가되어야 하는 경우 게시물 타임라인을 사용하고 항목이 한 번 작성한 스토리인 경우 사용자 지정을 사용합니다.

타임라인을 사용할 가치가 있는 곳

• 페이지에 대하여. 수직 회사 연혁, with a 카운터 업 헤드라인 번호는 그 위에 행으로 표시됩니다.
• 제품 페이지. 출고된 기능과 그 다음 단계에 대한 수평 로드맵. 4~6개의 항목, 더 이상은 없습니다.
• 릴리스 노트. a 옆에 있는 한 카테고리로 필터링된 게시물 타임라인입니다 체인질로그 위젯.
• 포트폴리오 및 사례 연구. 미디어 탭이 성과를 거두는 주요 이미지가 포함된 날짜 항목입니다.
• 이벤트 및 코스 일정. 날짜 대신 사용자 정의 레이블이 있으므로 줄에 “1 일, 2 일, 3 일” 이라고 표시됩니다.

타임라인을 더 잘 읽게 만드는 일곱 가지

1. 두 개 또는 세 문장에 각 카드를 보유. 타임 라인은 스캔 형식이며 전체 단락 패배.
2. 이정표에 대한 사용자 정의 레이블을 사용합니다. “2019”는 정확한 날짜가 중요하지 않을 때 “Jun 17, 19”를 능가합니다.
3. 카드 안에 하나의 표제 수준을 유지합니다. 콘텐츠 상자에는 제목 필드가 없으므로 모든 항목의 표제를 H2 와 H4 를 혼합하는 대신 동일한 태그로 설정합니다.
4. 수평 스크롤이 지루해지기 때문에 6개 항목을 지나 수직으로 전환하세요.
5. Focused state 를 스타일링한다. 독자에게 그들이 어디에 있는지를 알려주는 것이다.
6. 아이콘을 선택한 후 앞쪽 끝에 있는 마커를 확인하십시오. 빈 원은 아이콘이 로드되지 않았음을 의미하며 기본 점은 안전한 대체입니다.
7. 전화로 확인하십시오. 교대 레이아웃은 하나의 열로 축소되고 긴 사용자 정의 레이블이 가장 먼저 잘못 포장됩니다.

자주 묻는 질문

관련 읽기

• Elementor 타임라인 위젯모든 컨트롤이 나열된 기능 페이지입니다
• 타임라인 위젯 문서
• Elementor로 블로그 페이지를 만드는 방법
• elementor 페이지에 대한 SEO 관행
• WordPress.org의 마스터 애드온