Divi로 바닥글 표시를 만드는 방법
게시 됨: 2017-07-28오늘의 Divi 튜토리얼에서는 자신의 웹사이트나 클라이언트의 웹사이트에 통합할 생각을 한 적이 없는 특정 효과에 도달하는 방법을 보여드릴 것입니다. 더 정확하게; 바닥글 공개를 만드는 방법을 보여 드리겠습니다. 바닥글 공개는 기본적으로 페이지 끝에 있을 때까지 기다렸다가 스크롤하는 방식에 따라 바닥글을 표시합니다. 페이지를 끝까지 스크롤하면 바닥글이 원래 형식으로 표시됩니다.
웹사이트에 바닥글 공개를 추가하면 웹사이트 바닥글에 제공하고자 했던 약간의 터치를 추가할 수 있습니다. 또한 사람들이 웹사이트의 페이지를 스크롤할 때 마지막으로 보게 되는 것입니다. 바닥글 공개가 정확히 무엇을 의미하는지 보여주기 위해 최종 결과를 살펴보겠습니다.
바닥글을 드러내는 것 외에도 웹사이트의 주요 콘텐츠에 미묘한 그림자를 추가했음을 알 수 있습니다. 그렇게 함으로써 우리는 주 콘텐츠와 바닥글 사이에 일종의 관점을 만들었습니다.
Divi로 바닥글 표시를 만드는 방법
YouTube 채널 구독
필요한 CSS 코드 추가
바닥글 표시 결과를 얻으려면 우선 몇 줄의 CSS 코드가 필요합니다. CSS 코드를 Divi 웹사이트에 추가하는 방법은 다양하기 때문에 세 가지 방법을 모두 보여드리겠습니다. 먼저 테마 옵션에 코드를 추가하는 방법을 보여드리겠습니다. 두 번째로 Theme Customizer를 통해 코드를 추가합니다. 두 가지 방법 중 하나를 통해 코드를 추가하면 바닥글 공개가 전체 웹사이트에 즉시 적용됩니다. 반면에 특정 페이지에 코드를 적용하고 싶다면 그렇게 할 수도 있습니다. 작업 중인 페이지에 코드를 추가하는 방법을 보여줌으로써 한 페이지에만 해당 효과를 만들 수 있습니다.
코드에 필요한 두 가지 주요 사항은 z-색인과 주요 콘텐츠의 여백 하단입니다. 바닥글이 완벽하게 맞는지 확인하려면 바닥글의 높이를 알아야 합니다. 일반적으로 사용되는 바닥글의 값은 53px입니다. 그러나 필요에 따라 높이를 변경할 수 있습니다. 바닥글 표시를 표준으로 추가하는 방법을 설명한 후 모든 바닥글의 높이에 맞게 만드는 방법도 보여줍니다.
테마 옵션을 통해 필요한 CSS 코드 추가
CSS 코드를 추가하는 방법을 보여드릴 첫 번째 방법은 Divi 테마 옵션을 사용하는 것입니다. 이것은 웹사이트에 CSS 코드를 추가할 때 가장 자주 사용하는 방법입니다. 이 영역에 CSS 코드를 추가하면 전체 웹사이트에 즉시 적용할 수 있습니다.
코드를 추가하려면 WordPress 대시보드 > Divi > 테마 옵션 > 탭 하단의 사용자 정의 CSS 필드에 다음 CSS 코드 줄을 복사하여 붙여넣습니다.
#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
코드를 추가했으면 웹사이트로 이동하여 바닥글이 제대로 작동하는지 확인하세요.
테마 커스터마이저를 통해 필요한 CSS 코드 추가
CSS 코드를 Divi 웹사이트에 추가하는 또 다른 방법은 Theme Customizer를 사용하는 것입니다. 테마 커스터마이저나 테마 옵션을 통해 코드를 추가하는 것은 동일합니다. 테마 옵션 내에서 코드를 제거하면 테마 사용자 지정 프로그램에서도 제거되며 그 반대의 경우도 마찬가지입니다. 테마 커스터마이저를 통해 코드를 추가할 때의 장점 중 하나는 모든 일이 실시간으로 일어나는 것을 볼 수 있다는 것입니다. 따라서 코드를 추가로 조정하면 얻을 수 있는 최종 결과에 대한 명확한 그림을 즉시 얻을 수 있습니다.
테마 사용자 지정 프로그램에 코드를 추가하려면 WordPress 대시보드 > 모양 > 사용자 지정 > '추가 CSS'까지 아래로 스크롤한 다음 > 다음 CSS 코드 줄을 추가합니다.
#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
한 페이지에만 필요한 CSS 코드 추가
바닥글 공개 CSS 코드 라인을 추가하는 마지막 방법은 특히 한 페이지에 추가하는 것입니다. 예를 들어 상호 작용하는 콘텐츠가 적은 페이지에 부가 가치를 부여하려는 경우 흥미로울 수 있습니다. 바닥글 공개를 추가하면 여전히 페이지를 좀 더 대화식으로 만들고 소셜 미디어 아이콘과 같이 바닥글에서 제공되는 콘텐츠에 집중할 수 있습니다.
특히 한 페이지에 CSS 코드를 추가하려면 해당 페이지를 엽니다. 해당 페이지의 Divi Builder 오른쪽 상단 모서리에 다음 아이콘이 표시됩니다.
아이콘을 클릭하고 사용자 정의 CSS 필드에 다음 코드 줄을 붙여넣습니다.
#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
설정을 저장하면 특히 해당 페이지에 바닥글 표시가 나타나는 것을 볼 수 있습니다.
바닥글 높이 변경
이제 위에서 설명한 방법은 제공된 표준 바닥글에 대해서만 계산됩니다. 다른 높이를 처리하면 코드가 제대로 작동하지 않습니다. 우리는 이를 고려했으며 다른 높이에서도 바닥글을 표시하는 방법을 보여 드리겠습니다.
언제든지 바닥글에 할당할 높이를 선택할 수 있습니다. 기본 바닥글과 바닥글 하단의 두 CSS ID에 대한 높이를 설정해야 합니다. 이 두 위치에서 높이를 조정하면 바닥글이 제자리에 맞춰집니다. 물론 그렇게 하고 나면 메인 콘텐츠의 여백 하단도 변경해야 합니다. 예를 들어 높이가 60px인 바닥글을 원하면 다음 코드 줄이 필요합니다.
#main-content {
margin-bottom: 60px;
z-index: 2;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}
'60px' 값이 필요한 곳이 세 곳 있음을 알 수 있습니다. 바닥글에 지정하려는 다른 높이 값이 있는 경우 세 위치에서 모두 변경해야 합니다. 기본 콘텐츠, 기본 바닥글 및 바닥글 하단.
CSS 상자 그림자 추가
웹 사이트에 약간의 관점과 상호 작용을 추가하기 위해 할 수 있는 또 다른 작업은 기본 콘텐츠에 상자 그림자를 추가하는 것입니다. 바닥글은 이미 그것이 일종의 메인 콘텐츠 '아래'에 있음을 보여줍니다. 상자 그림자를 추가하면 강조 표시됩니다. 그림자가 있으면 메인 콘텐츠와 바닥글 사이의 가상 높이 거리가 더 커 보입니다.
바닥글 표시에 상자 그림자를 추가하려면 다음 코드 줄을 사용합니다.
#main-content {
margin-bottom: 60px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}
그게 다야! 이제 바닥글 표시가 제대로 작동합니다.
마지막 생각들
오늘의 게시물에서는 웹사이트에서 바닥글 표시 효과를 만드는 방법을 보여 드렸습니다. 제공된 사용자 정의 CSS 코드를 사용하여 효과를 만들고 바닥글 높이에 맞는지 확인하십시오. 추가적인 관점을 부여하고 싶다면 위의 단계와 같이 기본 콘텐츠에 상자 그림자를 추가하는 것이 좋습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요!
중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!
Demja의 추천 이미지 / shutterstock.com