우아한 테마와 같은 "확장" CTA를 만드는 방법

게시 됨: 2017-05-14

우아한 테마는 최근 모방할 가치가 있는 몇 가지 기능을 포함하도록 웹사이트 디자인을 변경했습니다. 이전 게시물에서 우아한 테마 블로그 디자인을 구현하고 기본 메뉴를 복제하는 방법에 대해 썼습니다. 하지만 이 게시물에서는 우아한 테마 클릭 유도문안(CTA)을 복제하는 방법을 보여 드리겠습니다. 이 CTA는 우아한 테마 웹사이트의 바닥글 근처 하단에 있습니다. 이 CTA의 특별한 점은 사용자가 요소로 스크롤하면 애니메이션을 트리거하는 추가된 기능입니다.

오늘은 이 CTA의 스타일 뿐만 아니라 애니메이션 기능까지 복제하는 방법을 알려드리겠습니다. 이것은 일부 사용자 정의 CSS와 몇 줄의 JavaScript와 함께 Divi의 코드 모듈을 사용하여 수행됩니다. 그러나 Divi의 모든 모듈에서 동일한 애니메이션 기능을 쉽게 확장할 수 있습니다.

시작하자.

Divi로 디자인 구현하기

코드 모듈을 사용하여 클릭 유도문안 구축

Visual Builder를 사용하여 전체 너비 행 열이 있는 새 일반 섹션을 추가합니다.

다음으로 행에 코드 모듈을 추가합니다.

일반 코드 설정에서 콘텐츠 섹션에 다음 html을 추가합니다.

<div class="cta-info">

<h3>401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web</h3>

<p>We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!</p>

<a href="ENTER URL HERE" id="sign">Sign Up Today</a>

</div>

이 html은 CTA의 콘텐츠로 사용됩니다. 주요 CTA 헤드라인이 h3 태그로 래핑되어 있음을 알 수 있습니다. 하위 헤드라인은 표준 p 태그로 래핑됩니다. 그리고 링크(곧 버튼이 될 예정)에는 "sign"이라는 CSS ID가 있습니다.

또한 "cta-info" 클래스가 있는 div가 콘텐츠를 둘러싸고 있습니다. 이것은 나중에 스타일링 목적으로 중요합니다.

변경 사항을 저장하다

이제 새 섹션에 새 CSS ID를 추가해야 합니다. 섹션 설정 아이콘을 클릭하여 섹션 설정을 엽니다.

섹션 설정의 CSS 탭에서 CSS ID "cta-section"을 추가하고 변경 사항을 저장합니다.

다음으로 행에 CSS ID를 추가해야 합니다. 행 설정 아이콘을 클릭합니다.

CSS 탭에서 "cta-row"라는 새 CSS ID로 행 설정을 업데이트합니다.

변경 사항을 저장하다

이것이 CTA의 레이아웃에 필요한 전부입니다. 콘텐츠와 CSS ID가 있으면 사용자 정의 CSS를 추가할 준비가 되었습니다.

사용자 정의 CSS 추가

Divi → Theme Customizer → Additional CSS로 이동합니다(또는 자식 테마의 style.css 파일을 직접 업데이트할 수 있음). 코드 상자 안에 다음 CSS를 추가합니다.

/* Animated Call To Action */

/*** style CTA section and row when waypoint is not triggered ***/
#cta-section {
    padding: 0 80px;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
}
#cta-row {
    margin: 80px auto 0 auto;
    padding: 80px 0;
    max-width: 100%;
    background-color: #6c17dc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 10px 50px #939fa9;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;

}
/*** Style CTA section and row once waypoint toggles animate-cta class ***/
#cta-section.animate-cta {
    padding: 46px 0 66px 0;
    overflow: hidden;
}
.animate-cta #cta-row {
    margin: 0 auto 0 auto;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #4843d2;
    width: inherit;
}
/*** style button ***/

#sign {
    display: inline-block;
    width: 246px;   
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    background-color: #f92c8b;
    padding: 20px 40px;
    margin-top: 30px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    box-shadow: 0px 5px 20px #231f92;
    -moz-box-shadow: 0px 5px 20px #231f92;
    -webkit-box-shadow: 0px 10px 50px #231f92;
}
#sign:hover {
    background-color: #2cc2e6;
    box-shadow: 0px 20px 80px #1b1867;
    -moz-box-shadow: 0px 20px 80px #1b1867;
    -webkit-box-shadow: 0px 20px 80px #1b1867;
}

/*** style content within the code module ***/

.cta-info{
    color: #fff;
    text-align: center;
    margin: 0 auto !important;
    max-width: 1080px;
    padding: 50px;
}
.cta-info h3 {
    color: #fff;
    font-size: 35px;
    line-height: 1.3em;
}

이제 CTA가 그 부분을 살펴보기 시작합니다. 스크롤할 때 브라우저의 뷰포트에 CTA가 표시되면 CTA에 눈길을 끄는 애니메이션 효과를 주기 위해 짧은 스크립트를 추가하기만 하면 됩니다.

요소로 스크롤할 때 CTA에 애니메이션 효과를 주기 위해 Waypoint 스크립트 추가

페이지의 요소로 스크롤할 때 함수를 트리거하는 가장 쉬운 방법 중 하나는 Waypoints라는 JavaScript 라이브러리를 사용하는 것입니다. Divi는 이미 Waypoint가 설치된 상태로 제공되므로(예!) 라이브러리를 활용하는 스크립트를 포함하기만 하면 됩니다.

Divi → 테마 옵션 → 통합으로 이동하여 "블로그 헤드에 코드 추가" 섹션에 다음 스크립트를 붙여넣습니다.

<script>
jQuery(document).ready(function(){
	jQuery('#cta-section').waypoint(function() {
		jQuery('#cta-section').toggleClass('animate-cta');
	}, {offset: '80%'});
});
</script>

이 스크립트는 CTA 섹션(CSS ID "cta-section" 사용)으로 스크롤할 때 "animate-cta"라는 클래스를 토글하는 기능을 추가합니다. 오프셋을 80%로 지정하는 코드 부분을 확인하십시오. 즉, CTA 섹션의 상단이 브라우저 창 상단에서 80%일 때 함수가 트리거됩니다. CTA가 페이지 중간에 도달할 때 트리거되는 기능을 지연시키려면 오프셋 값을 50%와 같이 변경할 수 있습니다. 그러나 CTA가 페이지 맨 아래에 있을 경우 80% – 90%에 가까운 값을 유지해야 합니다. 이는 스크롤할 때 CTA가 브라우저 창 중간에 도달하지 않아 트리거되지 않기 때문입니다.

그게 다야!

이제 완성된 프로젝트를 살펴보겠습니다.

다른 모듈에 CTA 기능 추가

이 CTA 기능을 Divi Builder 내의 다른 모듈에 추가하려는 경우 매우 쉽습니다. 시작하는 단계는 다음과 같습니다.

전폭(단일 열) 행이 있는 표준 섹션을 만듭니다.
섹션 설정의 CSS에서 CSS ID "cta-section"을 추가합니다.
행 설정의 CSS 아래에 CSS ID "cta-row"를 추가하고 열 CSS 클래스 "cta-column"을 추가합니다.
다음 사용자 정의 CSS를 삽입하십시오.

 .cta-column.et_pb_column:last-child {
 margin: 0 auto;
 margin-right: auto !important;
 max-width: 1080px;
 float: none;
}

원하는 모듈을 행에 추가하고(예: 행동 유도 모듈) 그에 따라 스타일을 지정합니다. CTA의 섹션 배경색과 겹치지 않도록 모듈에 투명한 배경을 추가할 수 있습니다.

중요 참고 사항: 페이지당 이 기능을 사용하여 CTA를 두 개 이상 추가할 수 없습니다.

마지막 생각들

우아한 테마의 CTA 복제는 향후 프로젝트에 추가할 수 있는 유용한 기능입니다. 과하지 않으면서도 독자의 시선을 사로잡는다. 코드 모듈을 사용하면 개발자가 CTA 내에 사용자 정의 html을 추가할 수 있는 유연성이 향상됩니다. 그리고 웨이포인트 애니메이션 기능은 코드 모듈에만 국한되지 않습니다. 또한 필요한 CSS ID를 섹션, 행 및 열에 추가하여 Divi Builder를 사용하는 모든 모듈로 CTA를 생성할 수 있습니다.

아래 의견에서 여러분의 의견을 기다리겠습니다.

건배!