에 대한 전역 헤더를 생성해야 합니다. 웹 사이트 디비와?
전역 헤더는 귀하의 모든 사이트 웹, 페이지나 게시물에 다른 헤더를 할당하지 않은 경우.
시작하자!
측량
다음은 우리가 디자인할 전역 헤더의 미리보기입니다.
메인 메뉴 구성
WordPress 사이트의 모양 설정에서 메뉴를 만드는 것으로 시작하십시오.
Divi에서 테마 빌더 옵션에 액세스
의 옵션에서 디비 테마, 테마 빌더를 클릭합니다. 일단 거기에, 당신은 웹 사이트 템플릿 기본.
전역 헤더 추가 및 생성
Le 웹 사이트 템플릿 default는 사용자 지정 전역 머리글, 전역 본문 및 전역 바닥글 만들기를 시작할 수 있는 곳입니다. "전역 헤더 추가"를 클릭하고 "전역 헤더 작성"을 클릭하여 계속 진행하여 프로세스를 시작하십시오.
섹션 설정
크기 조정
페이지에 있는 섹션 설정을 열고 스타일 탭에서 다양한 화면 크기의 치수를 변경합니다.
- 최대 너비: 100%
- 최대 너비: 1280px(PC 및 태블릿용), 100%(모바일용)
간격
모든 상단 및 하단 내부 여백 제거
- 내부 여백 정점: 0px
- 하단 내부 여백: 0px
경계
이제 섹션의 왼쪽 및 오른쪽 하단 모서리에 테두리 반경을 추가합니다.
- 왼쪽 하단: 50px
- 오른쪽 하단: 50px
그림자 상자
미묘한 상자 그림자도 추가해 보겠습니다.
- 상자 그림자 흐림 강도: 60px
- 자막 글꼴 색상: rgba(0,0,0,0.13)
시계
- 수평 오버플로: 볼 수 있음
- 수직 오버플로: 표시
헤더에 새 줄을 지정합니다.
이제 일반 섹션 설정을 완료했으므로 행 추가를 시작할 수 있습니다. 전체적으로 두 줄이 필요합니다. 하나는 헤더 전용이고 다른 하나는 메뉴 항목을 표시할 수 있도록 합니다. 다음 열 구조를 사용하여 새 행을 추가하여 헤더부터 시작하겠습니다.
라인 설정
배경 설정
라인에 모듈을 추가하지 않고 라인 설정을 열고 배경색을 변경합니다.
- 배경: #38383F
크기 조정
그런 다음 선 크기 매개변수를 수정합니다.
- 사용자 지정 거터 너비 사용: 예
- 열 간격: 1
- 최대 너비: 100%
- 최대 너비: 100%
보기
이제 이 CSS 코드 줄을 기본 행 요소에 추가하여 작은 화면에서 열이 나란히 표시되도록 합시다.
01
display: flex;
1열에 이미지 모듈 추가
로고 다운로드
행 설정을 완료했으면 모듈 추가를 시작할 차례입니다. 1열에 이미지 모듈을 추가하고 로고를 업로드하세요.
조정
스타일 탭으로 이동하여 이미지를 왼쪽에 맞춥니다.
크기 조정
또한 모듈의 너비를 수정합니다.
간격
또한 사용자 정의 여백 값을 추가하십시오.
2열에 소셜 미디어 추적 모듈 추가
소셜 네트워크 추가
두 번째 열로 가자. 소셜 미디어 추적 모듈이 필요합니다. 원하는 소셜 네트워크를 추가하세요. 원하는 만큼 소셜 미디어를 추가할 수 있습니다.
소셜 네트워크 배경색
다음으로, 각 소셜 네트워크를 개별적으로 열고 배경색을 완전히 투명한 색상으로 변경합니다.
- 배경색: rgba(0,0,0,0)
조정
일반 모듈 설정으로 돌아간 다음 모듈의 전체 정렬을 변경합니다.
아이콘
아이콘 설정도 변경합니다.
- 아이콘 색상: #FFFFFF
- 사용자 정의 아이콘 크기 사용: 예
- 아이콘 글꼴 크기: 16px(PC 및 태블릿), 12px(휴대폰)
간격
상단 여백을 추가합니다.
3열에 Button 모듈 추가
세 번째 열로 이동하여 원하는 텍스트가 포함된 Button 모듈을 추가합니다.
조정
스타일 탭에서 버튼의 정렬을 변경합니다.
버튼 설정
다음과 같이 버튼 설정을 사용자 지정합니다.
- 버튼에 사용자 정의 스타일 사용: 예
- 버튼 텍스트 크기: 12px(데스크톱), 10px(태블릿), 8px(전화)
- 버튼 텍스트 색상: #ffffff
- 배경 버튼: #ffae25
- 버튼 테두리 너비: 0픽셀
- 테두리 반경 버튼: 0픽셀
- 버튼 문자 간격: 5px(데스크톱), 3px(태블릿 및 휴대폰)
- 글꼴 버튼: 열기 없음
- 소프트 라이트 버튼: 굵은 텍스트
- 복사 버튼 스타일: TT
간격
여백 값을 사용자 정의합니다.
메뉴 표시줄에 새 줄을 지정합니다.
전역 헤더 전용 행을 채우고 나면 바로 아래에 다른 행을 추가할 수 있습니다.
라인 설정
크기 조정
아직 모듈을 추가하지 않고 라인 설정을 열고 스타일 탭에서 크기 설정을 변경합니다.
간격
그런 다음 모든 아래쪽 및 위쪽 여백을 제거합니다.
열에 메뉴 모듈 추가
메뉴 선택
다음으로 열에 메뉴 모듈을 추가하고 이 자습서의 첫 번째 부분에서 만든 메뉴를 선택합니다.
규정
스타일 탭으로 전환하고 레이아웃 설정을 다음과 같이 변경합니다.
연결
또한 스타일 탭에서 활성 링크의 색상을 변경합니다.
- 활성 링크 색상: #ffae25
드롭 다운 메뉴
드롭다운 메뉴 설정의 드롭다운 메뉴 선 색상에 대해서도 동일한 작업을 수행합니다.
- 드롭다운 행 색상: #ffae25
아이콘
- 햄버거 메뉴 아이콘 색상: #ffae25
메뉴 텍스트
메뉴 텍스트 설정으로.
- 메뉴 글꼴: 프라타
- 메뉴 텍스트 색상: #000000
머리글과 메뉴 막대를 맨 위에 유지
섹션 설정 열기
두 번째 줄을 완성한 후에는 해당 섹션이 페이지와 게시물의 맨 위에 유지되도록 하기만 하면 됩니다. 이를 위해 섹션 설정을 다시 엽니다.
기본 요소에 사용자 정의 CSS 추가
다음으로 고급 탭으로 이동하여 섹션의 기본 요소에 몇 줄의 CSS 코드를 추가합니다.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
전역 헤더 및 테마 빌더 옵션 저장
전체 글로벌 헤더 디자인을 완료했으면 템플릿 레이아웃을 종료하기 전에 디자인을 저장해야 합니다. 템플릿 레이아웃을 벗어나면 전체 테마 빌더 변경 사항을 저장하면 완료됩니다!
측량
모든 단계를 거쳤으므로 이제 결과를 마지막으로 살펴보겠습니다.
결론
이 기사에서는 Divi의 새로운 테마 빌더를 사용하여 사용자 정의 전역 헤더를 만드는 방법을 보여주었습니다. 이 튜토리얼에서는 아름다운 헤더를 만들고 전체 헤더에 적용하는 것이 얼마나 쉬운지 보여줍니다. 사이트 웹 또는 특정 사용자 정의 게시물 유형.
Theme Builder로 웹사이트를 사용자 정의하는 데 도움이 되었기를 바랍니다.
질문이나 제안 사항이 있으면 댓글로 남겨주세요. 댓글 섹션 아래.
...
