Divi로 잠긴 콘텐츠 코너 팝업을 만드는 방법

매주 다음 프로젝트에 사용할 수 있는 새로운 무료 Divi 레이아웃 팩을 제공합니다. 레이아웃 팩 중 하나의 경우 웹사이트를 한 단계 업그레이드하는 데 도움이 되는 사용 사례도 공유합니다.

이번 주에는 진행 중인 Divi 디자인 이니셔티브의 일환으로 Divi와 리조트 레이아웃 팩을 사용하여 잠긴 콘텐츠 코너 팝업을 만드는 방법을 보여 드리겠습니다. 잠긴 콘텐츠 선택 양식의 개념은 간단합니다. 사람들은 이메일 주소를 입력해야 하며 입력하는 즉시 숨겨진 내용이 드러납니다. 이 숨겨진 콘텐츠를 사용하여 예를 들어 할인 코드를 공유할 수 있습니다. 이 모든 일이 일어나도록 하기 위해 우리는 Bloom 플러그인을 사용하고 팝업으로 스타일을 지정할 텍스트 모듈에 잠긴 콘텐츠 선택 양식 단축 코드를 추가할 것입니다. 텍스트 모듈은 또한 팝업인 것처럼 텍스트 모듈이 나타나도록 하기 위해 애니메이션 지연이 있는 애니메이션을 포함합니다.

가자!

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.

데스크탑

이동하는

Bloom 플러그인 설치

블룸 다운로드

가장 먼저 해야 할 일은 Bloom 플러그인을 다운로드하는 것입니다. 이미 우아한 테마 회원이라면 회원 영역으로 이동하여 플러그인을 찾을 수 있습니다. 거기에서 압축 파일을 다운로드할 수 있습니다. 아직 엘레강트 테마 회원이 아니라면 먼저 회원권을 구매해야 합니다.

Bloom 업로드 및 설치

Bloom을 다운로드한 후에는 플러그인 > 새로 추가 로 이동하고 페이지 상단의 '플러그인 업로드'를 클릭하여 WordPress 웹사이트에 업로드할 수 있습니다.

그런 다음 압축 파일을 업로드하고 '지금 설치'를 클릭합니다.

플러그인도 업로드되면 활성화하는 것을 잊지 마십시오.

Bloom Optin 양식 설정

새 잠긴 콘텐츠 양식 추가

이제 이 게시물의 뒷부분에서 Divi 디자인에 사용할 잠긴 콘텐츠 양식 만들기를 시작할 수 있습니다! WordPress 대시보드 > Bloom > Optin Forms로 이동하여 새 Optin 양식 을 만듭니다.

계속해서 '잠긴 콘텐츠' 옵션 유형을 선택하고 설정 설정을 진행합니다.

설정 설정

설정 설정에 들어가면 새 선택 양식에 이름을 지정해야 합니다. 또한 원하는 이메일 제공업체를 선택하고 인증 세부 정보를 입력해야 합니다.

디자인 설정

다음 단계는 양식을 디자인하는 것입니다. 게시물의 뒷부분에서 우리는 스타일을 지정할 텍스트 모듈에서 optin 양식 단축 코드를 사용할 것이므로 optin 양식 자체에 너무 많은 설정을 적용할 필요가 없습니다. 선택 제목과 선택 메시지 내용 상자를 비워 두었는지 확인하십시오. 이미지 방향도 변경합니다.

• 이미지 방향: 이미지 없음

페이지를 아래로 스크롤하여 옵틴 스타일 및 양식 설정을 추가로 변경합니다.

• 배경색: #ffffff
• 양식 방향: 하단에 양식

양식 스타일 설정도 변경하고 있습니다.

• 양식 필드 방향: 누적 양식 필드
• 양식 배경색: #f4f4f4
• 버튼 색상: #ffffff
• 버튼 텍스트 색상: 다크
• 양식 가장자리 스타일 선택: 두 번째 옵션

Divi로 디자인 만들기

새 행 추가

열 구조

이제 Divi Builder로 전환할 수 있습니다! Resort Layout Pack의 홈페이지를 사용하여 새 페이지를 만드십시오. 레이아웃이 업로드되면 다음 열 구조를 사용하여 두 번째 섹션 상단에 새 행을 추가하여 계속 진행합니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 설정을 약간 변경합니다.

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

간격

다음 간격 설정으로 이동하여 행의 상단 및 하단 패딩에 '0px'를 추가합니다. 이렇게 하면 추가한 새 행이 차지하는 공간이 제한됩니다.

• 상단 패딩: 0px
• 하단 패딩: 0px

텍스트 모듈 추가

H3 콘텐츠 추가

잠긴 콘텐츠 코너 팝업을 생성하는 데 필요한 유일한 모듈은 텍스트 모듈입니다. 콘텐츠 상자에 원하는 H3 제목을 추가합니다.

잠긴 콘텐츠 Optin 양식 단축 코드 추가

그런 다음 Bloom 플러그인으로 돌아가서 이 자습서의 이전 부분에서 만든 옵틴 양식의 단축 코드를 복사합니다.

사람들이 선택 양식을 작성한 후 표시할 콘텐츠를 추가하세요. 아래 예에서 쿠폰 코드를 공유하고 있음을 알 수 있지만 원하는 모든 종류의 정보를 공유할 수 있습니다.

배경색

다음 모듈의 배경 설정으로 이동하여 완전히 흰색 배경색을 추가합니다.

• 배경색: #ffffff

텍스트 설정

디자인 탭으로 이동하여 다음 텍스트 설정을 변경합니다.

• 텍스트 글꼴: Open Sans
• 텍스트 색상: #0f87ff
• 텍스트 크기: 15px

H3 텍스트 설정

H3 사본에 사용되는 글꼴도 변경하십시오.

• 제목 3 글꼴: Gilda Display

간격

그리고 모듈에 모양을 주기 위해 사용자 지정 여백 및 패딩 값을 추가할 것입니다. 또한 방문자가 사용하는 화면 크기에 관계없이 디자인이 일치하도록 이 모든 값을 수정하고 있습니다.

• 최고 여백: -17vw
• 왼쪽 여백: 65vw(데스크톱), 37vw(태블릿), 3vw(전화)
• 오른쪽 여백: 0px
• 상단 패딩: 5vw(데스크톱), 11vw(태블릿), 13vw(전화)
• 하단 패딩: 5vw, 11vw(태블릿), 13vw(전화)
• 왼쪽 패딩: 6vw(데스크톱), 11vw(태블릿), 16vw(전화)
• 오른쪽 패딩: 6vw(데스크톱), 11vw(태블릿), 16vw(전화)

국경

계속해서 텍스트 모듈의 테두리 설정으로 이동하여 오른쪽 하단을 제외한 각 모서리에 '500vw'를 추가합니다.

박스 섀도우

텍스트 모듈이 팝업되도록 옆에 상자 그림자를 추가합니다.

• 상자 그림자 흐림 강도: 150px
• 그림자 색상: rgba(0,0,0,0.3)

생기

마지막으로 팝업 효과를 만들기 위해 오른쪽에서 왼쪽으로 움직이는 애니메이션도 추가합니다.

• 애니메이션 반복: 한 번
• 애니메이션 방향: 왼쪽
• 애니메이션 시간: 500ms
• 애니메이션 지연: 1000ms
• 애니메이션 강도: 16%

복제 행

첫 번째 잠긴 콘텐츠 코너 팝업 생성이 완료되면 전체 행을 복제할 수 있습니다.

여기에 중복 행을 배치하십시오.

섹션 하단 패딩 제거

행을 배치한 섹션의 아래쪽 패딩을 제거합니다.

• 하단 패딩: 0px

텍스트 모듈 간격 설정 변경

그런 다음 텍스트 모듈의 설정을 열고 사용자 정의 여백 값을 변경합니다.

• 왼쪽 여백: 0vw
• 오른쪽 여백: 65vw(데스크톱), 37vw(태블릿), 3vw(전화)

텍스트 모듈 둥근 모서리 변경

둥근 모서리도 변경해야 합니다. 왼쪽 하단을 제외한 각 모서리에 '500vw'를 사용하고 있습니다.

텍스트 모듈 애니메이션 설정 변경

마지막으로 애니메이션 방향을 오른쪽으로 변경하면 완료됩니다!

• 애니메이션 방향: 오른쪽

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다!

데스크탑

이동하는

마지막 생각들

이 게시물에서는 Divi, Bloom 플러그인 및 Resort Layout Pack을 사용하여 잠긴 콘텐츠 코너 팝업을 만드는 방법을 보여주었습니다. 이 기술을 사용하면 양식을 작성한 후 표시되는 쿠폰 코드를 제공하여 사람들이 이메일 목록의 일부가 되도록 설득할 수 있습니다. 이 튜토리얼은 진행 중인 Divi 디자인 이니셔티브의 일부로 매주 디자인 도구 상자에 추가 기능을 추가하려고 합니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!