Divi: 고정 전역 헤더를 만드는 방법

다음을 사용하여 고정 헤더를 생성하시겠습니까? Divi ?

고정 헤더 생성은 테마, 하지만 많은 사람들이 추가 코드를 사용하지 않고 만드는 방법을 모릅니다. 그러나 고정 옵션 덕분에 그렇게하는 것도 매우 쉽습니다. Divi.

사실, 이 방법은 더 쉬울 뿐만 아니라 디자인을 사용자 정의할 수 있는 더 많은 가능성을 제공합니다.

따라서 이 튜토리얼에서는 매개변수를 사용하여 매우 개인화된 고정 헤더를 만드는 방법을 보여 드리겠습니다. Divi.

측량

이 튜토리얼을 시작하기 전에 달성하고자 하는 결과를 살펴보겠습니다.

헤더 요소 구조 빌드

새 전역 헤더 템플릿 만들기

Divi 테마 빌더에 액세스하고 새로운 글로벌 또는 사용자 정의 헤더 생성을 시작하십시오.

섹션 1 매개변수

그라데이션 배경

템플릿 편집기에서 헤더 요소의 구조를 구축하는 것으로 시작합니다. 이 튜토리얼의 두 번째 부분에서는 다양한 고정 설정을 적용하여 고정 헤더 디자인을 완성하는 데 중점을 둘 것입니다.

읽기 : DIVI에서 슬라이딩 및 푸시 메뉴를 만드는 방법

템플릿 편집기에서 섹션을 확인할 수 있습니다. 이 섹션을 열고 그라데이션 배경을 적용합니다.

색상 1: #ffba60
색상 2: #ffd6a0
기울기 방향: 90도
시작 위치: 50%
최종 순위: 50%

간격

그런 다음 기본적으로 모든 내부 여백(상단 및 하단)을 제거합니다.

내부 여백 정점: 0px
하단 내부 여백: 0px

새 행 추가

기둥의 구조

상단 헤더 표시줄을 만들기 위해 다음 열 구조를 사용하여 섹션에 새 행을 추가합니다.

크기 조정

아직 모듈을 추가하지 않고 행 설정을 열고 다음과 같이 크기 설정을 변경합니다.

사용자 지정 거터 너비 사용: 예
열 간격: 1
최대 너비: 95%
최대 너비: 2픽셀

간격

또한 사용자 정의 내부 여백(상단 및 하단)을 추가합니다.

내부 여백 정점: 15px
하단 내부 여백: 15px

CSS 주요 요소

그리고 더 작은 화면 크기에서 열이 서로 옆에 유지되도록 하기 위해 고급 탭의 기본 행 요소에 CSS 코드 한 줄을 추가합니다.

display: flex;

열 1에 '소셜 미디어에서 팔로우' 모듈 추가

원하는 소셜 네트워크 추가

열 1의 '소셜 미디어에서 팔로우' 모듈로 시작하여 모듈을 추가할 시간입니다. 원하는 소셜 네트워크를 해당 링크와 함께 추가합니다.

각 소셜 네트워크에서 배경색 제거

소셜 네트워크에서 각 배경색을 개별적으로 제거하여 계속하십시오.

아이콘 설정

그런 다음 일반 모듈 설정으로 돌아가서 디자인 탭에서 아이콘 색상을 변경합니다.

아이콘 색상: #26333a

간격

또한 상단 여백을 추가하십시오.

상단 여백: 5픽셀

2열에 Button 모듈 추가

버튼에 텍스트 추가

2열에서 필요한 유일한 모듈은 Button 모듈입니다. 원하는 텍스트를 추가합니다.

링크 추가

그런 다음 링크를 추가합니다.

버튼 정렬

그런 다음 스타일 탭으로 전환하고 버튼 정렬을 변경합니다.

버튼 정렬: 오른쪽

버튼 설정

우리는 또한 버튼을 사용자 정의합니다.

버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 크기: 14px
버튼 텍스트 색상: #26333a
버튼 테두리 너비: 2px
버튼 테두리 색상: #26333a
버튼 테두리 반경: 0픽셀

문자 간격 버튼: 4px
소프트 라이트 버튼: 굵은 텍스트
스타일 복사 버튼: 대문자
표시 버튼: 예

간격

그리고 간격 설정에 내부 여백(상단 및 하단)을 추가하여 모듈 설정을 완료합니다.

내부 여백 정점: 10px
하단 내부 여백: 10px