Divi에서 게시물 사이에 고정되는 탐색 모음을 만들고 싶나요?
고정 게시물 탐색 모음은 모든 사용자 경험을 향상시키는 효과적인 방법입니다. 사이트 웹 블로그의. 사이트의 기본 탐색 외에도 게시물 탐색 링크를 통해 사용자는 사이트의 이전 게시물이나 다음 게시물로 쉽게 이동할 수 있습니다. 블로그. 그리고 이러한 게시물 탐색 링크를 고정 막대에 추가하면 해당 링크는 계속 표시되고 더 쉽게 접근할 수 있습니다.
이 튜토리얼에서는 포스트 스티키 사이에 navbar를 생성할 것입니다. Divi. 이를 위해 Divi에 내장된 옵션을 사용하여 행을 고정 막대로 변환하겠습니다. 다음으로 기사 탐색 모듈을 사용하여 "이전 기사" 및 "다음 기사" 링크를 디자인하겠습니다.
또한 사용자에게 현재 보고 있는 게시물을 상기시키는 동적 콘텐츠로 게시물 제목을 막대 중간에 추가하여 탐색 모음에 멋진 "과거, 현재 및 미래" 요소를 제공합니다.
시작하자!
측량
이 튜토리얼에서 만들 디자인을 간단히 살펴보겠습니다.
시작하려면 무엇이 필요합니까?
이 끈적한 게시물 탐색 모음을 Divi의 모든 블로그 게시물 레이아웃이나 템플릿에 추가할 수 있지만 미리 만들어진 블로그 게시물 템플릿을 사용하여 프로세스 속도를 높이고 디자인을 빠르게 시작할 수 있습니다.
"Meal Kit" 블로그 게시물 템플릿을 Divi 테마 빌더로 가져오기
시작하려면 다운로드 Divi's Meal Kit Layout Pack용 무료 블로그 포스트 템플릿 . 이렇게 하려면 다음으로 이동하십시오. 블로그 게시물 .
그런 다음 이메일을 입력하여 zip 파일을 다운로드합니다.
그런 다음 가져올 준비가 되도록 파일의 압축을 풉니다.
파일을 테마 편집기로 가져오려면 다음 단계를 따르세요.
- Divi > 테마 빌더로 이동합니다.
- 이식성 아이콘을 클릭합니다.
- 이식성 팝업 창에서 가져오기 탭을 선택합니다.
- 가져올 이전에 다운로드한 압축을 푼 파일을 선택합니다.
- 클릭 « Divi 테마 빌더 가져오기 Canva의 제작된 채널아트 템플릿을 ».
- 가져온 템플릿을 편집하려면 편집 아이콘을 클릭합니다.
Divi에서 고정 탐색 모음 만들기
1부: 끈끈한 선 만들기
고정 탐색 모음을 만들기 위해 게시물과 게시물 제목 간의 탐색 링크에 대한 고정 컨테이너로 XNUMX열 행을 사용합니다.
템플릿 레이아웃의 두 번째 섹션에서 게시물 콘텐츠가 포함된 행 아래에 새 행을 추가합니다.
라인 설정
회선 설정을 엽니다.
먼저 고정 상태에서 다른 디자인 옵션을 업데이트할 수 있도록 선에 고정 위치를 추가해야 합니다.
탭 아래 Advnaced, 다음을 업데이트합니다.
- 고정 위치: 상단 및 하단에 고정
- 상단 고정 제한: 섹션
- 하단 점착 제한: 신체 영역
열이 모바일에서 쌓이지 않도록 하려면 다음 사용자 정의 CSS를 주요 요소 :
display:flex;
flex-wrap:nowrap;
align-items:center;
탭 아래 내용, 다음과 같이 끈적 끈적한 상태의 라인에 흰색 배경색을 추가하십시오.
- 배경: 없음
- 배경: #ffffff (스티커)
설정에서 디자인, 다음을 업데이트합니다.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 폭: 100%
- 최대 너비: 100%
- 패딩: 0px(상단 및 하단)
태블릿 및 휴대전화에서 가운데 열 숨기기
모바일에서 열을 숨기려면 열 2(가운데 열)에 대한 설정을 열고 다음과 같이 가시성 옵션을 업데이트합니다.
- 비활성화: 전화, 태블릿
2부: 기사 탐색 링크 만들기
게시물 탐색을 위한 설계 유연성을 높이기 위해 두 개의 개별 게시물 탐색 모듈을 사용합니다. 왼쪽 열에는 이전 기사의 링크만 표시하는 Post Navigation 모듈을 추가합니다. 오른쪽 열에 다음 게시물 링크만 표시하는 게시물 탐색 모듈을 추가합니다.
이전 게시물 링크
열 1에서 새 게시물 탐색 모듈을 추가합니다.
모듈 설정을 열고 옵션 탭을 업데이트하십시오. 내용 다음과 같이 :
- 이전 링크(텍스트): 이전 게시물
- 이전 게시물 링크 표시: 예
- 다음 게시물 링크 표시: 아니요
- 배경: #000000
탭 아래 디자인, 다음을 업데이트합니다.
- 링크 글꼴: Kumbh Sans
- 링크 글꼴 두께: 굵게
- 글꼴 스타일: TT
- 링크 텍스트 색상: #ffffff
- 링크 텍스트 크기: 26px(데스크톱), 16px(태블릿 및 휴대폰)
- 줄 높이: 1,3em
- 패딩: 0,9em(상단), 0,7em(하단), 2em(좌우)
모바일에서는 가운데 열을 숨기고 있으므로 탐색 링크를 포함할 나머지 두 열은 이제 태블릿과 휴대폰에서 브라우저 너비의 50%를 차지할 수 있습니다.
탐색 링크가 뷰포트의 50%에 걸쳐 있는지 확인하려면 태블릿 보기용 링크 CSS 상자에 다음 사용자 정의 CSS를 추가하십시오.
display:block;
width:50vw;
text-align:center;
float:none;
다음 포스트 링크 생성
다음 게시물에 대한 링크를 생성하려면 방금 디자인한 게시물 탐색 모듈(이전 게시물 링크 포함)을 복사하여 열 3(오른쪽 열)에 붙여넣습니다.
그런 다음 오른쪽 열에서 복제 모듈에 대한 게시물 탐색 설정을 열고 다음 콘텐츠 탭 옵션을 업데이트합니다.
- 다음 링크: 다음 포스트
- 이전 게시물 링크 표시: 아니오
- 다음 게시물 링크 표시: 예
- 배경: #ffb100
탭 아래 디자인, 링크 텍스트 색상 업데이트:
- 링크 텍스트 색상: #000000
3부: 동적 게시물 제목 만들기
두 탐색 링크가 모두 있으면 게시물 제목을 중간 열에 동적 콘텐츠로 추가할 준비가 되었습니다.
아이디어는 사용자에게 이전 메시지와 다음 메시지로 이동할 수 있는 기능을 통해 읽고 있는 메시지를 잘 상기시켜주는 것입니다.
중간 열에 새 텍스트 모듈을 추가합니다.
탭 아래 내용아이콘을 클릭하십시오 "동적 콘텐츠 사용" 신체 영역에서 다음을 선택하십시오. 게시물/보관 제목.
동적 게시물 제목이 추가되면 다음 설정을 엽니다. 게시물/보관 제목 다음 전에 콘텐츠를 업데이트합니다.
- 읽기 전에
그런 다음 변경 사항을 저장합니다.
탭 아래 디자인, 다음을 업데이트합니다.
- 텍스트 글꼴: Kumbh Sans
- 텍스트 글꼴 두께: 굵게
- 글꼴 스타일: TT
- 텍스트 텍스트 색상: 투명(데스크탑), #000000(고정)
- 텍스트 크기: 16px
- 문자 간격: 1px
- 줄 높이: 1,3em
- 텍스트 정렬: 중앙
- 최대 너비: 96%
- 정렬 모듈: 중앙
- 패딩: 0,5em(상단 및 하단)
최종 결과
지금 DIVI를 다운로드하세요!!!
결론
이 튜토리얼에서는 Divi에서 블로그 게시물 템플릿에 대한 고정 게시물 탐색 모음을 만드는 것이 얼마나 쉬운지 보여주었습니다.
막대/선 고정 기능은 Divi의 기본 제공 옵션으로 쉽게 조정할 수도 있습니다. 예를 들어 고정 상태를 섹션으로 제한하거나 브라우저 뷰포트의 상단 또는 하단에만 고정되도록 선택할 수 있습니다.
이것이 다음 블로그 사이트에 유용하기를 바랍니다. 우려 사항이나 제안 사항이 있으면 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
