Divi에서 고정 헤더에 CSS 배경 필터 효과를 추가하는 방법

게시 됨: 2021-07-21

CSS 배경 필터 효과를 추가하는 것은 고정 헤더 메뉴의 디자인을 향상시키는 재미있고 독특한 방법입니다. background-filter CSS 속성을 매우 독특하게 만드는 것은 요소 뒤의 영역에 필터 효과를 적용할 수 있다는 것입니다. 페이지를 아래로 스크롤하는 동안 머리글 뒤에서 페이지 디자인을 마술처럼 변경할 수 있기 때문에 이것은 고정 머리글에 대한 완벽한 옵션입니다. apple.com과 같은 인기 있는 사이트에서 이 효과를 본 적이 있을 것입니다.

이 자습서에서는 Divi의 고정 헤더에 CSS 배경 필터 효과를 추가하는 방법을 보여줍니다. 먼저 기존 헤더에 배경 필터 효과를 추가하는 간단한 3단계 과정을 설명합니다. 그런 다음 처음부터 전체 헤더를 빌드하는 방법을 분석합니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

스크롤할 때 헤더 뒤의 요소에 적용된 흐림 및 채도 필터 효과를 확인하십시오.

헤더에 추가된 이 배경 필터 효과의 간단한 라이브 데모를 보려면 이 코드펜을 확인하십시오.

글로벌 헤더 템플릿을 무료로 다운로드하십시오

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드
무료로 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

템플릿 업로드 방법

Divi 테마 빌더로 이동

템플릿을 업로드하려면 WordPress 웹사이트의 백엔드에서 Divi Theme Builder로 이동하십시오.

Divi의 Bushcraft 레이아웃 팩용 머리글 및 바닥글 템플릿

글로벌 기본 웹사이트 템플릿 업로드

그런 다음 오른쪽 상단에 두 개의 화살표가 있는 아이콘이 표시됩니다. 아이콘을 클릭합니다.

Divi의 Bushcraft 레이아웃 팩용 머리글 및 바닥글 템플릿

가져오기 탭으로 이동하여 이 게시물에서 다운로드할 수 있었던 JSON 파일을 업로드하고 'Divi 테마 빌더 템플릿 가져오기'를 클릭합니다.

Divi의 Bushcraft 레이아웃 팩용 머리글 및 바닥글 템플릿

Divi 테마 빌더 변경 사항 저장

파일을 업로드하면 기본 웹사이트 템플릿에 새로운 전체 머리글과 바닥글이 표시됩니다. 템플릿을 활성화하는 즉시 Divi Theme Builder 변경 사항을 저장하십시오.

Divi의 Bushcraft 레이아웃 팩용 머리글 및 바닥글 템플릿

튜토리얼로 들어가 볼까요?

기존 헤더에 CSS 배경 필터 효과 추가

프로세스를 보여주는 가장 간단한 방법은 CSS 배경 필터 효과를 Divi의 기존 헤더에 추가하는 것입니다. 실제로 다음 세 단계로 요약됩니다.

  1. 헤더 섹션에 반투명 배경색 추가
  2. 헤더 섹션에 배경 필터 사용자 정의 CSS 추가
  3. 헤더 섹션에 고정 위치 추가

Divi에서 하는 방법은 다음과 같습니다.

테마 빌더에서 헤더 편집

테마 빌더로 이동하고 을 클릭하여 기존 헤더 템플릿을 편집합니다.

섹션에 반투명 배경색 추가

헤더 메뉴 요소가 포함된 섹션에 대한 설정을 엽니다. 그런 다음 섹션에 반투명 배경색을 추가합니다. 이 예에서는 섹션에 다음 배경색을 지정합니다.

  • 배경색: rgba(0,0,0,0.8)

배경 필터 사용자 정의 CSS 추가

다음으로 섹션의 기본 요소에 있는 사용자 정의 CSS 스니펫으로 배경 필터 효과(background-filter CSS 속성 사용)를 추가할 수 있습니다. 고급 탭에서 다음 CSS를 기본 요소에 붙여넣습니다. 

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

이러한 필터 효과는 모든 Divi 요소에 내장된 필터 효과와 유사합니다. 주요 차이점은 배경 필터는 뒤에 있는 요소에 효과를 추가하는 반면 Divi의 내장 필터 효과는 요소 자체에 효과를 추가한다는 것입니다.

여기에서는 섹션 뒤의 모든 디자인 요소에 필터 효과를 적용할 2가지 필터 효과(채도 및 흐림)를 사용하고 있습니다.

다른 필터 기능 값(또는 이들의 조합)을 추가하여 자신만의 고유한 디자인을 만들 수 있습니다. 이들 중 가장 유용한 것은 다음과 같습니다.

  • 흐림()
  • 명도()
  • 차이()
  • 회색조()
  • 색조 회전()
  • 거꾸로 하다()
  • 세피아()
  • 가득한()

헤더에 고정 위치 추가

마지막으로 헤더 섹션에 고정 위치를 지정해야 합니다.

최종 결과

다음은 라이브 페이지의 최종 결과입니다. 스크롤할 때 헤더 뒤의 요소에 적용된 흐림 및 채도 필터 효과를 확인하십시오.

처음부터 CSS 배경 필터 효과로 헤더 만들기

CSS 배경 필터 효과를 사용하여 전체 헤더를 처음부터 빌드하려면 다음과 같이 하십시오.

테마 빌더에서 글로벌 헤더 빌드

테마 빌더로 이동하고 클릭하여 새 글로벌 헤더 작성을 클릭하십시오.

CSS 배경 필터 효과로 고정 섹션 만들기

이 튜토리얼의 첫 번째 부분에서 했던 것처럼 CSS 배경 필터 효과로 고정 섹션을 만드는 것으로 시작하겠습니다.

전역 머리글 레이아웃 편집기에서 섹션에 1열 행을 추가합니다.

섹션의 설정을 엽니다. 그런 다음 섹션에 다음 반투명 배경색을 추가합니다.

  • 배경색: rgba(0,0,0,0.8)

다음과 같이 패딩을 업데이트합니다.

  • 패딩: 0px 상단, 0px 하단

다음으로 섹션의 기본 요소에 있는 사용자 정의 CSS 스니펫으로 배경 필터 효과(background-filter CSS 속성 사용)를 추가할 수 있습니다. 고급 탭에서 다음 CSS를 기본 요소에 붙여넣습니다. 

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

마지막으로 헤더 섹션에 고정 위치를 지정해야 합니다.

  • 고정 위치: 상단에 고정

행 설정 편집

이제 섹션이 완료되었으므로 행 설정을 열고 다음을 업데이트합니다.

  • 거터 폭: 1
  • 폭: 95%
  • 패딩: 상단 20px, 하단 20px

로고 이미지 추가

행 설정이 업데이트되면 행/열에 이미지 모듈을 추가하여 로고를 만듭니다.

이미지 모듈에 로고 이미지를 업로드합니다.

다음과 같이 이미지 디자인 설정을 업데이트합니다.

  • 너비: 50px
  • 여백: 0px 오른쪽

메뉴 만들기

다음으로 이미지 모듈 아래에 메뉴 모듈을 추가합니다.

콘텐츠 탭에서 메뉴를 선택하고 메뉴에 투명한 배경색을 지정합니다.

  • 배경색: rgba(0,0,0,0)

디자인 탭에서 메뉴 디자인 설정을 다음과 같이 업데이트합니다.

  • 스타일: 왼쪽 정렬
  • 활성 링크 색상: #fff
  • 메뉴 글꼴: 몬세라트
  • 메뉴 글꼴 두께: 반 굵게
  • 메뉴 텍스트 색상: #fff
  • 텍스트 정렬: 가운데
  • 드롭다운 메뉴 배경색: #333
  • 드롭다운 메뉴 선 색상: #fff
  • 드롭다운 메뉴 텍스트 색상: #fff
  • 드롭다운 메뉴 활성 링크: #fff
  • 모바일 메뉴 배경: #333
  • 모바일 메뉴 텍스트 색상: #fff
  • 장바구니 아이콘 색상: #fff
  • 검색 아이콘 색상: #fff
  • 햄버거 메뉴 아이콘 색상: #fff
  • 너비: 80%(데스크톱 및 태블릿)

텍스트 모듈로 버튼 만들기

헤더에 대한 작은 버튼을 만들기 위해 텍스트 모듈을 사용할 것입니다. 메뉴 아래에 텍스트 모듈을 추가합니다.

작업 "Shop"으로 본문 내용을 업데이트하십시오. 그런 다음 텍스트 모듈에 흰색 배경색을 지정합니다.

  • 본문: "상점"
  • 배경색: #fff

디자인 탭에서 다음을 업데이트합니다.

  • 텍스트 글꼴: 몬세라트
  • 텍스트 글꼴 두께: 반 굵게
  • 텍스트 텍스트 색상: #333
  • 텍스트 줄 높이: 2em
  • 텍스트 정렬: 가운데
  • 너비: 50px
  • 둥근 모서리: 5px

여기에서 텍스트 모듈은 로고 이미지와 너비가 같습니다. 이것은 사용자 정의 CSS가 있는 열의 flex 속성을 사용할 때 항목을 완벽하게 정렬하는 데 도움이 됩니다.

CSS Flex 속성을 사용하여 열의 모듈 정렬

로고, 메뉴 및 텍스트 모듈이 열에 추가되면 열 설정을 열고 다음 사용자 지정 CSS를 기본 요소에 붙여넣습니다. 

display:flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;

헤더 레이아웃 및 템플릿 저장

완료되면 레이아웃과 템플릿을 저장해야 합니다.

최종 결과

다음은 최종 디자인을 한 번 더 살펴보겠습니다. 스크롤할 때 헤더 뒤의 요소에 적용된 흐림 및 채도 필터 효과를 확인하십시오.

브라우저 지원

불행히도, 배경 필터 CSS 속성은 현재 IE 및 Firefox에서 제대로 작동하지 않습니다. 그러나 대체는 섹션에 제공된 반투명 배경색이 될 것이며 여전히 작동하고 멋지게 보입니다.

마지막 생각들

바라건대 다음 프로젝트는 멋진 배경 필터 효과가 있는 헤더의 이점을 누릴 수 있습니다. Divi의 모든 헤더에 쉽게 추가할 수 있으며 사용 가능한 모든 다양한 필터 기능 값을 탐색하는 재미가 있습니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!