고정 사이드바는 사용자의 관심을 끄는 데 매우 효과적입니다. 방문자 방해하거나 산만하게 하지 않고. 비결은 사이드바에 "표시 상태로 유지"되거나 사이드바 측면에 고정된 하나 또는 두 개의 요소를 포함하는 것입니다. 내용 사용자가 페이지를 스크롤할 때 게시물의 내용입니다. 이는 필요한 경우 페이지 측면에 중요한 작업 호출을 표시할 수 있는 이점과 함께 현대적인 전체 너비 레이아웃(사이드바 없음)의 느낌을 주기 때문에 기존 사이드바 레이아웃에 대한 신선한 대안입니다.
이 튜토리얼에서는 Divi Theme Builder를 사용하여 블로그 게시물 템플릿에 고정 클릭 유도 문안을 추가하는 방법을 보여줍니다. 이 레이아웃의 적용은 상당합니다. 거의 모든 페이지 또는 모든 게시물 템플릿에서 작동합니다. 또한 CTA로 제한 할 필요가 없습니다. 원하는 Divi 모듈을 추가하도록 선택할 수 있습니다.
시작하려면 무엇이 필요합니까?
시작하려면 Divi 테마를 설치하고 활성화하는 방법 . 최신 버전의 Divi가 있는지 확인하십시오.
원하는 결과를 표시하기 위해 테스트를 위해 Divi Builder로 작성된 메시지가 하나 이상 필요합니다.
그 후에는 떠날 준비가되었습니다.
측량
다음은 Divi의 블로그 게시물 템플리트에 추가 된 고정 ACT에 대한 간략한 개요입니다.
Divi의 블로그 게시물 템플릿에 고정 클릭 유도 문안을 추가하는 방법
테마 빌더 템플릿 추가
첫 번째 단계는 사전 정의 된 템플릿을 사이트로 가져 오는 것입니다. Divi Theme Builder Pack # 1 게시 템플릿을 사용할 것입니다.
시작하려면 Divi > Generator로 이동합니다. 테마. 페이지 오른쪽 상단의 이식성 아이콘을 클릭합니다. 이식성 모달에서 가져오기 탭을 선택하고 폴더에서 divi-theme-builder-pack-1-post-template.json 파일을 선택합니다. 현재 사이트에 템플릿이 설치되어 있는 경우 현재 템플릿을 덮어쓸 수 있는 모든 옵션을 선택 취소해야 합니다. 그런 다음 가져오기 버튼을 클릭합니다.
블로그 게시물 템플릿 작성
템플릿을 가져 오면 템플릿 레이아웃에 고정 된 사이드 바에 새 CTA를 추가 할 준비가 된 것입니다. 이렇게하려면 사용자 정의 본문 영역에 대한 편집 아이콘을 클릭하십시오.
사이드 바 CTA를 보관하기위한 듀얼 사이드 바 레이아웃 추가
모델 레이아웃 편집기에서 게시 모듈이 포함된 행을 찾습니다. 내용 열 레이아웃을 1/5 x 3/5 x 1/5(XNUMX/XNUMX XNUMX/XNUMX XNUMX/XNUMX) 열 구조로 바꿉니다. 이렇게 하면 열을 중앙에 유지할 수 있습니다. 내용 고정 CTA를 위해 양쪽에 두 개의 섹션을 제공하는 동시에 게시물의 내용을 게시합니다.
열 구조를 변경 한 후 컨텐츠 게시 모듈을 가운데 열로 끕니다.
라인 매개 변수 업데이트
회선 설정을 열고 다음 설계 옵션을 업데이트하십시오.
- 사용자 지정 거터 너비를 사용하십시오. 예
- 거터 폭 : 2
- 너비 : 100 % (데스크톱), 90 % (태블릿)
- 최대 너비 : 1500px
이렇게하면 이중 사이드 바 구성에 필요한 공간이 생깁니다.
1 열 설정 업데이트
그런 다음 1 열 설정을 열고이 열에 사용자 정의 CSS 클래스를 제공하십시오.
- CSS 클래스 : sticky-cta
왼쪽 열에 CTA 사이드 바 추가
이제 첫 번째 행동을 촉구 할 준비가되었습니다. 왼쪽 열의 작업 모듈에 대한 호출을 추가합니다.
CTA 사이드 바 양식화
다음과 같이 설정을 업데이트하십시오.
내용
- 버튼 :«여기를 클릭»
- Body :“여기에 콘텐츠가 있습니다. 온라인 또는 모듈의 콘텐츠 설정에서이 텍스트를 편집하거나 삭제합니다. ”
- 버튼 링크의 URL : #
본문 디자인
- 몸 글꼴 : Montserrat
- 글꼴 무게 : 세미 볼드
- 본문 : 오른쪽 맞춤
- 텍스트의 본문 색상 : # 444444
- 본문 크기 : 22px (데스크톱), 18px (태블릿)
- 본체 높이 : 1.3em
단추
- 버튼 텍스트 크기 : 14px
- 버튼 텍스트 색상 : #ffffff
- 버튼 배경색 : # 6148df
- 단추 테두리의 너비 : 0px
- 버튼 반경 : 80px
- 글꼴 무게 : 굵게
- 버튼 글꼴 스타일 : TT
- 버튼 패딩 : 상단에 12px, 하단에 12px, 왼쪽에 22px, 오른쪽에 22px
폭, 정렬, 패딩 및 연석
- 너비 : 100 %
- 최대 너비 : 320px
- 모듈 정렬 : 오른쪽
- 패딩 : 왼쪽에 10px, 오른쪽에 10px
- 상단 테두리의 너비 : 10px
- 상단 테두리의 색상 : #eeeeee
- 아래쪽 테두리의 너비 : 10px
- 아래쪽 테두리의 색상 : #eeeeee
오른쪽 열에 CTA 사이드 바 추가
오른쪽 열에 대한 CTA를 만들려면 방금 만든 CTA를 복사하여 맨 오른쪽 열에 붙여 넣습니다. 그런 다음 복제 설정을 다음과 같이 업데이트합니다.
- 텍스트 본문의 정렬 : 왼쪽
- 모듈의 정렬 : 왼쪽
3 열 설정 업데이트
오른쪽 열에있는이 CTA의 경우 열의 상단 여백을 추가하여 페이지 하단에 CTA 사이드 바의 시작 위치를 설정합니다.
3 열의 매개 변수를 열고 1 열에 추가 한 것과 동일한 CSS 클래스를 추가하십시오.
- CSS 클래스 : sticky-cta
그런 다음 기본 요소에 다음 사용자 정의 CSS를 추가하십시오.
국
margin-top: 50%
했던 Tablette
margin-top: 0%
그러면 행 너비의 50 % 인 오른쪽 열의 고정 CTA에 대한 다른 시작점이 제공됩니다. 자신의 블로그 게시물에 필요에 따라이 값을 자유롭게 조정하십시오.
코드 모듈을 사용하여 템플릿에 사용자 정의 CSS 추가
사이드 바 CTA에 "고정"위치를 지정하려면 맞춤 CSS를 추가해야합니다. 이렇게하려면 콘텐츠 게시 모듈 (또는 페이지의 아무 곳에 나) 아래에 새 코드 모듈을 만듭니다.
그런 다음 코드 상자에 다음 CSS를 붙여 넣습니다.
<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>
이 코드의 상단 오프셋은 스크롤 할 때 CTA를 페이지의 세로 중앙에 배치하는 계산입니다. 50vh는 브라우저 창 높이의 절반이고 130px는 CTA 높이의 절반입니다. CTA가 높거나 낮 으면 130 픽셀을 위 또는 아래로 조정해야합니다.
설정 저장
완료되면 템플릿의 레이아웃을 저장하십시오.
그런 다음 테마 빌더 설정을 저장하십시오.
최종 결과
최종 결과를 보려면 템플릿을 사용하여 블로그 기사를 방문하십시오.
이것이 고정 CTA가 스크롤에 고정되는 방식입니다. 긴 콘텐츠에 가장 잘 작동하는 방법을 확인할 수 있습니다.
마지막 생각
이러한 끈끈한 측면 호출 유도는 기존 사이드바에 대한 신선한 대안입니다. 덜 거슬리고 게시물이 어수선하게 느껴지지 않기 때문에 미니멀리스트 디자인에 적합합니다. 또한 페이지의 아래쪽에 CTA를 배치하여 점차적으로 나타나고 스크롤에 달라붙어 사람들에게 더 잘 보이도록 할 수 있습니다. 방문자. 그리고 잊지 마세요. CTA를 Divi 모듈 또는 모듈 조합으로 교체하여 원하는 모든 것을 만들 수 있습니다. 한쪽에 하나의 CTA만 유지하도록 선택할 수도 있습니다. 응용 프로그램이 많은 것 같습니다.
