Divi의 새로운 배경 옵션으로 스타일 지정 버튼(6가지 디자인 포함)

Divi의 새로운 배경 옵션 인터페이스를 활용하지 않았다면 놓치고 있는 것입니다. 배경 디자인 가능성은 놀랍습니다. 그러나 버튼에 대해 동일한 강력한 디자인 옵션을 사용하는 것이 굉장하지 않을까요? 대답이 '예'라면 이 게시물을 좋아할 것 같습니다.

오늘은 스타일 버튼에 동일한 강력한 배경 디자인 기능을 가져오는 방법을 보여 드리겠습니다. 이 디자인 트릭은 버튼 모듈 뒤에 행 및 열 배경을 레이어하여 디자인 기능의 3개 레이어를 제공합니다. 이런 종류의 힘으로 상황이 위험해질 수 있습니다. 침착함을 유지하고 처음에는 천천히 가는 것이 가장 좋습니다.

가자.

엿보기

다음은 이 게시물에서 다루는 버튼 디자인의 예입니다.

Divi의 새로운 배경 옵션으로 스타일 지정 버튼(6가지 디자인 포함)

YouTube 채널 구독

설정

시각적 건물을 사용하여 한 열 행이 있는 일반 섹션을 추가합니다.

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

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

콘텐츠 옵션

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

디자인 옵션

버튼 정렬: 중앙
텍스트 색상: 라이트
버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 크기: 48px

고급 옵션

열 너비를 채우려면 100% 너비가 필요합니다. 이렇게 하려면 기본 요소 상자에 다음 사용자 지정 CSS를 입력합니다.

Width: 100%;

설정 저장

버튼 테두리와 텍스트가 흰색이기 때문에 지금은 페이지에서 아무 것도 볼 수 없습니다. 버튼 모듈 설정을 사용하여 버튼의 배경색을 스타일링하는 대신 고급 배경 옵션을 사용하여 버튼 뒤에 있는 행/열의 배경색을 사용자 정의합니다. 버튼에 대한 보다 구체적인 디자인을 시작하면 버튼 모듈 설정을 다시 살펴보겠습니다. 그러나 지금은 행 설정을 마치도록 하겠습니다.

새 버튼이 있는 행 설정으로 이동하여 다음을 업데이트하십시오.

콘텐츠 옵션

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

이제 기본 그라디언트 색상이 흰색 버튼 뒤에 나타나는 것을 볼 수 있습니다.

열은 이제 버튼 뒤에 잘 맞고 있지만 버튼의 너비를 줄여야 합니다. 이를 위해 행 크기 설정을 사용할 것입니다. 행에 대한 사용자 정의 너비를 설정하여 버튼의 너비도 설정합니다.

디자인 옵션

디자인 옵션에서 다음을 조정하여 새 버튼에 맞게 행의 크기를 조정할 것입니다.

사용자 정의 너비 사용: 예
사용자 정의 너비: 500px(버튼의 최대 너비를 500px로 설정)
맞춤 패딩: 위쪽 0px, 오른쪽 0px, 아래쪽 0px, 왼쪽 0px

고급 옵션

행과 열의 테두리 반경을 버튼에 설정한 것과 일치시켜야 모두 일치합니다. 이렇게 하려면 기본 요소 상자에 다음 사용자 정의 CSS를 입력합니다.

border-radius: 10px;

열 기본 요소 상자에 동일한 CSS를 입력합니다.

border-radius: 10px;

설정 저장

이제 행 설정이 사용자 정의 너비와 패딩을 갖도록 업데이트되었으므로 두 가지 작업이 완료되었습니다. 먼저 버튼의 사용자 정의 너비를 성공적으로 설정했습니다. 둘째, 이제 버튼의 스타일을 지정하는 데 사용할 수 있는 또 다른 배경 옵션 레이어가 있습니다.

나중에 스타일링에 사용할 수 있는 총 3개의 배경 레이어(버튼, 열, 행)입니다.

다음은 버튼이 현재 어떻게 만들어졌는지 보여줍니다.

꽤 멋지죠?

여기까지가 기본 설정입니다. 이제 버튼을 위한 멋진 디자인을 만드는 재미있는 부분을 할 차례입니다.

멋진 버튼 디자인 만들기

#1 비디오 배경 버튼

이 버튼을 만들려면 3개의 레이어를 모두 사용합니다. 행 배경은 비디오, 열 배경은 그라디언트, 버튼 배경은 약간 파란색 오버레이입니다.

행 설정의 경우 다음 콘텐츠 옵션을 업데이트합니다.

배경 동영상: [동영상 업로드]
열 1 배경 그라데이션 색상: rgba(12,113,195,0.41), rgba(131,0,233,0.18)

설정 저장

버튼 모듈 설정의 경우 다음을 업데이트하십시오.

콘텐츠 옵션

버튼 텍스트: "확인하세요"

디자인 옵션

버튼 배경색: rgba(12,113,195,0.25)
버튼 테두리 색상: #0c71c3

설정 저장

이제 우리에게 남은 유일한 문제는 비디오 배경의 경계 반경입니다. 버튼과 일치하는 테두리 반경을 비디오에 제공하기 위해 몇 가지 사용자 정의 CSS를 추가해야 합니다. 이 추가 코드는 비디오 배경 버튼에만 필요합니다.

사용자 정의 CSS를 추가하려면 Visual Builder에서 페이지 설정으로 이동하여 고급 탭을 클릭하십시오. 그런 다음 사용자 정의 CSS 입력 상자를 다음 CSS로 업데이트합니다.

.et_pb_section_video_bg {

border-radius: 10px;

}

설정 저장

팁 : 또 다른 멋진 디자인 옵션은 마우스를 가져가면 비디오가 표시되도록 하는 것입니다. 버튼 모듈에 단색 배경색을 지정하고 마우스를 가져갈 때 투명하게 변경하기만 하면 됩니다.

그게 다야! 이제 비디오 배경이 있는 버튼이 생겼습니다.

#2 체크무늬 버튼

체크 무늬 버튼은 배경 색상 그라디언트의 두 레이어(행과 열)를 사용해야 합니다.

이 버튼을 만들려면 2개의 레이어를 사용합니다. 첫 번째 그라디언트 수준에 대한 행 배경과 그라디언트 색상의 마지막 레이어에 대한 열 배경입니다.

행 설정의 경우 다음 콘텐츠 옵션을 업데이트합니다.

배경 그라데이션 색상: #8300e9, #0c71c3
기울기 방향: 270deg
시작 위치: 50%
최종 위치: 0%
Column1 배경 그라데이션 색상: rgba(224,11,0,0.39), rgba(255,255,255,0)
기울기 방향: 180deg
시작 위치: 50%
최종 위치: 0%

설정 저장

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

콘텐츠 옵션

버튼 텍스트: "구독"

디자인 옵션

버튼 테두리 너비: 0px
버튼 문자 간격: 10px
버튼 글꼴: 기본값, 굵게(B), 기울임꼴(I)
버튼 호버 문자 간격: 10px

그게 다야 다음은 최종 결과입니다.

이제 버튼에 체크 무늬 효과를 추가하는 방법을 알게 되었습니다.

#3 방사형 그라데이션 버튼

이 버튼을 만들려면 배경색 그라디언트의 2개 레이어(행과 열)를 사용합니다.

행 설정의 경우 다음 콘텐츠 옵션을 업데이트합니다.

배경 그라데이션 색상: #8300e9, #0c71c3
그라디언트 유형: 방사형
방사형 방향: 중심
시작 위치: 50%
최종 위치: 100%
Column1 배경 그라데이션 색상: rgba(224,11,0,0.39), rgba(255,255,255,0)
그라디언트 유형: 방사형
방사형 방향: 중심
시작 위치: 50%
최종 위치: 100%

설정 저장

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

콘텐츠 옵션

버튼 텍스트: "저에게 연락하세요"

디자인 옵션

버튼 테두리 너비: 0px
버튼 글꼴: Crafty Girls

버튼 아이콘: [하트 아이콘 선택]
버튼에 대한 호버 시 아이콘만 표시: 아니오

고급 옵션

마지막 터치를 위해 버튼에 슬라이드 그림자를 추가해 보겠습니다. 이전 코드 외에도 기본 요소 상자에 다음 사용자 정의 CSS를 입력합니다.

box-shadow: 0px 5px 10px 3px #ccc;

그게 다야! 최종 결과는 다음과 같습니다.

#4 불즈아이 버튼

이 버튼을 만들려면 배경색 그라디언트의 2개 레이어(행과 열)를 사용합니다. 또한 버튼 모듈에 사용자 정의 CSS를 추가하여 하단 테두리 팝업 효과를 만들 것입니다.

행 설정의 경우 다음 콘텐츠 옵션을 업데이트합니다.

배경 그라데이션 색상: #023500, #008c02
그라디언트 유형: 방사형
방사형 방향: 중심
시작 위치: 19%
최종 위치: 0%
Column1 배경 그라데이션 색상: rgba(0,206,72,0.43), rgba(255,255,255,0)
그라디언트 유형: 방사형
방사형 방향: 중심
시작 위치: 32%
최종 위치: 0%

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

콘텐츠 옵션

버튼 텍스트: "구매"

디자인 옵션

버튼 텍스트 크기: 65px
버튼 테두리 너비: 0px
버튼 글꼴: Roboto, 굵게(B), 대문자(TT)

고급 옵션

이제 마지막 터치입니다. 기본 요소 입력 상자의 기존 코드에 다음 사용자 지정 CSS를 추가합니다.

box-shadow: 0px 5px 0px 0px #01771f;

#5 이미지 버튼

이 버튼을 만들려면 배경 이미지의 행, 그라디언트 배경의 열, 반투명 파란색 오버레이의 버튼 배경의 3개 레이어를 모두 사용합니다.

행 설정의 경우 다음 콘텐츠 옵션을 업데이트합니다.

배경 이미지 탭 아래

배경 이미지: [이미지 업로드]
배경 이미지 크기: 표지
배경 이미지 위치: 중앙
배경 이미지 반복: 반복 없음
배경 이미지 혼합: 곱하기

배경 그라데이션 탭에서

배경 그라데이션 색상: rgba(12,113,195,0.33), #edf000
그라디언트 유형: 선형
기울기 방향: 63deg
시작 위치: 50%
최종 위치: 100%

이제 열 1 배경 옵션 까지 아래로 스크롤하고 그라디언트 탭을 선택합니다.

열 1 배경 그라데이션 색상: rgba(236,239,31,0.66), rgba(0,0,0,0.49)
기둥 그라데이션 유형: 선형
기둥 기울기 방향: 139deg
컬럼 시작 위치: 12%
열 끝 위치: 0%

설정 저장

이는 두 번째 수준의 배경 디자인을 처리합니다. 하나 더 남았습니다.

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

콘텐츠 옵션

버튼 텍스트: "티켓 받기"

디자인 옵션

버튼 배경색: rgba(12,113,195,0.16)
버튼 테두리 색상: #efef4f
버튼 글꼴: Lato
버튼 아이콘: [티켓 아이콘 선택]
버튼에 대한 호버 시 아이콘만 표시: 아니오

버튼 호버 텍스트 색상: #023b7c
버튼 호버 배경색: #023b7c

그게 다야!. 이미지 버튼을 확인하세요.

#6 세로 버튼

이 마지막 버튼을 만들기 위해 배경 디자인의 한 레이어만 사용할 것입니다. 배경 이미지와 배경 색상의 이미지 블렌드를 사용하여 독특한 모양을 만들 것입니다.

행 설정의 경우 열 1 배경 옵션 까지 아래로 스크롤하고 다음을 업데이트합니다.

열 배경 이미지: [세로 이미지 업로드]
열 배경 이미지 크기: 맞춤(이렇게 하면 세로가 항상 버튼 안에 맞도록 합니다)
열 배경 이미지 위치: 중앙 왼쪽(이것은 버튼의 왼쪽에 초상화를 정렬합니다)
열 배경 이미지 반복: 반복 없음
열 배경 이미지 블렌드: 광도(이것은 세로와 오렌지 색상의 멋진 혼합을 만듭니다)

현재 그라디언트 색상이 설정되어 있는 경우 삭제해야 합니다. 그렇지 않은 경우 주황색 배경을 혼합할 수 있습니다. 그라디언트 탭을 클릭하고 색상 선택 상자 위로 마우스를 가져간 다음 오른쪽 상단에 팝업되는 휴지통 아이콘을 클릭하기만 하면 됩니다.

이제 버튼에서 주황색 블렌드를 볼 수 있습니다.

설정 저장

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

콘텐츠 옵션

버튼 텍스트: "Let's Talk"

디자인 옵션

버튼 정렬: 오른쪽
버튼 테두리 색상: #ff7b23
버튼 문자 간격: 3px
버튼 글꼴: Happy Monkey
버튼 아이콘 [채팅 아이콘 추가]
버튼에 대한 호버 시 아이콘만 표시: 아니오
버튼 호버 문자 간격: 3px

모두 완료되었습니다! 블로그 연락처 버튼을 위한 이 디자인이 마음에 듭니다. 개인적인 느낌을 더해주는 것 같아요.

다른 열 구조에 버튼 디자인하기

지금까지 단일 열 행을 사용하여 버튼의 배경으로 사용했습니다. 이것은 우리에게 3개의 배경 디자인 레이어를 허용합니다. 그러나 다른 열 구조에 단추를 포함하려면 그렇게 할 수 있습니다. 행을 배경 레이어로 잃게 됩니다.

예를 들어 왼쪽에 버튼이 있고 오른쪽에 일부 텍스트가 있는 1/2 1/2 열 행을 추가한다고 가정해 보겠습니다. 다음은 수행할 작업입니다.

새 일반 섹션으로 시작하고 1/2 1/2 열 행 구조를 선택합니다. 그런 다음 왼쪽 열에 버튼 모듈 을 추가합니다.

버튼 모듈 설정 에서 고급 탭 아래의 기본 요소 입력 상자에 다음 CSS를 삽입해야 합니다.

Width: 100%;

나중에 버튼 모듈의 나머지 부분을 사용자 지정할 수 있습니다.

그런 다음 행 설정 으로 이동하여 열 1 배경 옵션 까지 아래로 스크롤하고 원하는 방식으로 배경 설정을 업데이트합니다.

그런 다음 디자인 탭으로 이동하여 다음을 업데이트합니다.

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

설정 저장

이제 디자인에 열 1 배경 옵션을 사용할 수 있는 버튼이 왼쪽 열에 있습니다. 뒤로 돌아가서 원하는 대로 버튼 스타일을 업데이트하고 오른쪽 열에 텍스트를 추가하면 완료됩니다!

반응?

예. 버튼은 Divi의 열 구조 내에서 구축되기 때문에 버튼은 모든 장치에서 잘 반응합니다. 특정 버튼 요소가 다른 장치에 맞게 조정되는 방식을 조정하려면 버튼 모듈 설정을 다시 방문해야 할 수 있습니다.

크로스 브라우저 지원

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

다음은 IE에서 버튼의 모양입니다.

IE에 전념하고 있다면 IE와 다른 브라우저 모두에서 멋지게 보이는 행복한 매체를 찾기 위해 테스트하는 것이 좋습니다.

마지막 생각들

이 튜토리얼은 개인적으로 매우 획기적인 것임을 인정해야 합니다. 과거에는 버튼의 스타일을 창의적으로 지정하려면 자식 테마에 많은 클래스와 CSS를 추가해야 했습니다. 하지만 이제 Divi의 배경 옵션을 사용할 수 있게 되면서 생활이 훨씬 쉬워졌습니다. 이 디자인 트릭을 사용하여 버튼을 한 단계 업그레이드할 수 있기를 바랍니다.

의견을 기다리십시오.

건배