Divi에서 매력적인 툴팁으로 배경 이미지에 레이블을 지정하는 방법

배경 이미지에 레이블을 지정하는 도구 설명을 추가하면 방문자가 제품 또는 서비스에 대한 귀중한 정보를 얻을 수 있는 창의적인 방법입니다. 기본 아이디어는 이미지의 특정 위치에 아이콘(또는 텍스트)을 배치하는 것입니다(예: 핀포인트가 있는 Google 지도). 그리고 Divi의 호버 효과를 활용하면 아이콘 위로 마우스를 가져갈 때 추가 텍스트를 표시하여 매력적인 툴팁을 만들 수 있습니다.

이 튜토리얼에서는 제품에 대한 유용한 툴팁 역할을 하는 광고 문구로 배경 이미지에 레이블을 지정하는 방법을 보여 드리겠습니다. 이를 위해 Fitness Gym 방문 페이지를 사용하여 고품질 피트니스에 대한 정보가 포함된 배경 이미지에 레이블을 지정하겠습니다.

시작하자.

엿보기

다음은 이 튜토리얼에서 구축할 디자인의 스닉 피크입니다.

필요한 것

이 튜토리얼에서는 다음이 필요합니다.

• 디비 테마
• 피트니스 체육관 레이아웃 팩의 피트니스 체육관 랜딩 페이지(Divi Builder에서 사용 가능)
• 정확히 320x507px인 배경 이미지에 사용할 이미지입니다. 이것을 바탕 화면으로 자유롭게 드래그하여 이 튜토리얼에 사용하십시오.
  

미리 만들어진 레이아웃 준비

시작하려면 새 페이지를 만들고 제목을 추가한 다음 Visual Builder를 배포하세요. 그런 다음 "미리 만들어진 레이아웃 선택"을 선택합니다. 라이브러리에서 로드 팝업에서 피트니스 체육관 랜딩 페이지 레이아웃을 선택하고 "이 레이아웃 사용"을 클릭합니다.

레이아웃이 페이지에 로드되면 오른쪽 열에 "추천 프로그램"이라는 제목이 있는 두 열 행이 있는 네 번째 섹션으로 스크롤합니다. 이 행의 왼쪽 열에 도구 설명이 있는 배경 이미지를 추가할 것입니다.

인라인 편집기를 사용하여 오른쪽 열의 제목 텍스트를 "Smart Fitness"로 변경합니다.

배경 이미지 추가 및 행 설정 사용자 정의

이 디자인에서는 크기와 간격이 중요하며 정확해야 합니다. 그리고 모든 것은 배경 이미지의 크기로 시작됩니다. 앞에서 언급했듯이 배경에 사용하는 이미지는 320x507픽셀이어야 합니다. 320px 너비는 모바일의 좋은 시작점이기 때문에 이미지 크기를 변경하지 않고도 모바일 친화적인 디자인을 만들 수 있습니다.

행 설정을 열고 배경 이미지를 열 1에 추가합니다. 그런 다음 다음을 업데이트합니다.

열 1 배경 이미지 크기: 실제 크기
열 1 배경 이미지 위치: 중앙 왼쪽
열 1 배경 이미지 반복: 반복 없음

다음으로 행에 사용자 정의 너비를 추가하고 상단 및 하단 간격을 제거해야 합니다.

맞춤 너비: 700px
맞춤 패딩: 위쪽 0px, 아래쪽 0px

너비를 700px로 설정하면 태블릿 중단점 전에 더 작은 화면 크기에서 행이 작아지지 않습니다.

이때 1열의 특정 높이를 배경 이미지의 높이와 동일하게 설정하는 것이 좋은 생각이라고 생각합니다. 이렇게 하면 열의 내용이 전체 이미지를 노출하지 않아도 이미지가 계속 표시된다는 것을 알 수 있습니다. 이렇게 하려면 고급 탭으로 이동하여 1열 기본 요소에 다음 사용자 지정 CSS를 추가합니다.

height: 507px;

이제 열의 높이는 이미지의 높이와 같으며 행에 추가하는 콘텐츠(또는 모듈)에 의존하지 않습니다.

Blurbs를 사용하여 배경 이미지 위에 도구 설명 레이블 추가

배경 이미지가 준비되면 툴팁으로 기능하도록 배치되고 스타일이 지정될 광고 문구를 추가할 수 있습니다. 계속해서 1열에 광고문안 모듈을 추가하고 다음 광고문 설정을 업데이트하십시오.

제목: "초점"
내용: “성공의 열쇠!”
아이콘 사용: 예
아이콘: 스크린샷 참조

배경 이미지 안에 전체 광고 문구를 맞출 수 있기를 원하기 때문에 제목과 내용을 몇 단어로 유지하는 것이 중요합니다.

다음으로 디자인 설정을 업데이트합니다. 이것은 광고 문구의 고급 디자인이므로 호버링 시 광고 문구의 내용을 표시하는 몇 가지 호버 효과와 함께 변경할 수 있는 많은 옵션이 있습니다. 다음 광고 문구 디자인 설정을 업데이트합니다.

아이콘 색상: #edf000
원 아이콘: 예
원 색상: rgba(0,0,0,0)
원 테두리 표시: 예
원 테두리 색상(기본값): rgba(0,0,0,0)
원 테두리 색상(마우스 오버): #edf000
이미지/아이콘 배치: 왼쪽
아이콘 글꼴 크기 사용: 예
아이콘 글꼴 크기: 40px

다음과 같이 디자인 설정을 계속 조정합니다.

제목 글꼴 두께: 굵게
제목 텍스트 색상(기본값): rgba(0,0,0,0)
제목 텍스트 색상(기본값): #edf000
본문 텍스트 색상(기본값): rgba(0,0,0,0)
본문 텍스트 색상(기본값): #ffffff

(기본 텍스트 색상은 광고 문구 위로 마우스를 가져갈 때까지 숨기기 위해 완전히 투명합니다.)

맞춤 여백: 위쪽 15px, 아래쪽 0px, 왼쪽 90px
맞춤 패딩: 위쪽 5px, 아래쪽 5px, 오른쪽 5px

(사용자 정의 여백은 이미지 위의 특정 위치에 광고 아이콘을 배치하는 방법입니다.)

박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: -154px
상자 그림자 수직 위치: 0px
그림자 색상(기본값): rgba(0,0,0,0)
그림자 색상(마우스 오버): #1e2441

(상자 그림자는 광고 내용 뒤에 배경색을 추가하는 창의적인 방법입니다. 기본적으로 상자 그림자는 완전히 투명하지만 마우스를 가져가면 멋진 파란색으로 표시됩니다.)

이제 첫 번째 광고 문구의 최종 결과를 확인하여 호버 효과와 디자인이 올바른지 확인하십시오.

다음으로, 두 번째 툴팁 레이블을 생성하기 위해 블러브 모듈을 복제할 수 있습니다. 광고 문구를 복제한 후 내용을 원하는 텍스트로 업데이트할 수 있습니다(짧게 유지). 그런 다음 다음과 같이 다른 사용자 지정 여백을 사용하여 도구 설명을 배치하기만 하면 됩니다.

맞춤 여백: 위쪽 0px, 아래쪽 0px, 왼쪽 15px

세 번째 광고 문구를 만들기 위해 두 번째 광고 문구를 복제할 수 있습니다.

이 세 번째 광고문안에서는 이미지 오른쪽의 공간이 부족하므로 콘텐츠를 위한 공간이 많지 않습니다. 음수 여백을 사용하여 이미지 외부의 광고 문구를 확장할 수 있지만 모바일에서 320px 화면 크기 이상으로 확장될 수도 있습니다. 따라서 아이콘이 오른쪽에 있고 텍스트가 왼쪽에 오도록 광고 내용을 뒤집는 몇 가지 작은 코드 스니펫을 소개하겠습니다. 이렇게 하려면 블러 설정을 열고 고급 탭에서 다음 사용자 정의 CSS를 추가하십시오.

주요 요소 CSS:

direction: rtl;

광고 이미지 CSS:

padding-left: 15px;

눈치채지 못했다면 이제 아이콘이 오른쪽에 있습니다. 이제 다음 사용자 정의 여백을 사용하여 광고 문구를 배치하기만 하면 됩니다.

맞춤 여백: 위쪽 35px, 아래쪽 0px, 왼쪽 0px

또한 다음과 같이 오른쪽이 아닌 왼쪽에서 오도록 상자 그림자를 조정해야 합니다.

상자 그림자 수평 위치: 150px

이제 라이브 사이트에서 반전된 툴팁을 확인하세요.

마지막 광고의 경우 열 맨 위에 있는 첫 번째 광고를 복사하고 세 번째 광고 아래에 붙여넣습니다.

그런 다음 여백을 다음과 같이 업데이트합니다.

맞춤 여백: 위쪽 0px, 왼쪽 100px

이제 디자인의 최종 결과를 확인하십시오!

그리고 툴팁 호버 효과를 확인하십시오!

반응형인가요?

이 디자인은 처음부터 모바일을 염두에 두고 제작되었습니다. 이미지의 너비는 대부분의 소형 스마트폰 너비인 320픽셀입니다. 그리고 픽셀 길이 단위를 사용하여 모든 것의 크기와 위치를 지정했기 때문에 브라우저 크기를 조정할 때 디자인(도구 설명 포함)이 움직이지 않습니다.

그러나 작은 전화 화면에서 이미지 너비를 확인하고 최대화하기 위해 해야 할 일이 한 가지 더 있습니다. 기본적으로 모바일에서 행의 너비는 80%이므로 이를 100%로 만들기 위해 다음과 같이 행의 기본 요소에 맞춤 CSS로 추가할 수 있습니다.

width: 100%;

700px의 사용자 정의 너비는 데스크톱에서 여전히 최대 너비로 사용되지만 이제 모바일에서는 100%가 됩니다.

마지막 생각들

이와 같은 도구 설명 및 호버 효과로 배경 이미지에 레이블을 지정하면 청중을 유용한 정보로 끌어들이는 전문적인 디자인 요소를 추가할 수 있습니다. 그리고 이 개념을 다른 사용 사례에 사용할 수 있는 여러 가지 방법이 있다고 확신합니다. 그러나 디자인을 모바일에서도 유지하려는 경우에는 어려움이 따릅니다. 비결은 모바일 우선으로 생각하고 미리 계획하는 것입니다. 이것이 앞으로의 프로젝트에 영감을 주기를 바랍니다. 적어도 아이콘이나 오른쪽 :)으로 광고 문구를 만드는 방법을 알고 있습니다.

아래 의견에서 여러분의 의견을 기다리겠습니다.

건배!