Divi에서 페이지 템플릿용 애니메이션 프로모션 바를 만드는 방법

게시 됨: 2019-11-23

Divi에서 페이지 템플릿용 애니메이션 프로모션 바를 만드는 것은 플러그인에 의존하지 않고도 스타일리시하게 제품과 거래를 광고할 수 있는 좋은 방법이 될 수 있습니다. Divi의 강력한 디자인 기능을 사용하여 Divi의 테마 빌더에서 템플릿을 편집할 때 프로모션 바를 시각적으로 구축할 수 있습니다. 그런 다음 템플릿이 준비되면 해당 템플릿에 할당된 모든 페이지에 프로모션 표시줄이 팝업됩니다. 쉬운!

뛰어들고 시작합시다!

엿보기

다음은 이 튜토리얼에서 생성할 프로모션 바에 대한 간략한 설명입니다.

또한 프로모션 바를 고정(또는 고정)하는 방법도 보여줍니다.

무료로 프로모션 바 페이지 템플릿 다운로드

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

파일 다운로드
무료로 다운로드

무료로 다운로드

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

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

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 테마 빌더 이식성 옵션을 사용하여 json 파일 중 하나를 Divi 테마 빌더에 추가하기만 하면 됩니다.

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

YouTube 채널 구독

시작하는 데 필요한 것

시작하려면 Divi 테마를 설치하고 활성화해야 합니다. 최신 버전의 Divi가 있는지 확인하십시오.

또한 결과를 표시하기 위해 해당 페이지에 프로모션 바 템플릿을 할당하려면 테스트 목적으로 Divi Builder로 만든 페이지가 하나 이상 필요합니다.

그 후, 당신은 갈 준비가되었습니다.

페이지 템플릿 상단에 애니메이션 프로모션 바 만들기

새 템플릿 만들기

WordPress 대시보드에서 Divi > 테마 빌더로 이동합니다. 그런 다음 "새 템플릿 추가" 상자를 클릭하여 새 템플릿을 만듭니다.

프로모션 바를 표시할 페이지에 템플릿을 할당합니다.

새 템플릿에서 "사용자 정의 본문 추가" 영역을 클릭한 다음 "사용자 정의 본문 작성"을 선택합니다.

참고: 템플릿의 본문 영역(헤더가 아님)에 프로모션 표시줄을 추가하여 Divi의 기본 헤더 및 향후 추가할 수 있는 사용자 정의 헤더와 함께 작동할 수 있습니다.

그런 다음 "처음부터 빌드" 옵션을 선택합니다.

템플릿에 프로모션 바 추가하기

템플릿 레이아웃 편집기 내에서 Divi Builder를 사용하여 프로모션 바 구축을 시작할 수 있습니다.

일반 섹션에 1열 행을 추가하는 것으로 시작합니다.

행 설정

모듈을 추가하기 전에 다음과 같이 행 설정을 업데이트하십시오.

  • 배경 그라데이션 왼쪽 색상: #4a42ec
  • 배경 그라데이션 오른쪽 색상: #521d91
  • 기울기 방향: 90deg
  • 사용자 지정 거터 너비 사용: 예
  • 거터 폭: 1
  • 폭: 100%
  • 최대 너비: 100%
  • 패딩: 0px 상단, 0px 하단

그것은 우리가 만들고 있는 프로모션 바의 배경색과 너비를 처리합니다.

열 설정

행 설정을 종료하기 전에 을 클릭하여 열 설정을 엽니다. 그런 다음 Column Main Element에 다음 사용자 지정 CSS를 추가합니다. 

display: flex;
align-items: center;
justify-content: center;

이 CSS는 flex 속성을 사용하여 열 내의 콘텐츠(또는 모듈)를 수평으로(나란히) 쌓도록 정렬합니다. 또한 세로 및 가로로 기둥 내의 모듈을 중앙에 배치합니다. 이렇게 하는 이유는 모바일에서 서로 겹쳐지는 여러 열 행 구조를 사용하지 않아도 되기 때문입니다. 이 설정을 사용하면 콘텐츠가 모든 브라우저 너비에서 수평 정렬로 유지됩니다.

이제 프로모션 표시줄에 콘텐츠를 추가할 준비가 되었습니다.

Blurb 모듈 추가

이 예제 프로모션의 콘텐츠에는 작은 아이콘이 있는 안내문 모듈과 오른쪽에 버튼이 있는 텍스트 블로그가 포함됩니다(Elegantthemes.com의 프로모션 표시줄과 유사).

행 내부의 회색 원 더하기 아이콘을 클릭하고 광고 문구 모듈을 추가합니다.

광고 내용에 대해 다음을 입력합니다.

  • 제목: [프로모션 텍스트 입력]
  • 아이콘 사용: 예
  • 아이콘: 선물 아이콘(스크린샷 참조)

다음과 같이 광고 문구 디자인 설정을 업데이트합니다.

  • 아이콘 색상: #ff4a9e
  • 이미지/아이콘 배치: 왼쪽
  • 아이콘 글꼴 크기 사용: 예
  • 아이콘 글꼴 크기: 16px
  • 제목 텍스트 크기: 16px(데스크톱), 14px(전화)
  • 제목 줄 높이: 1.3em
  • 최대 너비: 230px(전화 전용)
  • 패딩: 10px 상단
  • 애니메이션 스타일: 슬라이드
  • 애니메이션 방향: 오른쪽
  • 애니메이션 지연: 250ms

버튼 모듈 추가

그런 다음 블러브 모듈 아래에 버튼 모듈을 추가합니다. flex 속성 때문에 모듈은 광고 문구 아래가 아니라 오른쪽에 표시됩니다.

다음과 같이 버튼 디자인 설정을 업데이트합니다.

  • 버튼에 사용자 정의 스타일 사용: 예
  • 버튼 텍스트 크기: 15px(데스크톱), 13px(전화)
  • 버튼 텍스트 색상: #ffffff
  • 버튼 테두리 너비: 0px
  • 버튼 테두리 반경: 20px
  • 버튼 글꼴 두께: 반 굵게

  • 여백(데스크톱): 20px 왼쪽
  • 여백(전화): 10px 왼쪽
  • 패딩(데스크톱): 위쪽 0px, 아래쪽 0px
  • 패딩(전화): 상단 2픽셀, 하단 2픽셀, 왼쪽 8픽셀, 오른쪽 8픽셀
  • 애니메이션 스타일: 바운스
  • 애니메이션 지연: 1000ms

섹션 설정

프로모션 바 디자인을 완료하려면 다음과 같이 프로모션 바가 포함된 섹션을 업데이트하십시오.

  • 패딩: 0px 상단, 0px 하단
  • 애니메이션 스타일: 바운스
  • 애니메이션 방향: 아래로
  • 애니메이션 시간: 500ms
  • 애니메이션 지연: 250ms
  • 애니메이션 시작 불투명도: 100%
  • Z-인덱스: 999

전폭 포스트 콘텐츠 모듈 추가

이 시점에서 프로모션 바를 사용할 준비가 되었습니다. 그러나 이것은 템플릿이기 때문에 이 템플릿을 사용하여 페이지의 콘텐츠를 표시하려면 게시물 콘텐츠 모듈을 추가하고 확인해야 합니다.

Divi Builder를 사용하여 구축되거나 구축될 페이지의 경우 콘텐츠 영역을 최대화하기 위해 전폭 포스트 콘텐츠 모듈을 사용하고 싶을 것입니다.

(참고: 기본 편집기를 사용하는 페이지의 경우 기본적으로 유사한 최대 너비가 1080px이 되도록 일반 섹션 내 일반 게시물 콘텐츠 모듈을 사용하는 것이 좋습니다.)

전각 섹션 추가

프로모션 바가 포함된 섹션 아래에 전각 섹션을 추가합니다.

전각 포스트 콘텐츠 모듈 추가

그런 다음 전체 너비 게시물 콘텐츠 모듈을 선택합니다.

그 정도면 됩니다. 이제 편집기를 종료하기 전에 레이아웃을 확인하고 저장하십시오.

그런 다음 테마 빌더에 대한 변경 사항도 저장합니다.

최종 결과

전에

이제 프로모션 바가 있는 템플릿을 할당하기 전 페이지입니다.

후에

그리고 여기에 프로모션 표시줄이 있는 새 템플릿이 있는 동일한 페이지가 있습니다.

여기 모바일에 있습니다.

다음은 페이지 로드 시 프로모션 바 애니메이션입니다.

프로모션 바를 끈적하게 만들기

프로모션 바를 기본 Divi 헤더 아래에 고정시키려면 프로모션 바가 포함된 섹션에 간단한 CSS 스니펫을 추가할 수 있습니다.

섹션 설정을 열고 바탕 화면의 기본 요소에 다음 CSS를 추가합니다. 

position: fixed;
width: 100%;

그런 다음 태블릿의 기본 요소에 다음 CSS를 추가합니다. 

position: relative;

이제 결과를 확인하십시오.

링크를 잊지 마세요

프로모션 바가 구축되면 프로모션 제안이나 페이지에 링크 URL을 추가하고 싶을 것입니다. 버튼 설정 콘텐츠 탭에서 버튼 링크 URL을 추가할 수 있습니다.

짝수 전환의 경우 행 설정 링크 옵션에서 전체 행에 링크 URL을 추가할 수도 있습니다.

마지막 생각들

이 튜토리얼에서는 Divi 테마 빌더를 사용하여 프로모션 바를 처음부터 디자인하는 방법을 보여주었습니다. 프로모션 바는 방문자의 눈에 잘 띄도록 여러 애니메이션과 디자인으로 완성됩니다. 더 많은 가시성을 위해 페이지를 아래로 스크롤할 때 프로모션 표시줄을 고정할 수도 있습니다. 또한 사이트 전체에 프로모션 표시줄이 표시되는 위치를 제어할 수 있으므로 응용 프로그램은 매우 실용적입니다.

바라건대 이것은 당신이 자신의 몇 가지 프로모션 바를 만드는 데 영감을 줄 것입니다.

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

건배!