Divi 플러그인 하이라이트 – Divi 포트폴리오 그리드

Divi에는 포트폴리오를 전체 너비 또는 그리드 레이아웃으로 표시하는 포트폴리오 모듈이 포함되어 있으며 배경, 글꼴, 색상, 테두리, 오버레이, 아이콘 등 Divi 모듈에서 기대할 수 있는 모든 기본 기능이 포함되어 있습니다. 다중 열 디자인과 같은 다른 레이아웃 또는 사용자 정의 가능한 버튼과 같은 새로운 기능? Divi Portfolio Grid라는 타사 플러그인에 관심이 있을 수 있습니다.

Divi Portfolio Grid는 Divi 테마 스토어의 타사 플러그인입니다. 표준 Divi 모듈 기능을 제공할 뿐만 아니라 새로운 스타일 기능과 함께 2, 3, 4 열 레이아웃을 제공하여 고유한 포트폴리오를 만들 수 있습니다. 또한 텍스트와 호버 효과가 있는 버튼을 추가하여 색상을 변경합니다.

이 개요에서는 내가 만든 샘플 포트폴리오를 사용하여 Divi Portfolio Grid를 살펴보겠습니다. 포트폴리오와 배경에 사용된 모든 이미지는 Unsplash.com에서 가져왔습니다.

Divi 포트폴리오 그리드 플러그인 설치

플러그인을 업로드하기 전에 다운로드 파일의 압축을 풀어야 합니다. 압축 파일 내에서 PDF 퀵 가이드와 함께 압축 플러그인 파일을 찾을 수 있습니다. 빠른 가이드는 설치 단계를 안내하는 문서와 모듈 사용 방법에 대한 개요입니다. 다운로드 파일 내에 압축된 플러그인 파일을 업로드하고 정상적으로 설치하고 활성화합니다.

맞춤형 포트폴리오 모듈 기능

플러그인은 사용자 정의 포트폴리오 모듈이라는 Divi Builder에 새 모듈을 추가합니다. 이 모듈은 백엔드의 다른 Divi Builder 모듈처럼 작동하므로 원하는 행 내에서 끌어다 놓을 수 있고 콘텐츠, 디자인 및 고급 설정을 조정할 수 있습니다.

배경색 사용자 정의, 배경 이미지 선택, 레이아웃 선택, 사용자 정의 버튼 텍스트 생성, 표시할 게시물 수 선택, 카테고리 선택, 메타 표시, 색상 선택 등

모든 표준 디자인 기능도 여기에 있습니다. 색상, 글꼴, 버튼, 아이콘, 오버레이 등을 조정합니다.

예 – Divi 사용자 정의 포트폴리오 모듈 사용

내 예에서는 페이지를 만들고 배경을 추가하여 시각적 플레어를 부여하고 행을 전체 너비로 만들고 포트폴리오 그리드 모듈을 추가했습니다. 살펴보기 전에 비교를 위해 표준 Divi Building 포트폴리오 모듈을 간단히 살펴보겠습니다.

표준 Divi 포트폴리오 모듈

다음은 표준 Divi 포트폴리오 모듈을 사용하는 페이지입니다. 그리드 레이아웃으로 설정하고 글꼴 색상을 밝게 설정했습니다. 다른 모든 기능은 기본값으로 설정됩니다. 또한 아이콘(격자 모드), 테두리, 배경, 메타 및 글꼴 스타일이 있는 호버 오버레이가 포함됩니다.

프로젝트의 추천 이미지는 이미지 아래에 프로젝트 제목 및 카테고리와 함께 표시됩니다. 제목을 클릭하면 프로젝트로 이동합니다. 카테고리 제목을 클릭하면 해당 카테고리에 대한 카테고리 페이지가 열립니다. 그리드 레이아웃을 사용할 때 오버레이 색상 및 아이콘 옵션이 있는 호버 효과도 포함됩니다.

맞춤형 포트폴리오 모듈 예시

선택할 수 있는 세 가지 레이아웃이 포함되어 있으므로 포트폴리오를 2, 3 또는 4열로 설정할 수 있습니다. 다양한 사용자 정의 및 기능이 있는 각 레이아웃을 살펴보겠습니다.

다음은 2열 레이아웃을 살펴보겠습니다. 프로젝트의 추천 이미지를 표시하고 이미지 아래 막대에 클릭 가능한 제목과 범주를 포함하고 이미지와 막대 위에 텍스트가 있는 버튼을 배치합니다. 이것은 기본 기능 및 색상입니다.

이미지에는 표준 포트폴리오 모듈과 동일한 호버 효과가 포함되어 있지만 버튼에는 호버 효과도 포함되어 있습니다. 이 예에서 기본 버튼 설정이 보라색 배경을 빨간색으로 변경하는 것을 볼 수 있습니다.

마우스를 가져가는 카드 뒤에 그림자를 만드는 멋진 호버 효과도 볼 수 있습니다. 제목이 툴팁으로 표시됩니다. 호버 오버레이도 기본 기능이므로 활성화할 필요가 없습니다. 호버 효과의 전환은 전환이 완료될 때까지 더 무거운 그림자를 표시합니다.

다음은 3열 레이아웃을 살펴보겠습니다. 이 예에서는 버튼 배경과 텍스트의 색상을 변경하고 내 메시지를 표시하도록 텍스트를 변경했습니다.

버튼에는 그림자 호버 효과도 포함됩니다. 이 예에서는 버튼 위로 마우스를 가져가기만 하므로 이미지에 호버 효과가 표시되지 않습니다. 버튼 배경과 텍스트의 색상이 변경되었습니다.

이 예에서는 4열 레이아웃을 사용합니다. 버튼 반경을 0으로 설정하고 모든 글꼴 스타일을 변경했습니다.

호버 효과는 불투명도가 47%인 파란색 오버레이(홀수에 대해 유감스럽게 생각하지만 마우스가 멈추는 위치에 있기 때문에 사용했습니다)와 빨간색 체크박스 아이콘을 배치합니다. 버튼은 밝은 탭 텍스트가 있는 짙은 회색에서 어두운 회색 텍스트가 있는 미색으로 바뀝니다.

이 예에서는 제목과 메타 뒤에 표시되는 배경을 추가했습니다. 너비가 2픽셀인 빨간색 테두리를 추가했습니다(이미지에서 보기 쉽도록). 모든 글꼴과 색상을 조정하고 버튼 배경색, 호버 색상, 아이콘 색상을 변경했습니다. 추천 이미지 영역과 제목 및 메타 섹션 뒤의 배경 이미지 사이의 대비를 표시하기 위해 기본 호버 오버레이 색상을 그대로 두었습니다.

버튼은 제목을 표시하는 경우에만 표시됩니다. 이 예에서는 범주만 표시합니다.

이 예에서는 프로젝트 제목만 표시합니다. 제목이 표시되므로 버튼도 표시됩니다.

이 예에서는 불투명도가 66인 빨간색 오버레이를 배치했습니다. 호버 아이콘을 변경하고 버튼과 호버 효과를 사용자 정의했습니다. 제목 뒤에 배경 이미지(회색 하늘)가 배치됩니다. 이것은 다른 프로젝트 카테고리를 사용합니다. 버튼 반경은 10으로 설정됩니다.

Divi 포트폴리오 그리드 – 반응형

플러그인이 반응합니다. 다음은 세로 모드의 iPad(Chrome 개발자 도구에서 에뮬레이트됨)의 3열 레이아웃입니다. Google Chrome 개발자 도구에 대해 자세히 알아보려면 지금 바로 Chrome 개발자 도구를 사용해야 하는 이유 문서를 참조하세요.

가로 모드에서도 동일한 레이아웃입니다.

세로 모드의 Galaxy S5와 동일한 레이아웃입니다.

그리고 갤럭시 S5를 사용한 레이아웃은 가로 모드입니다.

라이선스, 업데이트 및 문서

라이선스에는 무제한 사용이 포함되며 평생 업데이트가 포함됩니다. 문서는 압축 폴더에 들어 있는 PDF 파일로 제공됩니다. 짧은 문서이며 시작하는 데 도움이 되는 이미지가 포함된 연습을 제공합니다. 사용하기 쉬운 플러그인이며 모든 것이 직관적이라는 것을 알았습니다. Divi 모듈을 사용하는 데 익숙하다면 이 모듈을 사용하면 집과 같은 편안함을 느낄 것입니다.

Divi 포트폴리오 그리드는 Divi 테마 스토어에서 구매하실 수 있습니다.

마지막 생각들

Divi Portfolio Grid는 사용하기 쉽고 표준 Divi 포트폴리오 모듈에 비해 충분한 추가 기능을 제공하므로 많은 사용자가 필수적이라고 생각할 수 있습니다. 여기에는 2, 3, 4 열 레이아웃이 포함되며, 호버 효과가 있는 버튼, 아이콘이 있는 오버레이 및 고급 CSS 기능을 포함하여 예상하는 모든 모듈 스타일이 추가되므로 고유한 코드로 사용자 정의 스타일을 지정할 수 있습니다. 표준 Divi 포트폴리오 모듈 이상의 기능을 갖춘 포트폴리오를 원한다면 Divi Portfolio Grid가 필요한 모듈일 수 있습니다.

여러분의 의견을 듣고 싶습니다! Divi 포트폴리오 그리드를 사용해 보셨습니까? 아래 의견에 귀하의 경험에 대해 알려주십시오.

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