Divi 바닥글을 수정하는 방법
게시 됨: 2017-07-11오늘의 Divi 튜토리얼에서는 웹사이트에 일반 바닥글 대신 고정 바닥글을 만드는 방법을 보여 드리겠습니다. 이전 게시물에서 처음에는 같아 보일 수 있지만 고정하는 것과 실제로 다른 점을 고정시키는 방법을 보여주었습니다. 끈적하게 만들려고 하지 않았지만 대신 고정했다면 이 게시물이 도움이 될 것입니다.
귀하의 웹사이트에 고정된 바닥글을 추가하는 것은 귀하의 클라이언트 중 한 사람의 요청이거나 귀하의 웹사이트에 대한 요구일 수 있습니다. 고정 헤더만큼 자주 사용되지는 않지만 어려움을 겪고 있는 것 중 하나일 수 있습니다. Divi 웹사이트에서 바닥글을 고정하는 두 가지 방법을 보여드리겠습니다. 첫 번째는 일부 CSS 라인을 사용하는 것이고 두 번째는 jQuery 코드를 사용하는 것입니다. 두 가지 방법 모두 웹 사이트 바닥글의 CSS 스타일 시트를 수정합니다.
다음은 스크롤할 때 고정 바닥글이 어떻게 보이는지에 대한 예입니다.
고정 바닥글을 사용하는 경우
웹사이트에 고정 바닥글을 사용하려는 이유는 다양합니다. 그 이유 중 하나는 바닥글이 보유하고 있는 정보의 관련성일 수 있습니다. 예를 들어, 소셜 아이콘을 바닥글에 넣을 수 있습니다. 웹사이트 방문자가 소셜 미디어 채널을 탐색하도록 장려하기를 원하기 때문입니다. 또 다른 이유는 단순히 웹 사이트에 주는 효과가 마음에 들기 때문일 수 있습니다.
고정 바닥글을 사용하는 경우 방문자 창의 일부가 항상 사용된다는 점에 유의해야 합니다. 즉, 고정 바닥글이 없는 경우와 동일한 콘텐츠를 보려면 더 스크롤해야 합니다. 방문자는 가능한 한 적은 노력을 기울이고 싶어하기 때문에 이는 어려운 일입니다.
그러나 바닥글이 그렇게 크지 않으면 바닥글에서 수행되는 작업의 수를 늘릴 수 있습니다. 고정 머리글, 기본 메뉴 및 바닥글을 동시에 사용하는 것은 권장하지 않습니다. 세 가지를 모두 고정하면 표시되는 콘텐츠가 크게 줄어들어 이탈률이 높아질 수 있습니다.
고정 바닥글과 고정 바닥글의 차이점
시작하기 전에 고정 바닥글과 고정 바닥글의 차이점을 설명하겠습니다.
고정 바닥글은 일반적으로 조금 더 복잡합니다. 페이지에 바닥글을 화면 하단으로 밀어넣을 만큼 콘텐츠가 충분하지 않은 경우 고정 바닥글처럼 작동하도록 만들어졌습니다. 페이지가 충분히 긴 경우 바닥글은 일반 페이지처럼 작동하며 화면이 아닌 페이지 맨 아래까지 밀리게 됩니다.
시작하자
YouTube 채널 구독
두 가지 방법으로 웹사이트에 고정 바닥글을 추가하는 방법을 보여 드리겠습니다. CSS 코드와 jQuery 코드를 통해. 두 가지 방법 모두 작동하지만 필요한 웹 사이트에 사용하는 것을 선호하는 방법에 따라 다릅니다.
CSS를 통해 고정 바닥글 추가
고정 바닥글을 만드는 첫 번째이자 가장 쉬운 방법은 CSS 행을 추가하는 것입니다. Divi Builder와 WordPress를 사용하여 이러한 라인을 다른 위치에 추가할 수 있습니다. 살펴보겠습니다.
한 페이지에 대한 사용자 정의 CSS를 통해 CSS 코드 추가
CSS 코드를 추가하는 첫 번째 방법은 특히 한 페이지에 추가하는 것입니다. 고정 바닥글을 웹사이트의 각 페이지에 동일하게 만드는 것이 더 좋지만(웹사이트에서 일관성을 유지하기 위해) 특정 페이지에만 적용되도록 선택할 수도 있습니다.
CSS 코드 라인을 추가할 페이지를 열고 Divi Builder의 다음 버튼을 클릭합니다.
아래로 스크롤하여 사용자 정의 CSS 필드에 다음 코드를 추가합니다.
#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}
테마 커스터마이저를 통해 CSS 코드 추가
코드를 추가하는 또 다른 방법은 테마 사용자 지정 프로그램을 사용하는 것입니다. Theme Customizer를 사용하면 웹사이트에서 실시간으로 결과를 볼 수 있습니다. 테마 사용자 정의 프로그램을 통해 추가한 코드는 웹사이트의 모든 페이지에 적용됩니다.
웹사이트 에서 테마 최적화 도구 > 추가 CSS > 다음 CSS 코드 줄 붙여넣기로 이동합니다.
#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}
테마 옵션을 통해 CSS 코드 추가
CSS 코드를 웹사이트에 추가하는 마지막 방법은 테마 옵션을 사용하는 것입니다. 테마 옵션의 사용자 정의 CSS 필드에 코드를 추가하면 코드가 전체 웹사이트에도 적용됩니다. 이것은 전체 Divi 웹 사이트에 사용자 정의 CSS 코드를 추가하는 데 가장 자주 사용되는 방법입니다.
Divi > 테마 옵션 > 일반 > 아래로 스크롤하여 사용자 정의 CSS 필드에 다음 코드를 추가합니다.
#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}
jQuery를 통해 고정 바닥글 추가
또 다른 가능성은 일부 jQuery 코드 라인을 통해 CSS를 변경하는 것입니다. 고정 바닥글을 사용할 때 일반적으로 웹사이트의 모든 페이지에 고정 바닥글이 적용되는지 확인하려고 합니다. 이러한 종류의 일관성은 방문자가 혼동 없이 웹사이트를 탐색하는 것을 더 쉽게 만듭니다.
특히 한 페이지에 대한 코드 모듈을 통해 jQuery 코드 추가
고정 바닥글을 적용할 페이지를 열고 페이지 상단에 새 표준 섹션을 추가합니다. 다음으로, 전폭 행을 선택하고 여기에 코드 모듈을 추가하십시오. 코드 모듈을 열고 콘텐츠 상자에 다음 jQuery 코드를 붙여넣습니다.
<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>
특정 페이지의 코드 모듈을 통해 jQuery 코드를 추가하면 해당 페이지에만 코드가 적용됩니다. 나머지 웹사이트에는 일반 바닥글이 있는 반면 코드 모듈을 사용한 웹사이트에는 고정 바닥글이 있습니다.
테마 옵션을 통해 jQuery 코드 추가
바닥글을 고정하는 jQuery 코드를 추가하는 마지막 옵션은 테마 옵션을 사용하는 것입니다. 코드 라인은 전체 웹사이트에 즉시 적용되며 웹사이트에 필요한 일관성을 제공합니다.
Divi > 테마 옵션 > 통합 > 웹사이트의 <head>에 다음 코드 줄을 붙여넣습니다.
<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>
마지막 생각들
이전 게시물 중 하나에서 고정 바닥글을 만드는 방법을 보여주었습니다. 이 게시물은 특히 웹사이트에 고정 바닥글을 만드는 방법을 다루었습니다. 고정 바닥글은 웹사이트를 방문하는 동안 방문자의 화면 하단에 항상 유지됩니다. 질문이나 제안 사항이 있는 경우 아래 의견 섹션에 의견을 남겨주시면 연락을 드리겠습니다!
중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!
추천 이미지: Zeeker2526 / Shutterstock.com