Elementor에서 앵커 링크를 추가하는 방법(단계별 가이드)
게시 됨: 2022-02-18랜딩 페이지에 앵커 링크를 추가하는 가장 간단한 방법을 찾고 계십니까? 글쎄, 당신은 실행 가능한 솔루션에 매우 가까워지고 있습니다.
Elementor와 같은 끌어서 놓기 페이지 빌더를 사용하면 웹 페이지를 더 똑똑하고 유연하게 구축할 수 있습니다. 따라서 앵커 태그를 생성할 때 Elementor는 유사한 WordPress 플러그인보다 훨씬 편리합니다.
따라서 이 단계별 자습서에서는 버튼/링크를 클릭한 후 페이지의 특정 섹션으로 스크롤할 수 있도록 Elementor에서 앵커 링크를 설정하는 방법을 보여줍니다. 그것은 당신의 웹 페이지를 더 사용자 친화적이고 전환적으로 바꿀 것입니다. 계속 읽으세요.
웹 페이지에서 앵커 링크가 작동하는 방식
닻은 배를 위해 무엇을 합니까? 선박이 특정 수면에 뜨도록 도와줍니다. 버리지 않도록 안전하게 보관하십시오. 따라서 앵커 걸쇠의 한계 내에서 모든 방향으로 앵커 주위를 돌 수 있습니다.
앵커 링크에서도 같은 일이 발생합니다. 방문자가 앵커 태그를 클릭하면 방문 페이지의 특정 섹션으로 연결됩니다. 다른 페이지가 아닌 다른 섹션으로.
앵커 링크가 필요합니다. 앵커 태그를 클릭하면 방문자가 웹 페이지의 특정 부분으로 순식간에 이동할 수 있습니다. 이 프로세스는 시간을 절약하고 방문자가 원하는 작업을 수행하도록 영감을 줄 수 있습니다. 또한 동일한 페이지에 계속 유지됩니다.
그러나 Elementor로 앵커를 만드는 과정을 계속해 봅시다.
Elementor Page Builder에서 앵커를 추가하는 방법(간단한 3단계)
웹사이트에 이미 Elementor를 설치했다면 앵커 태그 생성을 시작할 준비가 된 것입니다. 그러나 설치 방법을 모르는 경우 Elementor 설치 방법에 대한 가이드에서 도움을 받으세요.
음, Elementor에서 앵커를 추가하는 방법에 대한 단계를 따라가 보겠습니다.
1단계 : Elementor Editor에서 페이지 선택
WordPress 사이트에 로그인합니다. 앵커 링크를 추가하려는 페이지로 이동합니다. 상단 메뉴 표시줄에서 "Elementor로 편집"을 클릭합니다. Elementor 편집기에서 사용자 지정을 위해 웹 페이지가 열립니다.
2단계: 메뉴 앵커를 검색하여 앵커 태그 추가
Elementor로 페이지 편집을 선택하면 위 페이지로 리디렉션됩니다. Elementor 편집기입니다. 왼쪽 사이드바에 "anchor"만 입력합니다. 따라서 메뉴 앵커 위젯을 찾을 수 있습니다. 원하는 앵커 링크를 만드는 데 도움이 됩니다.
3단계: 메뉴 앵커 위젯으로 앵커 링크 추가 시작
메뉴 앵커를 앵커 태그를 추가하려는 페이지 섹션으로 끌어다 놓기만 하면 됩니다.
예를 들어 가격 섹션에 앵커를 추가하려고 합니다. 여기 당신이해야 할 일입니다.
편집기에서 페이지의 가격 섹션까지 아래로 스크롤합니다. Menu Anchor 위젯을 끌어서 가격 책정 위에 놓습니다.
위젯을 선택한 섹션 위로 드래그했으므로 이제 위젯의 콘텐츠 영역에 이 섹션의 이름을 작성해야 합니다.
따라서. 방문자가 가격을 오르게 하려면 ID 필드에 이름을 "가격"으로 작성합니다.
이제 어떤 요소 또는 텍스트를 연결하기로 선택해야 합니까? 당신의 소원입니다. 앵커 텍스트 또는 탭을 선택하거나 WordPress 메뉴에서 요소를 선택하여 방문자를 리디렉션할 수도 있습니다.
그러나 여기서는 쉽게 이해할 수 있도록 시작하기 버튼을 선택했습니다.
따라서 페이지로 스크롤하십시오. "시작하기" 버튼을 클릭합니다. 채워진 링크에 버튼 링크가 표시됩니다. 여기에서 버튼 링크를 지우고 "#prices"와 같이 해시태그와 함께 앵커 링크를 넣으십시오(앵커는 가격 섹션이므로). 이제 "저장"을 누르십시오.
따라서 방문 페이지를 다시 방문하십시오. 앵커 버튼을 클릭하십시오. 일단 가격표로 넘어갑니다.
WordPress 메뉴를 사용하여 Elemntor에 앵커를 추가하는 방법
이전 프로세스보다 훨씬 쉽습니다. WordPress 메뉴에 앵커를 추가하려면 먼저 앵커를 만들어야 합니다.
예를 들어 FAQ 섹션에 대한 앵커를 만들려고 합니다. 그럼 FAQ 섹션으로 이동해 보겠습니다. 그 위로 "메뉴 앵커" 위젯을 드래그합니다.
ID 필드에 "faq"라는 단어를 입력합니다. 그리고 저장합니다.
그런 다음 WordPress 메뉴로 이동하십시오. 사용자 정의 링크를 클릭하십시오.
URL 필드에 "#faq"를 작성하고 링크 텍스트 이름을 "FAQ"로 입력합니다. 그런 다음 "메뉴에 추가"를 클릭하십시오. 마지막으로 "메뉴 저장"을 누르십시오.
이제 방문 페이지로 돌아갑니다. 메뉴에서 FAQ를 누르십시오. 즉시 FAQ 섹션으로 이동합니다.
Elementor에 앵커 링크 추가에 대한 FAQ
여기에서는 Elementor 사이트에 앵커 링크를 추가하는 방법에 대한 몇 가지 일반적인 질문에 답변했습니다.
1. 앵커링크란?
앵커 링크는 동일한 페이지의 특정 위치로 이동하는 일종의 페이지 링크입니다.
2. Elementor에서 페이지의 특정 부분에 어떻게 연결합니까?
1단계: 섹션 편집 을 클릭합니다.
2단계: 고급 영역으로 이동합니다.
3단계: 섹션에 ( First )와 같은 CSS ID 를 추가합니다.
4단계: 앵커로 사용할 버튼이나 텍스트를 선택합니다.
4단계: 버튼 또는 텍스트의 콘텐츠 영역으로 이동합니다.
5단계: CSS ID 를 링크 섹션에 ( #First )와 같이 삽입합니다.
3. WordPress에 앵커 링크를 수동으로 추가하는 방법은 무엇입니까?
이렇게 하려면 앵커 텍스트에 두 가지를 추가해야 합니다.
1. 블록을 선택하고 앵커 텍스트 바로 앞에 (#) 기호가 있는 앵커 링크를 만듭니다.
2. 블록을 선택한 다음 블록 설정의 고급 탭으로 이동합니다.
3. 그리고 (#) 을 추가하지 않고 앵커 링크로 추가한 텍스트를 붙여넣습니다.
4. HTML에 앵커 링크를 수동으로 추가하는 방법은 무엇입니까?
1단계: HTML 앵커 태그 를 사용하여 (#) 접두사가 있는 앵커 링크를 추가해야 합니다.
2단계: 앵커 링크를 추가하려는 HTML 태그에 ID 속성 을 추가해야 합니다. ID 속성이 (#) 접두사 없이 시작되도록 합니다.
5. Elementor에서 이미지에 대한 링크를 어떻게 추가합니까?
첫째: 링크를 삽입할 이미지를 선택합니다.
두 번째: 해당 이미지의 콘텐츠 영역으로 이동합니다.
세 번째: 링크 옵션을 찾아 Link->Custom 을 선택합니다.
넷째: 사용자 정의 링크를 삽입 하십시오.
마지막 생각들
따라서 Elementor가 있는 경우 앵커 링크를 만드는 데 필요한 모든 것입니다. 따라서 몇 가지 주요 팁을 기억하십시오. 앵커 링크를 무작위로 추가할 수는 없습니다. 웹 페이지에 대한 사용자 반응을 높이는 훌륭한 도구입니다. 따라서 가장 중요한 섹션을 찾아야 합니다. 그런 다음 앵커와 일치하는 완벽한 앵커 텍스트도 선택하십시오.
따라서 Elementor는 타사 도구에 개방되어 있습니다. Happy Addons 위젯을 통합하여 Elementor를 사용하여 웹 디자인에 더 많은 기능을 제공할 수 있습니다. 완전 무료로 시작할 수 있습니다.
자, 지금 알려주세요. Elementor에서 앵커 링크를 추가하는 것이 더 쉽습니까?