Divi에서 블로그 게시물을 띄우시겠습니까?
오늘은 Divi에서 블로그 게시물을 플로팅 카드로 표시하는 창의적인 방법을 보여드리겠습니다. 모든 블로그 또는 사이트 웹 우수한 것을 목표로 해야 한다 내용 매력적이고 아마도 똑같이 중요하거나 접근하기 쉽습니다.
이를 보장하는 한 가지 방법은 내용 사용자가 계속 액세스할 수 있도록 하는 것은 페이지에 떠 있게 만드는 것입니다.
블로거를 위해 다음의 기사를 표시하는 방법을 알려드리겠습니다. 블로그 페이지를 스크롤하는 동안 계속 표시되도록 플로팅 카드로 사용합니다.
가자.
측량
다음은 이 자습서의 끝에서 얻을 결과에 대한 간략한 개요입니다.
시작하려면 무엇이 필요합니까?
Divi에서 이 디자인을 만들기 전에 다음을 수행해야 합니다.
- 새 페이지를 만들고 관련 이름을 지정한 다음 'Divi Builder 사용'을 클릭합니다.
- 옵션을 선택하십시오 레이아웃 선택".
- 레이아웃 찾기 및 선택 '블로거 방문 페이지'.
- 버튼을 클릭하십시오 레이아웃 선택 페이지에 로드합니다.
그런 다음 이 튜토리얼에서 사용할 수 있도록 미리 만들어진 레이아웃을 갖게 됩니다.
Divi의 블로그 모듈을 사용하여 블로그 게시물 플로팅 카드를 만드는 방법
이제 레이아웃이 페이지에 로드되었으므로 블로그 게시물 플로팅 카드를 만들 준비가 되었습니다.
레이아웃 맨 아래에 새 섹션을 만듭니다.
그런 다음 섹션에 새 XNUMX열 행을 추가합니다.
행/열에 블로그 모듈 및 제목 추가
여기에서 새 블로그 모듈을 만드는 대신 위로 스크롤하여 세 개의 블로그 게시물을 표시하는 기존 블로그 모듈을 찾으십시오(페이지 중앙 근처의 세 번째 섹션에 있음). 열려 있는 " 기타 모듈 매개변수 »그리고 선택« 모듈 복사".
그런 다음 회색 더하기 아이콘을 마우스 오른쪽 버튼으로 클릭하고 " 모듈 붙여넣기".
다음으로 블로그 카드 위에 떠 있는 블로그 게시물 위에 제목을 추가합니다. 이렇게 하려면 작은 제목 텍스트 " 생활".
그런 다음 방금 추가한 새 블로그 모듈 바로 위에 모듈을 붙여넣습니다.
그런 다음 제목 텍스트를 편집하여 추천하려는 블로그 게시물 유형을 설명합니다. 이 예에서는 " 추천".
고정 위치 및 사용자 정의 너비로 선 사용자 정의
고정된 위치에 있을 때 페이지에서 너무 많은 공간을 차지하지 않도록 떠다니는 블로그 게시물의 크기를 줄이고 싶습니다. 재미있을 것입니다. 이렇게 하려면 회선 설정을 열고 다음을 업데이트하십시오.
항목을 부동 상태로 만들려면 선에 고정 위치를 지정해야 합니다. 고급 탭에서 다음을 업데이트합니다.
- 위치: 고정
- 위치: 오른쪽 하단
- 수직 오프셋: 20px
- 수평 오프셋: 20px
- Z 인덱스: 12
최소한의 콘텐츠와 상자 그림자로 업데이트된 블로그 모듈
일반적으로 블로그 모듈에는 이미 XNUMX열 그리드 레이아웃과 우리가 선택한 레이아웃 팩과 함께 제공되는 멋진 스타일이 있습니다. 하지만 몇 가지 해야 할 일이 있습니다.
참조 : Divi에서 로그인 양식으로 전역 헤더를 만드는 방법
우선, 지도의 크기를 (세로로) 줄이고 지도에서 일부 요소를 제거해야 합니다. 내용.
이렇게 하려면 블로그 설정을 열고 추천 이미지를 제외한 모든 요소를 숨깁니다. 이렇게 하면 게시물에 추천 이미지와 제목만 표시됩니다.
스타일 탭에서 다음과 같이 상자 그림자를 구성합니다.
- 섀도우 박스: 스크린샷 참조
- 상자 그림자 흐림 강도: 28px
- 자막 글꼴 색상: rgba(0,0,0,0.19)
측량
다음은 지금까지 얻은 결과의 미리보기입니다.
마우스를 가져가면 기사 행이 표시됩니다.
마지막으로 사용자가 떠다니는 기사와 상호 작용하도록 장려하는 멋진 호버 효과를 추가할 수 있습니다.
읽기 : Divi에서 블로그 모듈로 블로그 페이지를 만드는 방법
라인 설정 및 업데이트 옵션 열기:
사무실용
- 변신: 50%
호버 상태의 경우
- 변환: 0%
이것은 처음에 전체 라인을 브라우저 뷰포트 외부로 50% 가져옵니다. 사용자가 선 위로 마우스를 가져가면 완전히 다시 표시됩니다.
모바일에서 행 숨기기
단일 블로그 게시물을 게시하려는 경우가 아니라면 해당 블로그 게시물을 모바일에 띄우는 것은 의미가 없습니다. 너무 많은 공간을 차지하여 스크롤하려고 할 때 문제가 발생할 수 있습니다.
참조 : Divi에서 전체 헤더에 연락처 양식을 추가하는 방법
모바일에서 지도를 숨기려면 섹션 설정을 열고 휴대전화와 태블릿에서 섹션 가시성을 끕니다.
최종 결과
지금 DIVI를 다운로드하세요!!!
결론
그래서 ! 이 튜토리얼에서는 강조하고 싶은 블로그 게시물을 창의적이고 독창적인 방법으로 제시했습니다.
우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
