Divi의 새로운 배경 옵션으로 반응형 배너 만들기

지난 게시물에서 열 및 행 배경 위에 버튼 모듈을 레이어링하여 Divi의 배경 옵션 인터페이스를 사용하여 버튼의 스타일을 지정하는 방법을 보여주었습니다. 오늘은 Divi의 배경 옵션 인터페이스를 사용하여 반응형 클릭 가능한 배너를 디자인하는 방법을 보여 드리겠습니다.

약간의 조정을 통해 버튼 배경에 사용한 것과 동일한 기술을 사용할 것입니다. 기본적으로 정말 큰 버튼을 만들고 배너처럼 조금 더 디자인하는 방법을 보여 드리겠습니다. 여기서 중요한 요소는 배너의 전체 표면적을 클릭 가능한 상태로 유지한다는 것입니다. 그러나 이 방법을 사용하여 간단한 배너만 만들 수 있다는 것을 처음부터 알아야 합니다. 버튼 모듈의 텍스트 입력에 의해 제한되기 때문에 하나의 텍스트 문자열로만 배너를 만들 수 있습니다. 그러나 열 배경 옵션을 활용하면 Visual Builder를 사용하여 매우 멋진 배너를 즉시 만들 수 있습니다.

HTML 배너 대 이미지 배너

이미지 배너(html 요소 없이 단일 이미지로 제작된 배너)보다 html 배너(html 요소를 사용하여 제작된 배너)를 사용하면 많은 이점이 있습니다. html 배너의 경우 텍스트는 웹 브라우저에서 인식됩니다(페이지 번역기 및 화면 판독기에게 필수). 브라우저 창의 크기에 따라 크기가 조정되므로 왜곡되거나 읽을 수 없는 이미지와 달리 항상 선명하게 보입니다. 그리고 아마도 이미지 배너보다 html 배너를 사용할 때 가장 좋아하는 측면은 html이 변경하기 정말 쉽다는 것입니다. 사진 편집기에서 편집해야 하는 원본 파일을 하드 드라이브에서 찾는 대신 몇 번의 키 입력으로 텍스트를 변경할 수 있습니다. 그리고 Divi Leads를 사용하여 분할 테스트를 수행할 다른 버전의 배너를 빠르게 만들 수 있습니다.

버튼을 배너로 바꾸는 이 방법은 블로그(또는 팟캐스트)에 대한 맞춤형 추천 게시물, 카테고리 또는 시리즈를 만드는 것과 같은 몇 가지 유용한 응용 프로그램의 문을 엽니다.

시작하자.

엿보기

우리가 공식적으로 시작되기 전에. 다음은 이 게시물에서 구축할 배너의 미리보기입니다.

Divi로 디자인 구현하기

YouTube 채널 구독

예 #1: 로고 배너

Visual Builder를 사용하여 하나의 열과 하나의 행이 있는 일반 섹션을 추가합니다.

다음으로 버튼 모듈을 행에 추가합니다.

그런 다음 다음과 같이 버튼 모듈 설정 을 업데이트합니다.

콘텐츠 옵션

버튼 텍스트: [배너 메시지에 사용할 텍스트 입력]
버튼 URL: [URL 입력]

디자인 옵션

버튼 정렬: 중앙
텍스트 색상: 라이트
버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 크기: 32px
버튼 테두리 너비: 0px
버튼 글꼴: Arvo
버튼 아이콘: [아이콘 추가. 커서 아이콘을 사용하고 있습니다.]
버튼에 대한 호버에 아이콘만 표시: 아니오

고급 옵션

열 너비를 채우려면 버튼 너비를 100%로 설정해야 합니다. 또한 배너 콘텐츠를 위한 충분한 공간을 제공하기 위해 버튼의 높이를 확장해야 합니다. 이렇게 하려면 기본 요소 상자에 다음 사용자 지정 CSS를 입력합니다.

 Width: 100%;
padding: 20px 0 200px; 

참고 : 여기에서 사용자 정의 패딩은 배너 텍스트를 표시할 위치를 조정하는 핵심입니다. 버튼 정렬이 이미 중앙에 있으므로 텍스트를 세로로 조정하기만 하면 됩니다. 따라서 버튼 텍스트에 상단에 더 짧은 패딩을 지정하고 하단에 더 긴 패딩을 지정하면 텍스트가 배너 상단으로 조정됩니다.

설정 저장

지금은 모든 것이 하얗고 보이지 않지만 괜찮습니다. 행 및 열 설정 내에서 버튼 모듈에 대한 배경을 추가할 것입니다.

버튼 모듈이 있는 행 설정으로 이동하여 다음을 업데이트합니다.

콘텐츠 옵션

배경 이미지 탭 아래

배경 이미지: [이미지 삽입]
배경 이미지 위치: [이 옵션을 사용하여 배너 이미지를 조정합니다. 내 이미지의 아래쪽이 표시되도록 "하단 중앙"을 선택했습니다.]

이제 약간 아래로 스크롤하여 열 1 배경 옵션을 업데이트합니다.

Column 1 Background Gradient 탭 을 선택한 다음 흰색 더하기 기호가 있는 회색 원형 버튼을 클릭합니다.

다음을 업데이트합니다.

배경 그라데이션 색상: rgba(131,0,233,0.92), rgba(0,0,0,0.69)
기둥 기울기 방향: 180deg
컬럼 시작 위치: 50%
열 끝 위치: 0%

설정 저장

다음으로 배너에 로고를 추가합니다. 배경 이미지 탭을 클릭하고 다음을 업데이트합니다.

열 1 배경 이미지 크기: 실제 크기(내 로고는 120 x 120 png)

열 1 배경 이미지 위치: 중앙

그게 다야 이제 클릭 가능하고 반응이 빠른 간단한 배너가 있습니다. 버튼 모듈 설정을 사용하여 배너를 돋보이게 만들 호버 효과를 추가할 수 있습니다.

다른 예를 들어보겠습니다.

예제 #2: 간단한 텍스트 배너

이 다음 배너의 경우 방금 디자인한 첫 번째 배너가 있는 전체 섹션 을 복제 하겠습니다. 이렇게 하면 설정 시간이 절약됩니다.

그런 다음 행 설정으로 이동하여 다음을 업데이트합니다.

콘텐츠 옵션

배경 이미지: [새 이미지 입력]
배경 이미지 위치: 중앙
열 1 배경 그라데이션 색상: rgba(0,0,0,0.41), rgba(12,113,195,0.66)
기둥 기울기 방향: 270deg

다음으로 1열 배경 이미지 탭을 클릭하고 이미지/로고를 삭제합니다.

설정 저장

버튼 모듈 설정으로 이동하여 다음을 업데이트하십시오.

콘텐츠 옵션

버튼 텍스트: [배너 텍스트 입력]
버튼 URL: [배너 URL 입력]

디자인 옵션

버튼 텍스트 크기: 42px
버튼 테두리 너비: 19px
버튼 테두리 색상: rgba(0,0,0,0.17)
버튼 문자 간격: 8px
버튼 글꼴: Montserrat, Bold(B)
버튼 아이콘 추가: 아니오
버튼 호버 테두리 색상: rgba(0,0,0,0.46)
버튼 호버 테두리 반경: 0px
버튼 호버 문자 간격: 12px

보시다시피 이 예제 배너에는 테두리 색상을 변경하고 문자 간격을 늘리는 고유한 호버 효과가 있습니다.

배너를 전체 너비로 만드는 방법

이 배너를 전체 너비로 만들려면 다음과 같이 디자인 탭 에서 섹션 설정을 업데이트하기만 하면 됩니다.

맞춤 패딩: 위쪽 0px, 오른쪽 0px, 아래쪽 0px, 왼쪽 0px

설정 저장

이제 행 설정으로 이동하여 다음과 같이 디자인 옵션을 업데이트합니다.

이 행을 전체 너비로 만들기: 예
사용자 지정 거터 너비 사용: 예
거터 폭: 1

이제 배너가 모든 장치에서 화면의 전체 너비로 늘어납니다.

스티커 배너를 만드는 방법

원하는 경우 이 배너를 쉽게 고정(고정)하고 브라우저 창 상단에 고정할 수 있습니다. 창을 너무 많이 차단하지 않도록 패딩을 줄여 훨씬 짧게 만드는 것이 좋습니다.

높이를 줄이려면 고급 탭의 버튼 모듈 설정 으로 이동하여 기본 요소 상자에 다음 CSS를 추가합니다.

padding: 0px 0px !important;

이제 전체 섹션을 고정하려면 섹션 설정으로 이동하여 기본 요소 상자에서 다음 사용자 정의 CSS 로 고급 탭 옵션을 업데이트하십시오.

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

이제 전체 섹션이 페이지 상단에 고정되고 페이지를 아래로 스크롤할 때 그대로 유지됩니다.

이러한 종류의 배너는 탐색 모음이 없는 방문 페이지의 판촉 항목에 적합합니다. 끈적한 배너가 탐색 모음을 숨기게 되기 때문입니다.

여러 열 레이아웃에 배너 추가

여러 열 행 구조에 배너를 만들 수도 있습니다. 페이지 또는 블로그 하단에 일부 항목을 표시하려는 경우에 유용합니다.

한번 해보자.

1/2 1/2 열 행 구조로 다른 일반 섹션을 추가합니다.

시간을 위해 방금 만든 버튼 모듈을 복사하거나 복제하고 첫 번째 열에 붙여넣거나 끌어다 놓습니다.

배너 배경 디자인을 얻으려면 행 설정에서 열 배경을 사용합니다. 행 설정으로 이동하여 다음을 업데이트하십시오.

콘텐츠 옵션

배경 이미지 탭 아래

1열 배경: [배경 이미지 입력]
1열 배경 이미지 위치: [이미지 위치를 원하는 대로 조정]
열 1 배경 이미지 혼합: 곱하기

배경 그라데이션 탭 아래

열 1 그라디언트 색상: rgba(255,255,255,0), #e02b20
열 1 기울기 방향: 180deg
열 1 시작 위치: 70%
열 1 끝 위치: 0%

마지막 단계는 버튼 모듈 설정 을 업데이트하는 것입니다.

콘텐츠 옵션

버튼 텍스트: 여행 시리즈

디자인 옵션

버튼 텍스트 크기: 32px
버튼 테두리 너비: 2px
버튼 문자 간격: 0px
버튼 호버 테두리 색상: #edf000
버튼 호버 문자 간격: 0px

고급 옵션

기본 요소 상자의 사용자 정의 CSS:

padding: 350px 0px 50px;
width: 100%;

이 사용자 정의 CSS는 텍스트가 배경 그라디언트 바로 뒤의 맨 아래에 있도록 Button 모듈의 패딩을 조정합니다.

다음 열의 배너에 대해 이 프로세스를 자유롭게 복제하고 원하는 대로 콘텐츠를 업데이트하십시오.

결과를 확인하십시오.

참고 : 이 기능을 사용할 때 Equalize Column height를 사용하지 않습니다. 열은 버튼 모듈을 지나 늘어납니다. 배너 높이가 완벽하게 일치하도록 하려면 버튼 모듈의 패딩을 가지고 놀아야 제대로 맞을 수 있습니다.

반응?

예. 버튼은 Divi의 열 구조 내에서 구축되기 때문에 버튼은 모든 장치에서 잘 반응합니다. 가로 배너의 경우 모바일에서 로고와 텍스트가 겹칠 수 있으므로 주의하여 배치하겠습니다.

다음은 더 작은 화면 크기로 축소할 때 표시되는 예입니다.

브라우저 호환성

현재 background-blend-mode CSS 속성은 Internet Explorer 또는 Edge에서 지원되지 않으며 Safari에는 제한된 혼합 옵션이 있습니다. 그러나 내 경험상 대부분의 경우 폴백은 상당하지 않습니다.

마지막 생각들

반응형 배너를 만드는 이 작지만 유용한 디자인 트릭을 즐겼기를 바랍니다. 관련된 제한 사항을 이해하고 단순하게 유지하는 한 꽤 멋진 배너를 만들 수 있습니다. 또한 이 솔루션은 쉽게 구현되고 빠르게 사용자 정의할 수 있습니다.

그리고 이를 위한 다른 유용한 응용 프로그램이 있을 것이라고 확신합니다. 의견에서 귀하의 아이디어를 듣기를 기대합니다.

건배!