Divi 플러그인 하이라이트 – Divi 블로그 추가 기능

Divi에는 게시물을 전체 너비 또는 그리드 레이아웃으로 표시하는 블로그 모듈이 포함되어 있습니다. 그것은 좋은 모듈이며 작업을 완료합니다. 다른 레이아웃과 기능을 원하면 어떻게 하시겠습니까? CSS로 할 수 있지만 Divi Blog Extras라는 타사 플러그인을 사용하면 작업이 훨씬 쉬워집니다.

Divi Blog Extras는 Divi Extended의 타사 플러그인으로 블로그 게시물을 표시하기 위한 몇 가지 새로운 기능과 함께 Divi Builder에 새 모듈을 추가합니다. 여기에는 6가지 레이아웃 디자인이 포함되어 있으며 추가 로드 버튼이 있는 AJAX 로드 기능이 추가되었습니다. 스크롤하면 게시물이로드되고로드가 빠릅니다. 더 읽기 및 더 로드 버튼 모두에 대한 텍스트를 변경할 수 있습니다.

이 플러그인 하이라이트에서 우리는 Divi Blog Extras를 살펴보고 이 플러그인으로 무엇을 할 수 있는지에 대한 몇 가지 아이디어를 얻을 것입니다. 이 예제의 이미지는 Unsplash.com에서 가져왔습니다.

Divi Blog Extras 설치 및 설정

정상적으로 업로드하고 활성화합니다. 그러면 Divi Builder에서 Divi Blog Extras라는 새로운 모듈을 사용할 수 있습니다. 그것을 사용하려면 다른 모듈과 마찬가지로 행에 놓기만 하면 됩니다. 옵션은 표준 Divi Builder 모듈과 동일하므로 이 모듈을 사용하는 것이 직관적입니다.

콘텐츠 설정에는 친숙한 옵션이 포함되어 있으며 6가지 레이아웃 선택, 발췌 길이, 카테고리 색상, 추가 버튼 텍스트 로드, 추천 이미지 오버레이, 더 읽기 버튼 텍스트 및 텍스트 색상 옵션이 있습니다. 디자인 설정에는 머리글, 메타 및 본문 텍스트와 테두리 스타일이 포함됩니다. 블록 확장 레이아웃은 이미지 위치를 추가하고 클래식은 소셜 아이콘을 추가합니다. 각 레이아웃을 자세히 살펴보겠습니다.

그리드 확장

기본 레이아웃인 Grid Extended는 이미지와 텍스트가 번갈아 나타나는 블로그 게시물을 표시합니다. 이미지는 마우스 오버 시 밝아집니다. 범주 이름은 상자 안에 배치됩니다. 반응 모드에서는 이미지가 맨 위에 배치됩니다.

이 예에서는 호버 오버레이, 호버 아이콘을 추가하고 더 읽기 텍스트를 변경하고 발췌문을 100자로 제한하고 카테고리 텍스트와 배경색을 변경했습니다. 호버 애니메이션은 게시물의 어느 부분 위로 마우스를 가져가면 표시됩니다.

상자 확장

상자 확장은 이미지와 겹치는 상자에 발췌문을 배치하고 범주 이름 주위의 상자를 제거합니다. 작성자의 이미지가 메타 섹션에 추가됩니다. 이미지와 텍스트가 번갈아 나타납니다. 이것은 더 우아한 블로그 레이아웃 중 하나입니다.

이 예에서는 카테고리 글꼴과 배경색을 변경하고 발췌 길이를 150자로 제한하고 글꼴을 파란색으로 변경하고 더 읽기 버튼 텍스트를 변경했습니다. 기본 호버는 위의 상단 이미지에서 볼 수 있는 것처럼 이미지를 밝게 합니다.

전체 넓이

전체 너비는 왼쪽에 이미지를 배치하고 오른쪽에 발췌 부분을 배치하고 맨 왼쪽에 스타일이 지정된 날짜를 추가합니다. 각 게시물은 선으로 구분됩니다. 카테고리 이름은 메타 내에 배치됩니다.

이 예는 날짜 및 메타 정보를 비활성화합니다. 텍스트는 사용자 정의 색상을 사용합니다. 더 읽기를 변경하고 더 많은 버튼 텍스트를 로드합니다. 발췌문은 200자로 제한됩니다.

모든 레이아웃은 반응형입니다. 다음은 Full Width의 반응형 모양입니다. 이것은 2열 행에 두 개의 모듈을 나란히 표시합니다.

확장 차단

Block Extended는 이미지 위에 카테고리 이름을 추가하고 카드 하단에 메타를 추가하는 블로그 그리드입니다. 카드의 어느 부분에 마우스를 가져가면 이미지가 확대됩니다. 나는 카드가 클릭 가능하다는 것을 보여주기 때문에 이러한 유형의 마이크로 인터랙션을 좋아합니다.

Block Extended에는 이미지를 표시하는 세 가지 옵션이 있습니다. 이 예는 오버레이의 텍스트와 함께 배경에 추천 이미지를 배치합니다.

이 예는 처음 두 선택 사이에서 배경 이미지를 대체합니다.

전체 너비 배경

전체 너비 배경은 이미지의 잘린 버전을 전체 너비로 표시하고 메타가 포함된 발췌 부분을 이미지 위에 오버레이로 배치합니다. 발췌 위치가 바뀝니다. Meta는 발췌문에서 줄로 구분됩니다.

이 예에서는 이미지 위에 어두운 오버레이를 사용하여 발췌 부분의 오버레이가 호버에서 동일한 오버레이를 사용하지 않음을 보여줍니다. 이 예에서 섹션의 배경은 빨간색입니다. 마우스를 가져가면 빨간색이 표시됩니다. 또한 더 읽기 버튼 텍스트와 2픽셀 테두리를 추가했습니다.

권위 있는

클래식 레이아웃은 블로그 게시물을 전체 크기 이미지와 함께 이미지 아래에 전체 너비 발췌문으로 표시합니다. 카테고리와 날짜는 제목 위에 있습니다. 제목에는 이미지와 구분되도록 짧은 줄 구분 기호가 포함됩니다. 발췌문 아래에는 작성자의 이름과 댓글 수가 막대로 구분되어 있습니다. 더 얇고 넓은 라인 분리기는 포스트를 서로 분리합니다.

이 레이아웃에는 소셜 아이콘을 표시하는 옵션이 있습니다. 더 로드를 클릭하면(또는 내가 레이블을 지정한 대로 – 더 많은 기사 보기) 표시하도록 선택한 게시물 수와 동일한 다음 게시물 세트가 표시됩니다. 이 예에서는 두 개의 게시물을 표시하고 있습니다. 추가 로드는 다음 2개의 게시물을 로드합니다.

Divi Blog Extras로 독특한 레이아웃 만들기

여러 모듈을 함께 사용하여 매거진 레이아웃을 만들 수 있습니다. 이 간단한 레이아웃에는 Gird 확장 레이아웃을 표시하는 4개의 모듈이 포함되어 있습니다. 각 모듈은 다른 범주를 표시합니다. 중간에 있는 두 개는 각각 두 개의 게시물을 표시합니다.

이렇게 하면 다양한 섹션에 대해 다양한 카테고리가 있는 잡지 레이아웃이 생성됩니다. 이 예는 Extended Grid가 어떻게 반응하는지 보여줍니다.

이것은 동일한 Divi Builder 레이아웃이지만 전체 너비 배경을 사용합니다. 오버레이는 반응 모드에서 이미지를 거의 완전히 덮습니다.

이 예에서는 최상위 모듈에 대해 클래식 레이아웃을 사용하고 다음 두 모듈에 대해 Grid Extended를 사용합니다. 각 모듈은 다른 범주를 표시하고 범주 텍스트에 대한 고유한 스타일을 갖습니다. 상단 모듈은 발췌 내용을 표시하지 않습니다.

이것은 흥미로운 잡지 레이아웃을 만듭니다. 또한 전체 너비를 표시하도록 행을 설정했습니다. 레이아웃을 믹스 앤 매치하여 독특한 디자인을 얻을 수 있습니다. 각 모듈에 대해 다른 카테고리로 레이아웃을 만들었습니다. 향후 업데이트에서 모듈에는 오프셋 기능이 있으므로 동일한 범주 내에서 여러 모듈을 사용할 수 있습니다.

특허

단일 사이트는 $15입니다. 확장 라이선스는 $30이며 귀하와 귀하의 고객을 위해 무제한 사이트에서 사용할 수 있습니다. 여기에는 평생 업데이트가 포함됩니다.

이 플러그인은 Extra에서 작동하지 않습니다.

• 이 플러그인은 Divi Extended 웹사이트에서 구입할 수 있습니다.

마지막 생각들

Divi Blog Extras는 멋진 스타일과 디자인 기능을 추가하여 블로그 모듈에 활기를 불어넣습니다. 또한 카테고리 배경과 텍스트의 스타일을 지정하는 기능을 추가합니다. 로딩을 위해 AJAX를 사용하고 새로운 로딩 버튼을 포함합니다. 로드에 자신의 텍스트를 추가하고 더 많은 버튼을 읽을 수도 있습니다. 이러한 각 디자인은 블로그에 표준 블로그와 다른 독특한 모양을 부여하는 데 적합합니다. 표준 Divi Builder 블로그 모듈을 능가하는 블로그 디자인을 원한다면 Divi Blog Extras가 원하는 모듈일 것입니다.

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

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