Divi 바닥글을 고정시키는 방법
게시 됨: 2017-07-03이 튜토리얼에서는 Divi 웹사이트의 바닥글을 고정하는 방법을 정확히 보여줍니다. 고정 바닥글을 사용하는 것은 클라이언트를 위한 웹사이트를 디자인할 때 받는 요청 중 하나이거나 자신의 웹사이트를 만들 때 필요한 요청 중 하나일 수 있습니다. 바닥글을 끈적하게 만드는 두 가지 가능성을 보여드리겠습니다. 첫 번째 방법은 CSS 코드를 사용하는 것이고 두 번째 방법은 jQuery 코드를 사용하는 것입니다. 두 가지 방법 모두 작동하지만 웹 사이트에 고정 효과를 만드는 데 사용하는 방법에 따라 다릅니다.
웹 사이트에 고정 바닥글을 추가하는 것은 현재 Divi 빌더 내에서 자동으로 수행할 수 있는 작업이 아닙니다. 그렇기 때문에 많은 노력을 들이지 않고도 원하는 정확한 결과를 얻을 수 있는 방법을 알려드리겠습니다. 당신이 해야 할 유일한 일은 이 포스트를 차근차근 따라하고, 몇 줄의 코드를 복사하여 붙여넣고 올바른 위치에 넣는 것입니다.
고정 바닥글을 사용하는 이유
고정 바닥글은 일반적으로 한 가지 주요 이유로 사용됩니다. 웹 사이트에 전체 화면을 채우는 데 사용할 수 있는 콘텐츠가 충분하지 않은 한 페이지 또는 여러 페이지가 있는 경우. 물론 페이지에 충분한 콘텐츠가 있는지 확인할 수 있지만 페이지에 부가 가치를 제공하지 않는 경우; 할 필요가 없습니다.
이제 전체 화면을 채울 만큼 콘텐츠가 충분하지 않은 경우 콘텐츠가 끝난 직후 페이지에 부동 바닥글이 표시됩니다. 그것은 일반적으로 좋지 않아 보이고 원하는 결과가 아닙니다. 다행히도 고정 바닥글을 사용하여 떠 있는 바닥글을 제거할 수 있습니다. 고정 바닥글을 사용하면 바닥글이 불필요한 공간을 만들지 않고 페이지 하단에 유지됩니다. 따라서 페이지 길이는 동일하게 유지되며 창 크기를 조정할 때마다 바닥글이 화면에 맞게 수정됩니다.
다음은 고정 바닥글이 없는 짧은 페이지의 이미지입니다.
다음은 고정 바닥글이 추가된 후 해당 페이지의 동일한 이미지입니다.
고정 바닥글과 고정 바닥글의 차이점
모든 사람이 웹사이트에서 바닥글을 사용하기로 결정하는 것은 아니지만 그럴 때 사용합니다. 스타일링하는 방법은 많다. 그것은 모두 귀하의 웹사이트 구조가 어떻게 되어 있는지와 Divi 빌더로 만든 '수동' 및 다른 스타일의 바닥글을 포함하고 싶은지에 달려 있습니다.
그러나 표준 바닥글을 사용하는 경우 스타일 지정 방법과 웹 사이트에 배치할 방법을 선택할 수 있습니다. 바닥글이 웹사이트에서 가질 수 있는 세 가지 주요 위치는 부동, 고정 및 고정입니다.
고정 바닥글과 고정 바닥글을 서로 비교할 때 그들은 첫눈에 똑같아 보일 수 있지만 그들은 그렇지 않습니다. 고정 바닥글은 웹사이트에서 페이지를 스크롤할 때 항상 표시되는 반면 고정 바닥글은 콘텐츠가 화면 하단에 도달할 만큼 충분히 길지 않은 페이지를 구체적으로 처리합니다. 콘텐츠가 충분히 길지 않은 특정 경우; 고정 바닥글처럼 작동하며 페이지 하단에 고정됩니다. '고정 바닥글 효과'를 만듭니다.
그러나 콘텐츠가 충분히 길면 고정 바닥글이 평소와 같이 작동하고 페이지가 바닥글을 페이지 맨 아래로 밀어 화면에 계속 표시되지 않도록 합니다. 대부분의 경우 이 방법은 콘텐츠가 표시될 창에 더 많은 공간을 제공하기 때문에 전체 웹 사이트에 고정 바닥글을 사용하는 것보다 선호됩니다.
CSS를 통해 Divi 웹사이트에 고정 바닥글 만들기
더 이상 기한 없이 웹사이트에 고정 바닥글을 만들어 보겠습니다. 우리가 사용할 코드는 정말 간단하지만 작업을 완료합니다. 콘텐츠가 충분히 길지 않으면 페이지의 떠다니는 바닥글에서 바닥글이 아래로 밀려나는 페이지로 빠르게 이동할 수 있습니다.
페이지 설정을 통해 CSS 코드 추가(특히 한 페이지의 경우)
경우에 따라 특정 페이지 에서만 바닥글을 고정하고 싶습니다. 게시물의 이 부분에서는 한 페이지의 Custom CSS 필드에 CSS 코드를 추가하여 정확하게 수행하는 방법을 보여 드리겠습니다. 그렇게 하면 CSS 코드가 웹사이트의 해당 페이지에만 적용되도록 할 수 있습니다. 이것은 또한 누군가가 특정 페이지를 열 때만 CSS 코드가 로드된다는 것을 의미합니다. 이 방법은 일반적으로 고정 바닥글을 제공하려는 웹 사이트의 짧은 페이지가 몇 개 밖에 없는 경우에 사용됩니다.
고정 바닥글을 활성화할 페이지를 열거나 적용할 새 페이지를 만드는 것으로 시작합니다. 그런 다음 Divi 빌더에서 다음 아이콘을 클릭하여 페이지 설정을 엽니다.
계속해서 방금 연 창의 Custom CSS 필드에 다음 코드를 추가합니다.
#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}
페이지를 미리 보는 순간부터 CSS 코드가 적용되어 바닥글을 고정해야 합니다.
테마 커스터마이저(실시간 보기)를 통해 CSS 코드 추가
코드를 추가하는 또 다른 방법은 테마 사용자 지정 프로그램을 사용하는 것입니다. 이런 식으로 CSS 코드를 추가하면 자동으로 전체 웹사이트에 적용됩니다. 모든 페이지에는 이 CSS 코드가 적용됩니다. 테마 커스터마이저를 통해 코드를 추가하면 웹사이트의 변경 사항을 직접 확인할 수도 있습니다.
CSS 코드를 테마 커스터마이저에 추가하려면 WordPress 웹사이트의 백엔드에서 '테마 커스터마이저'를 클릭하세요. 그런 다음 페이지를 아래로 스크롤하여 추가 CSS 옵션을 엽니다. 지금까지 사용한 모든 사용자 정의 CSS 코드가 표시됩니다. 계속해서 다음 코드를 추가하십시오.
#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}
Divi 테마 옵션을 통해 CSS 코드 추가
마지막으로 Divi 테마 옵션을 통해 코드를 추가할 수도 있습니다. 이것은 전체 웹사이트가 코드로부터 혜택을 받기를 원하는 웹사이트에 코드를 추가하는 데 가장 자주 사용되는 방법입니다.
Divi > 테마 옵션 > 페이지 아래로 스크롤 > 사용자 정의 CSS 상자에 다음 CSS 코드 추가로 이동합니다.
#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}
JQuery를 통해 Divi 웹사이트에 고정 바닥글 만들기
코드 모듈을 통해 jQuery 코드 추가(특히 한 페이지의 경우)
Divi 빌더 내에서 코드 모듈을 사용하여 jQuery 코드를 추가할 수 있습니다. 다시 말하지만, 이것은 짧은 내용의 페이지가 많지 않고 전체 웹사이트에 대한 jQuery 코드를 로드하고 싶지 않을 때 주로 사용됩니다.
작업 중인 페이지에 전체 너비 행이 있는 섹션을 추가합니다.
계속해서 해당 전각 행에 코드 모듈을 추가하고 다음 코드를 붙여넣습니다.
<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>
Divi 테마 옵션을 통해 jQuery 코드 추가
jQuery 코드를 추가할 수 있는 또 다른 가능성은 Divi 테마 옵션을 사용하는 것입니다. 전체 웹사이트에 jQuery 코드를 추가할 때 Divi 테마 옵션에서 이를 수행할 수 있는 특정 위치가 있습니다. <head>에서 통합 탭의 필드입니다. 바로 지금 바로 여기에 코드를 추가할 것입니다.
WordPress 웹사이트 열기 > Divi로 이동 > 테마 옵션 열기 > 통합 탭으로 이동하여 웹사이트의 <head>에 다음 jQuery 코드를 추가합니다.
<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>
마지막 생각들
콘텐츠가 많지 않은 페이지가 있는 경우 일반적으로 고정 바닥글을 추가해야 합니다. 페이지 구조가 더 자연스럽게 느껴지도록 부동 바닥글을 제거하고 싶습니다. 블로그 섹션의 향후 게시물에 대한 의견이나 제안 사항이 있는 경우 우리가 연락할 수 있도록 아래의 댓글 섹션에 댓글을 남겨주세요!
중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!
Vintagio의 추천 이미지 / shutterstock.com