Divi에서 사용자 정의 이미지 오버레이를 디자인하는 방법

이미지 오버레이는 웹 디자인에서 오랫동안 사용되어 왔습니다. 이미지 위로 마우스를 가져갈 때 추가 콘텐츠와 디자인 요소를 표시하여 방문자의 관심을 끌기에 좋습니다. 이것은 인기 있는 디자인 기능이기 때문에 이미지 오버레이 생성 전용 플러그인이 많이 있습니다. 그러나 플러그인에 따라 상당히 제한적일 수도 있고 필요할 수도 있는 것에 대해 약간 과도할 수도 있습니다. 그렇기 때문에 Divi에서 직접 구축하는 노하우를 갖는 것이 도움이 됩니다.

이 튜토리얼에서는 Divi에서 사용자 지정 이미지 오버레이를 디자인하는 방법을 보여줍니다. 이러한 오버레이는 이미지 위로 마우스를 가져갈 때 요소를 변경하고 표시합니다. 가장 좋은 점은 Divi의 내장 디자인 옵션을 사용하여 이미지 오버레이 디자인을 완벽하게 제어할 수 있다는 것입니다. 또한 몇 가지 사용자 정의 CSS 스니펫을 사용하여 멋진 이미지 오버레이를 만들어 사이트를 다음 단계로 끌어올릴 수 있습니다. 플러그인이 필요하지 않습니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

무료로 Divi 이미지 오버레이 레이아웃 다운로드

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

가져오기 버튼을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

Divi에서 사용자 정의 이미지 오버레이 만들기

섹션, 행 및 열 만들기

시작하려면 기본 섹션 안에 3열 행을 만드세요.

섹션 설정을 열고 다음 배경색을 추가합니다.

• 배경색: #3a0ca3

그런 다음 열 1에 대한 설정을 열고 다음을 업데이트합니다.

• CSS 클래스: et-overlay-container
• 수평 오버플로: 숨김
• 수직 오버플로: 숨김

CSS 클래스는 빌드할 오버레이 항목의 호버 효과를 트리거하는 데 필요합니다. 숨겨진 오버플로가 필요한 이유는 열 컨테이너를 넘어 이미지 크기를 조정하는 호버 효과가 있기 때문입니다.

이미지 추가

이제 섹션, 행 및 열이 준비되었으므로 열 1에 새 이미지 모듈을 추가합니다. 이것이 오버레이 디자인의 기본 이미지가 됩니다.

풍경보다는 초상화에 가까운 이미지를 업로드하세요. 저는 대략 800px x 1050px 크기의 것을 사용하고 있습니다. 모든 브라우저 크기에서 열의 전체 너비에 걸쳐 있을 만큼 충분히 넓은지 확인하십시오.

(참고: 가로 이미지를 사용할 수 있지만 겹치지 않도록 오버레이 요소의 위치를 ​​적절하게 조정해야 할 수도 있습니다.)

디자인 탭에서 다음을 업데이트합니다.

• 여백: 0px 하단

고급 탭에서 다음 CSS 클래스를 추가합니다.

• CSS 클래스: et-overlay-image

디바이더 모듈을 사용하여 이미지 오버레이 색상 추가

이미지 오버레이 색상을 생성하기 위해 디바이더 모듈을 사용할 것입니다. 아이디어는 구분선이 열의 전체 높이와 너비에 걸쳐 이미지 위에 완벽하게 놓이도록 하여 이미지 위에 덮개를 만드는 것입니다. 위치가 지정되면 분할기 모듈의 배경색을 조정하여 원하는 오버레이 색상을 얻을 수 있습니다.

먼저 이미지 아래에 구분선 모듈을 추가합니다.

그런 다음 구분선을 절대 위치로 지정하여 이미지 위에 놓이도록 합니다.

• 위치: 절대

콘텐츠 탭에서 다음을 업데이트합니다.

• 디바이더 표시: 아니오
• 배경색: rgba(247,37,133,0.8)

그런 다음 구분선의 높이와 너비를 업데이트합니다.

• 폭: 100%
• 높이: 100%

디자인이 준비되면 다음 CSS 클래스를 구분선에 추가합니다.

• et-overlay-item

(참고: 이 클래스는 마우스 오버 시에만 표시하려는 모든 오버레이 디자인 요소에 추가되어야 합니다. 요소가 처음에 숨겨지지 않도록 하려면 그대로 두십시오.)

디자인 요소/모듈을 추적하는 데 도움이 되도록 레이어 모달을 열고 구분자 모듈에 레이블을 지정합니다("오버레이 색상").

오버레이 제목 텍스트 추가

구분선 모듈 아래에 새 텍스트 모듈을 추가합니다. 이것은 마우스 오버 시 이미지 상단에 나타날 오버레이 제목 텍스트로 사용됩니다.

H2 제목으로 콘텐츠 업데이트:

<h2>Coaching</h2>

그런 다음 나중에 참조할 수 있도록 텍스트 모듈의 레이블을 업데이트합니다.

텍스트 디자인 설정에서 다음을 업데이트합니다.

• 텍스트 정렬: 가운데
• 텍스트 색상: 라이트

• 제목 2 글꼴: 가마우지 Garamond
• 제목 2 글꼴 두께: 굵게
• 제목 2 텍스트 크기: 40px

• 폭: 100%
• 최대 너비: 85%

고급 탭에서 다음과 같이 위치를 업데이트합니다.

• 위치: 절대
• 위치: 상단 중앙
• 수직 오프셋: 10%

(참고: 이미지의 종횡비 크기에 따라 수직 오프셋을 조정해야 할 수 있습니다. 예를 들어 가로 유형 이미지는 오프셋이 더 적게 필요할 수 있습니다.)

다음으로 텍스트 모듈에 다음 CSS 클래스를 추가합니다.

• CSS 클래스: et-overlay-item 이동

"et-overlay-item" 클래스 외에도 사용자 지정 CSS를 사용하여 호버 시 제목을 약간 아래쪽으로 이동하기 위해 추가 "move-down" 클래스를 추가하고 있습니다.

오버레이 본문 텍스트 만들기

오버레이 본문 텍스트를 생성하기 위해 오버레이 제목에 사용된 텍스트 모듈을 복제할 수 있습니다. 복제본에 대한 설정을 업데이트하기 전에 레이블을 "오버레이 본문"으로 변경합니다.

새 텍스트 모듈의 텍스트 설정을 열고 단락 텍스트의 몇 문장으로 본문 내용을 업데이트합니다.

고급 탭에서 모듈의 절대 위치를 중앙으로 변경합니다.

이 항목이 호버(만 표시)로 이동하는 것을 원하지 않으므로 다음 항목만 포함하도록 CSS 클래스를 업데이트하십시오.

• CSS 클래스: et-overlay-item

오버레이 버튼 만들기

이 이미지의 마지막 오버레이 요소는 버튼이 됩니다. 버튼을 생성하려면 "본문 텍스트" 텍스트 모듈 아래에 새 버튼 모듈을 추가합니다.

디자인을 변경하기 전에 다음과 같이 버튼의 위치를 ​​업데이트하십시오.

• 위치: 절대
• 수직 오프셋: 10%

이제 버튼이 이미지의 하단 부분 중앙에 위치해야 합니다.

고급 탭에서 CSS 클래스를 업데이트하고 다음과 같이 기본 요소에 사용자 정의 CSS 스니펫을 추가합니다.

• CSS 클래스: et-overlay-item 이동
• 주요 요소 CSS:

  min-width: 15em

호버에서 약간 위쪽으로 이동하기 위해 버튼에 추가 클래스가 추가되었음을 알 수 있습니다. 이것은 호버에서 제목 텍스트가 아래로 이동하는 것을 보완하기 위한 것입니다.

그런 다음 다음 디자인 설정을 업데이트합니다.

• 버튼 정렬: 중앙
• 버튼 텍스트 크기: 14px
• 버튼 배경색: #4361ee
• 버튼 테두리 너비: 0px
• 버튼 문자 간격: 0.1em
• 버튼 글꼴 두께: 굵게
• 버튼 글꼴 스타일: TT
• 패딩: 상단 0.8em, 하단 0.8em, 왼쪽 0px, 오른쪽 0px

코드 모듈로 사용자 정의 CSS 추가

이 오버레이 디자인의 몇 가지 다른 버전을 만들기 전에 오버레이 호버 효과에 필요한 사용자 정의 CSS를 추가해 보겠습니다. 이렇게 하려면 버튼 아래에 코드 모듈을 추가합니다.

그런 다음 코드 내용에 다음 CSS를 붙여넣습니다. 필요한 스크립트 태그로 코드를 래핑하는 것을 잊지 마십시오.

<style>
 @media all and (min-width: 981px) {
  
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }

}
</style>

필요에 따라 CSS를 조정할 수 있는 위치를 이해할 수 있도록 코드에 주석이 달려 있습니다.

더 많은 디자인을 위해 기둥 복제

작업할 두 개의 추가 빈 열이 이미 있지만 전체 열을 복제하여 첫 번째 열 내의 모든 모듈과 디자인을 새 열로 옮기는 것이 더 쉽습니다. 이렇게 하려면 레이어 모달을 열고 두 개의 빈 열을 삭제한 다음 이미지 오버레이 디자인이 포함된 열을 두 번 복제합니다. 동일한 디자인의 열이 총 3개 있어야 합니다.

이미지 오버레이 디자인 만들기 #2

이제 각 열 내에 모든 디자인 요소가 있으므로 디자인을 조정하여 추가 이미지 오버레이를 만들 수 있습니다. 이 다음 디자인에서는 버튼을 이미지 중앙에 배치할 것입니다(항상 표시됨). 그런 다음 제목과 본문 텍스트를 이미지의 위쪽과 아래쪽에서 볼 수 있도록 이동합니다.

본문 텍스트 위치 및 CSS 클래스 조정

열 2에서 오버레이 본문 텍스트 모듈에 대한 설정을 열고 위치를 업데이트합니다.

• 위치: 하단 중앙
• 수직 오프셋: 5%

그런 다음 CSS 클래스를 다음으로 업데이트합니다.

• CSS 클래스: et-overlay-item 이동

버튼 위치 및 CSS 클래스 조정

그런 다음 2열의 버튼에 대한 설정을 열고 다음 위치 위치를 업데이트합니다.

• 위치: 센터 센터

그런 다음 버튼이 항상 표시되도록 유지하기 위해 CSS 클래스를 제거합니다.

디바이더 모듈(오버레이 색상)에 대한 설정을 열고 다음과 같이 배경을 변경합니다.

• 배경색: rgba(67,97,238,0.8)

그런 다음 버튼에 대한 설정을 열고 배경색을 변경합니다.

• 버튼 배경색: #f72585

이미지 및 CSS 클래스 조정

그런 다음 이미지에 대한 설정을 열고 새 이미지를 업로드합니다(원하는 경우).

그런 다음 이미지에 다음 CSS 클래스를 추가합니다.

• CSS 클래스: et-overlay-image et-scale

"et-overlay-image" 클래스 외에도 "et-scale"이라는 추가 클래스가 있어 이미지의 크기를 확대하여 호버 시 확대 효과를 생성합니다.

이미지 오버레이 디자인 만들기 #3

이제 3열에서 세 번째 이미지 오버레이 디자인을 만들 차례입니다.

오버레이 본문 텍스트 콘텐츠 및 CSS 클래스 조정

열 3에서 오버레이 본문 텍스트 모듈에 대한 설정을 열고 단락 텍스트 위에 H2 제목을 추가합니다. 이제 둘은 둘 대신 하나의 모듈 안에 있을 것입니다.

그런 다음 텍스트가 이미지 위에 계속 표시되도록 CSS 클래스를 제거합니다.

버튼 오프셋 및 CSS 클래스 조정

버튼 모듈에 대한 설정을 열고 위치 수직 오프셋을 업데이트합니다.

• 수직 오프셋: 5%

오버레이 제목 삭제

다음으로 오버레이 제목 텍스트 모듈을 삭제합니다.

오버레이 색상 및 CSS 클래스 조정

디바이더 모듈(오버레이 색상)에 대한 설정을 열고 다음으로 배경을 업데이트하십시오.

• 배경 그라데이션 왼쪽 색상: rgba(67,97,238,0.8)
• 배경 그라데이션 오른쪽 색상: rgba(247,37,133,0.8)
• 시작 위치: 25%
• 최종 위치: 75%

그래디언트 오버레이가 항상 보이도록 유지하고 싶기 때문에 CSS 클래스를 제거합니다.

이미지 CSS 클래스 조정

마지막으로 기본 이미지에 추가 CSS 클래스("et-rotate")를 추가하여 마우스 오버 시 이미지의 크기를 조정하고 회전합니다.

• CSS 클래스: et-overlay-image et-rotate

최종 터치

최종 결과를 확인하기 전에 몇 가지 조정이 필요합니다.

모든 모듈의 기본 하단 여백 제거

기본적으로 각 모듈에는 행 설정의 기본 여백 너비(3)로 인해 30px의 하단 여백이 있습니다. 이것은 오버레이 디자인에서 모듈의 위치를 ​​흐트러뜨릴 수 있습니다. 그것들을 꺼내려면 디자인의 이미지 중 하나에 대한 이미지 모듈 설정을 엽니다. 이미 여백을 0px 하단 여백으로 업데이트했으므로 이 여백을 모든 모듈로 확장할 수 있습니다.

여백 설정을 마우스 오른쪽 버튼으로 클릭하고 "여백 확장"을 선택합니다.

그런 다음 페이지에서 여백을 모든 모듈로 확장하도록 선택합니다.

중복 코드 모듈 삭제

첫 번째 열을 복제할 때 이월된 추가 코드 모듈을 삭제해야 합니다. 하나만 있어야 합니다. 레이어 모달에서 쉽게 할 수 있습니다.

최종 결과

이제 세 가지 디자인이 완료되었으므로 이미지 오버레이 디자인의 최종 결과를 확인하겠습니다.

그리고 여기 모바일에서의 디자인이 있습니다. 오버레이 호버 효과는 코드 모듈의 사용자 정의 CSS 미디어 쿼리를 통해 데스크탑에만 적용됩니다. 따라서 오버레이는 모바일에서 항상 표시됩니다.

마지막 생각들

사용자 정의 이미지 오버레이를 구축하는 것은 실제로 매우 재미있습니다. Divi 빌더를 사용하여 시각적으로 테스트할 수 있는 디자인은 무수히 많으며 호버 효과를 적용하는 데 소량의 사용자 정의 CSS만 있으면 됩니다. 오버레이 항목에 대한 호버 효과에도 사용자 정의 CSS가 필요하지만 기본 제공되는 호버 옵션을 활용하여 각 오버레이 요소를 개별적으로 대상으로 지정할 수 있습니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!