소셜 미디어 팔로우 모듈을 군주처럼 고정시키는 방법
게시 됨: 2017-08-07오늘의 튜토리얼에서는 소셜 미디어 팔로우 모듈을 특정 요구 사항에 맞게 만드는 방법을 보여 드리겠습니다. 소셜 미디어 팔로우는 웹사이트의 모든 페이지에서 거의 누락되지 않는 모듈입니다. 소셜 미디어 채널을 웹사이트와 연결하는 주요 방법 중 하나입니다. 웹사이트와 소셜 미디어 채널 간의 원하는 연결을 달성하는 데 도움이 되도록 Monarch가 있습니다. 웹사이트에 소셜 미디어 팔로우 버튼을 쉽게 표시할 수 있는 플러그인입니다. 그러나 Divi 빌더를 통해 일부 모나크 결과를 얻는 것을 선호한다면 이 게시물이 유용할 수 있습니다.
Monarch 플러그인이 제공하는 것 중 하나인 웹사이트용 고정 소셜 미디어 팔로우 모듈을 만드는 방법을 보여드리겠습니다. 왼쪽 또는 오른쪽(Monarch 내 표준 설정)에 위치하는 것 외에도 페이지 상단과 하단에 고정하는 방법도 보여줍니다. 페이지 상단에 고정시키는 것 외에도 웹사이트의 기본 메뉴 아래에 소셜 미디어 팔로우 모듈을 표시하는 방법을 보여주는 부분도 포함됩니다(기본 메뉴가 고정되어 있는지 여부). .
아래에서 최종 결과를 살펴보겠습니다.
왼쪽 예
오른쪽 예
상위 예(표준)
고정 탐색 없이
고정 탐색 포함
하단 예
소셜 미디어 팔로우 모듈을 군주처럼 고정시키는 방법
YouTube 채널 구독
일반 단계
페이지에 소셜 미디어 팔로우 모듈을 추가하는 기본 단계는 모든 예에서 동일하므로 한 번만 보여드리겠습니다. 오른쪽, 위쪽 또는 아래쪽 배치에 대해 동일한 결과를 얻으려면 이 게시물의 다음 부분에 설명된 대로 먼저 소셜 미디어 팔로우 모듈을 추가해야 합니다.
페이지에 소셜 미디어 팔로우 모듈 추가
이를 쉽게 하기 위해 우리 페이지의 첫 번째 섹션에 소셜 미디어 팔로우 모듈을 추가할 것입니다. 그렇게 하면 나중에 변경하고 싶을 때 찾을 위치를 즉시 알 수 있습니다. 이 모듈에 고정 위치를 할당할 것이기 때문에 이 모듈에 대해 별도의 행이 필요하지 않습니다.
소셜 미디어 팔로우 모듈+에 소셜 미디어 채널 추가
다음으로 해야 할 일은 필요한 소셜 미디어 채널을 소셜 미디어 팔로우 모듈에 추가하는 것입니다. 모듈 설정을 열고 '새 소셜 네트워크 추가'를 클릭합니다. 완료하면 추가하려는 소셜 미디어 네트워크를 선택하고 URL을 할당할 수 있습니다.
각 소셜 네트워크에는 소셜 네트워크와 일치하는 아이콘 색상이 자동으로 할당됩니다. 그러나 자신의 웹사이트 스타일로 색상을 사용하고 싶다면 디자인 탭에서 다른 색상을 선택할 수 있습니다. 만드는 방법을 보여주는 예에서는 4개의 소셜 네트워크를 포함합니다. 페이스북, 트위터, 구글+, 링크드인. 표준 색상을 사용하는 대신 각 소셜 네트워크에 동일한 색상을 제공하지만 불투명도는 다릅니다. 중요도에 따라 소셜 미디어 채널도 주문할 것입니다.
페이스북 설정
'새 소셜 네트워크 추가'를 클릭합니다. 소셜 네트워크 옵션에서 Facebook을 선택합니다. 콘텐츠 탭에 있는 동안 Facebook 소셜 미디어 채널에 연결된 URL을 추가합니다.
그런 다음 디자인 탭으로 이동합니다. 이 경우 Facebook은 가장 중요한 소셜 네트워크입니다. 그렇기 때문에 가장 눈길을 끄는 색상 음영을 지정합니다. 우리가 사용한 색상은 'rgba(59,89,152,0.94)'입니다.
트위터 설정
다음으로 새 소셜 네트워크를 추가합니다. 이번에는 Facebook 대신 Twitter를 선택하세요. 동일한 콘텐츠 탭에 URL을 추가하고 디자인 탭으로 이동합니다. 디자인 탭에서 배경색으로 'rgba(59,89,152,0.76)'를 선택합니다. 이 경우 Twitter는 중요한 소셜 미디어 채널이지만 Facebook만큼 중요하지 않습니다. 이것이 바로 두 번째 행으로 약간 더 투명하고 덜 눈에 띄는 색상으로 제공되는 이유입니다.
링크드인 설정
콘텐츠 탭에서 LinkedIn 소셜 네트워크에 대해 동일한 과정을 반복하고 디자인 탭으로 이동합니다. 디자인 탭에서 아이콘에 'rgba(59,89,152,0.6)' 색상을 지정합니다.
Google+ 설정
그리고 마지막으로 중요한 것은; Google+ 소셜 아이콘을 추가합니다. URL을 입력하고 디자인 탭으로 이동합니다. 이것은 이 예에서 목록에 추가하려는 '가장 덜 중요한' 소셜 네트워크이며 'rgba(59,89,152,0.42)' 아이콘 색상을 갖습니다.
왼쪽 사이드바 만들기 소셜 미디어 팔로우
만드는 방법을 보여줄 첫 번째 고정 소셜 미디어 팔로우 모듈은 페이지 왼쪽에 있습니다. 이것은 가장 자주 사용되는 것이며 즉시 모나크에 대해 가장 많이 생각하게 만드는 것일 수 있습니다. 먼저 일반적인 단계를 따르고 이 게시물의 다음 부분에서 찾을 CSS 코드를 추가하여 계속하십시오. CSS 코드를 추가하는 두 가지 방법을 보여드리겠습니다. 테마 옵션 및 특히 한 페이지로 이동합니다. 이 예 후에 다른 예에 대해서도 두 가지 옵션 중에서 선택할 수 있습니다.
테마 옵션에 CSS 코드 라인 추가
CSS 코드를 추가하는 방법 중 하나는 테마 옵션을 사용하는 것입니다. 이 방법은 웹사이트 전체에 효과를 만들고 싶을 때 가장 많이 사용됩니다. 하지만 기억해; 이 효과를 사용하는 경우 웹사이트의 각 페이지(또는 표시하려는 페이지)에 소셜 미디어 팔로우 모듈을 포함해야 합니다.
테마 옵션에 CSS 코드를 추가하려면 WordPress 대시보드 > Divi > 테마 옵션 > 일반 > 일반 탭으로 이동하고 다음 CSS 코드 줄을 사용자 정의 CSS 필드에 추가합니다.
ul.et_pb_social_media_follow {
position: fixed;
left: 0;
top: 35%;
padding: 0 !important;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}
특히 한 페이지에 CSS 코드 라인 추가
CSS 코드를 적용하는 데 도움이 되는 또 다른 방법은 특히 한 페이지에 추가하는 것입니다. 이 방법은 특히 한 페이지에만 소셜 미디어 팔로우 모듈을 추가하기로 결정할 때 가장 일반적으로 사용됩니다. 이 방법을 사용하면 웹사이트에서 소셜 미디어 팔로우 모듈을 포함하지 않는 웹사이트의 다른 모든 페이지에 CSS 코드 라인을 로드하지 않습니다. 또는 다른 페이지의 소셜 미디어 팔로우 모듈이 평소와 같이 작동하도록 하려면 이 방법도 도움이 됩니다.
Divi 빌더에서 다음 버튼을 클릭하십시오.
그런 다음 사용자 정의 CSS 필드에 CSS 코드를 복사하여 붙여넣습니다.
오른쪽 사이드바 만들기 소셜 미디어 팔로우
공유할 다음 코드는 소셜 미디어 팔로우 모듈을 웹사이트 오른쪽에 배치하는 데 도움이 됩니다.
필요한 CSS 코드 라인
위의 예에서 설명한 대로 다음 CSS 코드 줄을 테마 옵션 또는 특히 한 페이지에 추가합니다.
ul.et_pb_social_media_follow {
position: fixed;
top: 40%;
padding: 0 !important;
right: 0;
width: 30px;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important;
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}
최고의 소셜 미디어 팔로우 만들기
계속해서 웹사이트 상단에서 소셜 미디어 팔로우 모듈을 찾을 수도 있습니다. 이것은 실제로 소셜 미디어 아이콘이 웹사이트를 통해 방문자를 팔로우하도록 하는 매우 흥미로운 방법입니다. 자주 사용되지 않아 사람들의 시선을 사로잡습니다.
필요한 CSS 코드 라인
다음 CSS 코드 줄을 복사하여 테마 옵션에 붙여넣거나 특히 한 페이지에 추가합니다.
ul.et_pb_social_media_follow {
position: fixed;
left: 45%;
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important;
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}
최고의 소셜 미디어 만들기 기본 메뉴 아래 팔로우
웹사이트에 소셜 미디어 팔로우 모듈을 추가하는 이전에 표시된 방법은 기본 메뉴를 고려하지 않습니다. 그러나 소셜 미디어 팔로우를 기본 메뉴 아래에 표시하고 스크롤할 때 맨 위로 돌아가도록 하려면 게시물의 이 부분이 도움이 될 수 있습니다.
CSS 코드 추가
고정 탐색이 활성화된 경우와 활성화되지 않은 경우 모두 테마 옵션에 다음 CSS 코드 줄을 추가하거나 특히 한 페이지에 추가해야 합니다.
ul.et_pb_social_media_follow {
position: fixed;
left: 45%;
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important;
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}그런 다음 jQuery 코드도 추가해야 합니다. jQuery 코드는 고정 탐색을 활성화했는지 여부에 따라 다릅니다.
고정 탐색 포함
고정 탐색이 활성화된 경우 다음 jQuery 코드 줄을 웹사이트 헤드 또는 작동하려는 페이지 내의 코드 모듈에 추가해야 합니다.
<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
});
});
</script>
CSS 코드 라인도 사용하는 것을 잊지 마십시오. jQuery 코드는 추가입니다. 또한 스크롤할 때 기본 높이가 동일하게 유지되는지 확인합니다. WordPress 대시보드 > 모양 > 사용자 정의 > 헤더 및 탐색 > 고정 탐색 설정 > 고정 메뉴 높이의 최소값 선택 으로 이동하여 이를 수행할 수 있습니다 .
고정 탐색 없이
동일한 결과를 얻고 싶지만 고정 탐색이 없는 경우 코드가 약간 다릅니다.
<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
else {
$("ul.et_pb_social_media_follow").css("margin-top", 0);
}
});
});
</script>
하단 소셜 미디어 만들기
행의 마지막은 하단 소셜 미디어 팔로우 모듈입니다.
필요한 CSS 코드 라인
테마 옵션의 사용자 정의 CSS 필드 또는 특히 한 페이지에 다음 CSS 코드 행을 추가하십시오.
ul.et_pb_social_media_follow {
position: fixed;
left: 45%;
bottom: 0;
padding: 0 !important;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important;
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}
마지막 생각들
이 튜토리얼에서는 Monarch 플러그인과 동일한 스타일로 소셜 미디어 팔로우 모듈을 만드는 방법을 보여주었습니다. 이 방법을 사용하면 소셜 미디어 채널을 공유하기 위해 단독으로 사용하는 경우 Monarch 플러그인을 다운로드할 필요가 없습니다. 소셜 미디어 공유를 위해서는 여전히 Monarch 플러그인을 사용해야 합니다. 질문이나 제안 사항이 있는 경우 우리가 연락할 수 있도록 아래의 댓글 섹션에 댓글을 남겨주세요!
중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!
Snopek Nadia의 특집 이미지 / Shutterstock.com