새 탭/창에서 Divi 전체 너비 헤더 및 슬라이더 버튼을 여는 방법
게시 됨: 2017-06-06우리 모두는 특정 청중을 끌어들이고 이야기 하는 웹사이트를 구축하는 것이 하나의 과정이라는 것을 알고 있습니다. 웹사이트에서 취하는 모든 행동은 고객 여정의 일부이기 때문에 중요합니다. 모든 방문자와 잠재 고객은 개인적으로 접근하고 이해해야 합니다.
점에 당신의 웹 사이트를 얻는 것은 좋은 디자인처럼, 면밀한 내용과 당신과 그들 모두가 원하는 조치를 취할 방문자를 밀어 것입니다 확실히 충분히 할 CTA, 많은 것들을 필요로한다.
웹사이트에서 클릭 유도문안을 지원하는 가장 많이 사용되는 요소 중 하나는 버튼입니다. 일반적으로 웹사이트의 다양한 섹션에서 버튼을 찾을 수 있습니다. 웹사이트의 다른 부분으로 연결 되거나 방문자를 외부 웹사이트로 안내할 수 있습니다.
Divi를 사용하면 웹사이트를 만드는 각 사람이 원하는 위치에 원하는 만큼 버튼을 포함할 수 있습니다. 타겟 청중과 빠르게 소통하고 웹사이트 방문 초기부터 호기심을 유발하고 싶다면 영웅 섹션에 CTA를 추가하는 것이 좋습니다.
새 탭/창에서 링크를 자동으로 열어야 하는 이유는 무엇입니까?
새 창에서 링크를 여는 데 영향을 줄 수 없습니다. 과거에 많은 사람들이 오용한 것이지만 이제는 모두 사용자의 선호도에 달려 있습니다. 그러나 동일한 창 대신 새 탭에서 특정 링크를 열 수 있는 옵션이 있습니다. 새 탭에서 링크를 열려고 하는 데는 여러 가지 이유가 있습니다. 그 중 일부는 다음과 같습니다.
방문자가 웹사이트에서 벗어나지 못하게 하기
방문자를 잃는 순간 다시 웹사이트에 다시 방문하게 하는 것은 매우 어렵습니다. 일반적으로 버튼을 클릭할 때 동일한 창 내에서 외부 웹사이트로 보내는 경우입니다.
그렇다면 처음에는 왜 그들을 멀리 보내는 것입니까? 새 탭에서 버튼을 열면 해당 탭에서 귀하의 웹사이트와 함께 페이지가 계속 열려 있는지 확인합니다. 그들은 기록을 살펴보지 않고도 귀하의 페이지로 돌아갈 수 있습니다.
열린 링크를 닫은 후 웹 사이트에 계속 머무르는 경우
무언가를 읽을 때마다 탭을 닫는 것은 자연스러운 일입니다. 그게 아니면 당신이 멀리 클릭합니다. 두 상황 모두 다음 행동으로 넘어가는 순간부터 당신에게서 또 한 발짝 떨어져 있습니다.
새 탭이나 창에서 링크를 자동으로 열면 처음에 사람들이 어떻게 다른 곳에 도착했는지 상기시킬 수 있습니다. 귀하의 웹사이트를 통해.
나중에 열린 탭에서 선택
여러 개의 탭이 며칠 동안 나란히 늘어서 있는 첫 번째 사람은 아닐 것입니다. 이것이 바로 사람들의 브라우저에 귀하의 존재를 유지하는 것이 가치있게 만드는 이유입니다. 방문자가 며칠 후에 열린 탭에서 귀하의 웹사이트를 찾은 경우 귀하의 콘텐츠가 빠져들게 하고 다시 한 번 볼 시간을 가졌을 수 있습니다.
두 번째, 세 번째 또는 네 번째 읽을 때 내용이 훨씬 더 잘 이해될 가능성이 높습니다.
시작하기: 새 탭에서 전각 머리글 및 슬라이더 버튼 열기
전체 너비 헤더 또는 전체 너비 슬라이더가 있는 전체 너비 섹션을 사용하지 않을 때 일반적으로 표준 섹션을 추가하고 여기에 수동으로 버튼 모듈을 추가합니다. 각 버튼 모듈의 내용 탭에서 링크를 동일한 창에서 열지 새 탭에서 열지 선택할 수 있습니다. 콘텐츠 탭의 링크 하위 범주에서 이 옵션을 찾을 수 있습니다.
전체 너비 헤더 및 슬라이더에서는 이러한 가능성이 포함되지 않습니다. HTML은 미리 정의되어 있기 때문에 함께 제공되는 HTML 코드를 단순히 수정할 수 없습니다. 이것이 우리가 전체 너비 헤더와 전체 너비 슬라이더 버튼을 모두 새 탭/창에서 열 수 있도록 하는 jQuery 코드를 추가하는 이유입니다.
전체 너비 헤더 만들기
기존 또는 새 페이지에 새 전체 너비 섹션을 추가하여 시작하겠습니다.
해당 전폭 섹션 내에서 전폭 헤더를 선택하십시오. Fullwidth Header는 웹사이트에 필요한 모든 것을 갖춘 아름다운 헤더를 제공합니다. 이제 전체 너비 헤더의 콘텐츠 탭을 아래로 스크롤하고 버튼에 표시할 텍스트를 적습니다. 그런 다음 버튼에 대한 링크도 추가하십시오.
그런 다음 전체 너비 헤더의 고급 탭으로 이동하여 버튼 필드가 나타날 때까지 아래로 스크롤합니다. 이 경우 버튼 번호 1만 사용하려고 합니다. 새 탭에서 두 번째 버튼을 열려면 두 번째 버튼에 할당된 클래스를 사용해야 합니다.
Button One 필드를 클릭하고 클래스가 주황색 글꼴 색상으로 나타나는 것을 확인하십시오. 클래스는 '.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button'입니다. jQuery 코드에서 이 클래스가 필요합니다. 두 번째 버튼을 새 탭이나 창에서 열려면 해당 클래스를 어딘가에 저장하세요.
전체 너비 슬라이더 만들기
대신 전체 너비 슬라이더를 추가하려면 새 전체 너비 섹션을 추가하세요. 이번에는 섹션에 전체 너비 슬라이더를 배치합니다. 콘텐츠 탭에서 버튼 텍스트를 기록하고 고급 탭으로 이동합니다.
슬라이드 버튼 옵션을 찾을 때까지 해당 탭을 아래로 스크롤하십시오. 전체 너비 슬라이더의 일부인 버튼의 할당된 클래스를 복사합니다.
Divi 테마 옵션에 jQuery 코드 추가하기
전체 너비 헤더 및 슬라이더의 새 탭에서 링크를 여는 데 사용할 코드는 다릅니다. 그 외에도 jQuery 코드를 두 가지 다른 방법으로 웹사이트에 통합할 수도 있습니다. 가장 일반적인 것은 Divi 웹사이트의 테마 옵션에 코드를 추가하는 것입니다.
사람들이 이 옵션을 가장 자주 사용하는 이유는 전체 웹사이트에 적용되기 때문입니다. 사이트의 어떤 페이지에 있든 코드가 적용됩니다. 웹사이트의 다른 페이지에서 특정 섹션이나 요소를 재사용하는 경우 웹사이트에 사용자 정의 코드를 추가하는 가장 쉬운 방법입니다.
전체 웹사이트에 코드를 추가하려면 Divi > 테마 옵션 > 통합으로 이동하여 웹사이트 의 <head> 에 다음 코드를 추가하세요 .
전체 너비 헤더 버튼에 대한 jQuery 코드
<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>
전체 너비 슬라이더 버튼에 대한 jQuery 코드
<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>
위의 인쇄 화면과 같이 <script> 태그 사이에 텍스트를 추가하는 것을 잊지 마십시오.
알 수 있듯이 전체 너비 헤더와 전체 너비 슬라이더의 코드는 약간 다릅니다. 코드의 세 번째 줄에서 각 버튼의 클래스가 대괄호 사이에 어떻게 쓰여지는지 알 수 있습니다. 따라서 코드를 전체 너비 헤더의 두 번째 버튼에 적용하려면 작성된 클래스를 두 번째 버튼에 할당된 클래스로 교체하면 됩니다.
그런 다음 변경 사항을 저장합니다. 코드는 전체 웹사이트에 즉시 적용됩니다.
코드 모듈에 jQuery 코드 추가
코드를 웹사이트에 추가할 수 있는 또 다른 방법은 코드 모듈을 사용하는 것입니다. 이 모듈은 일반적으로 포함하려는 코드가 한 페이지에만 적용될 때 사용됩니다.
변경 사항을 적용할 페이지를 열고 페이지 상단에 열이 하나 있는 행을 추가합니다. 그런 다음 해당 행에 코드 모듈을 추가합니다.
동일한 코드를 복사하여 콘텐츠 탭의 텍스트 하위 범주에 있는 콘텐츠 상자에 붙여넣습니다.
전체 너비 헤더 버튼에 대한 jQuery 코드
<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>
전체 너비 슬라이더 버튼에 대한 jQuery 코드
<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>
변경 사항을 저장합니다.
위의 인쇄 화면과 같이 <script> 태그 사이에 텍스트를 추가하는 것을 잊지 마십시오. 코드는 이제 웹사이트의 해당 페이지에만 적용됩니다.
마지막 생각들
웹 사이트에 다음 코드를 추가하면 전체 너비 섹션에서 전체 너비 헤더 및 슬라이더를 사용하는 동안 새 탭에서 버튼을 열 때만 필요합니다. 버튼 모듈을 사용하면 새 탭에서 링크를 열도록 선택할 수 있는 Divi Builder 내에 포함된 옵션이 있습니다.
웹사이트의 여러 페이지에서 코드를 사용하려면 웹사이트의 테마 옵션에 코드를 추가하세요. 그러나 하나의 전체 너비 헤더 또는 전체 너비 슬라이더에 대한 코드만 사용하는 경우 해당 특정 페이지의 코드 모듈에 코드를 추가하는 것이 더 나을 수 있습니다.
링크를 새 탭에서 얼마나 자주 열리며 그 이유는 무엇입니까? 아래 의견 섹션에서 알려주십시오!