Divi 및 Divi 타임라인 모듈 플러그인으로 결혼식 일정을 위한 타임라인을 만드는 방법

이 게시물은 Divi로 우아한 결혼식 웹사이트를 만드는 방법 미니시리즈의 5/5 부분 입니다. 이 시리즈에서는 Divi를 사용하여 자신 또는 고객을 위한 웨딩 웹사이트를 만드는 데 가장 중요한 부분을 안내합니다.

미니시리즈의 처음 4개 부분에서는 다음을 만드는 방법을 보여주었습니다.

• 우아한 결혼 발표 페이지
• 갤러리 페이지
• 선물 목록 페이지
• 그리고 결혼식 웹사이트에서 자동 Divi 평가 플러그인을 사용하는 방법을 알아보세요.

우리가 만든 레이아웃은 스타일이 일관되고 만들기 쉽습니다.

이 미니 시리즈의 마지막 부분에서는 Elegant Marketplace의 Divi Timeline Module 플러그인을 사용하여 웨딩 웹사이트의 타임라인을 만드는 방법을 보여줍니다. 결혼식 하객들에게 결혼식 커플의 중요한 날에 일어날 일에 대한 최신 정보를 제공할 수 있는 멋진 수직 타임라인을 만드는 방법에 대한 예를 보여 드리겠습니다.

세로 타임라인의 예

우리가 만들고 있는 레이아웃은 아래의 예와 같을 것입니다. 타임라인에서 길을 찾는 데 도움이 되는 가장 중요한 단계에 대해 이야기하겠습니다. 이 게시물을 읽은 후 빠르게 시작하고 자신의 것을 만들고 웨딩 웹 사이트에 추가 터치를 제공할 수 있습니다.

플러그인 구매

Divi Timeline Module 플러그인이 아직 없다면 Elegant Marketplace 웹사이트에서 구매해야 합니다. 플러그인 비용은 $11입니다. 웹사이트에서 플러그인을 구매하면 웹사이트에 추가할 새 모듈이 포함된 ZIP 파일을 받게 됩니다.

플러그인 설치

WordPress 웹사이트에 로그인하고 플러그인 섹션에서 '새로 추가'로 이동합니다.

구매 시 받은 ZIP 파일을 업로드합니다.

플러그인을 활성화하면 사용할 수 있습니다. 이제 플러그인이 Divi 빌더에 타임라인 모듈을 자동으로 추가합니다.

웹사이트에서 Divi 타임라인 모듈을 사용하는 두 가지 방법

결혼식 일정 표시

웨딩 웹사이트의 타임라인은 웹사이트에 추가적인 부가가치를 제공할 수 있습니다. 타임라인을 사용하여 결혼식 날의 모습을 보여줄 수 있습니다. 이 온라인 투명성은 하객들이 결혼식의 바쁜 일정을 잘 헤쳐나갈 수 있도록 도와줍니다.

결혼식 웹사이트에 대한 링크를 하객과 미리 공유하는 것을 기억해야 합니다. 그렇게 하면 언제 어디서나 정보에 액세스할 수 있습니다.

타임라인에 대해 별도의 페이지를 만들거나 다른 페이지 중 하나에 포함하도록 결정할 수 있습니다. 타임라인은 화면에서 많은 공간을 차지하기 때문에 완전히 새로운 페이지를 타임라인 전용으로 사용하는 것이 좋습니다.

웨딩 커플의 관계 타임 라인 표시

플러그인으로 결혼식 일정을 만드는 것 외에도 타임라인 모듈을 사용하여 웨딩 커플의 관계 타임라인을 보여줄 수도 있습니다. 부부가 만난 방식과 관계에서 경험한 다양한 단계를 포함함으로써 게스트와 조금 더 소통하고 이야기를 전달할 수 있습니다.

다양한 유형의 평가 모듈

플러그인을 다운로드하면 모듈 목록에 4개의 추가 모듈이 나타납니다. 모두 타임라인이지만 초점이 다릅니다.

게시물, 콘텐츠, 추천 이미지, 게시물 제목 및 일반 세로 항목에 대한 것이 있습니다. 이 게시물에서 만들 타임라인 예제의 경우 타임라인 – 수직만 사용합니다. 이 모듈을 사용하면 귀하의 게시물과 같은 웹사이트의 다른 어떤 것과도 연결되지 않고 콘텐츠 상자에 정보를 즉시 기록할 수 있습니다.

시작하다

다음 타임라인을 만드는 방법을 단계별로 보여 드리겠습니다.

모듈은 반응이 좋으며 데스크톱은 물론 휴대폰이나 태블릿에서도 잘 보입니다. 시작하자!

타임라인 및 타임라인 항목 추가

Timeline Module은 타사 플러그인이므로 Visual Builder로 시각적으로 수정할 수 없습니다. 이것이 우리가 웹사이트의 백엔드 부분에 머물면서 필요한 변경을 하는 이유입니다.

타임라인에 사용할 새 페이지를 추가하여 시작하세요. 물론 해당 페이지 내에서 영웅 섹션이 필요합니다. 그러나 그 외에는 타임라인에 대해 하나의 표준 섹션만 필요합니다. 페이지에 전체 너비 행이 있는 새 표준 섹션을 추가합니다. 다음으로 Timeline – Vertical Module을 해당 전체 너비 행에 배치합니다.

이제 타임라인 – 수직 모듈의 설정 내에서 생성 중인 타임라인에 다양한 타임라인 항목을 추가할 수 있습니다.

결혼식 중에 일반적으로 따르는 표준 흐름이 있습니다. 다음 각 이벤트에 대해 새로운 타임라인 항목을 만들 것입니다.

• 신부의 헤어와 메이크업
• 웨딩 촬영
• 예식
• 의식
• 칵테일 아워
• 저녁식사 시작
• 토스트
• 첫번째 춤
• 춤추는 시간
• 사막
• 마지막 감사의 말씀

물론 이것은 모두 당신이 결혼식 날을 어떻게 계획했는지에 달려 있습니다. 원하는 만큼 타임라인 항목을 추가할 수 있습니다.

타임라인 모듈 수정

그러나 타임라인 항목을 추가하기 전에 타임라인 – 수직 모듈을 통해 모든 타임라인 항목에 적용해야 하는 수정 작업을 수행해 보겠습니다. 타임라인 – 수직 모듈의 콘텐츠 탭으로 이동하여 배경 하위 범주에서 중앙선 색상을 '#fae4de'로 변경합니다. 이 색상은 서로 다른 타임라인 항목이 서로 상호 작용할 수 있도록 하는 타임라인 모듈 내의 모든 라인에 적용됩니다.

다음으로 디자인 탭으로 이동합니다. 우선 Text 하위 범주를 열고 다음과 같이 변경합니다.

• 텍스트 글꼴: 레일웨이 라이트
• 텍스트 글꼴 스타일: 굵게
• 텍스트 글꼴 크기: 14px
• 텍스트 색상: #9b857b
• 텍스트 줄 높이: 1em

동일한 탭을 아래로 스크롤하여 항목 레이블 텍스트 하위 범주를 다음과 같이 변경합니다.

• 항목 레이블 글꼴: Raleway Light
• 항목 레이블 글꼴 스타일: 굵게
• 항목 레이블 글꼴 크기: 39px
• 항목 레이블 텍스트 색상: #9b857b
• 항목 레이블 줄 높이: 1.5em

또한 Headings Text 하위 범주를 다음과 같이 변경합니다.

• 제목 글꼴: Tangerine
• 제목 글꼴 크기: 70px(데스크톱 및 태블릿), 60px(태블릿)
• 제목 텍스트 색상: #9b857b
• 제목 줄 높이: 1.5em

위에서 언급한 모든 수정 사항은 각 타임라인 항목에 적용됩니다. 저장 및 종료를 클릭합니다.

타임라인 항목 수정

지금까지의 결과를 보면 전체 그림에 수정이 이루어진 것을 알 수 있습니다. 이제 타임라인 항목을 개별적으로 변경해야 합니다. 타임라인 항목을 하나만 추가하여 시작하십시오. 그런 다음 해당 타임라인 항목의 콘텐츠 탭으로 이동합니다. 배경 하위 카테고리의 타임라인 항목에 제목을 추가하여 계속하십시오.

그런 다음 콘텐츠 상자에 표시할 콘텐츠(이탤릭체 시간 포함)를 추가하고 타임라인 레이블 필드에 하루 중 시간을 기록합니다. 원하는 경우 동일한 필드에 위치를 추가할 수도 있습니다.

타임라인 항목 콘텐츠

누군가가 데스크탑으로 귀하의 웹 사이트를 방문하면 필드에 작성된 내용이 타임 라인의 반대쪽에 나타납니다. 이 라벨은 다른 사람이 휴대전화에서 내 타임라인을 볼 때 표시되지 않습니다. 그렇기 때문에 콘텐츠 상자의 항목 레이블에도 공유하고 싶은 실용적인 정보를 넣는 것이 좋습니다. 이렇게 하면 전화로 웹사이트를 방문하는 사람들도 정보를 볼 수 있습니다.

동일한 탭을 아래로 스크롤하여 항목 아이콘 목록에서 하트 아이콘을 찾아 아이콘 색상을 '#9b857b'로 변경하고 아이콘 배경 색상을 '#fae4de'로 변경합니다.

저장을 클릭하면 타임라인 항목이 타임라인에 추가됩니다. 우리가 만든 예제에서는 모든 타임라인 항목에 대해 동일한 설정을 사용했습니다. 따라서 첫 번째 타임라인 항목을 복제하고 그에 따라 추가 조정을 수행하는 것이 좋습니다.

결혼식 하객을 위해 결혼식 일정을 가능한 한 명확하게 하기 위해 필요한 만큼 타임라인 항목을 만드십시오. 새 타임라인 항목을 추가할 때마다 수동으로 조정할 필요 없이 이전 타임라인 항목의 반대쪽에 자동으로 배치됩니다.

마무리

이것은 Divi로 우아한 결혼식 웹사이트를 만드는 방법 미니시리즈의 마지막 부분이었습니다. 귀하 또는 귀하의 고객을 위해 우아하고 멋진 웨딩 웹사이트를 만드는 데 도움이 되는 가치 있는 일련의 게시물이 되었기를 바랍니다. 이 튜토리얼과 관련하여 질문이 있거나 향후 튜토리얼/미니시리즈에 대한 요청이 있는 경우 이 블로그 게시물의 댓글 섹션에 댓글을 남겨주시면 답변을 드리겠습니다!

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!