그만큼 Sticky Content module of ElementsKit lets you make any section of the page or post sticky to a selected position.
비디오 가이드를 시청하세요:
Steps to Use ElementsKit Sticky Content:
- 이동 ElementsKit → 모듈 → Enable 끈적한 콘텐츠 → Save.
- Open page in 엘레멘터.
- Select section/column/widget → Advanced → ElementsKit Sticky.
- Choose Sticky Type (Top / Bottom / Scroll Up / Column).
- Set Offset, Sticky Until (CSS ID), Background if needed.
- Update and test on devices.
Follow the module’s detail functions:
스티키 콘텐츠 모듈 활성화 #
To start using the Sticky Content module, the first thing you should do is to enable this from the list of ElementsKit modules. Go to ElementsKit from your dashboard and follow the steps:
- ElementsKit 아래에 ElementsKit 플러그인
- Go to MODULES
- Toggle the Sticky Content module 에
- 클릭 변경 사항을 저장하다
Steps 2: Sticky on Top #
이 기능을 사용하면 원하는 섹션을 페이지 상단에 고정할 수 있습니다.
비디오 가이드를 시청하세요:
또는 단계별 지침을 따르십시오.
- 로 이동 ElementsKit→ 헤더 푸터→ 딸깍 하는 소리 Elementor로 편집하세요.
- 새 페이지 만들기-> 클릭하세요 ElementsKit 아이콘 미리 만들어진 템플릿에서 준비된 페이지를 삽입하세요.
- 다음을 클릭하세요. 내부 섹션 아이콘.
- 이동 고급의
- ElementsKit Sticky 확장.
- 고정 옵션 선택➔ 맨 위 드롭다운에서
- 이제 귀하의 페이지로 이동하세요-> 헤더가 위쪽에 고정되어 있는 것을 볼 수 있습니다..
상단 스티커의 배경색 변경 #
You can change the background color whenever you need. Under the Sticky Until feature, you can find the option to change the background color of the sticky section.
- 고정 배경색을 선택하세요: Blue.
- 업데이트를 클릭하세요
위에까지 끈적끈적 #
섹션을 여러 섹션까지 고정하고 특정 섹션 이후에 고정을 중지하려면 해당 섹션 ID를 여기에서 설정할 수 있습니다. About Us 섹션까지 고정하도록 합시다.
- 클릭 Elementor로 편집.
- 다음을 클릭하세요. Our School Goals 2019 inner section icon
- 고급으로 이동
- Find Layout
설정 CSS ID and Copy it.
- 이동 머리글➔고급의➔엘리먼트킷 스티키➔끈끈한까지.
- 이제 우리에 대한 섹션을 붙여넣으세요. CSS ID 로 끈끈한까지 필드.
- 이제 헤더를 볼 수 있습니다 Sticky Until the Our School Goals 2019 Section.
클래스 추가 기능 #
ElementsKit provides you another option and that is a class adding feature. If you scroll down for example 50px, a new class will be added and that is “ekit-sticky-effects”. Using this class you can make any CSS you want. Let’s see how you can do it.
- 커스터마이저로 이동-> 추가 CSS.
- 클래스를 사용하세요: “ekit-sticky-effects” 그리고 배경색을 만들어주세요 회색.
- 헤더로 이동->제거 배경색.
- 오프셋을 추가합니다. 예를 들어: 50px.
- 배경색이 보이시나요? 투명한. 하지만 50px까지 스크롤하면 배경색이 추가됩니다.
위쪽에 끈적끈적한 오프셋 #
- 콘텐츠나 사진이 상단에 고정되는 동안 남겨둘 공간의 양을 결정할 수 있습니다. 다른 고정 위치에 대해서도 동일하게 할 수 있습니다. 스티키 오프셋을 100px로 제공하세요. 100px 이후에 헤더가 표시되는 것을 볼 수 있습니다.
- 스티커를 표시할 수 있는 세 가지 장치 선택 옵션이 있습니다. 모든 기기, 데스크톱 전용, 데스크톱 및 태블릿. 콘텐츠를 고정된 상태로 표시할 장치를 정확히 결정하는 옵션을 선택하세요.
위로 스크롤할 때 고정 표시 #
이 기능을 사용하면 위로 스크롤할 때 페이지의 원하는 섹션을 고정할 수 있습니다.
비디오 가이드를 시청하세요:
또는 단계별 지침을 따르십시오.
- Go back to ElementsKit 스티커 옵션.
- 고정 옵션 선택➔ 위로 스크롤하면 표시 드롭다운에서
업데이트->페이지로 이동->새로 고침->위로 스크롤을 클릭하세요.
위로 스크롤하면 헤더가 고정되어 있는 것을 볼 수 있습니다.
스크롤 업할 때까지 고정 #
Let’s make it sticky until the Care About Us Section.
- Click on the sticky Care About Us 내부 섹션 아이콘.
- Now, going to the Layout settings from Advanced tab, 설정하다 CSS ID를 복사하세요.
- 고정된 탐색 헤더를 클릭하세요 내부 섹션 아이콘.
- 이동 고급의
- 찾다 엘리먼트킷 스티키 and paste that sticky header section’s CSS ID 로 끈끈한까지 필드.
- 업데이트->홈페이지로 이동->새로 고침->위로 스크롤을 클릭하세요.
- 이제 헤더가 고정된 것을 볼 수 있습니다. 고정 헤더 섹션이 나타나고 비디오 섹션이 들어오면 헤더가 더 이상 고정되지 않습니다.
바닥에 붙어 있음 #
이 기능을 사용하면 원하는 섹션을 페이지 하단에 고정할 수 있습니다.
비디오 가이드를 시청하세요:
또는 단계별 지침을 따르십시오.
- 다음을 클릭하세요. ElementsKit 아이콘 사전 제작된 템플릿에서 원하는 바닥글을 삽입하세요.
이동 강요 ➔ 다음 위젯을 끌어서 선택한 영역에 놓습니다.
- 표제.
- 클라이언트 로고.
- 동영상.
- 표제.
- 다음을 클릭하세요. 푸터 내부 섹션 아이콘.
- 이동 고급의-> ElementsKit Sticky 확장.
- 고정 옵션 선택➔ 맨 아래 드롭다운에서
- 업데이트->페이지로 이동->새로 고침->위로 스크롤을 클릭하세요.
- 위로 스크롤하면 바닥글이 고정되어 있는 것을 볼 수 있습니다.
바닥까지 끈적끈적 #
하단 스티키 섹션까지 스티키하게 만들어 보겠습니다.
- 다음을 클릭하세요. 바닥 스티커 내부 섹션 아이콘.
- 이제 고급 설정으로 이동하여 다음을 설정합니다. CSS ID를 복사하세요.
- 바닥글을 클릭하세요 내부 섹션 아이콘.
- 이동 고급의➔ 엘리먼트킷 스티키➔ 끈끈한까지.
- 이제 하단의 접착 부분을 붙여 넣으세요. CSS ID 로 끈끈한까지 필드.
- 업데이트->홈페이지로 이동->새로 고침->위로 스크롤을 클릭하세요.
- 이제 헤더가 고정되어 있고 하단 고정 섹션과 클라이언트 로고 섹션이 들어오면 푸터가 더 이상 고정되지 않은 것을 볼 수 있습니다.
기둥에 붙어 있음 #
이 기능을 사용하면 기둥의 모든 섹션을 고정할 수 있습니다.
비디오 가이드를 시청하세요:
또는 단계별 지침을 따르십시오.
- 선택한 영역에서 구조를 선택하세요. 여기서는 3열을 사용합니다.
이동 강요 ➔ 다음 위젯을 끌어서 선택한 영역에 놓습니다.
- 표제.
- 영상.
- 아이콘 상자.
제목과 이미지 섹션을 고정해 보겠습니다.
- 다음을 클릭하세요. 제목 내부 섹션 아이콘.
- 이동 고급의-> ElementsKit Sticky 확장.
- 고정 옵션을 선택하세요➔ 열 드롭다운에서
- 다음을 클릭하세요. 이미지 내부 섹션 아이콘.
- 이동 고급의-> ElementsKit Sticky 확장.
- 고정 옵션을 선택하세요➔ 열 드롭다운에서
- 업데이트->페이지로 이동->새로 고침->아래로 스크롤을 클릭하세요.
- 제목과 이미지가 고정되어 있고 아이콘 상자 콘텐츠의 오른쪽이 계속 움직이는 것을 볼 수 있습니다.
