Divi로 스크롤 가능한 텍스트 미리보기 태블릿을 만드는 방법

게시 됨: 2017-08-08

오늘 튜토리얼에서는 웹사이트에서 스크롤 가능한 텍스트 미리보기 태블릿을 만드는 방법을 보여 드리겠습니다. 텍스트 미리보기는 방문자가 태블릿 내에서 스크롤하여 공유되고 있는 몇 개의 챕터를 읽을 수 있는 태블릿에 표시됩니다.

웹사이트에 텍스트 미리보기 태블릿을 추가하는 것은 방문자를 놀리는 훌륭한 방법입니다. 당신은 그들에게 당신이 만든 콘텐츠를 탐색할 기회를 주고 있습니다. 일단 내용을 읽고 흥미를 느끼면 나머지 부분도 읽고 싶어할 가능성이 높아집니다. 다음과 같은 경우에 텍스트 미리보기 태블릿을 사용하면 흥미로울 수 있습니다.

  • 책을 팔 때
  • 방문자와 무료 eBook을 공유하고 전체 버전을 다운로드하도록 권장하려는 경우(구독을 통해)
  • 사례 연구 또는 평가를 공유할 때

정확히 무엇을 의미하는지 보여주기 위해 단계별로 재생성하는 방법을 보여주는 예를 만들었습니다.

태블릿에 원하는 만큼 콘텐츠를 추가할 수 있습니다. 스크롤바를 사용하면 방문자가 콘텐츠를 쉽게 스크롤할 수 있습니다.

Divi로 스크롤 가능한 텍스트 미리보기 태블릿을 만드는 방법

YouTube 채널 구독

섹션 생성 및 수정

우리가 만든 예제를 다시 만들기 위해 가장 먼저 필요한 것은 섹션입니다. 쉽게 하기 위해 이 섹션을 새 페이지에 추가하고 Visual Builder로 전환하여 결과를 만드는 데 사용되는 모든 단계를 설명합니다.

새 페이지 추가

새 페이지를 추가하려면 WordPress 대시보드 > 페이지 > 새로 추가로 이동합니다 . 새 페이지를 추가했으면 Divi Builder를 활성화하고 Visual Builder로 즉시 전환하십시오.

2열 행이 있는 섹션 추가

다시 만들고 있는 예제의 경우 한 섹션만 필요합니다. 표준 섹션을 추가하고 해당 섹션 내에서 2열 행을 만듭니다. 텍스트 미리보기 태블릿을 배치하려면 왼쪽 열이 필요하고 정보를 제공하고 행동 유도를 위해 두 번째 열이 필요합니다.

그라데이션 배경 추가

우리가 설명할 다음 단계는 그라디언트 배경입니다. 우리는 정말 단순한 것을 선택했지만 이는 섹션에 훌륭한 부가 가치를 제공합니다. 배경 그라디언트를 다시 만들려면 섹션의 설정으로 이동하십시오. 그런 다음 배경 하위 범주에서 그라디언트 배경에 대해 다음 두 가지 색상을 사용합니다.

  • #e02b20
  • #f2f2f2

그라데이션 배경에 사용한 설정은 다음과 같습니다.

  • 그라디언트 유형: 선형
  • 기울기 방향: 143deg
  • 시작 위치: 28%
  • 최종 위치: 28%

첫 번째 열: 코드 모듈 및 텍스트 미리보기 태블릿 추가

첫 번째 열의 경우 텍스트 미리 보기 태블릿이 있는 코드 모듈을 추가합니다. 텍스트 미리보기 태블릿을 완성하려면 세 가지 작업을 수행해야 합니다. 코드 모듈을 추가하고, 코드 모듈 내에 HTML 코드 라인을 추가하고, 페이지 자체에 필요한 CSS 코드 라인을 추가하십시오. 테마 옵션 또는 테마 사용자 정의 도구에 CSS 코드 라인을 추가할 수도 있습니다. 그러나 이 경우에는 필요하지 않으므로 만든 페이지에만 추가합니다.

코드 모듈 추가

생성한 행의 첫 번째 열에 코드 모듈을 추가하여 시작합니다.

HTML 코드 추가

그런 다음 해당 코드 모듈을 열고 콘텐츠 상자에 다음 줄을 추가합니다. 

<div id="tab-container">
<div class="tablet">
<div class="tab">

<h1 class="title">Chapter 1</h1>

<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>

<h1 class="title">Chapter 2</h1>

<p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<footer>
 2017 *Author*
</footer>
</div>
</div>
</div>

텍스트 미리보기에는 세 부분이 있음을 알 수 있습니다. 제목, 단락 및 바닥글. 원하는 만큼 텍스트 미리보기를 만들 수 있습니다. 이 예에서는 각각 하나의 제목과 하나의 단락으로 표시되는 두 개의 장을 추가했습니다. 물론 태블릿에서 원하는 곳에 여러 단락과 제목을 추가할 수 있습니다.

필요한 CSS 코드 추가

HTML 코드를 필요에 맞게 조정했으면 태블릿이 원하는 모양으로 보이게 하는 CSS 코드를 추가할 수 있습니다. 우리가 만들고 있는 페이지에만 이 태블릿이 필요하기 때문입니다. 코드를 페이지에 직접 추가할 것입니다. 페이지의 Visual Builder 내에서 설정 아이콘을 클릭합니다.

그런 다음 CSS 탭으로 이동하여 다음 CSS 코드 행을 Custom CSS 필드에 붙여넣습니다. 

*{ box-sizing: border-box; }

.tablet {
position: relative;
background: #1c1c1c;
width: 100%;
height: 600px;
max-width: 450px;
max-height: 600px;
margin: 0 auto 0;
padding: 30px 24px 30px 24px;
border-radius: 18px;
border-top:2px solid #3C3F45;
border-right:2px solid #202227;
border-bottom:2px solid #202227;
border-left:2px solid #3C3F45;
box-shadow:11px 11px 24px rgba(0,0,0,0.5);
}

@media only screen and (max-width:768px) {
height: 400px;
}

.tablet .tab {
background: #f9f9f9;
color: black;
padding: 50px 40px 50px 40px;
overflow: scroll;
height: 100%;
text-align: justify;
}

.tablet .tab h1 {
font-size: 30px;
font-family: "Dancing script";
font-weight: bold;
font-style: italic;
text-align: center;
margin: 0 0 20px 0;
padding: 4px;
font-size: 25px;
}

.tablet .tab p {
margin: 0 0 20px 0;
font-family: "Arial";
font-size: 13px;
}

footer {
background: black;
color: white;
margin-bottom: 8px;
}

이 CSS 코드 라인 내에서 필요에 따라 모든 것을 변경할 수 있습니다. 코드 줄에서 알 수 있듯이 텍스트 미리 보기 태블릿의 모양과 느낌을 변경할 수 있는 다섯 가지 주요 부분이 있습니다.

  • 태블릿 외관
  • 태블릿 내부 모습
  • 제목
  • 단락
  • 바닥글

따라서 텍스트 미리보기 태블릿을 통합하려는 페이지의 종류에 맞게 태블릿을 만들 수 있습니다.

두 번째 열: 두 개의 텍스트 모듈 및 CTA 추가

마지막으로 할 일은 오른쪽 열에 모듈을 추가하는 것입니다. 텍스트 미리보기 태블릿에서 읽을 내용을 사람들에게 알리는 것이 중요합니다. 또한 CTA를 사용할 수 있는 이상적인 기회이기도 합니다. CTA가 실제 텍스트 미리보기 태블릿에 가까울수록 더 눈에 띌수록 사람들이 텍스트 미리보기를 읽은 후 조치를 취할 가능성이 높아집니다.

첫 번째 텍스트 모듈

첫 번째 텍스트 모듈을 두 번째 행에 추가하여 시작합니다. 설정을 열고 콘텐츠의 텍스트 하위 범주에 있는 콘텐츠 상자에 제목을 적습니다. 또한 디자인 탭으로 이동하여 텍스트 하위 범주를 다음과 같이 변경합니다.

  • 텍스트 글꼴: 춤 스크립트
  • 텍스트 글꼴 스타일: 굵게 및 기울임꼴
  • 텍스트 글꼴 크기: 40(데스크톱), 35(태블릿), 30(휴대폰)
  • 텍스트 색상:#1c1c1c
  • 텍스트 줄 높이: 1.7em

같은 탭을 아래로 스크롤하여 상단 여백에 '40%'를 추가합니다.

두 번째 텍스트 모듈

또한 두 번째 텍스트 모듈을 추가합니다. 콘텐츠 탭의 콘텐츠 상자에 텍스트를 추가하여 시작하고 디자인 탭으로 이동합니다. 디자인 탭에서 텍스트 하위 범주도 다음과 같이 조정합니다.

  • 텍스트 글꼴: Arimo
  • 텍스트 글꼴 크기: 14
  • 텍스트 줄 높이: 1.7em

버튼 모듈

마지막으로 두 번째 열에 버튼 모듈도 추가해야 합니다. CTA의 색상을 그라데이션 배경과 일치시켰습니다. 먼저 버튼 모듈을 추가하고 설정을 엽니다. 그런 다음 콘텐츠 탭에 CTA와 URL을 추가합니다. 계속해서 디자인 탭으로 이동하여 단추 하위 범주를 다음과 같이 조정합니다.

  • 버튼에 사용자 정의 스타일 사용: 예
  • 버튼 크기 텍스트: 14(데스크톱 및 태블릿), 12(휴대전화)
  • 버튼 텍스트 색상: #f9f9f9
  • 버튼 배경색: #e02b20
  • 버튼 테두리 너비: 0
  • 버튼 테두리 반경: 3
  • 버튼 글꼴: Arimo

팁: 텍스트 미리보기를 통해 eBook을 홍보하는 경우 다음 게시물에 설명된 대로 Trigger on Click Bloom 옵트인 양식을 연결할 수도 있습니다.

결과

이 게시물의 모든 단계를 따랐다면 책 미리보기에 대해 다음과 같은 결과를 얻었을 것입니다.

마무리

코드 모듈을 사용하면 원하는 만큼 창의력을 발휘할 수 있습니다. 이 게시물은 개인 취향의 일부 요소를 통합할 경우 Divi 웹사이트를 얼마나 다양하게 만들 수 있는지 보여주는 한 가지 예입니다. 이 게시물을 차근차근 따라했다면 책 미리보기를 다시 만들고 웹사이트에서 사용할 수 있었을 것입니다. 저자 웹사이트에 대한 책 미리보기를 사용할 수 있을 뿐만 아니라 이메일 목록을 작성하고 작성하려는 eBook을 미리 보는 데 사용할 수도 있습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요!

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!