Fullwidth Header 모듈로 Hero Divi 섹션을 만들거나 직접 디자인하시겠습니까?
영웅 섹션 구축 사이트 웹 처음부터 또는 Divi Fullwidth Header 모듈을 사용하는 것은 눈길을 끄는 디자인을 만드는 두 가지 방법입니다. 웹 사이트.
이 기사에서는 전체 너비 헤더 모듈을 사용하는 것과 Divi로 자신의 영웅 섹션을 만드는 것의 장단점을 살펴보겠습니다.
가자!
웹사이트 영웅 섹션의 중요성
영웅 섹션은 가장 먼저 표시되는 섹션입니다. 방문자 그들이 당신의 집에 언제 도착하는지 확인하세요 사이트 웹. 이는 대개 전체 너비 배너이며 영웅 헤더라고도 합니다. 이는 지속적인 첫인상을 남기는 힘이 있기 때문에 웹사이트에서 눈에 띄는 장소입니다.
따라서 시선을 사로잡으면서도 읽기 쉽도록 디자인하는 것이 중요합니다. 웹사이트 히어로 섹션은 잠재 고객의 관심을 끌고, 페이지를 빠르게 설명하고, 추가적인 참여와 잠재 리드를 유도할 수 있기 때문에 중요합니다. 히어로 섹션은 브랜드화되어야 하며 H1 제목과 CTA를 포함해야 합니다.
Hero 섹션을 처음부터 새로 만들기
영웅 섹션을 처음부터 디자인하면 디자인과 내용을 완벽하게 제어할 수 있습니다. 내용. 귀하의 상황과 필요에 따라 이는 귀하의 웹사이트에 훌륭한 솔루션이 될 수 있습니다.
이 접근 방식의 장단점을 살펴보겠습니다.
이 접근 방식의 이점
먼저 Divi를 사용하여 처음부터 웹사이트 Hero 섹션을 구축할 때의 이점을 살펴보겠습니다.
- 전체 설계 제어
- 모든 Divi 모듈 사용
이 접근 방식의 단점
이제 처음부터 영웅 섹션을 만드는 것의 단점을 살펴보겠습니다.
- 처음부터 빌드해야 합니다.
- 여러 모드가 필요합니다
Divi Fullwidth Header 모듈로 Hero 섹션 만들기
Divi Fullwidth Header 모듈을 사용하여 영웅 섹션을 만들면 시선을 사로잡는 모바일 반응형 디자인을 단 몇 분 만에 쉽게 만들 수 있습니다.
이 접근 방식의 장단점을 살펴보겠습니다.
이 접근 방식의 이점
Divi Fullwidth Header 모듈을 사용하여 Hero 섹션을 구축할 때의 이점을 살펴보겠습니다.
- 당신의 모든 내용 단일 모듈에 있습니다
- 이미 최적화된 디자인
이 접근 방식의 단점
이제 Divi Fullwidth Header 모듈을 사용하여 Hero 섹션을 디자인할 때의 단점을 평가해 보겠습니다.
- 설계에 따른 유연성 감소
Divi Fullwidth Header 모듈에는 다음과 같은 옵션이 제공됩니다. 내용 사전 정의되어 있지만 모듈에서 사용할 수 없는 콘텐츠를 추가하려는 경우 많은 부분이 제한될 수 있습니다. 이는 전체 디자인의 유연성이 떨어짐을 의미합니다.
두 개의 Hero 섹션을 단계별로 구성
이제 두 접근 방식의 장단점을 이해했으므로 각 접근 방식이 어떻게 작동하는지 정확히 볼 수 있도록 각 Hero 섹션을 구축해 보겠습니다.
Divi Builder로 새 페이지 만들기
시작하려면 다음을 수행해야 합니다.
- 디비 설치 귀하의 워드 프레스 웹 사이트.
- 페이지를 추가하고 제목을 지정합니다.
- 비주얼 빌더 활성화
처음부터 영웅 섹션 만들기
이제 페이지가 설정되었으므로 처음부터 영웅 섹션 만들기를 시작하겠습니다.
지금 DIVI를 다운로드하세요!!!
"Divi Builder" 활성화
Divi의 드래그 앤 드롭 빌더를 사용하려면 버튼을 클릭하여 Visual Builder를 활성화해야 합니다. "DiviBuilder 사용". Divi Visual Builder를 사용하여 페이지를 다시 로드합니다.
선택: 처음부터 빌드
이제 비주얼 빌더가 활성화된 페이지가 다시 로드되었으므로 " 처음부터 만들기 디자인할 때 작업할 빈 페이지가 있도록 합니다.
행 추가 및 열 구성
다음 열 구조로 행을 만듭니다.
모드 추가
이제 필요한 콘텐츠 모듈을 추가해 보겠습니다.
- 2 텍스트 모듈, 구분선, 왼쪽 열의 버튼
- 1 중간 열의 이미지 모듈
- 1 오른쪽 열의 이미지 모듈
스타일 섹션
이제 섹션 설정을 구성해 보겠습니다.
섹션을 추가한 후 다음 설정을 구성합니다.
- 배경: #1d1d25
헤더 텍스트 스타일
헤더 텍스트 사용자 정의:
- 제목 1:
- 글꼴 두께: 반 굵게
- 텍스트 색상: #ffffff
- 텍스트 크기: 90px
- 줄 높이: 1,1em
분리 기호
구분선 설정을 구성합니다.
- 선 색상: rgba(255,255,255,0.3)
- 디바이더 무게: 10px
- 최대 너비: 260px
본문
본문 사용자 정의:
- 텍스트 색상: rgba(255,255,255,0.7)
- 텍스트 크기: 13px
- 줄 높이: 1,8em
단추
이제 버튼을 사용자 정의해 보겠습니다.
버튼 탭에서:
- 버튼에 사용자 정의 스타일 사용: 예
- 버튼 텍스트 크기: 14px
- 텍스트 색상: #ffffff
- 버튼 배경:
- 테두리 너비: 0픽셀
- 테두리 반경: 0픽셀
간격 탭에서:
- 상단 및 하단: 40px
- 왼쪽 및 오른쪽: 20px
이미지 추가
이미지 모듈에 이미지를 추가합니다.
라인 설정 조정
인라인 매개변수:
- 여백(왼쪽): 15vw
두 번째 열 조정
두 번째 열에서 다음 설정을 구성합니다.
맞춤 CSS
다음 코드를 기본 요소의 코드 섹션에 붙여넣습니다.
argin-right: -15vw!important;
z-index: 100!important;간격
100픽셀의 상단 패딩을 추가합니다.
그래서 ! 이제 완전히 디자인된 맞춤형 영웅 섹션이 생겼습니다.
지금 DIVI를 다운로드하세요!!!
Divi의 전체 너비 헤더 모듈을 사용하여 영웅 섹션 만들기
이제 Divi의 전체 너비 헤더 모듈을 사용하여 이 영웅 섹션을 다시 만드는 방법을 살펴보겠습니다.
지금 DIVI를 다운로드하세요!!!
페이지를 추가하고 처음부터 빌드를 선택합니다.
새 페이지를 추가하고 제목을 지정한 다음 "Divi Builder 사용"을 클릭한 다음 처음부터 작성을 선택하십시오.
전각 섹션 및 전각 헤더 삽입
섹션 삽입 전체 넓이을 선택한 다음 전폭 헤더 모듈 라이브러리에서.
내용
텍스트 탭의 모듈에 텍스트 콘텐츠를 추가합니다.
이미지
이미지 탭에서 이미지를 추가합니다.
배경색 변경
배경 탭에서 다음 설정을 구성합니다.
- 배경: #1D1D25
헤더 텍스트
헤더 텍스트 설정 구성:
- 제목 글꼴 두께: 굵게
- 텍스트 크기: 90px
본문
본문 설정 구성:
- 본문 텍스트 색상: rgba(255,255,255,0.55)
자막 텍스트
캡션 텍스트 설정을 구성합니다.
- 자막 글꼴 두께: 굵게
- 텍스트 색상: #4C594C
- 문자 간격: 3px
버튼
이제 두 개의 버튼을 사용자 정의해 보겠습니다.
버튼 하나
Button One 탭에서 다음 설정을 구성합니다.
- 버튼 XNUMX에 사용자 정의 스타일 사용: 예
- 버튼 XNUMX
- 배경: #4c594c
- 테두리 너비: 0픽셀
- 테두리 반경: 0px
- 아이콘 표시 : 예
- 호버 시 아이콘만 표시: 아니요
- 패딩: 25픽셀(상단 및 하단); 25px(좌), 50px(우)
버튼 XNUMX
버튼 XNUMX 탭에서 다음 설정을 구성합니다.
- 버튼 XNUMX에 사용자 정의 스타일 사용: 예
- 버튼 0 테두리 너비: XNUMX픽셀
- 테두리 반경: 0px
- 패딩: 25px(상단, 하단, 왼쪽 및 오른쪽)
- 버튼 박스 섀도우: 4번째 선택
- 상자 그림자 수평 위치: 0px
- 상자 그림자 수직 위치: 2px
- 그림자 색상: #ffffff
그래서 ! 이제 Divi Fullwidth Header 모듈을 사용하여 완전히 설계된 Hero 섹션이 있습니다.
또한보십시오: Divi: 요소 간에 배경 전환을 만드는 방법
지금 DIVI를 다운로드하세요!!!
결론
처음부터 새로 만들든 Fullwidth Header 모듈을 사용하든 Divi로 Hero 섹션을 쉽게 만들 수 있습니다. 두 옵션 모두 사용자의 관심을 끄는 멋진 헤더 디자인을 만들 수 있습니다. 방문자.
고유한 요구 사항에 따라 두 옵션 모두 영웅 섹션을 스타일링할 때 고려해야 할 훌륭한 옵션입니다.
두 가지의 장단점을 모두 읽은 후 Hero 섹션을 어떻게 디자인하시겠습니까?
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
