Divi로 압도적인 영웅 섹션을 만드는 방법
게시 됨: 2017-11-03영웅 섹션; 그들은 모든 종류의 목적을 수행합니다. 방문자가 귀하의 웹사이트를 방문할 때 가장 먼저 보게 되는 것은 웹사이트의 스타일을 즉시 보여주고 방문자가 귀하의 사이트에서 느끼고 행동하는 방식에 영향을 미칩니다. 우리는 이미 모든 종류의 영웅 섹션에 익숙하지만 대부분은 영웅 이미지, 태그라인 및 클릭 유도문안을 포함합니다. 하지만 다른 가능성도 있습니다. 이 게시물에서 우리는 영웅 섹션에 대한 또 다른 접근 방식을 보여주고 Divi를 사용하여 다시 만들 수 있는 예제를 따라갈 것입니다.
예시
Divi를 사용하여 다시 만드는 방법의 예는 데스크탑에서 다음과 같습니다.
그리고 모바일에서 다음과 같이:
영웅 섹션을 돋보이게 만드는 방법
예제를 다시 만드는 방법을 보여주기 전에 이 영웅 섹션을 다른 섹션과 구별하는 몇 가지 요소를 살펴보겠습니다.
1. 크고, 설명적이고 중앙 집중화된 로고
영웅 섹션을 돋보이게 하기 위해 이 예제에서 가장 먼저 사용하는 것은 기본값 대신 중앙 헤더 형식입니다. 그와 함께 영웅 섹션 디자인과 메뉴 항목을 겹치는 데 도움이 되는 투명 메뉴도 사용하고 있습니다. 로고, 메뉴 및 웹 사이트 간의 링크는 투명 배경을 사용할 때 영웅 섹션 내에 하나의 분할이 적기 때문에 더 명확합니다.
2. 서면 콘텐츠 집중
당신의 영웅 섹션을 돋보이게 하기 위해 할 수 있는 또 다른 일은 당신이 가지고 있는 서면 콘텐츠에 집중하는 것입니다. 그렇게 하면 방문자의 주의를 화면의 한 곳으로 끌어서 더 큰 화면을 읽을 가능성을 높일 수 있습니다. 반면에 전체 영웅 섹션에 걸쳐 서면 콘텐츠를 나누는 경우 변경 사항으로 인해 전달하려는 메시지의 일부를 놓칠 가능성이 높아집니다.
3. 고유한 판매 제안 강조
일반적으로 영웅 섹션에는 제품 또는 회사의 태그라인을 공유하는 일반 텍스트 모듈이 포함됩니다. 그러나 영웅 섹션에서도 Blurb 모듈을 사용할 수 있습니다. 이 Blurb 모듈은 제품 또는 서비스의 고유한 판매 제안을 즉시 공유하려는 경우에 적합합니다. 또한 클릭 유도문안을 즉시 포함할지 여부를 선택할 수도 있습니다. 이 예에서 이러한 클릭 유도문안은 블러브 모듈 자체에 내장되어 있습니다.
4. 깨끗한 제품 이미지
당신이 제공한 서면 콘텐츠의 균형을 유지하기 위해 깨끗한 제품 이미지를 히어로 섹션 배경 이미지로 사용하는 것이 좋습니다. 영웅 이미지가 전체 영웅 섹션을 차지하지 않고 가능한 한 질적이고 자명하기를 원합니다.
Divi로 압도적인 영웅 섹션을 만드는 방법
YouTube 채널 구독
Divi로 예제 재생성
이론적인 측면을 살펴보았으므로 이제 다시 만들 차례입니다.
헤더 형식
가장 먼저 해야 할 일은 WordPress 대시보드 > 사용자 정의 > 머리글 및 탐색 > 머리글 형식 > 머리글 스타일로 '가운데'를 선택하여 머리글 스타일로 '가운데'를 선택하는 것입니다.
기본 메뉴 모음 설정
그런 다음 머리글 및 탐색 > 기본 메뉴 막대 > 그리고 다음 조정으로 이동합니다.
- 메뉴 높이: 211px
- 로고 최대 높이: 100px
- 텍스트 크기: 16
- 문자 간격: 2
- 글꼴: Lato Light
- 글꼴 스타일: 대문자
- 텍스트 색상: #FFFFFF
- 활성 링크 색상: #FFFFFF
- 배경색: rgba(255,255,255,0)
- 드롭다운 메뉴 배경색: rgba(255,255,255,0)
새 섹션 추가
완료되면 새 페이지를 추가하고 Divi Builder를 활성화하고 Visual Builder를 활성화하고 새 표준 섹션을 추가합니다.
그라데이션 배경
이 섹션에 다음 그라데이션 배경을 사용합니다.
- 첫 번째 색상: #e2e2e2
- 두 번째 색상: rgba(255,255,255,0)
- 그라디언트 유형: 선형
- 기울기 방향: 180deg
- 시작 위치: 40%
- 최종 위치: 40%
배경 이미지
그런 다음 배경 이미지를 업로드하고 배경 이미지 혼합으로 '곱하기'를 선택합니다.
2열 행 추가
배경색
방금 만든 섹션에 2열 행을 추가하고 배경색으로 '#b7afa1'을 사용합니다.
열 1 그라데이션 배경
아래로 스크롤하여 첫 번째 열에 다음 그라데이션 배경을 사용합니다.
- 첫 번째 색상: rgba(255,255,255,0.43)
- 두 번째 색상: rgba(255,255,255,0)
- 열 1 그라디언트 유형: 방사형
- 열 1 그라데이션 방향: 왼쪽 상단
- 열 1 시작 위치: 49%
- 열 1 끝 위치: 49%
2열 그라데이션 배경
그리고 두 번째 열에 다음 그라데이션 배경을 사용합니다.
- 첫 번째 색상: rgba(255,255,255,0.43)
- 두 번째 색상: rgba(255,255,255,0)
- 열 2 그라디언트 유형: 방사형
- 열 2 방사형 방향: 오른쪽 하단
- 열 2 시작 위치: 49%
- 열 2 끝 위치: 49%
사이징
디자인 탭으로 이동하여 '사용자 지정 거터 너비 사용' 옵션을 활성화하고 거터 너비에 '1'을 사용합니다.
간격
Spacing 하위 범주를 열고 다음 패딩 및 여백을 사용합니다.
- 상단 패딩: 0px(데스크톱), 20px(태블릿 및 휴대폰)
- 오른쪽 패딩: 25px
- 하단 패딩: 20px
- 왼쪽 패딩: 25px
- 하단 여백: 200px
첫 번째 Blurb 모듈
활성화 아이콘
행의 첫 번째 열에 Blurb 모듈을 추가하고 '아이콘 사용' 옵션을 활성화하고 아이콘을 선택합니다.
아이콘 설정
그런 다음 디자인 설정으로 이동하여 이미지 및 아이콘 하위 범주를 다음과 같이 변경합니다.
- 아이콘 색상: #FFFFFF
- 이미지/아이콘 배치: 왼쪽
- 아이콘 글꼴 크기 사용: 예
- 아이콘 글꼴 크기: 40px
헤더 텍스트 설정
그런 다음 헤더 텍스트 하위 범주에 다음 설정을 적용합니다.
- 헤더 글꼴: Roboto Light
- 글꼴 스타일: 굵게
- 헤더 글꼴 크기: 25px
- 헤더 텍스트 색상: #FFFFFF
- 헤더 라인 높이: 1.5em
본문 설정
본문 하위 범주에는 다음 변경 사항이 필요합니다.
- 본문 글꼴: Lato Light
- 본문 글꼴 크기: 13px
- 본문 색상: #FFFFFF
사이징
다음으로 콘텐츠 너비로 '300px'를 사용합니다.
간격
마지막으로 Blurb 모듈에 다음 여백과 패딩을 사용합니다.
- 상단 여백: -50px(데스크톱), 0px(태블릿 및 휴대폰)
- 상단 패딩: 100px
- 오른쪽 패딩: 10px
- 하단 패딩: 30px
- 왼쪽 패딩: 10px
Blurb 모듈 복제 및 두 번째 열에 배치
이전에 만든 Blurb 모듈을 복제하고 다른 열에도 배치하여 계속합니다.
배경색 변경
이 복제된 Blurb 모듈에서 가장 먼저 변경해야 할 것은 배경색입니다. 'rgba(89,60,31,0.5)'로 변경합니다.
아이콘 변경
다음으로 마지막으로 변경해야 할 사항은 콘텐츠 탭 내의 아이콘입니다.
추가: 행에 Divi의 새 상자 그림자 옵션 추가
최근 업데이트로 이제 행, 모듈 및 섹션에 상자 그림자를 추가할 수도 있습니다. 이 예에서는 행에 상자 그림자를 추가합니다. 이것은 우리의 영웅 섹션에서 약간의 깊이를 만들고 작성된 내용을 강조하는 데 도움이 될 것입니다.
- 상자 그림자 수평 위치: -3px
- 상자 그림자 수직 위치: 31px
- 상자 그림자 흐림 강도: 79px
- 상자 그림자 확산 강도: -4px
- 그림자 색상: #424242
- 상자 그림자 위치: 외부 그림자
결과
이 게시물을 따른 후 데스크탑에서 달성할 수 있어야 하는 결과에 대해 또 다른 빠른 결과를 살펴보겠습니다.
그리고 모바일:
마지막 생각들
이 게시물에서 우리는 영웅 섹션에 대한 다른 접근 방식을 보여주었습니다. Divi로 미리 만든 예제를 다시 만드는 방법을 보여줌으로써 몇 가지 팁을 제공하고 해당 팁을 자세히 설명했습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요!
중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!
Ellagrin/Shutterstock.com의 주요 이미지