워드프레스 엔폴드 테마 타임라인 (Timeline) 기능

워드프레스 타임라인은 다양한 방법으로 구현할 수 있습니다. 직접 HTML과 CSS로 만들어 넣을 수 있고, 플러그인을 사용할 수도 있습니다. 테마에서 이 기능을 지원하는 경우 테마의 타임라인 기능을 이용할 수 있습니다. 인기 워드프레스 테마 중 하나인 엔폴드 테마에서는 Avia Layout Builder에서 제공하는 Timeline 엘리먼트를 사용할 수 있습니다. 이 글에서는 엔폴드(Enfold) 테마에서 제공하는 타임라인 기능에 대해 살펴보겠습니다.

엔폴드 테마 타임라인 (Timeline) 기능

회사 연혁 페이지를 만드는 경우 타임라인 레이아웃을 사용하면 효과적일 수 있습니다. 엔폴드 테마에서 타임라인 기능을 사용하려면, 먼저 Avia Layout Builder로 페이지 편집 화면을 열고, Layout Elements에서 컬럼을 추가한 후에 Content Elements에서 Timeline 엘리먼트를 끌어다가 원하는 컬럼에 놓습니다.

타임라인 요소를 추가했으면, 추가된 타임라인 요소를 클릭합니다.

그러면 Timeline 설정 창이 표시됩니다.

기본적으로 위와 같이 샘플로 몇 개의 마일스톤(Milestone)이 입력되어 있습니다. 기본적으로 추가되어 있는 샘플 마일스톤을 편집하려면 해당 마일스톤 항목을 클릭합니다. 아래의 Add 버튼을 클릭하여 새로운 항목을 추가할 수 있습니다.

Edit Milestone 창이 표시되면 Content 탭의 Milestone Description 섹션에서 타임라인 항목으로 표시되는 마일스톤의 날짜, 제목, 그리고 콘텐츠를 추가할 수 있습니다. Milestone Date에 날짜(예: 2020.3.13)를 입력하고, Milestone Title에 제목을 입력합니다. Milestone Content에 내용을 입력할 수 있습니다. 이 항목을 입력하면 Milestone Title 아래에 표시됩니다.

계속하여 아래의 Milestone Bullet에서 아이콘을 선택할 수 있습니다.

Styling 탭에서는 텍스트 정렬과 컬러를 설정할 수 있습니다.

Text Alignment는 Vertical Timeline(세로 타임라인)에만 적용됩니다.

Advanced 탭에서는 링크를 설정할 수 있습니다.

마일스톤 항목을 모두 입력하면 오른쪽에 타임라인이 실제 어떻게 표시되는지 미리보기를 통해 확인할 수 있습니다.

기본적으로 날짜와 제목이 교대로 표시됩니다. 타임라인 스타일을 변경하려면 Styling 탭을 클릭합니다.

General Styling의 Timeline Orientation (타임라인 방향)에서 타임라인을 세로로 표시할 것인지, 아니면 가로로 표시할 것인지 선택할 수 있습니다. Vertical을 선택하면 세로로 표시되고, Horizontal을 선택하면 가로로 표시됩니다.

Milestone Placement에서 마일스톤의 위치를 지정할 수 있습니다.

Alternate가 기본 설정되어 있으며 날짜와 마일스톤 콘텐츠가 교대로 표시됩니다.

Content Appearance에서 콘텐츠를 박스로 표시할지 여부를 선택할 수 있습니다. Box Shadow with Arrow(화살표와 함께 음영 효과가 적용된 박스)를 선택하면 아래 그림과 같이 타임라인이 표시됩니다. 기본은 Plain(일반)입니다.

Font Size에서 글자 크기를 지정할 수 있습니다.

Colors (컬러) 섹션에서 글자 색상과 박스 배경색을 지정할 수 있습니다.

Advanced 탭에서는 애니메이션, 반응형(기기 해상도에 따라 타임라인을 표시할 것인지 여부 설정), 개발자 설정을 지정할 수 있습니다.

Developer Settings에서 CSS 클래스를 지정하면 CSS를 사용하여 커스텀할 때 편리합니다.

엔폴드 테마를 사용하는 경우 별도의 플러그인에 의존하지 않고 테마에 포함된 타임라인 기능을 사용할 수 있습니다. 테마 내에서 설정하는 옵션으로 부족한 부분은 CSS를 이용하여 조정할 수 있습니다.

참고:

워드프레스에 타임라인(Timeline)을 적용하는 방법