멋진 포트폴리오 페이지가 있는 10개의 Divi 사이트

포트폴리오 페이지는 서비스를 제공하는 모든 사람에게 가장 중요한 페이지 중 하나입니다. 그것은 당신이 하는 일의 유형을 보여줄 뿐만 아니라 방문자에게 당신의 전문 지식 수준과 당신이 함께 일한 고객을 보여줍니다. 포트폴리오 페이지는 다양한 방법으로 디자인할 수 있습니다. 이 기사에서는 다음 Divi 디자인에 대한 영감을 주는 멋진 포트폴리오 페이지가 있는 11개의 Divi 웹사이트를 살펴보겠습니다.

포트폴리오 페이지에는 일반적으로 표준 포트폴리오, 필터 포트폴리오 또는 전체 너비 포트폴리오 모듈이 포함됩니다. 그러나 포트폴리오를 표시하는 다른 방법이 있습니다. 일부는 이미지, 광고 문구 또는 갤러리와 같은 요소로 포트폴리오를 구축합니다. 물론 이것은 페이지 레이아웃 내에서 잘 작동해야 합니다. 각각의 예를 살펴보겠습니다.

내가 좋아하는 부분의 이미지를 보여주고 어떤 부분이 마음에 들었는지 토론합니다. 웹사이트는 특별한 순서가 없습니다. Divi를 사용하여 자신의 포트폴리오 페이지 수준을 높이는 데 도움이 되는 몇 가지 링크를 끝까지 기다리십시오.

1. 분 크리에이티브

이 사이트는 인용을 표시하기 위해 전체 너비 섹션이 뒤따르는 영웅 섹션의 토글에서 열리는 서비스 목록을 표시합니다. 포트폴리오 섹션은 서비스 카테고리, 클라이언트 이름, 클라이언트 설명을 왼쪽에 표시하고 프로젝트 이미지를 오른쪽에 표시합니다. 각 포트폴리오 항목은 얇은 구분선으로 구분됩니다. 웹사이트의 예로는 라이브 웹사이트를 볼 수 있는 링크가 있습니다.

웹사이트 보기

2. 라운드페그

이 사이트는 3개의 열에 포트폴리오 항목을 표시하고 단일 열에 섹션을 포함합니다. 세 개의 열 섹션은 흰색의 클라이언트 로고가 있는 각 프로젝트의 이미지 위에 오버레이를 배치합니다. 하단 모서리에 있는 흰색 선으로 그린 ​​아이콘은 프로젝트의 범주를 나타냅니다. 단일 열 섹션은 패턴이 있는 배경 위에 텍스트와 버튼이 있는 프로젝트 이미지를 보여줍니다. 세 번째 섹션 아래에는 각 카테고리에서 더 많은 것을 볼 수 있는 링크가 제공됩니다.

웹사이트 보기

3. 레오 후텡

이 페이지는 포트폴리오 항목을 이미지 사이에 공백 없이 여러 열 레이아웃으로 배치합니다. 그 중 하나를 가리키면 이미지 위에 파란색 오버레이가 표시되고 하단에 프로젝트의 이름과 범주를 보여주는 상자가 나타납니다. 포트폴리오는 2열과 3열로 구성되며 레이아웃을 대체합니다. 이미지는 다른 배경을 사용하고 다양한 유형의 장치에서 프로젝트의 이미지를 보여줍니다. 이 사이트는 색상을 잘 활용합니다.

웹사이트 보기

4. Studinger 미디어 그래픽

이 사이트는 모노크롬 오버레이를 통해 간신히 보여지는 우아한 배경 이미지 위에 회사 로고, 이름, 페이지 제목이 있는 포트폴리오 페이지를 소개합니다. 포트폴리오 섹션은 필터에 스타일이 지정된 버튼을 사용하고 프로젝트를 3열 그리드로 표시합니다. 마우스를 가져가면 이미지가 회전하고 링크가 제공됩니다. 이 페이지에는 클릭 유도문안, 문의 양식, 사이트 브랜딩과 일치하는 QR 코드 및 소셜 팔로우 버튼이 있는 바닥글도 포함되어 있습니다.

웹사이트 보기

5. 캐서린 클리프

이 포트폴리오 페이지는 시차 오버레이에 제목과 설명이 있는 전체 화면 이미지를 보여줍니다. 스크롤하면 프로젝트의 이름과 위치, 관련된 사람들의 이름이 있는 텍스트 섹션이 나타납니다. 다음은 전체 화면과 3열 그리드의 이미지를 포함하는 갤러리입니다. 다른 프로젝트는 2열 또는 3열 그리드 내에 이미지가 표시되는 유사한 패턴을 따릅니다.

웹사이트 보기

6. 슈퍼 디바인 웹 디자인

이것은 각 프로젝트에 번호를 매기고 회사 로고와 제공되는 서비스, 손으로 쓴 글꼴로 된 프로젝트 제목, 프로젝트에 대한 짧은 설명, 프로젝트를 실시간으로 볼 수 있는 버튼이 포함된 이미지를 표시합니다. 제목 텍스트, 테두리 및 버튼 색상은 사이트의 브랜딩과 일치합니다. 다음은 온라인 예약 앱에 대한 CTA입니다.

웹사이트 보기

7. 웹 디자인 받기

이 포트폴리오 페이지는 Pinterest와 유사한 프로젝트 이미지를 로드합니다. 4열 또는 5열 그리드로 표시됩니다(화면 크기 및 확대/축소 수준에 따라 다름). 프로젝트 위로 마우스를 가져가면 돋보기가 나타납니다. 이것을 클릭하면 라이트박스에서 이미지가 열립니다. 많은 이미지가 웹사이트의 완전한 레이아웃이고 나머지는 영웅 영역입니다.

웹사이트 보기

8. 카포럴 마케팅 디지털

이 포트폴리오 페이지에는 사이트의 브랜드 색상과 일치하는 흥미로운 테두리가 있는 제목, 태그라인 및 버튼이 있는 전체 너비 이미지가 표시됩니다. 스크롤하면 3열 그리드에 필터링된 포트폴리오가 표시됩니다. 포트폴리오는 호버에 컬러로 표시되는 흑백의 클라이언트 로고를 보여줍니다. 여기에는 고객의 이름과 제공된 서비스도 포함됩니다. 왼쪽의 줄은 옆으로 향하는 텍스트의 소셜 네트워크 이름을 표시합니다. 스크롤할 때 화면에 남아 있습니다.

웹사이트 보기

9. 마이티 폭스

이 페이지는 어두운 오버레이와 페이지 제목을 표시하는 우아한 글꼴이 있는 전체 너비 배경으로 소개됩니다. 필터링된 포트폴리오는 클라이언트의 로고를 흑백으로 표시합니다. 프로젝트 위로 마우스를 가져가면 마우스가 왔던 방향에서 오버레이가 나타납니다. 오버레이에는 프로젝트를 실시간으로 볼 수 있는 링크와 함께 제공되는 회사 이름 및 서비스가 표시됩니다. 그 다음에는 시차로 된 배경 이미지와 평가 슬라이더, 소셜 팔로우 버튼 및 Instagram 피드가 있는 2열 섹션인 CTA가 이어집니다.

웹사이트 보기

10. 와카

이것은 모바일 퍼스트를 위해 개발되었습니다. 페이지는 제목과 설명을 포함하는 초대형 텍스트가 있는 큰 섹션으로 소개됩니다. 스크롤 및 시세 표시가 페이지 하단에 나타나고 이 위치의 화면에 유지됩니다. 이미지 위로 마우스를 가져가면 커서가 큰 화살표로 바뀌고 큰 손으로 바뀝니다. 프로젝트는 두 개의 열에 표시됩니다. 이 페이지에는 서비스 목록, 문의 양식 및 뉴스레터 수신 동의도 ​​포함되어 있습니다. 바닥글은 스크롤에 표시되며 텍스트의 잘린 부분을 통해 표시되는 비디오를 표시합니다.

웹사이트 보기

마무리 생각

다음 Divi 웹사이트에 영감을 주는 멋진 포트폴리오 페이지가 있는 11개의 Divi 웹사이트를 살펴보았습니다. ET 블로그에는 특히 포트폴리오나 광고 문구, 이미지 또는 갤러리와 같은 요소에 중점을 둔 많은 기사가 있습니다.

다음은 몇 가지입니다.

• Divi로 사례 연구를 구성하기 위해 필터링 가능한 포트폴리오 및 포스트 탐색을 사용하는 방법
• 3개의 아름다운 무료 프로젝트 페이지 레이아웃(& Divi Builder로 더 많은 것을 구축하는 방법)
• 포트폴리오 사이트의 효율성을 측정하기 위해 Divi Leads를 사용하는 방법
• Divi로 최소한의 포트폴리오 홈페이지를 만드는 방법
• 필터, 영웅 섹션 및 CTA를 사용하여 최소 포트폴리오 홈페이지 확장
• 무료 Divi 다운로드: 홈페이지 포트폴리오 레이아웃 팩
• 무료 Divi 다운로드: 크리에이티브 단일 페이지 포트폴리오 레이아웃 팩
• Divi의 폴드 애니메이션을 사용하여 Blurbs Bloom 만들기
• Hover.css를 사용하여 Divi의 Blurb 모듈에 고급 호버 효과를 추가하는 방법
• Divi의 Blurb 모듈을 스타일링하는 5가지 재미있는 방법
• Divi 갤러리 모듈을 사용하여 그레이스케일에서 컬러 갤러리 만들기
• 배경 이미지로 독특한 겹침 효과를 만드는 방법
• Divi의 새로운 필터 옵션을 사용하여 이미지를 아름답게 하는 방법

우리는 당신의 의견을 듣고 싶습니다. 멋진 포트폴리오 페이지가 있는 이 웹사이트 중 가장 좋아하는 웹사이트는 무엇입니까? 의견에 알려주십시오.

그래픽 팜/Shutterstock.com을 통한 추천 이미지