앵커 링크로 Divi에서 할 수 있는 5가지 멋진 일
게시 됨: 2018-10-21앵커 링크는 특히 긴 형식의 콘텐츠가 있는 웹 사이트에서 탐색을 개선하고 콘텐츠를 구성하는 데 도움이 될 수 있습니다. 탐색 이외의 앵커 링크를 사용하는 다른 주요 이점 중 하나는 SEO에 탁월하다는 사실입니다. 앵커 링크를 사용하는 개념은 매우 간단하지만 어디서부터 시작해야 하는지 알기 어려울 수 있습니다. 사실 제가 워드프레스 웹사이트 개발을 시작할 때 가장 먼저 찾아간 것 중 하나입니다.
이 기사에서는 앵커 링크를 사용하여 Divi에서 할 수 있는 5가지 멋진 작업을 보여줍니다. 이러한 예에서는 Divi와 배우고자 하는 열망만 있으면 됩니다.
가자!
다음 방법을 배우게 됩니다.
- Divi에서 앵커 링크로 스크롤하여 토글 열기
- 한 페이지 탐색 메뉴 만들기
- 다른 페이지에서 페이지 섹션으로 이동
- Divi Dot 탐색 사용
- 제목에 앵커 링크 추가
앵커 링크로 Divi에서 할 수 있는 5가지 멋진 일
YouTube 채널 구독
Divi에서 앵커 링크로 스크롤하여 토글 열기
토글은 사용자 경험을 향상시킬 수 있는 요소 중 하나입니다. 저를 게으르다고 부르세요(저는 효율적이라는 단어를 사용하겠습니다). 그러나 제 정보를 얻는 것은 쉬울수록 좋습니다. 저는 특정 유형의 콘텐츠에 대한 토글의 열렬한 팬입니다.
내가 본 토글의 가장 좋은 용도 중 하나는 FAQ 페이지입니다. 사용자가 집중하고 싶어하는 작은 정보를 드러내는 데 효과적입니다. 이 작업을 완료하는 데 1분 몇 줄의 JavaScript가 소요됩니다. 이 방법의 변형을 사용하여 탭이나 아코디언을 열 수도 있습니다. 이 방법이 어려워 보일 수 있지만 실제로는 그렇게 복잡하지 않습니다.
먼저 새 페이지를 만들고 시각적 빌더를 배포합니다. 그런 다음 "미리 만들어진 레이아웃 선택" 옵션을 선택합니다. 라이브러리에서 로드 팝업에서 검색 창에 "faq"를 입력하여 회계사 FAQ 페이지 레이아웃을 찾습니다. 그런 다음 레이아웃을 클릭하고 표시되는 미리보기에서 이 레이아웃 사용 버튼을 클릭하여 페이지에 배포합니다.
이제 앵커 링크 기능을 추가할 준비가 되었습니다. 이 예에서는 상단 헤더 섹션에 있는 버튼을 앵커 링크로 사용하여 클릭하면 페이지가 동시에 자동으로 열리는 특정 토글로 스크롤됩니다.
이렇게 하려면 먼저 버튼 설정을 열고 버튼에 대해 다음 링크 URL을 추가합니다.
버튼 링크 URL: #toggle3
이 앵커 링크에 "toggle3"이라는 ID를 부여하여 페이지의 세 번째 토글에 연결하고 싶다는 것을 기억할 수 있도록 했습니다. 이 ID 이름은 버튼이 스크롤할 토글을 알 수 있도록 나중에 추가할 토글 CSS ID와 상관 관계가 있습니다.
다음으로 버튼 모듈에 고유한 CSS 클래스를 추가합니다.
CSS 클래스: 열기 토글
그런 다음 설정을 저장합니다.
이 클래스 이름은 버튼을 클릭할 때 토글 열기의 동작을 상기시키는 데 도움이 됩니다. 우리는 우리의 커스텀 jquery에서 이 클래스를 사용하여 원하는 기능을 조금 더 얻을 것입니다.
그런 다음 FAQ에 사용되는 두 개의 토글 모듈 열이 포함된 행으로 페이지를 아래로 스크롤합니다. 첫 번째 열에서 세 번째 토글 모듈의 설정을 엽니다. 이것은 버튼(또는 앵커 링크)을 클릭할 때 스크롤하여 열고자 하는 모듈입니다.
고급 탭에서 다음 CSS ID를 추가합니다.
CSS ID: 토글3
이것은 이전에 사용한 버튼 링크 URL과 정확히 상관관계가 있다는 것이 중요합니다. 여기서 유일한 차이점은 "#"을 생략해야 한다는 것입니다.
마지막 단계는 페이지 본문에 사용자 정의 코드를 추가하는 것입니다. 그렇게 하려면 Divi 테마 옵션으로 이동하여 통합 탭을 연 다음 아래 GIF와 같이 본문 섹션에 다음을 붙여넣습니다.
jQuery(function ($) {
//open toggle on button click
$('a.open-toggle').on('click', function(event){
$('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
});
});
적절한 스크립트 태그로 코드를 래핑하는 것을 잊지 마십시오.
이제 페이지를 테스트하여 작동하는지 확인할 수 있습니다.
이 코드가 무엇을 하는지 조금 이해하기 위해. 자세히 살펴보겠습니다. 다음은 다시 스니펫입니다.
jQuery(function ($) {
//open toggle on button click
$('a.open-toggle').on('click', function(event){
$('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
});
});
코드에서 선택기 "a.open-toggle"은 사용자 정의 클래스가 있는 버튼을 나타냅니다. 선택기 "#toggle3.et_pb_toggle_2 .et_pb_toggle_title"은 id가 "toggle3"이고 클래스가 "et_pb_toggle_2"인 토글 제목을 나타냅니다.
"et_pb_toggle_2" 클래스는 실제로 세 번째 토글과 관련된 클래스입니다. Divi는 첫 번째 토글 클래스 "et-pb_toggle_0", 두 번째 토글 "et-pb_toggle_1" 등을 제공하기 때문입니다.
따라서 페이지의 특정 토글에 대한 클래스가 무엇인지 알고 싶다면 페이지의 첫 번째 토글부터 시작하여 0부터 세기만 하면 됩니다. 또는 항상 html 코드를 검사하여 그런 식으로 클래스를 찾을 수 있습니다.
이에 따라 코드를 업데이트할 수 있도록 이 점을 아는 것이 중요합니다. 예를 들어 내 버튼이 페이지의 두 번째 토글을 열도록 하려면 "#toggle3.et_pb_toggle_2 .et_pb_toggle_title"을 "#toggle3.et_pb_toggle_1 .et_pb_toggle_title"로 바꿉니다.
이 코드 조각은 다음 개념의 변형입니다. 나는 가능한 한 간단하게 유지하려고 노력했다.
이 멋진 기술은 탭과 아코디언에도 적용됩니다. 트릭은 코드에서 사용할 수 있도록 아코디언 항목 또는 탭에 대한 올바른 CSS 클래스를 식별하는 것입니다.
한 페이지 탐색 메뉴 만들기
이러한 종류의 메뉴 디자인은 한 페이지 사이트에서 인기가 있습니다. 메뉴에 링크를 만들어 페이지의 섹션에서 섹션으로 이동하는 것이 유용할 수 있습니다. 이는 한 페이지 사이트 또는 방문 페이지를 구축하는 경우 특히 유용합니다. 이 프로세스에 대한 자세한 내용은 Divi로 한 페이지 웹사이트를 만드는 방법에 대한 문서를 확인하세요.
다음은 이 작업을 수행하는 방법에 대한 간략한 개요입니다.
이것은 미리 만들어진 모든 레이아웃에서 작동하지만 이 예에서는 Web Freelancer 홈 페이지 레이아웃을 사용하겠습니다. 새 페이지를 만들고 비주얼 빌더를 배포하고 "미리 만들어진 레이아웃 선택"을 선택한 다음 Freelancer 홈페이지 레이아웃을 페이지에 배포합니다.
이제 링크(또는 스크롤)하려는 각 섹션에 CSS ID를 추가해야 합니다. "내 서비스" 섹션을 찾습니다. 섹션 설정을 열고 고급 탭을 클릭하고 다음 CSS ID를 추가합니다.
CSS ID: 서비스
다음으로 "추천 작업" 섹션을 찾아 해당 섹션에 다음과 같이 CSS ID를 지정합니다.
CSS ID: 작업
그리고 "About Us" 섹션에도 다음 CSS ID를 추가합니다.
CSS ID: 정보
이 세 섹션이 고유한 CSS ID로 올바르게 설정되면 메뉴 앵커 링크를 생성할 수 있습니다.
대시보드에서 모양 > 메뉴로 이동하여 새 기본 메뉴를 만듭니다. 그런 다음 다음 URL과 링크 텍스트를 사용하여 세 개의 사용자 정의 링크를 만듭니다.
사용자 지정 링크 1
URL: #services
링크 텍스트: 서비스
사용자 지정 링크 2
URL: #work
링크 텍스트: 작업
사용자 지정 링크 3
URL: #정보
링크 텍스트: 정보
표시 위치를 기본 메뉴로 설정하는 것을 잊지 마십시오. 그런 다음 메뉴를 저장합니다.
이제 페이지를 방문하면 사용해 볼 수 있습니다. 부드러운 스크롤이 있음을 알 수 있습니다. Divi 테마가 자동으로 부드러운 스크롤을 추가하기 때문입니다. 이 기능은 Divi 버전 2.4에 추가되었습니다.
킬러 한 페이지 스타일 웹 사이트 구축에 대한 더 많은 영감을 얻으려면 다음 게시물을 확인하십시오.
- 앵커 링크로 반응형 고정 사이드바를 구축하는 방법
- Divi로 상단 및 하단 스크롤 링크로 전체 화면 섹션을 만드는 방법
- 한 페이지 Divi 웹 사이트의 스크롤에 활성 링크를 만드는 방법
다른 페이지에서 페이지 섹션으로 이동
우리는 이것을 증명하기 위해 위의 예를 사용할 수 있습니다. 페이지의 세 섹션(services, work, about)에 CSS ID를 추가했기 때문에 메뉴 앵커 링크를 사용하여 해당 섹션으로 이동할 수 있을 뿐만 아니라 완전히 다른 페이지에서 해당 섹션으로 이동할 수도 있습니다.
다른 페이지에 링크를 만들 때 앵커 링크의 URL을 사용하기만 하면 됩니다. ID가 "services"인 서비스 섹션에 대한 링크를 추가하려는 경우 www.yourdomain.com/page/#services 와 같은 형식이 됩니다.
다음은 다른 페이지에서 해당 섹션으로 링크할 때 페이지가 로드되고 "내 서비스" 섹션으로 스크롤되는 방법의 예입니다.
이것은 사이트의 다른 페이지에서 이동할 수 있는 다양한 클릭 유도문안(예: 자세히 알아보기, Divi 받기, 저에게 투표하기 등)에 유용합니다.
Divi Dot 탐색 사용
기술적으로 이들은 기본 제공 앵커 링크입니다. 자신의 CSS 섹션 ID를 추가할 필요가 없습니다. 점 탐색 기능은 섹션에서 앵커 링크를 자동으로 생성합니다. 페이지에 대한 도트 탐색을 켜려면 페이지를 편집할 때 화면 오른쪽 상단의 Divi 페이지 설정에서 도트 탐색 옵션을 "ON"으로 설정하기만 하면 됩니다. Dot Navigation을 켜면 Divi는 페이지 측면에 투명한 메뉴를 자동으로 추가합니다. 각 점을 클릭하면 페이지 전체의 섹션으로 스크롤됩니다.
자세한 내용은 점 탐색에 레이블을 추가하는 방법에 대한 훌륭한 게시물이 있습니다.
제목에 앵커 링크 추가
제목에 앵커 링크를 추가하는 것은 항상 좋은 생각입니다. 콘텐츠가 많은 긴 페이지를 인덱싱하는 좋은 방법이므로 동일한 페이지 내의 각 제목으로 쉽게 탐색하거나 웹사이트의 다른 페이지에서 이러한 제목에 대한 링크를 만들 수 있습니다. 또한 검색 엔진이 사이트를 크롤링하는 데 도움이 됩니다.
Divi Builder를 사용하여 헤더에 CSS ID를 추가하려면 제목 텍스트가 포함된 모듈을 엽니다. 텍스트 탭이 열려 있는지 확인하십시오. 헤더 태그(h1, h2, h3 등...)를 찾은 다음 시작 헤더 태그의 대괄호 안에 id를 입력합니다. 다음은 ID가 "webdesign"인 h3 제목의 예입니다.
<h3 id="webdesign">Website Design</h3>
이제 올바른 앵커 링크 URL을 사용하는 한 어디에서나 이 헤더에 연결할 수 있습니다. 이 예의 경우 다음과 같아야 합니다.
www.yourdomain.com/page/#webdesign
이것은 Divi 빌더를 사용하지 않는 페이지나 게시물에도 유용합니다. 이러한 페이지 또는 게시물의 제목에 앵커 링크를 추가하려면 WordPress 텍스트 편집기에서 텍스트 탭 을 엽니다. 원하는 제목을 찾고 아래와 같이 제목 태그 안에 id를 추가하기만 하면 됩니다.
이것이 바로 내가 이 포스트를 위해 한 일입니다. 이 게시물의 상단에 있는 섹션 링크는 게시물의 다른 제목으로 연결되는 멋진 목차 역할을 합니다.
꽤 멋진 물건.
마무리
앵커 링크는 몇 가지 실용적인 용도가 있지만 항상 먼저 청중과 목표를 고려해야 하므로 너무 열광하지 마십시오. 좋은 디자인은 사용성과 기능에 관한 것이므로 어떤 경우에는 앵커 링크가 매우 도움이 될 수 있습니다. 그러나 다른 곳에서는 사용자가 시차 섹션을 앞뒤로 잽싸게 움직여 결국 길을 잃는 것을 의미합니다. 이 게시물에서 유용한 팁을 얻을 수 있기를 바랍니다.
앵커 링크에 대한 팁이나 질문이 있습니까? 아래 의견 섹션에서 귀하의 경험에 대해 알려주십시오.