Divi에서 고유한 버튼 레이아웃을 만들기 위해 버튼을 절대적으로 배치하는 방법

Divi의 내장 위치 옵션은 버튼을 포함한 모든 Divi 요소의 정확한 위치를 지정하기 위한 편리한 디자인 도구입니다. 대부분의 경우 문서(또는 페이지)의 흐름을 유지하는 버튼의 기본 정적 위치에 의존합니다. 그러나 버튼을 절대적으로 배치하는 방법을 안다면 Divi 콘텐츠를 위한 독특하고 실용적인 버튼 레이아웃을 만들 수 있습니다.

이 튜토리얼에서는 Divi의 Blurb 모듈을 고유하게 강조할 4가지 다른 버튼 레이아웃을 만드는 방법을 보여줍니다. 이것은 웹사이트에서 광고 문구를 사용할 때 유용할 것입니다.

시작하자.

엿보기

이 튜토리얼에서 구축할 4개의 버튼 레이아웃을 간단히 살펴보세요.

무료로 Divi 버튼 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 JSON 파일을 Divi Builder로 끌어다 놓기만 하면 됩니다.

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

시작하는 데 필요한 것

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

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

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

버튼 레이아웃 만들기 #1: 이중 하단 버튼

네 개의 버튼 레이아웃 중 첫 번째로, 블러브 모듈 아래에 이중 하단 버튼을 만들 것입니다. 이는 2개의 CTA가 필요한 콘텐츠(예: 서비스)를 제공하는 데 적합한 옵션입니다. 또한, 동일한 높이의 열 하단에 단추를 고정할 수 있는 좋은 방법입니다.

시작하려면 섹션에 2열(0ne half 1/2) 행을 추가하십시오.

행 설정

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 2
• 열 높이 균등화: 예
• 폭: 100%
• 여백: 50px 하단
• 패딩: 0px 상단, 0px 하단

열 1 설정

• 배경색: #2e3858
• 패딩: 50px 하단

이 하단 패딩은 절대 위치 버튼을 추가할 때 필요한 공간을 만듭니다.

Blurb 모듈 디자인

다음으로 1열에 블러브 모듈을 추가합니다.

그런 다음 다음과 같이 이미지를 blurb 모듈에 업로드합니다.

디자인 설정으로 이동하여 다음을 업데이트합니다.

• 이미지/아이콘 정렬: 왼쪽
• 제목 글꼴: PT Sans
• 제목 글꼴 두께: 굵게
• 제목 텍스트 색상: #ffffff
• 제목 텍스트 크기: 38px
• 제목 글자 간격: 2px
• 본문 색상: #ffffff
• 이미지 너비: 40%
• 콘텐츠 너비: 100%
• 폭: 100%
• 패딩: 50px, 상단, 50px 하단, 30px 왼쪽, 30px 오른쪽

이중 하단 버튼 추가

버튼 #1 디자인

광고 문구 모듈 아래에 새 버튼 모듈을 추가합니다.

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

• 버튼 텍스트 크기: 16px
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #2dc3a3
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 0px
• 버튼 문자 간격: 2px
• 버튼 글꼴: PT Sans
• 버튼 글꼴 두께: 굵게
• 버튼 글꼴 스타일: TT
• 여백: 0px 하단
• 패딩: 위쪽 1em, 아래쪽 1em, 왼쪽 1.5em, 오른쪽 2.5em

버튼 #1 절대 위치

버튼을 열의 왼쪽 하단에 절대적으로 배치하려면 다음을 업데이트하십시오.

• 위치: 절대
• 위치: 왼쪽 하단

Divi는 내장형 클릭 가능한 위치 그리드를 사용하여 이를 쉽게 만듭니다. 버튼이 열의 맨 아래에 평평하게 놓이도록 하기 때문에 오프셋 값이 필요하지 않습니다.

버튼 #2 디자인 및 위치

버튼 #2를 생성하려면 이전 버튼 모듈을 복제하십시오.

복제본은 이전 버튼 바로 위에 쌓이게 되므로 비주얼 빌더를 사용하는 경우 아무 일도 일어나지 않은 것처럼 보일 수 있습니다. 버튼 모듈의 설정을 열고 다음을 업데이트하려면 클릭하십시오.

• 배경색: #df4570

• 위치 위치: 오른쪽 하단

이제 현재 비어 있는 열 2를 지우고 열 1을 복제하여 오른쪽 열에서도 정확한 복제 디자인을 얻습니다.

버튼 레이아웃 #1 결과

결과를 확인하십시오. 오른쪽 열의 콘텐츠는 열을 페이지 아래로 더 밀어내지만 버튼이 절대 위치에 있기 때문에 멋진 대칭 디자인을 위해 아래쪽을 계속 감싸고 있습니다.

버튼 레이아웃 만들기 #2: 3개의 측면 버튼

다음 버튼 레이아웃을 위해 단일 열의 블러브 모듈 오른쪽에 세 개의 버튼을 배치합니다.

이 다음 버튼 레이아웃 디자인을 바로 시작하려면 이전 행을 복제하세요.

블러브 설정

다음과 같이 광고 설정을 업데이트합니다.

• 배경색: #df4570
• 이미지 너비: 60%
• 너비: 56%(데스크톱 및 태블릿), 100%(휴대전화)

이렇게 하면 3버튼 레이아웃을 추가하기 위해 안내문 오른쪽에 필요한 공간이 생성됩니다.

포지셔닝 버튼 #1

버튼 #1의 위치를 ​​지정하려면 왼쪽 하단 모서리에 있는 녹색 버튼에 대한 버튼 설정을 열고 다음을 업데이트합니다.

• 위치: 절대(데스크톱 및 태블릿), 상대(휴대폰)
• 위치: 오른쪽 상단
• 수직 오프셋: 20%(데스크톱 및 태블릿), 0%(휴대폰)
• 수평 오프셋: 5%(데스크톱 및 태블릿), 0%(휴대폰)

포지셔닝 버튼 #2

버튼 #2를 배치하려면 방금 배치한 버튼을 복제하십시오. 오른쪽 하단에 있는 빨간색 버튼은 필요하지 않으므로 삭제할 수 있습니다.

그런 다음 복제 버튼에 대한 설정을 열고 다음을 업데이트합니다.

• 배경색: #df4570

그런 다음 버튼을 약간 아래로 이동하면 수직 오프셋이 증가합니다.

• 수직 오프셋: 35%

포지셔닝 버튼 #3

마지막으로 이전 버튼을 복제하고 다음을 업데이트하여 프로세스를 한 번 더 반복합니다.

• 배경색: #3599e5
• 수직 오프셋: 50%

버튼 레이아웃 #2 결과

3버튼 레이아웃의 최종 결과를 확인하세요.

버튼 레이아웃 만들기 #3: 흩어져 있고 크기가 조정된 버튼

이 다음 레이아웃에서는 버튼을 좀 더 산발적으로 배치한 다음 변형 배율을 사용하여 몇 개의 버튼 크기를 조정할 것입니다.

시작하려면 3버튼 레이아웃이 포함된 이전 행을 복제하십시오.

블러브 설정

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

• 폭: 60%

• 배경색: 투명
• 폭: 60%
• 모듈 정렬: 중앙

• 텍스트 정렬: 가운데
• 모듈 정렬: 중앙

• 테두리 너비: 2px
• 테두리 색상: rgba(255,255,255,0.15)

• 텍스트 텍스트 크기: 20px

• 여백: 50px 상단

버튼 #1 포지셔닝

• 수직 오프셋: 8%
• 수평 오프셋: -7%

버튼 #2 포지셔닝

• 위치 위치: 오른쪽 상단
• 수직 오프셋: 34%
• 수평 오프셋: -10%

• 변환 스케일: 80%

버튼 #3 포지셔닝

• 위치 위치: 오른쪽 하단
• 수직 오프셋: -3%
• 수평 오프셋: 5%

• 변환 규모: 138%

행 설정

• 거터 폭: 4
• 너비: 80%(데스크톱)

버튼 레이아웃 #3 결과

최종 결과를 확인하세요.

버튼 레이아웃 만들기 #4: 풀탭 버튼

이 마지막 버튼 레이아웃의 경우 광고 문구의 오른쪽 상단에 풀 탭을 만들 것입니다.

디자인을 바로 시작하려면 버튼 레이아웃 #2의 행을 복제하십시오.

열 설정

다음으로 열 #1의 배경 설정을 다음과 같이 업데이트합니다.

• 배경색(데스크톱): 없음(기본값)
• 배경색(전화): #2e3858

고급 탭에서 표시 옵션을 업데이트하여 휴대폰 디스플레이에서 오버플로가 숨겨지도록 합니다.

• 수평 오버플로(전화): 숨김
• 수직 오버플로(전화): 숨김

위치 풀탭 버튼 #1

이제 열에 있는 세 개의 버튼을 풀탭 버튼으로 사용할 수 있습니다. 상단 버튼에 대한 설정을 열고 다음을 업데이트하십시오.

• 수직 오프셋: 0px
• 수평 오프셋: 0px

탭에 버튼을 사용할 것이기 때문에 오른쪽 아이콘을 위한 공간을 만들어 블러 모듈 뒤에서 튀어나올 때마다 중앙에 보이도록 해야 합니다. 다음과 같이 버튼 패딩을 업데이트하십시오.

• 패딩: 왼쪽 2em, 오른쪽 3em

그런 다음 After 요소에 다음 사용자 정의 CSS를 추가합니다.

padding-left: 10px;

그런 다음 전화기에서 다음과 같이 수평 오프셋을 업데이트합니다.

• 수평 오프셋(전화): -134px

이렇게 하면 전화 디스플레이의 열 외부에 있는 버튼의 왼쪽이 숨겨져 전체 버튼이 호버/클릭에 표시됩니다.

풀탭 버튼 위치 지정 #2

두 번째 풀아웃 버튼을 배치하려면 이전 버튼을 복제하고 복제본의 배경색을 업데이트합니다.

• 배경색: #df4570

그런 다음 다음과 같이 위치를 업데이트합니다.

• 수직 오프셋: 63px

그런 다음 전화기 디스플레이에 대해 다음 위치 옵션을 업데이트합니다.

• 직위(전화): 상대
• 수직 오프셋(전화): 0%

포지셔닝 풀탭 버튼 #3

마지막으로 세 번째 풀탭 버튼을 배치하려면 이전 버튼 모듈을 복제합니다. 그런 다음 복제 버튼 모듈에 대한 설정을 열고 다음을 업데이트합니다.

• 배경색: #3599e5
• 수직 오프셋: 126px

세 번째 버튼이 배치되면 Cmd(또는 Ctrl)를 누른 상태에서 각 버튼 모듈을 클릭하여 Divi의 다중 선택 기능을 사용하십시오.

그런 다음 버튼 모듈 중 하나의 설정을 열고 마우스 오버 시 다음 변환 번역을 추가합니다.

• X축 변환 변환(마우스 오버): 68%

이렇게 하면 마우스를 가져가면 풀탭 기능이 있는 세 개의 버튼이 모두 오른쪽 68%로 이동하여 업데이트됩니다.

Blurb 모듈 포지셔닝

이 버튼 레이아웃은 3개의 버튼을 부분적으로 숨기기 위해 블러브 모듈이 필요합니다. 따라서 우리는 광고 문구에 100% 너비를 지정한 다음 오른쪽 여백을 사용하여 버튼 탭의 필요한 부분을 노출합니다. 그런 다음 우리가 해야 할 일은 광고 문구가 버튼 위에 위치하도록 높은 Z 인덱스를 제공하는 것입니다.

블러브 모듈 설정을 열고 다음을 업데이트하십시오.

• 너비: 자동
• 여백: 50px 오른쪽
• 위치: 상대
• Z 인덱스: 11

그런 다음 배경색을 업데이트합니다.

• 배경색: #2e3858

행 설정

광고 문구 및 풀 탭 버튼이 완료된 후 행 설정을 열고 너비를 업데이트하여 해당 탭에 이동할 공간을 제공합니다.

• 폭: 80%

열 2를 삭제한 다음 열 1을 복제하여 각각 동일한 디자인을 갖도록 합니다.

그런 다음 열 1에 대한 설정을 열고 다음 Z 인덱스를 지정합니다.

• Z 인덱스: 12

이렇게 하면 1열의 버튼이 마우스를 가져갈 때 2열의 콘텐츠 뒤에 숨겨지지 않습니다.

원하는 경우 필요에 맞게 각 버튼의 아이콘을 업데이트할 수 있습니다.

버튼 레이아웃 #4 결과

풀탭 버튼 레이아웃의 최종 결과를 확인하십시오.

최종 결과

마지막 생각들

위치 지정 버튼은 Divi에서 무한한 버튼 레이아웃을 위한 문을 절대적으로 엽니다. 이 튜토리얼이 Divi에서 절대 위치를 가장 잘 사용하는 방법을 이해하는 데 도움이 되기를 바랍니다. 변형 옵션 및 Z 인덱스와 같은 기타 유용한 내장 기능은 디자인을 절대적으로 배치된 버튼으로 만듭니다.

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

건배!