워드프레스 아바다 테마 사이드바 고정방법

티스토리나 워드프레스 모두 동일하게 사이드바가 있는 테마를 사용한다면 사이드바 고정 및 마우스가 움직일때마다 스크롤에 맞게 움직이게 하는 설정이 가능하며 기존에는 사이드바 고정으로인한 애드센스 광고는 정책위반이였지만 현재는 정책 위반이 아니기 때문에 필요에 따라서 사용하는것을 추천합니다.

이러한 WP설정은 CSS에서 직접 관리하지만 아바다 테마를 사용한다면 테마 설정에서 간단하게 설정할 수 있습니다.

워드프레스 테마 CSS 편집고정

워드프레스 사이드바 고정 슬라이드바

만약 테마에서 슬라이드바 고정을 지원하지 않는다면 테마 편집기를 통해 CSS에 아래 코드를 추가해 줍니다.

@media (min-width: 769px) {
#right-sidebar {
position: -webkit-sticky;
position: sticky;
top: 0;
}
}

워드프레스 아바다 테마 사이드바 고정

사이드바가 한 화면에 모두 보인다면 고정을 설정하느게 편리할 수 있으며 만약 사이드바가 쭉 길어서 마우스 스크롤을 쭉 내려야 하는 상황이라면 반대로 고정으로 되어 있다면 한 화면에 깨져서 나오게 됩니다.

이런경우는 반대로 사이드바 고정 해제하는것이 필요합니다.

만약 아바다 테마를 사용하지 않는다면 아래 티스토리 방법을 참고해서 그대로 적용하면 됩니다.

참고 : 티스토리 사이드바 사이즈 조절 및 고정해제 방법

CSS 탭에서 사이드바 부분에

Position : Fixed

추가하면 사이드바가 고정됩니다.

Position : Absoulte

입력하면 반대로 마우스에 따라 사이드바가 움직입니다.

해당 위치값이 없다면 직접 추가합니다.

아바다 테마 사이드바 고정

워드프레스 아바다 사이드바 고정 Sticky Sidebars
워드프레스 아바다 사이드바 고정 Sticky Sidebars

Avada 테마의 설정에 들어갑니다.

사이드바 -> Sidebar Styling에 들어가면 Sticky Sidebars라는 항목이 있습니다.

여기서 고정하고 싶은 슬라이드바1, 슬라이드바2 중 하나를 선택하거나 모두 고정하고 싶다면 Both를 선택합니다.

애드센스광고나 특정한 항목을 마우스 스크롤을 내려도 계속 보이게 하고 싶다면 Sticky 고정을 설정하는것을 추천합니다.

워드프레스 티스토리 참고

워드프레스 최적화 참고

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

노랗 목차