요소와 함께 WordPress에서 타임 라인을 만드는 방법

타임 라인은 이벤트, 이정표 또는 단계를 연대순으로 표시하는 시각적 인 방법을 제공합니다. 이들은 방문자와 사용자가 일련의 이벤트 또는 프로세스를 쉽게 이해할 수 있도록 선형 흐름으로 정보를 제시하는 데 도움이됩니다. 그것들을 사용하여 회사의 여정, 프로젝트 로드맵 또는 개인 이야기를 명확하게 보여줄 수 있습니다.

WordPress에 타임 라인을 추가하면 콘텐츠를보다 매력적이고 쉽게 따라갈 수 있도록 사용자 경험을 향상시킬 수 있습니다. 그렇기 때문에 타임 라인을 사용하는 것이 많은 웹 사이트에서 트렌드가되었습니다. Elementor는 사용자 친화적 인 플러그인으로, 극한의 사용자 정의로 WordPress 게시물 및 페이지에 타임 라인을 작성하고 추가하는 데 사용할 수 있습니다.

이 기사에서는 요소와 함께 WordPress에서 타임 라인을 만드는 방법에 대한 단계별 안내서를 보여 드리겠습니다. 그 전에는 오늘의 주제에 관한 몇 가지 이론적 부분을 다룰 것입니다.

타임 라인의 유형 및 사용 사례

수평과 수직의 두 가지 유형의 타임 라인이 있습니다. 각각에는 웹 사이트에 가치를 더한 특정 사용 사례가 있습니다. 아래 토론에서 그들과 그들의 사용 사례를 탐색합시다.

1. 수직 타임 라인

수직 타임 라인은 일반적으로 페이지의 왼쪽 또는 중앙을 따라 이벤트와 정보를 위에서 아래로 표시합니다. 데스크탑 및 모바일 장치 모두에서 완벽하게 작동하는 스크롤 친화적 인 형식입니다. 사용자가 페이지 아래로 스크롤하면 깨끗하고 읽기 쉬운 레이아웃에서 시간순 순서를 따릅니다.

수직 타임 라인의 사용 사례 :

• 회사 역사 또는 성장 여정
• 재개 또는 경력 하이라이트
• 블로그 게시물 시리즈 또는 기사 진행
• 단계별 프로세스 설명
• 제품 개발 이정표

2. 수평 타임 라인

수평 타임 라인은 측면 스크롤 또는 슬라이딩 형식에 따라 왼쪽에서 오른쪽으로 이벤트를 표시합니다. 일반적으로 공간이 키가 큰 곳에서 사용됩니다. 이 형식은 짧은 타임 라인에 가장 적합하거나 넓고 볼 수있는 레이아웃에서 몇 가지 중요한 이벤트 만 표시하려는 경우에 가장 좋습니다.

수평 타임 라인의 사용 사례 :

• 프로젝트 로드맵 또는 계획 단계
• 이벤트 일정
• 마케팅 캠페인 또는 제품 출시
• 포트폴리오 프레젠테이션
• 교육 타임 라인 또는 역사적 개요

요소와 함께 WordPress에서 타임 라인을 만드는 방법

이미 말했듯이 Elementor는 드래그 앤 드롭 페이지 빌더 플러그인입니다. 그러나 슬픈 소식은 타임 라인을 만들기위한 위젯이 포함되어 있지 않다는 것입니다. 그러나 플러그인에는 Core Elementor 플러그인의 기능을 확장 할 수있는 많은 애드온이 있습니다.

Happyaddons는 그들 중 하나입니다. 요소의 많은 단점을 극복 할 수있는 130 개 이상의 위젯과 22 개 이상의 기능이 제공됩니다. 따라서 HappyAddons 플러그인을 설치하면 사이트에서 더 많은 디자인 기능을 사용할 수 있습니다. 많은 경우에, 당신은 Happyaddons가 있다면 Elementor Pro가 필요하지 않을 것입니다.

이제 Elementor 및 Happyaddons와 함께 WordPress에서 타임 라인을 만드는 방법을 살펴 보겠습니다.

WordPress에서 수평 타임 라인을 만드는 방법

수평 타임 라인이 무엇인지 이미 알고 있기를 바랍니다. HappyAddons 에는 수평 타임 라인 위젯이 있으며 완전히 무료로 사용할 수 있습니다. 따라서 웹 사이트에 다음 플러그인을 먼저 설치하고 활성화해야합니다.

• 요소
• Happyaddons

사이트에 플러그인을 설치하고 활성화 한 후에는 아래 자습서에 설명 된 단계를 시작하십시오.

단계 01 : 요소 캔버스에 섹션을 만듭니다

요소와 함께 게시물이나 페이지를 엽니 다. 원하는 Flexbox 열 구조가있는 섹션을 만들어 타임 라인을 만듭니다.

02 단계 : 수평 타임 라인 위젯을 캔버스에 추가합니다.

요소 패널에서 수평 타임 라인 위젯을 찾으십시오 . 일단 찾으면 위젯을 캔버스로 끌어들이십시오.

기본 레이아웃이있는 수평 타임 라인 위젯이 캔버스에 추가 된 것을 볼 수 있습니다.

단계 03 : 위젯의 사전 설정을 선택하십시오

사전 설정은 빠른 사용자 정의를 위해 위젯에 즉시 적용 할 수있는 사전 정의 된 디자인 스타일 또는 레이아웃입니다. 처음부터 위젯을 설계하지 않으려면 사전 설정을 선택할 수 있습니다. 수평 타임 라인 위젯에는 6 개의 사전 설정이 제공됩니다.

위젯에 대해 좋아하는 사전 설정을 선택하십시오 .

단계 04 : 수평 타임 라인 위젯에 컨텐츠를 추가하십시오

타임 라인 섹션을 확장하십시오 . 여기에서 위젯에 컨텐츠를 추가 할 수있는 옵션이 제공됩니다. 기본적으로 4 개의 탭이 나타납니다. 탭을 클릭하여 확장하십시오. 원하는 정보를 배치하고 추가 할 수있는 많은 분야가 열립니다.

탭이 확장되면 이벤트 날짜, 아이콘, 이미지, 이미지 해상도, 제목 및 설명을 해당 탭에 추가 할 수 있습니다.

수평 위젯의 각 섹션에 콘텐츠를 추가했음을 알 수 있습니다.

같은 방식으로 모든 타임 라인 탭에 컨텐츠를 추가하십시오. 아래에 첨부 된 이미지에서 수행 한 것을 알 수 있습니다.

위젯에 더 많은 탭을 추가하려면 타임 라인 탭에서 + 항목 추가 버튼을 클릭하십시오 .

단계 5 : 수평 타임 라인 위젯에 대한 설정을 구성합니다

컨텐츠 부분이 완료되면 컨텐츠 탭에서 설정 섹션을 확장하십시오 . 제목 HTML 탭, 컨텐츠 정렬, 콘텐츠 화살표 숨기기, Lightbox, 애니메이션 속도, 표시 할 슬라이드 수, 아이콘 등을 구성 할 수 있습니다.

이것들은 구성하기 쉽습니다. 우리는 당신이 그들을 혼자서 할 수 있기를 바랍니다.

단계 06 : 수평 타임 라인 위젯의 양식화

위젯을 스타일로 만들려면 요소 패널의 스타일 탭 으로 이동하십시오 .

먼저 타임 라인 섹션을 확장하십시오 .

선 두께, 선 색상, 날짜 간격, 날짜 타이포그래피, 색상, 아이콘, 테두리 반경, 테두리 유형, 경계 너비, 배경색 등을 사용자 정의 할 수있는 옵션이 제공됩니다.

그것들을 탐색하고 필요한 사용자 정의를 수행하십시오.

수평 타임 라인을 변경했음을 알 수 있습니다.

그런 다음 화살표 섹션을 확장하십시오 . 여기에서 화살표 아이콘, 위치, 크기, 테두리 너비, 반경 등을 사용자 정의 할 수 있습니다.

같은 방식으로 스타일 탭의 컨텐츠 섹션을 확장하십시오 . 테두리 반경, 패딩, 내용 사이의 공간, 테두리 유형, 테두리 너비, 색상, 그림자, 타이포그래피 및 더 많은 위젯을 사용자 정의 할 수 있습니다.

필요한 변경을 수행하십시오.

단계 07 : 수평 타임 라인 위젯 미리보기

미리보기 페이지로 이동하여 모든 것이 잘 작동하는지 확인하십시오. 데모 수평 타임 라인이 결함없이 잘 작동한다는 것을 알 수 있습니다.

WordPress에서 수직 타임 라인을 만드는 방법

HappyAddons를 사용하면 수평 타임 라인을 무료로 만들 수 있지만 플러그인 프리미엄 버전으로 업그레이드하려면 수직 타임 라인을 만들어야합니다. 따라서 다음 플러그인을 사이트에서 사용할 수 있는지 확인하십시오.

• 요소
• Happyaddons
• Happyaddons Pro

사이트에서 사용할 수 있으면 아래에 설명 된 자습서를 시작하십시오.

단계 01 : 타임 라인 위젯을 요소 캔버스로 끌고 삭제합니다.

검색 창에 타임 라인을 입력하십시오 . 수평 타임 라인 이외의 타임 라인 위젯을 선택하십시오 . 요소 캔버스에서 드래그 앤 드롭 .

기본 레이아웃이있는 캔버스에서 수직 타임 라인이 생성됩니다.

02 단계 : 수직 타임 라인 위젯의 사전 설정을 선택합니다.

우리가 이미 위에서 논의한 것처럼 사전 설정이 무엇인지 이미 알고 있기를 바랍니다. 수직 타임 라인을 처음부터 설계하지 않으려면 사전 설정을 선택하십시오 .

단계 03 : 수직 타임 라인에 컨텐츠를 추가하십시오

타임 라인 섹션을 확장하십시오 . 기본적으로 두 개의 탭이 표시됩니다. 위에서 보여준대로 탭을 클릭하여 탭을 확장하십시오.

여기서 많이 이야기 할 필요가 없기를 바랍니다. 수평 타임 라인의 경우에 할 수있는 것과 동일한 유형의 컨텐츠를 정체 타임 라인에 추가 할 수 있기 때문입니다.

아이콘을 추가하고, 아이콘 유형을 변경하고, 시간을 정의하고, 제목을 설정하고, 이미지 추가 등을 각 타임 라인 섹션에 넣을 수 있습니다. 스스로의 일을 직접하십시오.

타임 라인에 컨텐츠 추가를 완료하십시오. 위와 같이 + 추가 항목을 클릭 하여 타임 라인에 더 많은 항목을 추가 할 수도 있습니다.

단계 04 : 세로 타임 라인 위젯의 설정을 구성합니다

설정 섹션을 확장하십시오 . 날짜, 시간, 콘텐츠 화살표 및 스크롤 트리를 표시할지 여부를 구성 할 수 있습니다. 제목 태그, 아이콘 상자 정렬, 트리 정렬 및 배경색을 변경할 수도 있습니다.

스스로 신문 설정을 직접하십시오. 그러나 우리에게는 기본 정렬이 좋아 보입니다. 그래서 우리는 튜토리얼을 위해 그것을 고수합니다.

단계 05 : 수직 타임 라인 위젯의 양식화

요소 패널의 스타일 탭 으로 오십시오 . 이 탭에서 위젯에서 모든 유형의 컨텐츠 및 시각적 요소를 사용자 정의 할 수 있습니다.

먼저 컨텐츠 상자를 확장하십시오 . 타이포그래피, 색상, 화살표 색상, 배경 유형, 테두리 유형 및 테두리 너비를 여기에서 사용자 정의 할 수 있습니다. 이렇게하십시오.

같은 방식으로 아이콘 박스 섹션을 확장하십시오 . 여기에서 위젯의 아이콘과 관련된 너비, 높이, 박스 공간 ​​및 기타 옵션을 변경할 수 있습니다. 기본 스타일에 만족한다면 아무것도 만지지 마십시오.

필요하다고 느끼면 위젯의 제목을 양념하십시오. 타이포그래피를 변경했음을 알 수 있습니다.

같은 방식으로 시간 및 날짜 의 모양을 사용자 정의하십시오. 우리는 색상, 무게 및 타이포그래피를 변경했습니다.

마지막으로 버튼 섹션을 확장하십시오 . 배경색, 사본 타이포그래피 등을 스타일로 만들 수 있습니다.

단계 06 : 수직 타임 라인 위젯을 미리 봅니다

미리보기 페이지로 와서 Verticle 타임 라인이 잘 작동하는지 확인하십시오. 위젯을 스크롤하여 수행하십시오. 우리는 그것이 당신의 끝에서 우리의 끝에서 잘 작동하기를 바랍니다.

따라서 웹 사이트에서 다양한 유형의 타임 라인 섹션을 만들어 다양한 컨텐츠를 훌륭하게 제시 할 수 있습니다.

Happyaddons로 더 많이 할 수있는 일

Happyaddons는 솔직히 포괄적 인 플러그인입니다. 이 플러그인을 한 번 사용한 직후 에이 플러그인을 좋아할 것입니다. 플러그인으로 수행 할 수있는 다음 사항을 살펴보십시오.

에이. 무료 테마 빌더를 사용하십시오

Elementor에는 테마 빌더도 있습니다. 그러나 프리미엄 사용자에게만 예약되어 있습니다. 그러나 Happyaddons의 경우 무료로 사용할 수 있습니다. HappyAddons 테마 빌더를 사용하면 헤더, 바닥 글, 블로그 게시물 템플릿 및 아카이브 페이지를 만들 수 있습니다. Happyaddons와 함께 블로그 게시물 템플릿을 무료로 만드는 방법을 확인하십시오.

비. 우편 상거래 친화적

Happyaddons에는 전자 상거래 사이트를 향상시키기 위해 9 개의 강력한 Woocommerce 친화적 인 위젯이 제공됩니다. 이러한 위젯은 제품 그리드, 제품 회전 목마, 제품 카테고리 그리드, 제품 카테고리 회전 목마, 단일 제품, 미니 카트, 카트, 체크 아웃 및 배송 바입니다.

기음. 크로스 도메인 사본-붙여 넣기

이 기능을 사용하면 한 웹 사이트에서 다른 웹 사이트에서 다른 도메인으로 동일한 위젯, 섹션 및 페이지를 직접 복사 할 수 있습니다. 이렇게하면 항상 처음부터 시작할 필요는 없으므로 귀중한 시간을 절약 할 수 있습니다. 다음 비디오는 플러그인의 크로스 도메인 사본-페이스트 기능을 설명합니다.

디. 창의적인 콘텐츠를 디자인하십시오

이미지 호버, 애니메이션 링크, 재미있는 요소, 이미지 스택 그룹, 사진 스택, 크리에이티브 버튼, 텍스트 스크롤 및 Lord Icon과 같은 위젯을 사용하면 사용자를 고치기 위해 창의적인 창의적 콘텐츠를 만들 수 있습니다.

이자형. 통계 정보를 보여줍니다

다른 요소 애드온과 달리이 플러그인은 통계 정보를 보여주고 인포 그래픽 게시물 및 페이지를 만들 수있는 여러 차트 위젯을 제공합니다. 요소와 함께 인포 그래픽 페이지를 만드는 방법을 알아보십시오.

이 모든 것 외에도 Happyaddons 플러그인으로 할 수있는 일이 더 많습니다.

마지막 생각!

타임 라인을 만드는 것은 모든 웹 사이트에서 필수적인 것이 아닙니다. 그러나 특정 정보와 내용을 보여주는 이상적인 옵션이 될 수 있으므로 필요할 수 있습니다. 따라서 타임 라인을 만들 필요가 있다고 생각할 때 마다이 튜토리얼 게시물이 사용되기를 바랍니다.

이 게시물을 좋아했다면 아래 의견 상자를 통해 알려주십시오. 게다가 Happyaddons 플러그인과 관련하여 쿼리가 있으면 채팅 상자에 메시지를 남길 수 있습니다. 우리의 라이브 지원 에이전트는 가능한 빨리 당신에게 응답 할 것입니다.

끝까지 우리와 함께 해주셔서 감사합니다. 우리는 당신에게 행복한 날을 기원합니다.