페이지 스크롤에서 헤더를 변경해야 함 Elementor ?
달성할 수 있는 많은 헤더 동작이 있습니다. Elementor 프로. 그 중 하나는 페이지를 스크롤할 때 한 헤더를 다른 헤더로 변경하는 것입니다. 이 기사에서는 방법을 보여줍니다.
Elementor Pro는 기능과 함께 제공됩니다. 테마 빌더 사용자 정의 헤더를 만들 수 있도록 웹 사이트 워드프레스. 이 기능 덕분에 더 이상 귀하가 제공하는 서비스에 의존할 필요가 없습니다. 워드 프레스 테마 일반적으로 제한되는 헤더 사용자 정의와 관련하여.
원하는 요소를 추가하고 원하는 타이포그래피 설정을 사용하고 원하는 동작을 설정할 수 있습니다.
Elementor Pro에는 다음을 추가할 수 있는 조정 옵션이 내장되어 있습니다. 스티커 헤더. 이 기능을 사용하여 페이지 스크롤에 따라 변경되는 헤더를 생성합니다. 이러한 유형의 헤더 동작에는 사용자 정의 CSS도 필요합니다.
읽기 : Elementor를 사용하여 WordPress에서 사용자 정의 헤더를 만드는 방법
다음은 페이지 스크롤에 따라 변경되는 헤더의 예입니다.
1단계: 맞춤 헤더 만들기
테마 빌더는 Elementor Pro에서만 사용할 수 있으므로 시작하기 전에 Elementor를 프로 버전으로 업그레이드했는지 확인하세요. Elementor Pro의 프로 버전은 공식 웹 사이트.
준비가 완료되면 다음으로 이동하십시오. 템플릿 -> 테마 빌더 기본 WordPress 대시보드에서 테마 빌더 대시보드에서 탭 위로 포인터를 가져갑니다. 헤더 아이콘을 클릭하세요 ...을 더한 새 헤더 템플릿을 생성합니다.
나타나는 템플릿 라이브러리에서 원하는 미리 정의된 헤더 템플릿을 선택할 수 있습니다. 또는 헤더를 처음부터 생성하려는 경우 템플릿 라이브러리를 닫고 Elementor 편집기를 열 수 있습니다.
발견 : Elementor에서 사용자 정의 모양을 만드는 방법
이 기사에서는 헤더 템플릿을 처음부터 만들 것입니다.
섹션을 추가하여 헤더 만들기를 시작한 다음 필요한 요소를 추가하고 그에 따라 스타일을 만듭니다.
필요한 요소를 추가하고 스타일을 생성했으면 탭으로 이동합니다. 많은. 블록 아래 많은, Z 인덱스를 100으로 설정하고 CSS 클래스를 추가합니다.header-1
그런 다음 위에서 방금 만든 헤더 섹션을 복제합니다. 복제된 섹션은 페이지를 아래로 스크롤할 때 표시되는 두 번째 헤더가 됩니다.
중복 헤더를 편집합니다. 항목을 더 추가하거나 기존 항목을 제거할 수 있습니다. 배경을 변경할 수도 있습니다. 원하는 모든 것. 편집이 완료되면 탭으로 이동합니다. 많은. 블록 아래 고급 설정, CSS 클래스의 이름을 header-2로 바꿉니다.
그런 다음 블록을 엽니 다. 이동 효과. 드롭 다운 목록에서 어려운, 로 설정 Top. 필드에서 효과의 오프셋을 정의할 수 있습니다. 효과 오프셋. 여기에서 설정한 값은 효과(이 경우 고정)가 발생하기 전에 스크롤 깊이를 결정합니다.
두 헤더 섹션을 모두 편집했으면 순서를 변경합니다.
하단 섹션을 편집하고 음수 여백을 상단 섹션보다 높게 설정하십시오. 이렇게 하려면 다음으로 이동하십시오. 고급 탭 상단 여백을 약 -65로 설정합니다.
버튼을 클릭하여 헤더를 게시하십시오. 게시 Elementor의 설정 패널 하단에 있습니다. 버튼을 클릭하여 표시 조건 추가 조건을 추가합니다. 버튼을 클릭 저장하고 닫습니다 표시 조건 설정이 완료되면.
2단계: 맞춤 CSS 추가
아래 CSS는 전환 효과를 제어하는 데 사용됩니다. 테마 커스터마이저에 CSS를 추가할 수 있습니다. 이동 모양 -> 사용자 정의 기본 WordPress 대시보드에서 Theme Customizer 대시보드에서 블록을 엽니다. 추가 CSS 다음 CSS를 붙여넣습니다.
CSS 스니펫:
.header-2 {변환: 번역(-80px); -moz-transition: 모든 .3s 용이성! 중요합니다. -webkit-transition: 모든 .3s 용이성! 중요합니다. 전환: 모든 .3초 용이성! 중요합니다. } .elementor-sticky - effects.header-2 {높이: 자동! 중요; 변환: 번역(0px); } .elementor-sticky - effects.header-1 {디스플레이: 없음! 중요; }
버튼을 클릭 게시 변경 사항을 적용합니다.
요컨대
Elementor Pro에는 헤더와 같은 테마 부분에 대한 사용자 지정 템플릿을 만들 수 있는 테마 빌더 기능이 있습니다. Elementor Theme Builder를 사용하여 사용자 정의 헤더를 만들 때 사용자 정의 CSS를 추가하는 기능으로 원하는 모든 동작을 설정할 수 있습니다. 사용자 정의 CSS를 추가하지 않고도 효과를 고정 및 투명으로 설정할 수 있습니다.
읽기 : Elementor를 사용하여 WordPress에서 404 페이지를 만드는 방법
스크롤 페이지 자체의 헤더를 변경하면 몇 가지 이점이 있습니다.
예를 들어 보조 헤더(페이지를 아래로 스크롤한 후 나타나는 헤더)를 사용하여 소셜 미디어 공유 버튼만 표시하여 페이지가 공유될 가능성을 높일 수 있습니다.
지금 Elementor Pro를 받으세요!
결론
그래서 ! Elementor에서 페이지 스크롤 헤더를 변경하는 방법을 보여주는 이 자습서의 내용은 여기까지입니다. 가는 방법에 대해 우려 사항이 있으면 commentaires.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
