Divi 버튼 모듈에 동적 링크를 추가하는 방법

Divi 버튼 모듈은 다양한 디자인 옵션을 제공하므로 디자인에 매력적인 링크를 만들 때 큰 자유를 누릴 수 있습니다. 배경색을 변경하거나 상자 그림자를 추가하는 등 창의적인 가능성은 무한합니다. 이는 표준 버튼 모듈에만 국한되지 않습니다. Divi 내에서 버튼이 활성화된 모든 위치에 적용됩니다.

버튼의 주요 목적은 웹사이트 내부든 외부든 다른 위치로 안내하는 탐색입니다. 링크는 인터넷의 수많은 위치로 연결될 수 있으며 옵션은 끝이 없습니다. Divi 사이트의 맥락에서 동적 콘텐츠는 다양한 페이지, 게시물 및 미디어 간의 연결을 간소화합니다. Divi 버튼에 동적 링크를 추가하는 방법을 설명하기 위해 이 가이드에서는 무료 Plumbing Layout Pack을 사용하겠습니다. 이제 Divi 사이트의 탐색 가능성을 향상시키는 것이 그 어느 때보다 쉬워졌습니다.

동적 링크를 사용하는 이유

HTML에서 링크는 절대 또는 상대의 두 가지 형태로 제공됩니다. 절대 링크는 도달하려는 정확한 주소를 제공하며 일반적으로 https:// 또는 www가 포함됩니다. 반면, 상대 링크는 현재 탐색 중인 페이지와 일치하는 페이지나 디렉터리와 관련이 있습니다. 예를 들어 https://google.com은 절대 링크입니다. 하지만 Elegant Themes 웹사이트에 있고 /modules 에 링크하고 싶다면 모듈 갤러리 페이지로 연결됩니다. Elegant Themes 웹사이트의 모듈 페이지는 별도의 도메인이기 때문에 Google 홈페이지에서 모듈 페이지로 연결할 수 없습니다. Google에 /modules 라는 URL이 있더라도 관련이 없는 특성으로 인해 Elegant Themes 모듈 페이지로 이동하지 않습니다.

귀하가 만든 페이지와 게시물의 URL을 추적하는 것은 귀하의 웹사이트가 확장됨에 따라 까다로운 작업이 될 수 있습니다. 짧거나 기본적인 URL을 기억하는 것은 간단합니다. 그러나 SEO를 위해 콘텐츠를 최적화하고 롱테일 키워드를 콘텐츠 URL에 통합하기 시작하면 점점 더 어려워질 수 있습니다. 이 접근 방식을 사용하면 URL이 길어져 기억하기가 더 어려워질 수 있습니다. 이때 동적 링크의 가치가 입증됩니다.

상대 링크, 동적 링크 및 Divi

Divi에서는 URL을 몰라도 WordPress 설치 내에서 다양한 대상에 연결할 수 있습니다. 몇 가지 키워드만 검색하면 사이트의 해당 위치로 직접 연결할 수 있습니다.

동적 링크 내에서 다음을 연결할 수 있습니다.

• 현재 페이지: 작업 중인 페이지
• 작성자 페이지: 페이지/게시물 작성자의 페이지
• 귀하의 홈페이지: 귀하의 웹사이트의 홈페이지
• 게시물: 웹사이트 내의 게시물
• 페이지: 웹사이트의 페이지
• 미디어: 미디어 갤러리에서 찾을 수 있는 파일(파일로 직접 연결되지 않고 사이트의 미디어 페이지로 연결됨)
• 프로젝트: Divi의 프로젝트 사용자 정의 게시물 유형
• 제품: WooCommerce가 설치되어 있는 경우 WooCommerce 제품에 동적으로 연결할 수 있습니다.
• 수동 사용자 정의 필드: 수동으로 생성한 사용자 정의 필드

웹사이트에 더 많은 사용자 정의 게시물 유형을 추가하면 Divi 내에서 연결할 수 있는 동적 콘텐츠로 나타날 수도 있습니다.

Divi 버튼에 동적 링크 추가하기

동적 링크가 어떻게 작동하는지 보여주기 위해 배관 랜딩 페이지 레이아웃을 설치하는 것부터 시작해 보겠습니다.

레이아웃 팩 설치

시작하려면 페이지 레이아웃을 설치하겠습니다. 먼저 WordPress에서 새 페이지를 만들어야 합니다. WordPress 대시보드의 왼쪽 메뉴에서 페이지 메뉴 항목 위로 마우스를 가져갑니다 . 그런 다음 새로 추가를 클릭합니다 .

기본 WordPress 편집기인 Gutenberg에서 새 페이지 의 제목을 설정하세요 . 다음으로, 보라색 Divi Builder 사용 버튼을 클릭하세요 .

그러면 세 가지 옵션이 제공됩니다. 보라색 가운데 버튼인 레이아웃 찾아보기 를 클릭 하겠습니다.

그러면 선택할 수 있도록 미리 디자인된 페이지가 포함된 Divi의 방대한 레이아웃 라이브러리가 열립니다. 배관 레이아웃 팩을 선택하겠습니다.

배관 레이아웃 팩에서 랜딩 페이지 레이아웃을 선택합니다 .

그런 다음 파란색 이 레이아웃 사용 버튼 을 클릭하세요 . 새 페이지에 레이아웃이 설치될 때까지 기다립니다. 마지막으로 녹색 게시 버튼을 클릭하여 페이지와 새 레이아웃을 활성화하세요.

레이아웃의 헤더 섹션에 있는 버튼을 사용해 작업하겠습니다.

링크 추가하기: 페이지에 링크하기

이제 레이아웃이 설치되었으므로 WordPress 설치 내의 다양한 위치에 동적으로 연결할 수 있습니다. 시작하려면 버튼 모듈의 기어 아이콘을 클릭합니다 . 그러면 버튼의 설정 메뉴가 열립니다.

다음으로 링크 탭을 클릭합니다 . 동적 콘텐츠 아이콘을 확인하세요. 여기에서 우리 웹사이트 전체의 다양한 위치에 연결할 수 있습니다. 동적 콘텐츠 아이콘을 클릭합니다 .

우리 웹사이트의 페이지로 링크할 것이므로 페이지 링크 옵션을 클릭하겠습니다 .

그러면 우리 사이트의 페이지 목록이 표시됩니다. 사이트에 페이지가 많은 경우 검색창을 사용하여 결과 범위를 좁힐 수 있습니다.

링크하려는 페이지를 찾았으면 해당 페이지를 클릭합니다 . 그러면 버튼에 연결됩니다. 그런 다음 녹색 확인 표시를 클릭하여 페이지를 선택하세요.

이 작업을 완료하면 이제 링크 URL 텍스트 상자에 페이지 링크가 있음이 표시됩니다.

필요한 경우 톱니바퀴 아이콘을 클릭하여 이 링크를 업데이트하고 다른 페이지로 변경할 수 있습니다. 또는 휴지통 아이콘을 클릭하여 동적 링크를 완전히 제거할 수 있습니다. 변경 사항을 저장하려면 버튼 모듈 설정 상자 하단에 있는 녹색 확인 표시를 클릭하세요 . 이제 버튼에 동적 페이지 링크가 추가되었습니다. Divi에서 동적 링크를 사용하는 또 다른 장점은 동적으로 추가된 페이지의 URL을 변경하는 경우 페이지의 모든 인스턴스를 변경하는 것에 대해 걱정할 필요가 없다는 것입니다. 링크가 동적으로 만들어지면 호출되는 곳마다 자동으로 업데이트됩니다.

이제 웹사이트 내 블로그 게시물에 대한 동적 링크를 추가해 보겠습니다.

링크 추가하기: 게시물에 링크하기

먼저 이전에 추가한 동적 링크를 제거하겠습니다. 시작하려면 헤더 버튼의 기어 아이콘을 클릭하세요 .

이미 동적 링크가 있으므로 링크 텍스트 상자가 채워져 있는 것을 볼 수 있습니다. 이 동적 링크를 제거하려면 휴지통 아이콘을 클릭 하겠습니다.

링크를 삭제한 후에는 다시 돌아가 동적 콘텐츠 아이콘을 클릭합니다 .

하지만 이번에는 블로그 게시물에 연결하고 싶기 때문에 게시물 링크를 선택 하겠습니다.

제시된 블로그 게시물 목록을 통해 링크할 블로그 게시물을 선택할 수 있습니다. 그런 다음 녹색 확인 표시를 클릭하여 선택 사항을 저장합니다.

링크는 더 이상 페이지 링크가 아니라 블로그 게시물에 연결되므로 게시물 링크로 표시됩니다. 마지막으로 녹색 확인 표시를 클릭하여 변경 사항을 저장합니다.

모두 반올림

Divi의 버튼 모듈을 사용하면 링크로 창의력을 발휘할 수 있습니다. 이 도구를 사용하면 웹사이트의 다양한 대상에 쉽게 연결할 수 있습니다. 버튼 모듈에 동적 링크를 채택하는 것은 수동으로 링크를 검색하는 번거로움을 제거하여 시간을 절약하는 현명한 방법입니다. 시간뿐만 아니라 에너지도 마찬가지입니다. 변경된 링크를 업데이트하는 것을 기억할 필요가 없습니다. 동적 링크를 사용하면 URL을 외워야 하는 부담 없이 롱테일 키워드 URL을 쉽게 만들 수 있습니다. 연결 및 디자인 프로세스 전반에 걸쳐 동적 링크를 사용하는 것이 좋습니다. Divi를 사용하면 매우 쉽습니다!