Divi: 블로그 모듈로 블로그 페이지를 만드는 방법

블로그 모듈로 블로그 페이지를 만드시겠습니까? de 디비?

일반적으로 에 게시된 모든 Divi 레이아웃 팩 우아한 테마 블로그 레이아웃을 제공합니다. 블로그 충분히 빠르다. 하지만 이러한 블로그 페이지 중 하나를 직접 만드는 방법을 보고 싶었던 적이 있습니까?

이 기사에서는 Divi의 블로그 모듈을 사용하여 블로그 페이지를 만드는 방법을 살펴봅니다. 각 설정을 단계별로 진행합니다.

시작하자!

측량

시작하기 전에 먼저 만들 항목에 대한 개요를 살펴보겠습니다.

새 블로그 페이지 만들기

새 페이지 만들기

먼저 페이지를 생성하겠습니다. WordPress 대시보드에서 페이지 > 에 추가.

귀하에게 의미가 있는 페이지 제목을 지정하십시오.

페이지 제목: Divi의 블로그

Divi Builder로 전환

페이지 중앙에 있는 보라색 버튼을 클릭합니다. Divi Builder 사용 .

블로그 페이지 제목 섹션 추가

섹션 사용자 지정

첫 번째 섹션부터 시작하겠습니다. 열어 섹션 매개변수 .

다음으로 스크롤 배경 색상을 #f9f3fd로 변경합니다. 블로그를 관리자 레이블로 입력합니다. 섹션 설정을 닫습니다.

배경: #f9f3fd
관리자 레이블: 블로그

블로그 페이지 제목 만들기

그런 다음 우리는 추가합니다 라인 제목을 위해. 녹색 아이콘을 선택하고 단일 열 행을 선택합니다.

그런 다음 추가 텍스트 모듈 라인에서.

블로그 제목 텍스트 모듈 사용자 정의

그들을 열어 라. 텍스트 모듈 설정 H1을 선택합니다. 제목을 우리 블로그에 추가합니다.

글꼴: 제목 1
텍스트: 우리 블로그

그런 다음스타일 탭 정렬을 가운데로 설정합니다. H1 제목 텍스트의 경우 글꼴로 Cormorant Infant를 선택하고 굵게 만듭니다.

텍스트 정렬: 가운데
헤더 텍스트: H1
헤더 글꼴: 가마우지 유아
소프트 라이트 헤더: 굵은 텍스트

Color를 #442854로, Size를 130px로, Line Height를 0,8em으로 설정합니다.

색상 : #442854
데스크탑 텍스트 크기: 130px
줄 높이: 0,8em

블로그 이메일 텍스트 모듈 추가 및 사용자 정의

이제 오른쪽 열로 이동하여 이메일을 통해 클릭 유도문안 만들기 . 먼저 오른쪽 열에 Text 모듈을 추가합니다. 회색 더하기 아이콘을 클릭하고 텍스트를 검색합니다.

내용

제목 2를 선택하고 제안 구독 텍스트를 입력합니다.

글꼴: 제목 2
텍스트: 제안 구독

헤더 텍스트

용 텍스트 제목에서 Center Alignment를 선택하고 H2를 선택하고 Cormorant Infant를 선택하고 Bold로 설정합니다.

텍스트 정렬: 가운데
헤더 텍스트: H2
헤더 글꼴: 가마우지 유아
소프트 라이트 헤더: 굵게

색상을 #442854로, 크기를 32px로, 라인 높이를 0,95em으로 변경합니다.

헤더 텍스트 색상: #442854
헤더 텍스트 크기: 32픽셀
헤더 행 높이: 0,95em

간격

마지막으로 아래로 스크롤하여 간격 하단 여백에 10픽셀을 추가합니다. 텍스트 모듈 설정을 닫습니다.

하단 여백: 10px

블로그 이메일 Optin 모듈 추가 및 사용자 정의

그럼 우리는 간다 창조하다 형태 이메일 . 오른쪽 열의 텍스트 모듈 아래에 이메일 옵틴 모듈을 추가합니다.

내용

먼저 제목과 본문을 제거합니다.

제목: 없음
본문: 없음

다음으로 스크롤 이메일 계정 서비스 제공업체를 추가합니다.

그런 다음 아래로 스크롤하여 배경 배경색을 선택 해제합니다.

배경색 사용: 아니요

분야

로 이동 스타일 탭 필드 배경색을 rgba(255,255,255,0)로 변경하고 텍스트 색상을 #442854로 변경합니다.

배경색 필드: rgba(255,255,255,0)
텍스트 색상 필드: #442854

아래로 스크롤 글꼴 옵션 글꼴을 Cabin으로 변경하고 크기를 16px로, 줄 높이를 1,8em으로 변경합니다.

글꼴 필드: 캐빈
텍스트 크기 필드: 16픽셀
필드 행 높이: 1,8em

그런 다음 필드의 둥근 모서리를 32px, 테두리 너비를 2px로 조정하고 테두리 색상을 #442854로 변경합니다.

둥근 사각형 컨트롤: 32px
테두리 너비 필드: 2px
테두리 색상 필드: #442854

단추

버튼으로 스크롤하여 선택 버튼에 사용자 정의 스타일 사용 . 크기를 18ps로, 버튼 색상을 흰색으로, 버튼 배경 색상을 #442854로 변경합니다.

버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 크기: 18픽셀
버튼 텍스트 색상: #ffffff
배경 버튼: #442854

경계 반경을 50픽셀로 변경하고 글꼴을 가마우지 유아로 변경하고 두께를 굵게 만듭니다.

테두리 반경 버튼: 50px
글꼴 버튼: 가마우지
소프트 라이트 버튼: 굵은 텍스트

마지막으로 여백을 추가해 보겠습니다. 위쪽 여백에 20px, 위쪽 및 아래쪽 패딩에 12px, 왼쪽 및 오른쪽 패딩에 32px를 입력합니다. 이메일 옵틴 설정을 닫습니다.

상단 여백 버튼: 20픽셀
상단 및 하단 패딩 버튼: 12픽셀
버튼 왼쪽 및 오른쪽 패딩: 32px

블로그 게시물 목록에 새 줄 추가

우리는 지금 항목 목록 만들기 페이지의. 먼저 이전 섹션 아래에 새 단일 열 행을 추가합니다.

라인 설정

로 이동 스타일 탭 정점 내부 여백에 0px를 추가합니다. 회선 설정을 닫습니다.

내부 여백 정점: 0px

라인에 블로그 모듈 추가

추가하다 블로그 모듈 회색 더하기 아이콘을 클릭하고 블로그를 클릭하여 새 라인으로 이동합니다.

블로그 게시물 피드 스타일 지정

블로그 페이지 피드를 변경해 보겠습니다.

블로그 피드 콘텐츠

그들을 열어 라. 블로그 모듈 설정 게시물 수로 3을 입력합니다. 이를 통해 화면에 표시되는 게시물 수를 선택할 수 있습니다.

3과 같이 낮은 숫자를 사용하면 최근 게시물에 집중하고 페이지 크기를 줄일 수 있습니다. 자주 게시하지 않거나 페이지를 깔끔하게 유지하려는 경우에 좋은 선택입니다. 블로그 흐름에 집중하려면 6-9와 같은 게시물을 더 많이 표시하는 것이 좋습니다.

게시물 수: 3

오프셋에 1을 입력합니다. 이렇게 하면 Divi가 두 번째 블로그 게시물부터 시작하도록 지시하므로 위에 표시된 블로그 게시물에 이미 표시된 동일한 기사가 표시되지 않습니다.

포스트 오프셋 번호: 1

요소

다음으로 스크롤 요소 . 추천 이미지, 날짜, 카테고리 스니펫 및 페이지 매김을 활성화합니다. 나머지를 비활성화합니다.

추천 이미지 표시: 예
데이터: 예
카테고리: 예
발췌: 예
페이지 매김: 예

배경

액세스 권한 배경 그리드 타일 배경색을 rgba(255,255,255,0)로 설정합니다.

그리드 그리드 타일 배경색: rgba (255,255,255,0)

레이아웃 및 오버레이

그런 다음 스타일 탭 . 레이아웃을 Grid로 설정한 상태로 둡니다. 우리는 이 위에 있는 블로그 게시물에 대해 전체 너비 레이아웃을 선택했습니다. 이 블로그 피드에 대해 기본 옵션인 그리드 레이아웃을 사용할 것입니다. 추천 이미지 오버레이를 비활성화합니다.

레이아웃: 그리드
선택한 이미지 오버레이: 비활성화됨

제목 텍스트

용 제목 텍스트 , H2를 선택합니다. 가마우지 유아를 선택하고 굵게 설정하고 색상에 #442854를 입력합니다.

제목 2 삽입: HXNUMX
글꼴 제목: 가마우지
소프트 라이트 제목: 굵은 텍스트
제목 텍스트 색상: #442854

텍스트 크기로 20px를 선택합니다. 선 높이를 1,1em으로 설정합니다.

제목 텍스트 크기: 바탕 화면 20px
제목 줄 높이: 1,1em

본문 텍스트

다음으로 스크롤 본문 그리고 캐빈을 선택합니다. 색상을 #442854로 설정합니다.

경찰대: 캐빈
본문 색상: #442854

선 높이를 1,8em으로 설정합니다.

줄 높이: 1,8em

텍스트 메타데이터

다음으로 스크롤 텍스트 메타데이터 가마우지 유아를 선택합니다. weight를 normal로, style을 none으로, color를 #442854로 설정합니다.

메타데이터 글꼴: 가마우지 유아
메타데이터 희미한 빛: 일반
메타데이터 복사 스타일: 없음
메타데이터 텍스트 색상: #442854

메타데이터 텍스트 크기: 데스크탑 16px, 태블릿 15px, 전화 14px
메타데이터 행 높이: 1,8em

페이지 매김 텍스트

이제 가자 쪽수 매기기 . 글꼴의 경우 Cormorant Infant를 선택하고 Bold를 선택한 다음 색상을 #442854로 변경합니다.

글꼴 표시 페이지 매김: 가마우지 유아
페이징 소프트 라이트 표시: 굵게
텍스트 색상 페이지 매김 표시: #442854

간격

다음으로 넘어가겠습니다. 간격 상단에 0vw 여백을 추가하십시오. 이것은 우리 모듈이 이전 모듈과 겹치는 것을 방지합니다.

최고 여백: 0vw

경계

다음으로 스크롤 경계 네 모서리 모두에 0px를 입력합니다. 이것은 지도의 정사각형 모양을 제공합니다.

둥근 사각형 격자 레이아웃: 0px

그림자 상자

마지막으로 아래로 스크롤하여 박스 섀도우 비활성화합니다. 블로그 설정을 닫습니다. 블로그 섹션이 완료되었습니다.

그림자 상자: 없음

블로그 페이지에 새로운 "클릭 유도문안" 섹션 추가

그럼 우리는 간다 "클릭 유도문안" 섹션 만들기 페이지의. 이 섹션에는 시차 전체 화면 배경 이미지, CONTACT 및 소셜 팔로우 링크.

새 섹션 추가

파란색 아이콘을 클릭하면 새 일반 섹션 추가 페이지 하단에 있습니다.

섹션: 일반

클릭 유도문안 섹션 스타일 지정

그들을 열어 라. 섹션 매개변수 톱니바퀴 아이콘을 클릭하면 됩니다.

배경

다음으로 스크롤 배경 이미지 탭을 선택합니다. 배경 이미지라고 표시된 회색 아이콘을 클릭합니다.

미디어 라이브러리에서 전체 화면 이미지를 선택합니다. 시차 효과 사용을 선택한 다음 시차 방법으로 CSS를 선택합니다.

배경 이미지
시차 효과 사용: 예
시차 방법: CSS

관리자 레이블까지 아래로 스크롤하고 필드에 "바닥글"을 입력합니다. 이렇게 하면 섹션을 추적하는 데 도움이 됩니다.

관리자 태그: 바닥글

그런 다음 스타일 탭.

내부 여백: 10vw(상단 및 하단)

새 행 추가

녹색 더하기 아이콘을 클릭하고 단일 열에 행 추가 우리의 콘텐츠를 위해.

크기 조정

그들을 열어 라. 라인 매개변수 스타일 탭으로 이동합니다.

최대 너비: 320픽셀

제목 텍스트 모듈

행동 촉구 섹션에는 제목이 표시됩니다. 이것을 만들려면, 텍스트 모듈 추가 라인에서.