막대 만들기 승진 Divi의 페이지 템플릿에 대한 애니메이션은 플러그인에 의존하지 않고도 멋진 제품과 제안을 광고할 수 있는 좋은 방법이 될 수 있습니다. Divi의 강력한 디자인 기능을 사용하여 시각적으로 만들 수 있습니다. 승진 Divi Theme Builder에서 템플릿을 편집할 때. 그런 다음 모델이 준비되면 막대가 승진 이 템플릿에 할당된 모든 페이지에 나타납니다. 

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

시작하려면 무엇이 필요합니까?

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

또한 테스트 목적으로 Divi Builder로 생성 된 하나 이상의 페이지가 필요하며, 이는 프로모션 바 템플릿의 영향을받습니다.

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

새 템플릿 만들기

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

프로모션 바가 표시 될 페이지에 템플리트를 지정하십시오.

새 템플릿에서 "Custom Body 추가"상자를 클릭하고 "Custom Body 빌드"를 선택하십시오.

참고 : 모든 헤더뿐만 아니라 Divi 기본 헤더에서도 작동 할 수 있도록 모델 본문 영역 (헤더 아님)에 프로모션 표시 줄을 추가합니다. 나중에 추가 할 수 있습니다.

그런 다음“Build From Scratch”옵션을 선택하십시오.

모델에 프로모션 바 추가

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

일반 섹션에 XNUMX 열 행을 추가하여 시작하십시오.

라인 설정

모듈을 추가하기 전에 다음과 같이 Row 매개 변수를 업데이트하십시오.

• 왼쪽 배경 그라데이션 : # 4a42ec
• 오른쪽 배경 그라디언트 : # 521d91
• 기울기 방향 : 90deg
• 사용자 지정 거터 너비를 사용하십시오. 예
• 거터 폭 : 1
• 너비 : 100 %
• 최대 너비 : 100 %
• 실내 장식품 : 상단에 0px, 하단에 0px

이것은 우리가 만든 프로모션 바의 배경색과 너비를 지원합니다.

열 매개 변수

행 설정을 종료하기 전에 클릭하여 열 설정을 엽니 다. 그런 다음 기본 열 요소에 다음 사용자 정의 CSS를 추가하십시오.

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

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

이제 추가할 준비가 되었습니다. 내용 프로모션 표시줄로 이동합니다.

Blurb 모듈 추가

이 프로모션 예제의 내용을 위해 작은 아이콘이있는 프리젠 테이션 모듈과 오른쪽에 버튼이있는 텍스트 블로그 (Elegalthemes.com의 프로모션 바와 유사)가 포함됩니다.

회색 원과 행 내부의 아이콘을 클릭하고 프레젠테이션 모듈을 추가합니다.

프리젠 테이션 텍스트의 내용에 다음 정보를 입력하십시오.

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

프리젠 테이션 디자인 설정을 다음과 같이 업데이트하십시오.

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

버튼 모듈 추가

그런 다음 Blurb 모듈 아래에 단추 모듈을 추가하십시오. flex 속성으로 인해 모듈은 아래가 아닌 블 러브의 오른쪽에 나타납니다.

다음과 같이 버튼 디자인 매개 변수를 업데이트하십시오.

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

• 여백 (데스크톱) : 왼쪽의 20px
• 여백 (전화) : 왼쪽의 10px
• 실내 장식품 (사무실) : 상단에 0px, 하단에 0px
• 패딩 (전화) : 상단에 2px, 하단에 2px, 왼쪽에 8px, 오른쪽에 8px
• 애니메이션 스타일 : 바운스
• 애니메이션 지연 : 1000ms

섹션 설정

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

• 실내 장식품 : 상단에 0px, 하단에 0px
• 애니메이션 스타일 : 바운스
• 애니메이션 방향 : 아래쪽
• 애니메이션 기간 : 500ms
• 애니메이션 지연 : 250ms
• 불투명도 시작 애니메이션 : 100 %
• Z- 색인 : 999

전폭 컨텐츠 게시 모듈 추가

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

Divi Builder를 사용하여 빌드 된 (또는 빌드 될) 페이지의 경우 전체 너비 게시물 콘텐츠 모듈을 사용하여 콘텐츠 영역을 최대화 할 수 있습니다.

(참고 : 기본 편집기를 사용하는 페이지의 경우 기본적으로 유사한 최대 너비 인 1080px를 달성하기 위해 일반 섹션에서 표준 게시물 콘텐츠 모드를 사용하는 것이 좋습니다.)

전체 너비 섹션 추가

프로모션 바가 포함 된 섹션 아래에 전체 너비 섹션을 추가하십시오.

전폭 형식의 컨텐츠 모듈 추가

그런 다음 Fullwidth Post Content 모듈을 선택하십시오.

그것은 다소간입니다. 이제 편집기를 종료하기 전에 레이아웃을 확인하고 저장하십시오.

그런 다음 테마 빌더의 변경 사항을 저장하십시오.

최종 결과

전위

이제 프로모션 표시 줄과 함께 모델을 할당하기 전 페이지가 있습니다.

애프터

다음은 프로모션 바가있는 새 템플릿이있는 동일한 페이지입니다.

홍보 바를 끈적 끈적하게 만드십시오

프로모션 바를 Divi의 기본 헤더에 맞추기 위해 프로모션 바가 포함 된 섹션에 간단한 CSS 스 니펫을 추가 할 수 있습니다.

position: fixed;width: 100%;

섹션 설정을 열고 다음 CSS 코드를 기본 데스크탑 요소에 추가하십시오.

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

position: relative;

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

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

마지막 생각

이 튜토리얼에서는 Divi Theme Builder를 사용하여 처음부터 프로모션 표시줄을 디자인하는 방법을 보여 주었습니다. 프로모션 바는 다양한 애니메이션과 디자인으로 완성되어 사람들이 실제로 볼 수 있습니다. 방문자. 더 많은 가시성을 위해 페이지를 아래로 스크롤할 때 프로모션 표시줄을 수정할 수도 있습니다. 그리고 프로모션 표시줄이 사이트에 배치되는 위치를 제어할 수 있는 기능이 있어 앱이 매우 편리합니다.