Divi 플러그인 하이라이트 – Divi 타임라인 모듈

게시 됨: 2017-04-30

시간순 정보를 표시하는 가장 흥미로운 방법 중 하나는 타임라인을 사용하는 것입니다. 단계별 지침, 이력서에 대한 경험 목록, 포트폴리오에 대한 프로젝트 목록 또는 블로그 게시물에 관계없이 타임라인은 정보를 시각적으로 매력적으로 만들 수 있습니다. Divi Timeline Module이라는 플러그인을 사용하여 Divi Builder 내에서 자신만의 타임라인을 만들 수 있습니다.

우아한 마켓플레이스를 통해 Tortoise IT의 타사 플러그인인 Divi Timeline Module은 Divi Builder에 몇 가지 새로운 모듈(기본 모듈 및 3개의 동반 모듈)을 추가하여 두 가지 유형의 반응형 타임라인을 생성합니다.

타임라인의 각 지점에 대한 콘텐츠를 만드는 곳입니다. 타임라인의 각 항목은 고유한 콘텐츠, 링크, 색상, 글꼴, 아이콘 등을 가질 수 있습니다.
페이지, 게시물, 미디어 또는 프로젝트의 기존 콘텐츠를 사용하는 콘텐츠입니다.

이 개요에서는 두 가지 유형의 타임라인을 모두 만든 다음 블로그 페이지를 만드는 예를 보여 드리겠습니다. 이 개요에서는 Unsplash.com의 무료 이미지를 사용하고 있습니다. 시작하자.

Divi 타임라인 모듈 플러그인 설치

설치는 간단합니다. 플러그인을 업로드하고 플러그인을 활성화하기만 하면 됩니다. 다른 설정이 필요하지 않습니다.

타임라인 만들기

네 가지 모듈이 있습니다: (포스트) – Vertical , Content , Featured Image 및 Vertical . 다중 열 레이아웃에서 작동하지만 단일 열 레이아웃이 가장 잘 작동합니다. 타임라인 – 세로 또는 타임라인(게시물) – 세로 는 페이지 내에서 사용됩니다. 나머지는 레이아웃을 만드는 데 사용됩니다.

타임라인 세로

단일 열 행에 타임라인 – 수직 모듈을 추가합니다.

일반 설정에서 새 타임라인 항목을 추가하고, 타임라인의 제목을 제공하고, 타임라인의 색상을 선택할 수 있습니다. 새 타임라인 항목 추가를 클릭 하여 각 타임라인 요소를 생성합니다.

새 타임라인 항목 추가를 클릭하면 텍스트, 미디어, 레이블, 더 보기 버튼, 아이콘, 아이콘 색상, 배경색 및 이미지/아이콘 애니메이션이 포함된 콘텐츠 편집기가 열립니다. 또한 모든 표준 고급 디자인 설정 과 사용자 정의 CSS가 포함 됩니다.

원하는 만큼 타임라인 요소를 추가합니다. 여기에서 5개의 요소를 추가하고 중앙선 색상 을 녹색으로 변경한 것을 볼 수 있습니다. 타임라인 요소 내에서 각 요소의 아이콘과 색상을 선택했습니다.

타임라인 수직 결과

제가 만든 퀵타임라인입니다. 각각 고유한 콘텐츠와 아이콘이 있는 5개의 항목이 있습니다. 내가 선택한 선의 색상도 콘텐츠 창 하단에 추가되었습니다. 모듈이 있는 섹션에 배경 이미지를 추가했습니다.

물론 고급 디자인 설정 을 사용하면 페이지와 일치하도록 모듈의 스타일을 지정할 수 있으므로 흰색 배경이나 이러한 글꼴이 필요하지 않습니다.

지침, 이력서, 제품 목록, 포트폴리오 등의 번호가 지정된 단계에 적합한 선택입니다.

포스트 타임라인

콘텐츠에서 타임라인을 만들 수도 있습니다. 여기에는 게시물, 페이지, 미디어 또는 프로젝트가 포함됩니다. 작동 방식은 약간 복잡할 수 있지만 쉽게 만들 수 있습니다.

다음 두 가지 작업을 수행해야 합니다.

레이아웃 만들기
페이지를 만들고 해당 레이아웃을 선택하십시오.

레이아웃과 페이지를 만드는 데 필요한 모든 모듈이 포함되어 있습니다. 샘플 블로그 게시물을 사용하여 예제를 만들어 보겠습니다.

레이아웃 만들기

먼저 레이아웃을 만듭니다. 대시보드에서 Divi , Divi Library 로 이동하여 Add New 를 선택 합니다 . 레이아웃에 이해하기 쉬운 이름을 지정합니다(저는 포스트 타임라인 레이아웃을 선택했습니다). 템플릿 유형 으로 레이아웃 을 선택합니다. 전역을 선택하지 않은 상태로 둡니다. 제출 을 클릭합니다.

생성한 레이아웃은 게시물(또는 선택한 게시물 유형)을 표시합니다. 이것을 나만의 블로그 모듈을 만드는 것으로 생각하면 게시물의 레이아웃을 디자인할 수 있습니다. 그게 아니라 그 예를 들어 쉽게 이해할 수 있었습니다. 뭐, 그런 것 같지만 실제로는 그렇지 않습니다. 계속 진행 중입니다.

이 레이아웃은 플러그인에 포함된 Timeline Content , Featured Image 및 Post Title 모듈을 사용하여 구축됩니다.

레이아웃을 생성하려면 2열 레이아웃을 선택하고 타임라인 – 추천 이미지 모듈을 오른쪽에 배치하고 타임 라인 – 게시물 제목 및 타임라인 – 콘텐츠 모듈을 왼쪽에 배치합니다. 물론 이미지나 제목만 사용하거나 다른 구성에 배치하는 것과 같이 레이아웃을 약간 가지고 놀고 싶을 수도 있지만 먼저 일반 레이아웃을 빌드해 보겠습니다.

참고 – 이러한 모듈은 대부분의 Divi Builder 모듈과 같은 페이지 내에서 사용되지 않습니다. 타임라인(게시물) – 수직 모듈에 의해 호출되는 레이아웃 내에서 사용하기 위한 것입니다.

이것은 Divi Builder에서 보이는 레이아웃입니다. 예상대로 이러한 각 모듈에는 일반 설정 , 고급 디자인 설정 및 사용자 정의 CSS 를 포함한 고유한 옵션이 있습니다.

나는 1/3, 2/3 레이아웃을 사용하고 있지만 1/2, 1/2도 작동합니다. 사용하려는 추천 이미지의 크기와 표시하려는 콘텐츠의 양, 글꼴 크기와 같은 기타 설정에 따라 부분적으로 달라집니다.

모듈을 배치하고 모든 설정을 선택했으면 게시 아래 오른쪽에서 업데이트 를 선택합니다.

각 모듈을 자세히 살펴보겠습니다.

게시물 제목 모듈

게시물 제목 모듈을 사용하면 콘텐츠에 연결하고 관리자 레이블을 변경하고 CSS 설정을 지정할 수 있습니다. 나는 예에 컨텐츠 설정 세트에 링크를 떠나 좋습니다. 나머지는 기본값으로 설정했습니다.

콘텐츠 모듈

콘텐츠 모듈을 사용하면 전문가 또는 콘텐츠를 표시하도록 선택하고 더 읽기 버튼을 표시할 수 있습니다. 발췌 및 더 읽기 버튼을 표시하도록 설정했습니다.

페이지 만들기

Divi Builder를 사용하여 새 페이지를 만들고 타임라인(게시물) – 수직 모듈을 단일 열 레이아웃에 놓습니다.

타임라인(포스트) 수직 모듈 설정

이 모듈은 생성한 레이아웃을 호출합니다. 여기에는 제목, 레이아웃, 중심선 색상, 타임라인의 항목 아이콘, 숫자 또는 아이콘 표시, 아이콘/숫자 색상 및 배경색, 애니메이션, 페이지 매김, 게시물 유형, 표시할 게시물 수, 포스트 오프셋(시작할 포스트), 분류 및 관리 레이블.

생성한 레이아웃을 호출하려면 루프 레이아웃 이라는 드롭다운 목록에서 선택합니다. 아래로 스크롤 디스플레이 블로그 게시물하기 위해 포스트 유형으로 게시물을 선택했다.

선택을 모두 마쳤으면 페이지를 게시합니다.

포스트 타임라인 결과

그 결과 타임라인에 내 최신 게시물이 있는 블로그 페이지가 표시됩니다. 타임라인을 배경 이미지 위에 배치했습니다(이미지가 섹션에 추가됨). 이 모듈을 사용하면 아이콘이 전역적입니다. 황갈색 아이콘 배경과 파란색 아이콘을 사용하여 타임라인을 파란색으로 설정했습니다. 게시물 모듈은 고급 디자인 설정을 사용하여 페이지와 일치하도록 추가 스타일을 지정할 수 있습니다.

블로그 예

타임라인은 다른 레이아웃 내에서 사용할 수 있습니다. 몇 개의 게시물을 맨 위에 표시하고 나머지는 타임라인 내에 표시하는 블로그 레이아웃을 만들고 싶었습니다.

상단에 이미지, 가운데에 콘텐츠, 하단에 제목이 있는 단일 열에 레이아웃을 만들었습니다.

그런 다음 블로그 모듈과 타임라인(게시물) – 수직 모듈이 있는 페이지를 만들었습니다. 블로그 모듈을 설정하여 그리드에 세 개의 게시물을 표시합니다. 타임라인 모듈을 오프셋 3으로 설정하여 블로그 모듈이 표시하고 게시물 번호 4에서 시작하는 게시물을 무시하도록 설정했습니다. 방문자에게 블로그 아래 콘텐츠가 있음을 알리는 메시지와 함께 텍스트 모듈을 배치했습니다. 게시물은 여전히 블로그의 일부입니다.

블로그 페이지 결과

여기 블로그 페이지가 있습니다. 그 결과 독자에게 콘텐츠를 안내하는 깔끔한 레이아웃이 만들어졌습니다. 물론 이것이 블로그 페이지일 필요는 없습니다. 포트폴리오 페이지, 아트워크, 서비스 등에 대한 프로젝트를 표시하는 데에도 사용할 수 있습니다.

마지막 생각들

타임라인은 연대순 또는 숫자 데이터를 표시하는 훌륭한 디자인 요소입니다. Divi 타임라인 모듈은 이 기능을 Divi Builder에 추가하여 사용자 정의 타임라인을 생성하거나 페이지, 게시물, 미디어 또는 프로젝트와 같은 콘텐츠를 사용하여 레이아웃 내에 표시할 시간순 타임라인을 생성하는 쉬운 방법을 제공합니다.

플러그인은 사용하기 쉽고 모든 Divi 모듈에서 기대할 수 있는 모든 디자인 설정이 여기에 있습니다. Divi Builder를 사용하는 것만큼 빠르고 간단하게 레이아웃과 페이지를 배우고 만드는 데 오랜 시간이 걸리지 않습니다. 웹사이트에 타임라인을 추가하려면 Divi Timeline Module이 탁월한 선택입니다.

여러분의 의견을 듣고 싶습니다. Divi 타임라인 모듈을 사용해 보셨습니까? 의견에 귀하의 경험에 대해 알려주십시오.

Ollie Designer를 통한 주요 이미지 / shutterstock.com