블로그 게시물을 개선하고 싶습니까? Divi Hero 섹션을 추가하여?
전체 화면 Hero 섹션은 모든 웹페이지에서 멋지게 보이지만 특히 블로그 게시물에서 훌륭합니다.
추천 이미지는 전체 화면이지만 제목과 메타 텍스트를 배치하기 위한 다양한 디자인 옵션이 있습니다. 로 하기 쉽습니다. Divi 테마 빌더 .
이 문서에서는 블로그 게시물 템플릿에 전체 화면 Hero 섹션을 추가하는 몇 가지 방법을 살펴봅니다. 디비.
시작하자.
측량
다음은 이 튜토리얼에서 디자인할 내용의 미리보기입니다.
게시물 제목 데스크톱 버전 모듈이 있는 영웅 섹션
포스트 제목 모바일 버전 모듈이 있는 히어로 섹션
게시물 제목 데스크톱 버전 모듈이 있는 대체 영웅 섹션 레이아웃
지금 DIVI를 다운로드하세요!!!
모바일 게시물 제목 모듈이 있는 대체 영웅 섹션 레이아웃
메타데이터 데스크톱 버전이 포함된 영웅 섹션
메타데이터 모바일 버전이 포함된 영웅 섹션
지금 DIVI를 다운로드하세요!!!
전체 화면 영웅 섹션을 위한 블로그 게시물 템플릿
다음에서 블로그 게시물 템플릿을 만들 수 있습니다. Divi 처음부터 테마 빌더를 사용하거나 우아한 테마 블로그에서 템플릿을 다운로드하세요. 찾으려면 블로그를 검색하세요. "무료 블로그 게시물 템플릿". 템플릿을 다운로드하는 경우 반드시 압축을 풀어야 합니다.
예제에서는 다음을 사용합니다. Divi의 패션 디자이너 레이아웃 팩용 무료 블로그 게시물 템플릿 . 우리는 또한 레이아웃 팩을 사용합니다 무료 머리글 및 바닥글 패션 디자이너 .
전체 화면 Hero 섹션을 위한 블로그 게시물 템플릿 다운로드 또는 생성
블로그 게시물 템플릿을 다운로드하거나 처음부터 새로 만들 수 있습니다. 하나를 업로드하겠지만, 전체 화면 Hero 섹션을 만드는 과정은 동일합니다.
방법 1: 전체 화면 게시물 제목 모듈
이 방법은 PostTitle 모듈 . 모든 정보를 함께 표시하려는 경우 좋은 선택입니다. 템플릿이 있으면 편집 아이콘을 선택하여 엽니다.
업로드한 템플릿에는 추천 이미지가 포함된 섹션이 있습니다. 이 섹션을 제거하고 전폭 섹션 그 자리에.
선택 전각 게시물 제목 전폭 모듈 목록에서.
기본적으로 모든 항목이 선택됩니다. 활성화된 상태로 두십시오. 스크롤 주요 이미지 배치 선택하고 제목 위.
- 주요 이미지 배치: 제목 위
다음으로 스크롤 배경색 색상을 #fff9f2로 설정합니다.
- 배경: #fff9f2
제목 텍스트
탭 선택 설계. 제목 텍스트의 경우 H1을 유지하고 Playfair Display를 선택합니다. 왼쪽 맞춤으로 설정하고 색상으로 #34332e를 선택합니다.
- 제목 :
- 제목 수준: H1
- 글꼴: Playfair 디스플레이
- 텍스트 정렬: 왼쪽 정렬
- 텍스트 색상: #34332e
에 텍스트 크기 , 데스크톱 버전을 65px로, 모바일 버전을 42px로, 행 높이를 1,2em으로 설정합니다.
- 제목 텍스트 크기(데스크탑): 65px(데스크탑), 42px(전화)
- 제목 줄 높이: 1,2em
메타 텍스트
다음으로 스크롤 메타 텍스트. 글꼴은 Montserrat를 선택하고 데스크탑 버전은 중간, 대문자, 오른쪽 정렬, 모바일 버전은 왼쪽 정렬로 설정합니다. 색상으로 #7b7975를 선택합니다.
- 메타글꼴:
- 글꼴: 몬세라트
- 무게: 중간
- 스타일: TT
- 메타텍스트:
- 정렬: 오른쪽(데스크톱), 왼쪽(전화)
- 색상: #7b7975
설정 글꼴 크기 데스크톱 버전의 경우 14px, 모바일 버전의 경우 10px, 글자 간격은 1px, 줄 높이는 1,6em입니다. 설정을 닫고 템플릿을 저장합니다.
- 메타텍스트:
- 크기(데스크탑): 14px
- 크기(전화): 10px
- 문자 간격: 1px
- 줄 높이: 1,6em
배경 이미지의 제목
선택한 이미지에 제목을 표시하려면 동일한 디자인 설정을 사용하고 탭으로 돌아가십시오. 내용.
선택 제목/메타 배경 이미지 용 주요 이미지 배치.
- 주요 이미지 배치: 제목/메타 배경 이미지
다음으로 스크롤 배경 선택하고 배경 그라데이션. 왼쪽 색상은 #fff9f2, 오른쪽 색상은 rgba(255,255,255,0), 방향은 90도, 시작 위치는 30%로 설정하고 예를 선택하여 배경 이미지 위에 그라디언트를 배치합니다. 닫고 설정을 저장합니다.
- 그라데이션 중지:
- 30%: #fff9f2
- 100%: RGBA(255,255,255,0)
- 기울기 방향: 90도
- 배경 이미지 위의 정사각형 그라데이션 : 예
방법 2: 메타데이터가 있는 전체 화면 Hero 섹션
이 방법은 다음과 함께 텍스트 모듈을 사용합니다. 동적 콘텐츠 정보를 위해. 모든 항목을 다른 위치에 표시하려는 경우 좋은 옵션입니다.
먼저 템플릿을 다운로드하고 첫 번째 섹션을 삭제합니다. 왼쪽 열에서 모듈과 해당 설정을 다시 생성하지만 구성할 수 있도록 단계별로 살펴보겠습니다.
메타데이터가 포함된 전체 화면 Hero 섹션 설정
의 설정을 엽니다. 섹션에 있어야 합니다. 그리고 스크롤 배경 이미지. 고르다 배경 그라데이션 다음과 같이 설정을 변경합니다.
- 그라데이션 중지:
- 30%: #fff9f2
- 100%: RGBA(255,255,255,0)
- 기울기 방향: 90도
- 배경 이미지 위의 정사각형 그라데이션 : 예
선택 배경 이미지 옵션을 선택하십시오 동적 콘텐츠 사용.
선택 주요 이미지 옵션에서.
탭 선택 디자인그리고 스크롤 크기 조정. 최소 높이에 100vh를 추가합니다. 섹션 설정을 닫습니다.
- 최소 높이: 100vh
메타데이터가 포함된 전체 화면 Hero 섹션 설정
그런 다음 섹션에 이중 열 행을 추가합니다.
추가하다 텍스트 모듈 오른쪽 열에.
그의 내용, 선택 동적 콘텐츠 사용.
선택 게시물/보관 제목 옵션 목록에서.
- 동적 콘텐츠: 게시물/아카이브 제목
탭으로 이동 디자인.
- 표제:
- 텍스트: H1
- 글꼴: Playfair 디스플레이
- 텍스트 정렬: 왼쪽 정렬
- 텍스트 색상: #34332e
크기의 경우 텍스트 , 데스크톱 버전은 65px로, 모바일 버전은 42px로, 행 높이는 1,2em으로 설정합니다.
- 표제:
- 텍스트 크기: 65px(데스크톱), 42px(전화)
- 줄 높이: 1,2em
다음으로 스크롤 간격 상단 패딩에 50%를 입력합니다. 설정을 닫습니다.
- 패딩: 50%(상단)
다음에서 이 기사를 읽을 수도 있습니다. Divi의 전체 너비 헤더 모듈로 영웅 섹션을 만드는 방법
메타데이터 카테고리가 있는 영웅 섹션
새 섹션 추가 영웅 섹션에서 일반.
설정을 열고 뢰르 #fff9f2의 배경. 설정을 닫습니다.
- 배경 색상: #fff9f2
그런 다음 추가 라인 새 섹션에 4개의 열 중.
메타데이터 범주 텍스트가 있는 전체 화면 Hero
추가하다 텍스트 모듈 왼쪽 열에
모듈 설정을 열고 선택 동적 콘텐츠 사용 본문의 경우.
선택 지난 카테고리 목록에.
- 동적 콘텐츠: 게시물 카테고리
탭 선택 디자인 제목 텍스트까지 아래로 스크롤합니다. H4를 선택합니다. 글꼴로 Playfair Display를 선택하고 데스크톱 버전의 경우 중간, 대문자, 오른쪽 정렬, 전화 버전의 경우 왼쪽 정렬로 설정합니다. 색상으로 #7b7975를 선택합니다.
- 표제:
- 텍스트 표시
- 글꼴: Playfair 디스플레이
- 글꼴 두께: 중간
- 스타일: TT
- 텍스트 정렬: 가운데
- 텍스트 색상: #7b7975
데스크톱 버전의 글꼴 크기를 14px로, 모바일 버전의 경우 10px, 글자 간격을 1px, 줄 높이를 1,6em으로 설정합니다. 설정을 닫고 템플릿을 저장합니다.
- 제목 4:
- 크기(데스크탑): 14px
- 크기(전화): 10px
- 문자 간격: 1px
- 줄 높이: 1,6em
다음으로 스크롤 간격 하단 여백에 0px를 추가합니다. 설정을 닫습니다.
- 여백(하단): 0px
메타 텍스트 메타데이터가 포함된 전체 화면 Hero 섹션
그런 다음 Category 모듈을 복사하여 다음 열로 드래그합니다. 각 메타 모듈에는 동일한 설정이 있습니다. 첫 번째 모듈을 만든 다음 두 번 복사하여 다른 모듈을 만드는 방법을 보여줍니다.
저자
설정을 열고 삭제하세요. 내용 동적.
클릭 동적 콘텐츠 사용 선택하고 포스트 작성자.
- 동적 콘텐츠: 포스트 작성자
탭에서 디자인, 다음 설정을 변경하십시오.
- 제목 4:
- 글꼴: 몬세라트
- 글꼴 두께: 중간
- 스타일: TT
- 텍스트 정렬(데스크탑): 가운데
- 텍스트 정렬(전화): 왼쪽
- 색상: #7b7975
레 파라메트르 드 글꼴 크기 포함하다:
- 텍스트 크기: 14px(데스크톱), 10px(전화)
- 문자 간격: 1px
- 줄 높이: 1,6em
La 하단 여백 0px가 있어야 합니다.
- 여백(하단): 0px
날짜
복사 작성자 모듈을 선택하고 다음 열로 드래그합니다.
삭제 내용 동적 현재, 선택 동적 콘텐츠 사용 선택하고 게시일 이후. 설정을 닫습니다.
- 동적 콘텐츠: 게시 후 날짜
commentaires
어쨌든, 복사 Post Publish Date 모듈을 선택하고 마지막 열로 드래그합니다.
다른 모듈과 마찬가지로 동적 콘텐츠를 제거하고 동적 콘텐츠 사용 .
선택 게시물 댓글 수 당신의 선택에서.
- 동적 콘텐츠: 게시물 댓글 수
이번에는 필드에 공백과 Comments라는 단어를 추가합니다. 후 . 작은 모달을 닫은 다음 설정을 닫습니다. 작업을 저장하십시오.
- 이후: 댓글
Résultats
게시물 제목 데스크톱 버전 모듈이 있는 영웅 섹션
포스트 제목 모바일 버전 모듈이 있는 히어로 섹션
게시물 제목 데스크톱 버전 모듈이 있는 대체 영웅 섹션 레이아웃
모바일 게시물 제목 모듈이 있는 대체 영웅 섹션 레이아웃
메타데이터 데스크톱 버전이 포함된 영웅 섹션
모바일 버전 메타데이터가 포함된 Hero 섹션
지금 DIVI를 다운로드하세요!!!
결론
그게 다야! 블로그 게시물 템플릿에 전체 화면 Hero 섹션을 추가하는 방법을 살펴봅니다. Divi.
모듈 Divi Theme Builder는 전체 화면 Hero 섹션을 생성하기 위한 여러 옵션을 제공합니다. 모든 방법은 매우 효과적이며 모두 장점이 있습니다.
이러한 방법을 사용하여 모든 Divi 블로그 게시물 템플릿에 전체 화면 Hero 섹션을 추가할 수 있습니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
