Divi 플러그인 하이라이트: 콘텐츠 집중

Divi Builder에는 전체 너비 또는 그리드 레이아웃의 카테고리를 기반으로 게시물을 표시하는 블로그 모듈이 포함되어 있습니다. 블로그 레이아웃을 더 잘 제어하고 싶었던 적이 있습니까? Content Intense라는 타사 플러그인에 관심이 있을 수 있습니다.

Content Intense는 새로운 레이아웃과 스타일 기능을 추가하여 블로그 모듈에 새로운 모습을 제공하는 BeSuperfly의 플러그인입니다. 표준 블로그 모듈을 기반으로 하므로 친숙한 기능이 모두 포함되어 있습니다.

(플러그인은 개발자 웹 사이트에서 사용할 수 있습니다.)

이 플러그인 하이라이트에서는 기능을 살펴보고 페이지에서 어떻게 보이는지 살펴보겠습니다. Extra에서도 로드하겠습니다(물론 Divi와도 호환됩니다).

Content Intensive 설치

모든 플러그인과 마찬가지로 Content Intense를 업로드하고 활성화합니다. 플러그인이 활성화되면 대시보드의 설정에 Content Intense Plugin Activation이라는 새 메뉴 항목이 표시됩니다. 이것을 클릭하고 API 키와 이메일을 입력하고 변경 사항을 저장하십시오.

콘텐츠 집중 모듈

Content Intense라는 새 모듈이 Divi Builder에 추가되었습니다.

콘텐츠 탭에서는 게시물만, 페이지만 또는 페이지와 게시물, 표시할 번호, 범주 및 오프셋 번호를 표시할 수 있습니다. 추천 이미지, 메타(분리자를 선택할 수 있음), 발췌문, 탐색 및 배경을 표시합니다. 보시다시피 설정의 옵션 수를 지나치게 단순화하고 있습니다.

가장 독특한 기능 중 하나는 WordPress 카테고리가 페이지에 추가된다는 것입니다. 페이지를 표시하도록 선택하면 카테고리를 선택할 때 페이지가 선택됩니다.

디자인 탭에서는 5가지 레이아웃 중 하나를 선택하고 오버레이를 활성화하고 헤더 텍스트, 본문 텍스트 및 메타 텍스트를 조정할 수 있습니다. 또한 테두리, 버튼, 간격 및 애니메이션을 조정합니다.

고급에는 버튼 관계 기능이 포함되어 있으므로 링크의 rel 속성 값을 지정할 수 있습니다. 이것은 북마크 생성, nofollow에 대한 링크 설정 등에 유용합니다.

콘텐츠 집약적인 기본 설정

기본 설정은 작성자의 Gravatar가 이미지 하단과 겹치는 추천 이미지를 표시합니다. 그 다음에는 게시물 메타, 제목, 줄, 게시물 발췌 및 호버 애니메이션이 있는 더 읽기 버튼이 있습니다. 눈에 띄도록 섹션에 배경을 추가했습니다.

이 예에서는 메타 구분 기호에 별표를 추가하고 발췌 개수를 270에서 100으로 변경했으며 더 읽기 버튼을 가운데 텍스트로 교체했습니다. 날짜 대신 게시물이 게시된 기간이 표시됩니다. 댓글 수를 비활성화했습니다.

이것은 텍스트 뒤의 배경에 약간의 색상을 추가합니다. 또한 버튼을 오른쪽으로 이동하고 발췌 부분을 150으로 설정했습니다.

다섯 가지 레이아웃이 있습니다. 지금까지 본 예제에서는 아바타와 함께 3열, 세로 레이아웃인 Atlas를 사용합니다. 각 레이아웃을 살펴보겠습니다. 기본 설정을 사용하고 있습니다.

이곳은 알프스입니다. 1열 수평 교대 레이아웃입니다. 텍스트 배경은 섹션에서 선택한 배경색과 일치합니다. 버튼에 호버 효과가 있는 평면 카드입니다.

게시물의 추천 이미지를 배경으로 사용하는 3열 세로 레이아웃인 히말라야입니다. 또한 버튼 애니메이션을 사용합니다. 이 텍스트는 조정 없이 보기가 더 어렵습니다. 나중에 오버레이로 수정하겠습니다.

호버 효과가 있는 3열 세로 레이아웃인 Rockies입니다. 또한 추천 이미지를 배경으로 배치합니다. 호버 효과는 전체 발췌 및 더 읽기 버튼을 표시합니다. 우리는 텍스트를 더 읽기 쉽게 만들기 위해 몇 가지 조정을 할 것입니다.

이것은 안데스입니다. 아바타가 있는 1열 수직 레이아웃입니다. 추천 이미지의 잘린 버전을 사용하고 작은 선을 사용하여 메타를 구분하고 큰 선을 사용하여 게시물을 구분합니다.

페이지 하단에 탐색 버튼이 있습니다. 비활성화하거나 고유한 텍스트를 추가할 수 있습니다. 그들은 다른 버튼의 스타일을 취하므로 더 읽기 버튼의 스타일을 지정하면 이 버튼에도 스타일이 지정됩니다. 버튼 대신 텍스트를 사용할 수도 있습니다.

예 – 아틀라스가 있는 알프스

2개의 Content Intensive 모듈을 사용하여 이 블로그 레이아웃을 만들었습니다. 첫 번째는 탐색 없이 알프스 레이아웃을 사용합니다. 두 번째 모듈은 Atlas를 사용합니다. 첫 번째 모듈과 동일한 이미지를 표시하지 않도록 오프셋을 1로 설정했습니다. 글꼴 색상을 Arimo(내가 가장 좋아하는 것)로 조정했습니다. 버튼은 그라디언트를 사용합니다. 마우스를 올리면 단색으로 바뀌고 문자 간격이 늘어납니다. 탐색 버튼이 일치합니다.

예 – 알프스

나는 레이아웃을 번갈아 가며 좋아합니다. 변화가 없는 알프스의 모습을 좋아해서 약간의 조정만 했습니다. 빨간색 테두리, 빨간색 오버레이를 추가하고 버튼과 헤더 색상을 변경했습니다. 폰트도 Dosis로 바꿔서 굵게 해봤습니다. 마우스 오버 시 오버레이가 표시됩니다.

저는 사실 테두리가 없는게 더 좋습니다. 이것은 호버에 있는 버튼을 보여줍니다.

예 – 안데스 산맥

이 예제는 6개의 서로 다른 Content Intense 모듈을 사용합니다. 모두 Andes를 사용하며 각각은 이전 모듈보다 1만큼 오프셋됩니다. 오버레이가 있는 섹션에 배경을 추가했습니다. 헤더 글꼴은 Comfortaa입니다. 마지막 모듈은 탐색을 사용합니다. 버튼을 텍스트로 변경했습니다.

다음은 일반적인 단일 열 디자인을 살펴보겠습니다. 호버 오버레이도 추가했습니다. 나머지는 모두 기본값입니다.

예 – 히말라야

이것은 텍스트 뒤에 오버레이가 있는 히말라야를 사용합니다. 메타를 비활성화하고 텍스트를 밝게 변경하고 버튼 스타일을 흰색으로 변경하고 버튼 글꼴을 12포인트로 줄였습니다. 헤더 텍스트는 Bitter입니다. 내가 포함시킨 유일한 애니메이션은 버튼 호버에 대한 것입니다. 이렇게 하면 훌륭한 CTA 또는 서비스를 설명하는 페이지에 대한 링크가 됩니다.

예 – 로키산맥

나는 로키스의 모습을 좋아한다. 텍스트를 불러오고 더 많은 버튼을 읽는 호버 애니메이션으로 멋진 그림자 효과가 있습니다. 텍스트 오버레이를 배치할 수 있었지만 이미지를 덮고 싶지 않았습니다. 대신 텍스트를 밝게 변경했습니다. 메타와 버튼의 색상도 변경하고 구분 기호를 대시로 변경했습니다.

물론 오버레이가 좋아 보입니다. 검은색 오버레이를 추가하고 불투명도를 변경하여 이미지가 약간 비쳐 보이도록 했습니다. 왼쪽 상단 모서리의 날짜도 오버레이를 사용합니다. 버튼을 텍스트로 변경하고 오른쪽으로 옮겼습니다. 저는 카드 하단에 있는 세 개의 점과 선을 좋아합니다. 시각적 플레어의 터치를 추가하는 작은 세부 사항입니다.

예 – 추가

Content Intense는 Extra와 잘 어울립니다. Andes를 사용한 부분만 약간 조정하면 되었습니다. 내 예에서는 텍스트 영역에 흰색 배경을 배치했습니다. 흰색 텍스트를 사용했기 때문에 단순히 어둡게 변경했습니다. 위의 예는 Rockies입니다. 유일한 차이점은 더 읽기 링크의 텍스트 색상이었습니다.

다운로드 가능한 스타일

CSS를 통해 애니메이션을 추가할 수 있습니다. 개발자의 웹 사이트는 위에 있는 텍스트를 가리키면 이동하는 것과 같이 개발자가 만든 여러 애니메이션을 보여줍니다. 이 스타일과 다른 스타일은 JSON 파일에서 다운로드할 수 있습니다.

라이선스 및 문서

두 가지 라이센스 중에서 선택하십시오(둘 다 재판매는 허용되지 않음).

• 표준 라이선스: 단일 웹사이트에서 사용하기 위한 것입니다. 여기에는 개발 프로젝트용 1개와 라이브 프로젝트용 1개가 포함됩니다.
• 무제한 라이센스: 개인 및 클라이언트 사용을 위해 무제한 웹사이트에서 사용할 수 있습니다.

업데이트는 자동입니다. Content Intense는 개발자 웹 사이트에서 사용할 수 있습니다.

문서는 개발자의 웹사이트에서 증명됩니다. 조정 과정을 안내하고 그 과정에서 데모를 제공합니다.

마지막 생각들

Content Intense에는 몇 가지 멋진 레이아웃 기능이 있으며 앞으로 더 많은 레이아웃이 추가될 예정이므로 이것은 시작에 불과합니다. 각 레이아웃은 모듈의 조정으로 스타일을 지정할 수 있으며 CSS를 사용하여 더욱 맞춤화할 수 있습니다. 사용법이 직관적입니다. 블로그에 다른 모양을 부여하는 데 관심이 있다면 Content Intense가 원하는 플러그인일 수 있습니다.

우리는 당신의 의견을 듣고 싶습니다. Content Intensive를 사용해 보셨습니까? 아래 의견에서 귀하의 경험에 대해 알려주십시오.

LanKoga/Shutterstock.com을 통한 주요 이미지