이벤트 캘린더는 WordPress의 표준 이벤트 캘린더입니다. 그것은 잘 작동합니다 Divi, 하지만 레이아웃에 추가하려면 Divi, 단축 코드를 사용해야 합니다. 스타일링은 WordPress 대시보드의 설정 탭에서 수행됩니다. 이로 인해 스타일을 레이아웃과 통합하기가 어렵습니다. Divi. 라는 타사 플러그인 Divi 이벤트 일정 모듈 The Events Calendar를 Divi 모듈로 표시하여이 문제를 해결합니다. 이 기사에서는 Divi Events Calendar 모듈을보고 무엇을 할 수 있는지 살펴 봅니다.

Divi 이벤트 일정 모듈 설치

먼저 다음에서 플러그인을 설치하십시오. 행사 일정 . 이 플러그인이 설치되지 않은 경우 설치해야한다는 오류 메시지가 표시되고 플러그인에 대한 WordPress 페이지 링크가 제공됩니다. 

그런 다음 Divi Events Calendar Module 플러그인을 다운로드하여 활성화하십시오.

예를 들어 Divi 및 WordPress의 다양한 카테고리, 주최자, 위치 및 날짜로 이벤트 세트를 만들었습니다.

Divi 이벤트 일정 모듈

Divi Builder에 두 개의 새로운 모듈이 추가되었습니다. 첫 번째는 Divi Events Calendar라고하며, 블로그 게시물처럼 목록에 이벤트를 카드로 표시합니다. 두 번째는 Divi Event Calendar View라고하며 달력에 이벤트를 표시합니다. 캘린더보기 모듈은 아직 베타 버전입니다. 현재 기능이 제한되어 있습니다. 두 모듈을 모두 살펴 보겠습니다.

첫 번째는 Meetup 일정 페이지 레이아웃 팩을 사용하고 있습니다. 이 페이지의 이벤트를 Divi Events Calendar 모듈로 대체했습니다.

내용 탭

모듈은 자동으로 이벤트를 표시합니다. 여기에는 표준 Divi 탭이 포함되어 있습니다. 탭 내용 일부 추가 내용 그리고 요소. 기본적으로 파란색 배경을 추가합니다.

내용

섹션 내용 표시할 이벤트 수, 포함할 카테고리, 날짜 형식, 조각 길이 및 오프셋 수를 입력할 수 있습니다. 이 예에서는 Divi 이벤트 카테고리에서 이벤트를 2개로 제한했습니다. 오프셋을 1로 설정했습니다.

요소

요소를 사용하면 표시할 요소를 선택할 수 있습니다. 여기에는 추천 이미지, 쇼 주최자, URL이 포함됩니다. 사이트 웹, 날짜, 시간, 장소, 위치, 발췌, 카테고리, 추가 정보 버튼 및 과거 이벤트(모듈이 과거 이벤트만 표시하도록 제한). 추천 이미지와 쇼 오거나이저를 숨기도록 구성했습니다.

디자인 탭

디자인 탭은 레이아웃, 썸네일, 제목 텍스트, 세부 텍스트, 추출 된 텍스트 및 더보기 버튼에 대한 옵션을 추가합니다. 텍스트는 일반 텍스트 모듈과 동일하게 작동합니다. 레이아웃, 썸네일 및 더보기 버튼에 대해 자세히 살펴 보겠습니다. 음영 테두리 및 상자는 개별 카드에 적용됩니다. 이것은 많은 Divi 모듈에서보고 싶었던 것입니다.

규정

레이아웃을 통해 열 수 (1-4), 이미지 정렬 (왼쪽 또는 위쪽), 배경색, 여백 및 패딩을 선택할 수 있습니다. 이미지를 위에 놓고 배경을 흰색으로 변경했습니다. 파란색은 항상 이벤트 카드 사이에 나타납니다.

이 예에서는 열을 2로 설정하고 여백과 패딩을 추가하여 카드가 파란색 배경에 맞도록 테두리를 만듭니다.

다음은 3 개의 열이있는 예입니다. URL 텍스트를 조정하여 맞출 수 있습니다. 3 개 열에서 이미지 배치는 ​​옵션이 아닙니다.

이것은 왼쪽에 이미지가있는 2 개의 열이 있습니다.

스티커

축소판 설정에는 여백, 여백, 너비, 모서리, 테두리 스타일, 테두리 너비, 테두리 색상 및 테두리 스타일이 포함됩니다. 이 예에서는 채우기를 75로 설정하여 이미지를지도 중앙으로 가져오고 너비를 100으로 설정합니다.

이 예에서는 모서리를 36 픽셀로 설정하고 테두리 너비를 9 픽셀로 지정했습니다. 테두리 색상에 스타일을 지정하고 삽입 스타일을 적용했습니다.

텍스트

Roboto의 가벼운 무게와 모두 대문자로 레이아웃과 일치하도록 제목 텍스트를 조정했습니다. 기본적으로 추출 및 세부 텍스트를 남겼습니다.

더 많은 버튼 표시

이 예에서는 버튼 레이아웃의 스타일을 사용했습니다. 크기를 14 픽셀로 설정하고 배경색을 조정하고 테두리의 너비와 반경을 변경하고 모두 대문자로 굵게 표시된 Roboto를 선택했습니다. 상단 버튼에서 볼 수 있듯이 버튼의 크기를 늘리는 기본 호버 효과를 그대로 두었습니다. 또한 VIEW라는 기본 텍스트를 남겼습니다.

이 예에서는 이전 예의 설정 대부분을 사용했지만 약간의 수정이있었습니다. 파란색 배경을 제거하고 테두리 반경을 변경하고 테두리를 제거했습니다. 또한 Divi 이벤트 만 표시하도록 범주를 제한했습니다 (제가 만든 두 가지 예제 범주 중 하나). 제한은 2 개의 이벤트로 설정됩니다.

이 예에서는 3 개의 열을 표시하도록 레이아웃을 설정했습니다. 버튼 테두리를 제거하고 버튼 정렬을 중앙에 배치했습니다. 또한 URL을 제거하고 디테일 텍스트의 색상을 변경하고 버튼 텍스트를 변경하고 카드가 배경에 눈에 띄도록 그림자를주었습니다.

Divi 일정보기 모듈

다음은 두 번째 모듈에 대한 개요입니다. 이벤트의 캘린더보기를 제공합니다. 달력에는 월, 연도, 탐색 및 오늘 날짜 하이라이트가 포함됩니다. 아트 갤러리 레이아웃 팩의 이벤트 페이지입니다. 이벤트 위로 마우스를 가져 가면 정보가 포함 된 팝업 창이 표시됩니다. 이것이 기본보기입니다.

디자인 탭은 모듈 텍스트에 대한 매개 변수를 추가합니다. 제목, 월 등에 대한 설정이 선택적으로 포함됩니다. 이 예에서는 텍스트의 무게, 색상 및 크기를 조정했습니다. 이것은 달력의 날짜를 조정합니다.

이 예에서는 글꼴 패밀리를 Roboto로 변경하고 색상, 크기, 문자 간격 및 줄 높이를 조정했습니다. 또한 텍스트를 돋보이게하기 위해 그림자를주었습니다. "오늘"버튼을 제외한 모든 텍스트는 크기, 간격 및 높이의 영향을받습니다.

테두리, 배경, 상자 그림자 등을 조정할 수도 있습니다. 이 예에서는 모듈 텍스트를 대문자로 설정했습니다. 여기에는 월과 일의 텍스트가 포함됩니다. 또한 배경을 조정하고 모듈에 테두리 (이중 테두리 스타일 사용)를 지정하고 상자 그림자를 지정했습니다. 테두리는 텍스트와 같은 색상입니다.

이를 위해 레이아웃 상자의 색상과 그림자 설정을 포함했습니다. 레이아웃 디자인과 함께 작동하는 방식이 마음에 듭니다. 제한된 수의 조정에도 불구하고 달력 표시 모듈은 Divi 레이아웃과 함께 사용할 가치가 있습니다.

가격 및 문서

이벤트 일정 모듈을 개발자 웹 사이트 35달러. 무제한 사용이 포함됩니다. 사이트 웹, 평생 지원 및 업데이트, 30일 환불 보장.

문서 설치 과정을 안내하는 비디오와 짧은 기사, 사용 방법과 업데이트 방법을 보여주는 짧은 기사로 다룹니다. 문서를 참조 할 필요가 없었던 것은 운이 좋았지 만 (모듈은 매우 직관적 임) 필요할 때 사용할 수 있다는 것을 알게되어 기쁩니다.

기타 자료

• 이벤트 캘린더로 캘린더를 만드는 방법
• WP Events Manager 플러그인을 구성하는 방법
• WordPress에 캘린더를 통합하는 10 가지 플러그인
• WordPress에서 이벤트를 관리하는 10 가지 플러그인

최종 생각

이것은 Divi 용 Divi Events Calendar Module 플러그인에 대한 우리의 견해입니다. 모듈은 모든 Divi 모듈처럼 작동하므로 Divi 레이아웃과 함께 작동하도록 이벤트 스타일을 쉽게 지정할 수 있습니다. 기본 달력 모듈에는 모듈의 개별 요소에 대한 패딩, 여백 및 테두리 조정도 포함됩니다. 이를 통해 개별 카드로 스타일을 지정할 수 있습니다.

더 많은 제어를 원할 경우 표시 할 범주를 입력 할 수 있습니다. 드롭 다운 목록에서 옵션을 선택할 수있는 다른 모듈과 다르게 작동하는 유일한 방법입니다. 드롭 다운 옵션을 선호합니다. 이것이 제가 앞으로 변화를보고 싶은 것입니다. 또한 장소, 이벤트 주최자 등을 기준으로 이벤트를 선택할 수 있기를 바랍니다.

이벤트 캘린더 자체는 누구에게나 훌륭한 도구입니다. 사이트 웹. 사진 촬영, 콘서트, 제품 전시회, 무역 행사, 회의 등에 유용합니다. Divi 웹사이트에서 이벤트 캘린더 플러그인을 사용하려면 Divi 이벤트 캘린더 플러그인을 살펴보는 것이 좋습니다.