Divi Builder로 이미지에 오버레이를 만드는 방법

이미지 오버레이는 방문자에게 추가 정보를 표시하여 방문자의 참여를 유도하는 좋은 방법 중 하나입니다. 일반적으로 이것은 마우스가 요소나 이미지를 가리킬 때 발생합니다. 꽤 유명하기 때문에 이를 달성하는 데 도움이 되는 많은 WordPress 플러그인을 이미 보았을 것입니다. 나처럼 Divi를 좋아한다면 Divi로 어떻게 해야 할지 궁금하실 텐데요. 그것이 우리가 오늘 다룰 내용입니다.

이 튜토리얼에서는 Divi Builder 에서 사용자 지정 이미지 오버레이를 디자인하는 방법을 보여줍니다. 이러한 오버레이는 마우스가 요소 위로 이동할 때 요소를 전환하고 표시합니다. 흥미롭게 볼 수 있는 것은 Divi 내장 옵션만 사용하여 디자인을 더 잘 제어할 수 있다는 것입니다. 우리는 일부 CSS 코드를 사용하게 될 수 있으며, 이는 상황을 더 좋게 만들 것입니다.

예상 결과

다음은 이 튜토리얼이 끝날 때 얻을 수 있는 내용에 대한 간략한 설명입니다.

시작하기 전에 필요한 구성 요소

튜토리얼을 시작하기 전에 이 튜토리얼을 재현하는 데 필요한 몇 가지 요구 사항을 충족해야 합니다. 따라서 다음이 필요합니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

• Divi 설치 및 활성화
• WordPress에서 새 페이지를 만들고 프런트엔드에서 Divi Builder를 사용합니다.
• "처음부터 빌드" 옵션을 선택합니다.

그 후에 빈 페이지가 있으면 갈 준비가 된 것입니다.

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

섹션, 행 및 열 만들기

기본 섹션 내에서 3열 행을 선택하여 시작하겠습니다.

섹션 설정을 열고 다음 배경색을 사용합니다.

• 배경색: #3a0ca3

그런 다음 열 1의 설정으로 이동하고 다음 옵션을 변경합니다.

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

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

이미지 추가

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

초상화에 있는 이미지를 업로드합니다. 저는 대략 1280x1920px인 것을 사용하고 있습니다. 모든 브라우저 크기에서 열의 전체 너비에 걸쳐 있을 만큼 충분히 넓은지 확인하십시오.

디자인 탭에서 다음을 변경합니다.

• 여백: 0px 하단

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

• CSS 클래스: et-overlay-image

디바이더 모듈을 사용하여 이미지 오버레이 색상 선택하기

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

먼저 이미지 아래에 구분선 모듈을 추가해 보겠습니다.

그런 다음 이미지 상단에 표시되도록 구분선을 절대 위치로 지정합니다.

• 위치: 절대

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

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

그런 다음 구분선의 높이와 너비를 변경합니다.

• 폭: 100%
• 높이: 100%

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

• et-overlay-item

경고 : 이 클래스는 마우스 오버 시에만 표시하려는 모든 오버레이 디자인 구성 요소에 추가되어야 합니다. 요소를 처음에 숨기고 싶지 않다면 사용하지 마십시오.

선택적으로 명확하게 식별할 수 있는 이름을 사용하여 오버레이로 바뀐 구분선에 레이블을 지정할 수 있습니다. 레이어에서 만들 수 있으며 "오버레이"를 사용할 수 있습니다.

오버레이 제목 텍스트 추가

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

H2 제목으로 콘텐츠 변경:

>h2/h2



나중에 참조하기 위해 텍스트 모듈의 레이블을 변경할 수도 있습니다.







텍스트 디자인 설정에서 다음을 변경합니다.



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







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







폭: 100%
최대 너비: 85%







고급 탭에서 위치를 다음과 같이 변경합니다.



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



경고: 수직 오프셋은 이미지의 종횡비 크기에 따라 조정해야 할 수 있습니다. 







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



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



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







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



 오버레이 텍스트를 생성하기 위해 오버레이 제목에 사용된 텍스트 모듈을 복제할 수 있습니다.  설정을 변경하기 전에 해당 모듈에 다른 레이블을 지정하겠습니다.  이번에는 "Overlay Body"를 사용하겠습니다.







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







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







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



CSS 클래스: et-overlay-item







오버레이 버튼 만들기



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







디자인을 업데이트하기 전에 다음과 같이 버튼의 위치를 변경해 보겠습니다.



위치: 절대
수직 오프셋: 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를 붙여넣습니다.  필요한 스크립트 태그로 코드를 래핑하는 것을 잊지 마십시오.



>style 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열과 3열에 적용할 색상 집합이 무엇인지 결정하도록 하겠습니다. 최종 결과는 확인하지 않겠습니다.



최종 결과



이제 세 가지 디자인이 완료되었으므로(나머지 두 열의 디자인을 변경했으면 함) 디자인의 최종 결과를 확인해 보겠습니다.







요약



 이미지 오버레이를 만드는 것은 실제로 Divi 로 가능합니다.  Divi 빌더를 사용하여 시각적으로 만들 수 있는 디자인은 무수히 많으며 약간의 호버 효과를 적용하는 데 소량의 사용자 정의 CSS만 있으면 됩니다.