Elementor에서 스크롤할 때 고정 헤더 색상을 변경하는 방법

Rifat Oct 7, 2023

고정 헤더는 웹 사이트의 탐색 메뉴를 항상 표시하여 중요한 링크와 정보에 쉽게 액세스할 수 있는 좋은 방법입니다. 그러나 정적 헤더는 시간이 지남에 따라 단조로워질 수 있으므로 스크롤의 색상을 변경하여 보다 동적이고 매력적인 사용자 환경을 만들 수 있습니다. 이 가이드에서는 간단하고 따라하기 쉬운 단계를 사용하여 Elementor 에서 스크롤할 때 고정 헤더의 색상을 변경하는 방법을 보여줍니다. Elementor 초보자이든 숙련된 Elementor 사용자이든 상관없이 이 효과를 쉽게 구현하고 웹 사이트를 신선하고 현대적인 모습으로 꾸밀 수 있습니다.

설계방법

아직 만들지 않았다면 테마 빌더를 사용하여 사용자 정의 헤더 템플릿을 만들어야 합니다. 2열 헤더 섹션의 이미지 위젯과 탐색 위젯에 로고를 넣는 것부터 시작하세요.

고급 탭

섹션 컨트롤의 고급 탭은 다음 단계에 사용됩니다.

마진 설정

투명한 머리글을 만드는 가장 일반적인 방법은 섹션에 높이와 동일한 음수 여백을 제공하는 것입니다. 고급 탭에서 여백 컨트롤을 잠금 해제하고 하단을 음수 값(예: -125px)으로 설정합니다. 이렇게 하면 헤더 아래의 섹션이 페이지 상단으로 이동됩니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

Z-지수

또한 섹션이 항상 콘텐츠 상단에 있도록 하려면 섹션의 Z-색인을 늘려야 합니다. 웹 사이트의 나머지 콘텐츠보다 더 큰 숫자를 입력할 수 있지만 많은 디자이너는 1,000을 사용합니다.

고정 설정

모션 효과 아코디언에서 고정 옵션을 선택하고 상단으로 설정합니다.

효과 추가

이제 기본 투명 헤더 섹션을 만들었으므로 스크롤 효과를 추가하겠습니다.

스타일 탭

섹션 컨트롤의 스타일 탭은 다음 단계에 사용됩니다.

최종 색상

색상 선택기에서 최종 배경 또는 그라데이션의 색상을 설정합니다.

스크롤 효과

제어판에서 스크롤 효과 선택기를 전환합니다.

값 설정

이제 원하는 효과를 얻으려면 뷰포트 슬라이더의 값을 조정해야 합니다. 페이지에서 완전한 불투명도를 원하는 위치로 스크롤하고 제목이 완전히 불투명해질 때까지 위쪽 값을 줄입니다(예: 25%). 이제 하단의 값을 늘릴 수 있습니다. 이전 예에서는 효과가 빠르게 발생하기를 원하므로 값을 매우 가깝게 설정했습니다(예: 22%). 이로 인해 페이지 스크롤이 3% 이상 발생하는 효과가 발생합니다.

마무리

결론적으로 Elementor 스크롤의 고정 헤더 색상을 변경하면 웹 사이트의 시각적 매력과 사용자 경험을 향상시킬 수 있습니다. 이는 귀하의 웹사이트를 돋보이게 만들고 방문자에게 기억에 남는 인상을 줄 수 있는 간단하고 효과적인 방법입니다. 그러나 헤더 동작은 화면 크기에 따라 다를 수 있으므로 모바일 및 태블릿 장치에 대해서는 조정하거나 허용해야 한다는 점을 명심하십시오. 최적의 지점을 찾으려면 약간의 테스트와 조정이 필요하지만 최종 결과는 노력할만한 가치가 있을 것입니다. 따라서 이 기술을 사용해 귀하의 웹 사이트를 신선하고 현대적인 모습으로 만드십시오.

Divi WordPress Theme