버튼과 링크는 웹 주소 이상의 것이 필요합니다. 새 창에서 열기 토글,nofollow 옵션,때로는 사용자 지정 속성이 필요합니다. The URL 필드 마스터 애드온에서 위젯 빌더 사용자 정의 위젯에 Elementor가 다른 모든 곳에서 사용하는 것과 동일한 링크 제어 기능을 제공하므로 편집자는 일반 텍스트 상자 대신 친숙한 링크 선택기를 얻습니다.
모든 Widget Builder 필드와 마찬가지로 URL 필드가 지원합니다 조건. 그 값은 다음을 통해 렌더링됩니다 나뭇가지 구문 템플릿 엔진 점선 액세스, {{ link.url }}, {{ link.is_external }}, 그래서 각 부분은 오른쪽 속성에 착륙합니다. 두 가이드 모두 세부 사항을 다룹니다.
URL 필드를 위젯 패널에 놓은 다음 노출할 링크 옵션을 선택하고 단축코드로 마크업에 연결합니다. 이 가이드는 URL 필드에 초점을 맞추고 있지만 빠르게 삭제됩니다 텍스트 필드 따라서 버튼 라벨을 동시에 설정할 수 있습니다.
URL 필드가 수행하는 작업 #
URL 필드는 위젯의 옵션 패널에서 Elementor 의 링크 컨트롤을 렌더링합니다. 편집자는 링크를 붙여넣고 필요한 옵션을 뒤집으면 위젯이 적절한 앵커 태그를 출력합니다. 원시 주소를 보유한 텍스트 필드는 그렇게 할 수 없습니다. URL 필드는 대상 및 관계자 속성을 대신 처리하므로 외부 링크가 올바르게 열리고 nofollow 는 한 번의 클릭으로 가능합니다.
보이는 레이블에 대한 텍스트 필드와 자연스럽게 페어링됩니다. 클릭 유도 문구 버튼에서 URL 필드는 링크를 전달하고 텍스트 필드는 버튼에 있는 단어를 전달합니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 이것이 첫 번째 위젯이라면 다음을 읽어보세요 위젯 빌더 개요 첫번째.
URL 필드를 추가하는 방법 #
위젯 빌더 편집기에서 왼쪽의 필드 패널을 찾아 드래그하세요 URL 아래의 섹션에 입력합니다 콘텐츠, 스타일, 또는 고급 탭. 링크 컨트롤은 일반적으로 콘텐츠 아래에 있습니다. 일단 제자리에 있으면 필드의 옵션이 왼쪽에 열리고 단축 코드가 에 표시됩니다 문서 코드 편집기 옆에 있는 사이드바.
URL 필드 옵션을 설명했습니다 #
설정을 열려면 URL 필드를 선택하십시오. 처음 몇 가지 옵션은 다른 필드와 일치하며,그 다음 링크 특정 선택 집합을 얻습니다.
- 라벨: elementor의 컨트롤 위에 표시된 텍스트, 예를 들어 “Url” 또는 “Button Link”.
- 이름: 필드의 고유 식별자입니다. 문자,숫자, 밑줄만 있습니다. 이것이 단축 코드가 되므로 필드 이름이 지정됩니다
url당신을 제공합니다{{url}}. - 설명: 컨트롤 아래에 표시된 선택적 도우미 텍스트입니다.
- 자리 표시자: 링크 상자가 비어 있을 때 표시되는 희미한 힌트입니다.
- 기본값: 시작 링크, 누군가가 그것을 편집하기 전에 버튼이 어딘가를 가리키도록하려면.
URL 옵션 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X URL 옵션 그룹은 링크 컨트롤의 어느 부분이 Elementor 에 나타나는지 결정합니다. 위젯에 필요한 것만 틱하십시오:
- URL 입력: 편집기가 주소를 붙여넣는 링크 필드 자체입니다.
- 새 창에서 열기: 설정하는 토글
target="_blank"링크에. - nofollow 추가: 추가하는 토글
rel="nofollow"후원되거나 신뢰할 수 없는 링크에 유용합니다. - 사용자 정의 속성: 추가 속성을 위한 필드입니다
key|value분석 후크 또는 데이터 속성에 편리한 형식입니다.
일반적인 설정: 반응형, 동적, 그 이상 #
URL 옵션 아래에서도 동일한 결과를 얻을 수 있습니다 공통 설정 빌더의 모든 필드로: 레이블 표시,라벨 블록,반응형 제어,동적 지원,프론트엔드 사용 가능,분리기 및 조건. 동적 지원은 링크가 동적 소스에서 끌어올 수 있게 해주기 때문에 여기서 유용한 것입니다. The 텍스트 필드 문서 이들 각각에 대해 자세히 설명합니다.
필드를 코드에 연결합니다 #
URL 필드는 단축 코드와 몇 개의 하위 토큰을 제공하므로 각 링크 옵션을 올바른 HTML 속성에 매핑 할 수 있습니다.라는 필드의 경우 url:
{{url.url}}에 대한 링크 주소를 출력합니다href속성.{{url.is_external}}대상을 출력하므로 “새 창에서 열기” 토글이 작동합니다.{{url.nofollow}}“add nofollow” 토글의 rel 값을 출력합니다.
이를 앵커 태그에 넣고 a를 추가합니다 텍스트 필드 토큰 좋아요 {{button_text}} 보이는 라벨의 경우:
앵커는 이제 단일 URL 컨트롤에서 링크,대상 및 rel 을 가져오고 텍스트 필드는 단어를 제공합니다. 위젯을 저장하고 편집기가 설정한 대로 버튼 렌더링을 저장합니다. 알 만한 가치가 있는 한 가지: 배치만 하는 경우 {{url}} 자체적으로 주소는 얻지만 대상 또는 nofollow 동작은 얻지 못하므로 해당 토글이 중요할 때 하위 토큰을 사용하십시오.
Elementor 에서 URL 컨트롤을 사용합니다 #
사용자 정의 위젯을 페이지로 드래그하여 Elementor 편집기에서 엽니다. URL 필드는 표준 링크 컨트롤로 표시됩니다: 주소에 대한 상자,사용자가 활성화한 토글. 링크를 붙여넣고 필요한 경우 “새 창에서 열기”를 켜면 버튼이 실시간으로 업데이트됩니다.
데모에서 “버튼 텍스트”라고 표시된 텍스트 필드는 버튼을 “계획 선택”으로 설정하고 URL 필드는 대상 링크를 가리킵니다. 두 개의 작은 필드,그리고 Elementor 에서 누구나 업데이트할 수 있는 완전히 편집 가능한 클릭 유도 문구 버튼이 있습니다.
일반적인 사용 사례 #
- 클릭 유도 문구 버튼 편집 가능한 링크, 텍스트 및 새 창 동작을 사용합니다.
- 가격 또는 계획 버튼 체크아웃할 지점입니다.
- 더 많은 링크를 읽어보세요 카드 및 기능 블록에.
- 스폰서 또는 제휴 링크 따르지 않는 것이 중요한 경우.
- 추적된 링크 분석 데이터에 사용자 정의 속성 사용.
URL 필드를 작업하기 위한 팁 #
- 필요한 옵션만 노출하세요. 버튼이 새 탭을 열지 않으면 해당 옵션을 꺼두어 컨트롤을 깨끗하게 유지하세요.
- 단지 하위 토큰을 사용하는 것이 아니라 하위 토큰을 사용하십시오
{{url}}. 지도{{url.url}},{{url.is_external}}, 그리고{{url.nofollow}}그래서 모든 토글은 실제로 무언가를합니다. - Text 필드와 페어링합니다 HTML의 단어를 하드 코딩하는 대신 버튼 레이블을 사용합니다.
- 스폰서 링크에 대한 팔로우를 켜십시오 검색 지침의 오른쪽에 머물려면.
- 단축 코드를 참조하기 전에 필드를 빌드합니다. 토큰은 필드가 패널에 있는 후에만 존재합니다.
자주 묻는 질문 #
마스터 애드온 위젯 빌더의 URL 필드는 무엇입니까?
URL 필드는 사용자 지정 위젯에 Elementor 의 링크 컨트롤을 추가합니다. 편집자는 링크를 붙여넣고 새 창에서 열기 및 nofollow 와 같은 옵션을 전환하며 위젯은 필드의 단축 코드와 하위 토큰을 사용하여 적절한 앵커 태그를 출력합니다.
사용자 정의 위젯에서 “새 창에서 열기” 토글을 어떻게 작동시키나요?
앵커 태그의 하위 토큰을 사용합니다. 이름이 지정된 필드의 경우 url, 세트 target="{{url.is_external}}" 링크에서. 편집기가 Elementor 에서 토글을 뒤집으면 대상 속성이 업데이트되어 링크가 새 탭에서 열립니다.
위젯 빌더 위젯의 링크에 nofollow를 추가할 수 있나요?
예. 필드의 URL 옵션에서 Add nofollow 를 활성화한 다음 출력합니다 rel="{{url.nofollow}}" 앵커 태그에.Elementor 에서 편집기가 nofollow 를 켜면 rel 속성이 자동으로 추가됩니다.
버튼 텍스트를 링크와 별도로 설정하려면 어떻게 해야 하나요?
URL 필드 옆에 텍스트 필드를 추가합니다. URL 필드는 링크를 전달하고 텍스트 필드는 보이는 레이블을 전달합니다. Text 필드 토큰을 배치합니다. 처럼 {{button_text}}는, 오프닝과 결산 닻 꼬리표 사이에서.
사용자 정의 속성은 어떤 용도로 사용되나요?
사용자 정의 속성을 사용하면 편집자가 링크에 추가 HTML 속성을 추가할 수 있습니다 key|value 형식입니다. 분석 후크,데이터 속성 또는 스크립트나 추적 도구가 앵커 요소에 필요한 모든 속성에 유용합니다.
감싸는 #
Widget Builder URL 필드는 일반 링크를 사용자 정의 위젯 내부의 전체 Elementor 링크 컨트롤로 바꿉니다. 노출할 옵션을 선택하고 하위 토큰을 앵커 태그에 연결한 다음 레이블의 텍스트 필드와 페어링하면 하드 코딩된 마크업 없이 링크,새 창 및 nofollow 를 처리하는 편집 가능한 버튼의 나머지 부분을 살펴봅니다 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
