Elementor를 사용하여 WordPress에서 놀라운 콘텐츠 타임라인 만들기

콘텐츠 타임라인은 이벤트의 순차적 정보를 표시하는 크래킹 도구이지만 WordPress 웹 사이트에서 이러한 타임라인을 만들려면 전체 명령과 함께 올바른 도구를 사용해야 합니다.

콘텐츠 타임라인을 구축하기 위해 임의의 WordPress 도구를 선택하면 도구가 평균 이하로 변해 싸구려 디자인 룩을 연출할 가능성이 있습니다.

WordPress에서 콘텐츠 타임라인을 생성하는 최적의 방법을 찾기 위해 심층 분석을 수행했습니다. 뭔지 맞춰봐? 이 글에서는 Elementor를 사용하여 WordPress에서 콘텐츠 타임라인을 만드는 가장 쉬운 방법을 모았습니다.

콘텐츠 타임라인 이해

콘텐츠 타임라인은 정보를 시간순 형식으로 나타냅니다. 시각적으로 눈에 띄는 방식으로 정보를 공유하는 간단하면서도 효과적인 방법입니다.

콘텐츠 타임라인의 주요 목적은 시간 간격 내에서 이벤트의 동작을 순차적으로 보여주는 것입니다. 독자가 눈 깜짝할 사이에 더 많은 정보를 얻을 수 있도록 도와줍니다.

일반적으로 콘텐츠 타임라인에는 포인트와 그 주변의 일부 정보가 있는 긴 막대가 포함되어 있습니다. 이 막대는 수직 및 수평 모두 가능합니다. 방향이 무엇이든 타임라인 막대에 충분한 리소스가 포함되어 있는지 확인하세요. 관련 이미지, 아이콘, 숫자, 클릭 가능한 텍스트 또는 기타 대화형 요소를 사용하여 막대를 개선할 수 있습니다.

콘텐츠 타임라인을 어디에 사용해야 합니까?

콘텐츠 타임라인은 다목적 도구입니다. 거의 모든 곳에서 이 도구를 사용하여 작업을 원활하게 수행할 수 있습니다. 이 타임라인이 가장 잘 작동하는 주요 부문을 살펴보겠습니다.

콘텐츠 타임라인을 만드는 방법

적절한 타임라인을 만들려면 시간과 헌신이 필요합니다. 타임라인을 만드는 간단한 과정은 다음과 같습니다.

#1단계: 주제 분석

먼저 주제를 선택하고 해당 주제에 대해 필요한 정보를 수집하세요. 타임라인에 표시하고 싶은 정보를 철저하게 선택해야 합니다.

#2단계: 타임라인 이름 지정

타임라인 이름을 선택할 때는 주의하세요. '타임라인 이름'은 타임라인의 목적을 나타내야 합니다.

이름이 모든 사람에게 표시되도록 항상 타임라인 상단에 타임라인을 배치하세요.

#3단계: 대략적인 타임라인 그리기

이때 종이에 대략적인 타임라인 구조를 그려보세요. 몇 개의 점을 따라 수평선이나 수직선을 그리면 됩니다. 모든 단일 지점은 프로젝트의 날짜 또는 이정표를 나타냅니다.

이제 프로젝트에 대한 텍스트나 기타 관련 정보를 추가할 차례입니다. 그리고 그게 다야!

#4 단계: 주제 마무리

대략적인 일정 계획이 이미 귀하의 손에 있기를 바랍니다. 이제 잠시 쉬면서 다시 한 번 주제에 대해 심층적인 조사를 진행해 보세요. 따라서 어리석은 문제를 찾아서 해결할 수 있습니다.

#5단계: 타임라인 사용자 정의

타임라인을 사용자 정의하면 이해하기 쉽고 시각적으로도 멋집니다. 이를 위해 아이콘이나 미디어 파일을 추가할 수 있습니다.

WordPress 웹 사이트에 Elementor 콘텐츠 타임라인을 추가하는 방법은 무엇입니까?

이제 콘텐츠 타임라인과 그 적용 및 타임라인 생성 프로세스에 대한 명확한 지식을 갖추었습니다.  

이제 콘텐츠 타임라인을 WordPress 웹사이트에 통합할 차례입니다. 그렇다면 어떻게 할 수 있나요?

좋아요!

WordPress에서 콘텐츠 타임라인을 만드는 방법에는 주로 두 가지가 있습니다. 아래로 스크롤하여 프로세스에 대해 자세히 알아보세요.

수동 프로세스(어려운 방법)

수동 프로세스는 웹 사이트에서 콘텐츠 타임라인을 만드는 전통적인 방법입니다. 콘텐츠 타임라인을 만들려면 이미지나 GIF 파일이 필요합니다. 그렇다면 어떻게 할 수 있나요?

단순한! 다음 단계를 따르세요.

• 먼저 콘텐츠를 디지털 방식으로 그립니다. 타임라인을 그리려면 Photoshop, Gimp, Paint와 같은 사진 편집 소프트웨어를 사용할 수 있습니다. 프로젝트 완료 후 이미지나 gif 파일로 저장하세요.
• 둘째, 웹사이트에 페이지나 게시물을 만들고 해당 페이지에 이미지/gif 파일을 넣으세요. 그런 다음 필요한 콘텐츠를 추가하고 게시하세요. 

팔! 이제 끝났습니다!

이 프로세스의 단점:

프로세스는 매우 간단해 보일 수 있습니다. 하지만 아직 진정하지 마세요! 실생활에서 이 과정에서 많은 문제에 직면하게 될 것입니다. 중요한 단점은 다음과 같습니다.

• 웹사이트 관리 대시보드를 통해 게시된 타임라인을 업데이트할 수 없습니다.
• 대화형 타임라인을 만들 수 없습니다.
• 아이콘과 이미지를 사용자 정의하는 것은 번거로운 과정입니다.

자동 프로세스(가장 쉬운 방법 – ElementsKit pro)

콘텐츠 타임라인을 최대한 활용하려면 다음을 사용하세요. ElementsKit. WordPress 웹사이트에서 콘텐츠 타임라인을 구축하는 데 유용할 수 있는 프리미엄 Elementor 애드온입니다.

이 섹션에서는 몇 분 안에 Elementor 콘텐츠 타임라인을 생성하는 과정을 소개하겠습니다. 시작하자.

웹사이트 관리자 패널에 액세스

수동 방법과 마찬가지로 사진 편집 소프트웨어에서 타임라인을 그릴 필요가 없습니다. 웹사이트의 관리자 패널 대시보드에서 모든 작업을 수행할 수 있습니다.

관리자 패널 대시보드에 로그인하기만 하면 됩니다. 일반적으로 대시보드 URL은 Yourdomain.com/wp-admin과 같습니다.

Elementor 및 ElementsKit 설치

관리자 대시보드에 로그인한 후 Elementor를 설치하고 Elementor 애드온 ElementsKit. 타임라인을 자동으로 생성하려면 이 두 가지가 모두 필요합니다.

새 웹페이지 또는 기존 웹페이지 열기

Elementor 및 ElementsKit을 활성화한 후에는 게시물이나 페이지에서 이를 사용할 차례입니다. 따라서 다음을 클릭하여 새 게시물을 작성하세요. 게시물 > 새로 추가.

“를 클릭하세요.제목 추가”를 차단하고 제목을 추가하세요. 게시물에 일반 텍스트와 이미지를 추가할 수도 있습니다.

엘리멘터 실행

이제 “를 클릭하세요.Elementor로 편집” 그러면 Elementor 편집기에서 새로운 게시물이 열립니다. Elementor 편집기는 게시물을 보다 전문적으로 편집하는 데 사용됩니다.

ElementsKit 타임라인 실행

“Elementor” 패널을 아래로 스크롤하여 “타임라인" 목록에 애드온이 있습니다. 그렇지 않으면 Elementor 패널에서 "Timeline"을 검색하면 됩니다.

ElementsKit 타임라인 실행

이제 타임라인 위젯을 게시물에 끌어다 놓으면 끝입니다! 게시물에 샘플 타임라인이 표시됩니다.

기본적으로 세 개의 타임라인 지점이 있습니다. 이 모든 것을 제거하고 자신만의 타임라인을 만들기 시작할 수 있습니다. 그렇지 않으면 이러한 기존 포인트의 내용을 편집하고 필요한 경우 더 많은 포인트를 추가할 수도 있습니다.

다음 단계는 콘텐츠 타임라인의 텍스트, 아이콘 또는 스타일을 수정하는 것입니다.

타임라인 콘텐츠 사용자 정의

"콘텐츠" 탭에서는 타임라인 스타일, 콘텐츠 스타일, 타임라인 콘텐츠 등을 사용자 정의할 수 있습니다. 콘텐츠 탭에서 여러 옵션을 수정할 수 있습니다. 주요 옵션을 살펴보겠습니다.

1. 타임라인 스타일

이것은 콘텐츠 탭의 첫 번째 섹션입니다. 수직 Elementor 타임라인 또는 수평 Elementor 타임라인 스타일을 선택할 수 있습니다. 기본적으로 세로 스타일이 선택됩니다. 하고 싶을 때 언제든지 스타일을 변경할 수 있습니다!

2. 콘텐츠 스타일

콘텐츠 스타일 탭을 사용하면 측면을 선택할 수 있습니다. 모든 콘텐츠를 같은 면 또는 양쪽에 표시할 수 있습니다.

이제 콘텐츠 타임라인의 전망이 완료되었습니다. 이 섹션에서는 타임라인의 텍스트, 이미지 또는 아이콘을 업데이트해야 합니다.

3. 타임라인 콘텐츠

타임라인 콘텐츠를 사용하면 제목, 설명, 링크, 날짜, 주소, 아이콘 등과 같은 여러 옵션을 수정할 수 있습니다. 제목 이름을 클릭하기만 하면 이 기능을 활성화할 수 있습니다.

기본 설정에는 세 가지 타이틀이 있습니다. 해당 제목을 추가하거나 제거할 수 있습니다. 제목을 클릭하면 콘텐츠 편집 옵션이 표시됩니다.

타임라인 콘텐츠 섹션에서 다음 옵션을 수정할 수 있습니다.

• 제목
• 부제
• 제목 링크
• 설명
• 제목 아이콘
• 날짜
• 주소
• 자막 색상
• 콘텐츠 상자 배경
• 아이콘 텍스트 색상 및
• 아이콘 배경
  

4. 리피터 아이템 스타일

이 섹션에서는 콘텐츠의 색상과 텍스트 및 아이콘의 배경을 수정할 수 있습니다. 가장 중요한 점은 호버 스타일도 이 섹션에서 변경할 수 있다는 것입니다.

개발자들에게 찬사를 보냅니다!

5. 애니메이션 설정

설정 옵션에서 날짜와 주소의 아이콘과 애니메이션을 변경할 수 있습니다. 이 Elementor 타임라인 위젯을 사용하면 페이딩, 확대/축소, 바운싱, 슬라이딩, 회전, 흔들기, 흔들림, 젤로, 롤인 등과 같은 다양한 확대/축소 스타일을 선택할 수 있습니다.

이것이 바로 타임라인 콘텐츠를 사용자 정의하는 것입니다. 이제 콘텐츠에 스타일을 추가할 차례입니다. 스타일 추가에 대한 자세한 내용을 보려면 다음 단계를 따르세요.

타임라인 스타일 사용자 정의

스타일 탭에서는 콘텐츠 스타일, 선 스타일, 컨테이너 스타일을 사용자 정의할 수 있습니다. 아래로 스크롤하여 이러한 기능에 대한 자세한 개요를 확인하세요.

1. 콘텐츠 탭:

콘텐츠 탭에서는 콘텐츠에 대한 다양한 사용자 정의 기회를 제공합니다. 예를 들어 정렬, 패딩, 내부 패딩, 테두리 반경, 텍스트 색상, 자막, 타임라인 스타일 등을 제어할 수 있습니다.

데스크탑, 태블릿, 모바일 버전을 포함한 모든 플랫폼에 대해 이러한 모든 설정을 사용자 정의할 수 있습니다. 콘텐츠 탭 아래에 있는 기능을 명확하게 이해하려면 아래 이미지를 확인하세요.

뿐만 아니라! 텍스트 색상, 앵커 텍스트 색상, 자막 색상, 여백 공간, 타이포그래피, 원형 아이콘 등과 같은 여러 다른 옵션도 수정할 수 있습니다. 이 원형 아이콘의 아이콘과 배경색은 모두 이 섹션에서 수정할 수 있습니다.

지금까지 우리는 귀하의 웹사이트 텍스트에서 여러 스타일을 조정했습니다. 그러나 ElementsKit Elementor 타임라인 위젯은 더 많은 일을 할 수 있습니다!

타임라인 바 색상, 아이콘 크기, 여백, 타이포그래피, 주소 등을 원활하게 수정할 수도 있습니다.

2. 라인 탭

라인 탭을 사용하면 콘텐츠 타임라인에 네 가지 사용자 정의 스타일을 추가할 수 있습니다. 이것들은 -

• ● 선 색상 – 수평 또는 수직 Elementor 타임라인 막대 색상 변경
• ● 핀 색상 – 핀 색상 변경
• ● 활성 핀 색상 – 활성화된 핀 색상을 변경하세요.
• ● 핀포인트 컬러 - 핀포인트 색상을 변경합니다.

3. 컨테이너 탭

컨테이너 탭을 사용하면 콘텐츠의 간격을 변경할 수 있습니다. 여기에는 주소 또는 날짜 간격 및 항목 하단 간격 변경이 포함됩니다.

고급 사용자 정의

'콘텐츠' 및 '스타일' 탭을 사용해야만 웹사이트 사용자 정의를 완료할 수 있습니다. 그러나 좀 더 고급 사용자 정의를 수행하려면 고급 탭을 사용해야 합니다.

그렇다면 고급 탭에서는 무엇을 얻을 수 있나요?

고급 탭에서는 ElementsKit 조건, 효과, 고정 요소, 모션 효과, 반응성, 배경 유형, 패딩 및 여백 사용자 정의 기능을 얻을 수 있습니다.

이 모든 기능을 하나씩 소개하겠습니다.

1. ElementsKit 조건

ElementsKit 조건을 활성화하면 웹페이지에 조건부 게시물을 게시할 수 있습니다. 그런데 조건에 따라 WordPress Elementor 스타일 탭을 통해 웹페이지의 특정 부분을 표시하도록 선택할 수 있습니다. 로그인 상태, 브라우저, 요일, 시간 등에 따라 다양한 조건을 적용할 수 있습니다.

2. ElementsKit 효과

ElementsKit 효과 기능을 사용하면 텍스트에 일부 대화형 효과를 추가할 수 있습니다. WordPress에 대화형 타임라인을 추가할 수 있습니다. CSS, 기울기, 스크롤 및 마우스 이동의 네 가지 효과 스타일을 추가할 수 있습니다.

● CSS 효과

CSS 기능을 사용하면 웹 텍스트에 일부 CSS 애니메이션을 추가할 수 있습니다. 애니메이션 모양 스타일, 애니메이션 속도, 방향 및 반복 횟수를 변경할 수 있습니다.

CSS 변환 기능을 활성화하면 변환, 회전, 크기 조정 및 기울이기 옵션과 같은 네 가지 변환 설정을 변경할 수 있습니다. 문제가 발생하는 경우 '기본값으로 돌아가기' 버튼을 클릭하면 모든 것이 이전 단계로 돌아갑니다.

• ● 기울기 효과

기울기 효과를 활성화하면 MaxTilt 기능, 이미지 크기, 축 기능 등을 변경할 수 있습니다.

• ● 스크롤 효과

스크롤 효과를 통해 웹마스터는 시차 스타일, 전환, 부드러움, 오프셋 설정 등을 수정할 수 있습니다.

• ● 마우스 움직임 효과

마우스 이동 효과를 사용하면 편집기 모드에서 이동 속도를 제어하고 애니메이션을 켜거나 끌 수 있습니다.

3. ● ElementsKit 스티커

다음은 웹사이트 요소의 끈적한 움직임을 제어하는 것입니다. 고정 콘텐츠의 위치를 선택할 수 있습니다. 상단, 하단, 열 및 스크롤업 옵션 중에서 선택할 수 있습니다. 레이아웃에서 고정 오프셋, 배경색 및 고정 장치를 조정할 수 있습니다.

4. 모션 효과:

모션 효과 기능을 사용하면 애니메이션의 시작 스타일, 지속 시간 및 지연을 선택할 수 있습니다.

ElementsKit은 확대/축소, 페이딩, 바운싱, 회전, 슬라이딩, 흔들기, 젤로, 워블링, 롤인 등과 같은 다양한 입구 애니메이션 스타일을 제공합니다.

5. 배경 효과

고급 탭의 배경 옵션을 사용하면 일반 스타일과 호버 스타일 모두에서 배경 이미지를 변환할 수 있습니다.

"일반" 배경 섹션에서는 클래식 또는 그라데이션 기능을 변경하도록 선택할 수 있습니다. 클래식 이미지 기능을 사용하면 전환 속도와 함께 이미지와 색상 변경 스타일도 가능합니다.

반면에 그라데이션 섹션은 배경 유형, 색상, 위치, 각도, 라이너 또는 방사형 배경 유형을 변경하는 기능을 제공합니다.

호버 옵션에서도 이러한 모든 작업을 수행할 수 있습니다.

6. 국경

우리는 이미 콘텐츠 섹션에서 많은 작업을 수행했습니다. 텍스트와 상자 테두리를 조정해 보겠습니다.

실선, 이중선, 점선선, 점선선, 홈 등 다양한 테두리 유형을 선택할 수 있습니다. 테두리 유형을 선택한 후에는 반경을 선택해야 합니다. 그만큼 업데이트된 ElementsKit 반경 스타일과 상자 그림자도 변경할 수 있습니다!

또한 호버 섹션에서도 이러한 모든 기능을 사용할 수 있습니다. 그런데 마우스 오버 탭에서 '전환 기간'을 변경할 수도 있습니다.

7. 포지셔닝

기본적으로 콘텐츠의 '너비'와 '위치'를 수정할 수 있습니다.

너비 섹션에서는 기본 너비를 유지하거나 전체 너비, 인라인, 자동 또는 사용자 지정 섹션으로 변경할 수 있습니다. 수직 정렬도 선택할 수 있습니다.

그런 다음 위치 섹션을 조정할 차례입니다. 기본 옵션 대신 '절대' 또는 '고정' 옵션을 변경할 수 있습니다. 어느 쪽을 선택하든 하위 섹션은 비슷합니다.

예를 들어, 픽셀 단위의 오프셋 수정을 통해 수평 및 수직 방향을 얻게 됩니다.

주의: 꼭 필요한 경우가 아니면 사용자 정의 위치 지정 기능을 사용하지 마십시오. 사이트의 응답성에 영향을 미치기 때문입니다. 그렇더라도 너무 자주 사용하지 마십시오.

8. 반응형

반응형 탭을 사용하면 요소의 모양을 선택할 수 있습니다. 데스크톱, 태블릿, 모바일 섹션 등 모든 플랫폼에서 설정을 변경할 수 있습니다.

9. 맞춤 CSS

이름에서 알 수 있듯이 이 기능을 통해 게시물에 맞춤 CSS를 삽입할 수 있습니다. 그러나 다음이 필요합니다. ElementsKit Pro 버전 웹페이지에 사용자 정의 CSS 또는 속성을 삽입합니다.

이것이 ElementsKit의 '콘텐츠 타임라인' 위젯에서 얻을 수 있는 전부입니다. Elementor 페이지 빌더용 올인원 애드온입니다.

ElementsKit의 콘텐츠 타임라인을 사용해야 하는 이유는 무엇입니까?

좋아요! 이전 섹션의 모든 기능을 살펴보셨기를 바랍니다. 그렇다면 ElementsKit을 사용해야 할까요, 아니면 펜과 종이를 사용하는 전통적인 방법을 고수해야 할까요?

글쎄요, ElementsKit의 콘텐츠 타임라인을 사용해야 한다고 생각합니다. 이 제품을 사용하는 몇 가지 주요 이유에 초점을 맞춰 보겠습니다.

• 사용자 친화적

ElementsKit을 사용하여 콘텐츠 타임라인을 만드는 데 코딩이나 디자인 기술이 필요하지 않습니다. 따라서 완전히 사용자 친화적이 됩니다.

• 시간 절약

새로운 타임라인을 만들고 수동으로 사용자 정의하는 것은 시간이 많이 걸리는 프로세스입니다. 바라건대, 이 다목적 플러그인을 사용하면 몇 분 안에 타임라인을 생성하거나 사용자 정의할 수 있습니다.

• 내장 레이아웃

ElementsKit에는 여러 내장 타임라인 스타일이 있습니다. 긴급 상황에 처해 있고 일정을 계획할 시간이 없다면 저희가 도와드리겠습니다. 내장된 레이아웃 중 하나를 선택하고 텍스트를 사용자 정의한 후 게시하기만 하면 됩니다!

• 고급 조정

타임라인 모듈을 사용하면 몇 가지 고급 조정을 통해 웹사이트에 대한 더 쉽고 눈길을 끄는 타임라인을 만들 수 있습니다. 우리는 이미 "고급 사용자 정의" 섹션에서 고급 조정 기능에 대해 논의했습니다.

• 빠르고 반응성이 좋음

ElementsKit의 타임라인 모듈은 매우 가볍고 로드 속도가 빠릅니다. 반응형 제품이기 때문에 화면 크기와 관련하여 모든 장치에 적합합니다.

콘텐츠 타임라인에 추가할 사항

타임라인을 만드는 것은 큰 일이 아닙니다. 하지만 유용하고 눈길을 끄는 타임라인을 구축하는 것은 매우 창의적인 작업입니다!

음, 다음 옵션을 추가하면 귀하의 타임라인이 귀하의 프로젝트를 더욱 유용하게 만들고 귀하의 모든 쿼리를 만족시킬 것입니다. 타임라인에 포함될 수 있는 옵션을 간단히 살펴보겠습니다.

• 날짜

날짜가 없는 타임라인을 상상할 수 있나요?

아니요!

그렇기 때문에 콘텐츠 타임라인에 적절한 날짜를 추가해야 합니다. 그렇지 않으면 시간 낭비일 뿐입니다. 날짜가 없는 타임라인은 청중에게 아무런 가치가 없습니다.

• 관련 헤드라인

타임라인의 이름을 지정하는 것을 잊지 마세요. 적절한 헤드라인을 사용하면 사용자가 타임라인의 목적을 빠르게 이해할 수 있습니다.

• 그래픽 아이콘

눈에 띄는 일러스트레이션 이미지, 아이콘 또는 기타 그래픽 요소를 사용하면 타임라인이 생생하고 매력적으로 보일 것입니다.

• 설계

타임라인 프레젠테이션에 어울리는 눈길을 끄는 디자인을 선택하세요. 이는 명확성을 더하고 인식을 단순화합니다.

• 간단한 설명

짧은 설명을 통해 사용자는 타임라인 프로젝트의 이정표를 이해할 수 있습니다.

최종 단어

콘텐츠 타임라인은 프로젝트의 이정표를 나타내는 완벽한 요소입니다. 긴 시간 간격을 다루더라도 과도한 설명으로 복잡하게 만들지 마십시오. 대신 이미지, 간단한 설명 등을 사용하여 간단하게 유지하세요.

이 Elementor 타임라인 위젯은 사용자가 번거로움 없이 타임라인을 생성하고 사용자 정의하는 데 큰 도움이 됩니다.

Elementor 콘텐츠 타임라인에 대해 여전히 궁금한 점이 있으면 댓글 섹션에 질문을 게시하세요. 귀하의 문의에 최대한 빨리 답변해 드리겠습니다!

이제 WordPress 사이트에서 콘텐츠 타임라인 만들기를 시작할 시간입니다!