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 마스터 애드온 위젯 빌더 자신의 HTML,CSS, 자바스크립트를 실제 Elementor 위젯으로 바꾸어 Elementor 패널에 편집 가능한 컨트롤을 적용합니다. 옵션 패널을 디자인하고 단축코드로 코드에 연결하면 위젯이 기본 Elementor 요소처럼 동작합니다. PHP 도 없고,플러그인 상용구도 없고,저글링할 별도의 코드 편집기도 없습니다.
두 시스템은 여기에 설명 된 모든 아래 실행: 조건 다른 필드의 값을 기반으로 컨트롤을 표시하거나 숨기도록 합니다 나뭇가지 구문 템플릿 엔진 필드 이름을 토큰으로 바꾸고, {% if %} 수표, 그리고 {% for %} HTML,CSS, JS 탭의 루프. 두 가이드 모두 설정과 제한 사항을 다룹니다.
이 가이드는 화면에 나타나는 것과 똑같이 위젯 빌더 옵션 패널을 통해 이동합니다: 새 위젯 추가, 콘텐츠, 스타일 및 고급 탭으로 필드 드래그, 코드 작성, 동적 단축 코드 사용, CDN 라이브러리 로드, 마지막으로 위젯을 JSON 파일로 내보내기 또는 가져오기에서 기능을 찾을 수 있습니다 위젯 빌더 페이지 그리고 가득 차있는 안쪽에 위젯 및 확장 리스트.
위젯 빌더가 하는 일 #
대부분의 애드온은 고정된 위젯 세트를 제공합니다. 이것은 당신에게 자신만의 것을 만들 수 있는 도구를 제공합니다. 기성품 필드 유형 (제목,텍스트, 색상,숫자, 치수,스위처 등) 에서 옵션 패널을 조립하고 코드를 삭제하고 간단한 단축 코드 토큰으로 필드를 해당 코드에 바인딩합니다. 위젯을 저장하고 Master Addon 은 단축 코드와 모든 페이지에 끌 수 있는 Elementor 위젯을 모두 등록합니다.
CodePen 스타일의 스니펫과 완전히 편집 가능한 Elementor 위젯 사이의 브리지라고 생각하세요. 일단 빌드되면 팀원 중 누구라도 소스를 열지 않고도 Elementor 편집기의 색상,간격 및 텍스트를 조정할 수 있습니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 페이지 빌더가 설치되고 활성화되었습니다.
- Elementor용 마스터 애드온 설치 및 활성. 플러그인에 새로운? 따라 설치 가이드 첫번째.
- 기본 HTML 및 CSS.JavaScript 는 선택 사항이며 대화식 위젯에만 필요합니다.
위젯 빌더를 열고 새 위젯을 추가합니다 #
WordPress 대시보드에서 다음으로 이동하세요 마스터 애드온 → 위젯 빌더. 이것은 열립니다 마스터 애드온 위젯 카테고리, 작성자 및 생성된 단축 코드와 함께 구축한 모든 사용자 정의 위젯을 나열하는 화면입니다. 맨 위에는 세 개의 버튼이 표시됩니다: 새 위젯 추가, 위젯 가져오기, 그리고 비디오 자습서.
클릭 새 위젯 추가. ᅡ 새 위젯 만들기 대화 상자가 두 개의 필드로 나타납니다:
- 위젯 제목 (필수): 위젯에 대한 설명적인 이름, 예를 들어 “영웅 섹션”. 나중에 Elementor 패널에서 검색할 내용이므로 인식할 수 있도록 만드세요.
- 위젯 카테고리: 위젯이 (기본적으로 즐겨찾기) 아래에 그룹화되어 있는 Elementor 카테고리입니다. 카테고리는 사용자 정의 위젯을 편집기에서 정리해 둡니다.
제목을 입력하고 카테고리를 선택한 후 클릭합니다 변경 사항 저장. 마스터 애드온은 새 위젯의 위젯 빌더 편집기를 엽니다.
위젯 빌더 인터페이스 내부 #
건축업자는 3 개의 작업 영역으로, 좌로 분할됩니다 오른쪽으로:
- 필드 패널(왼쪽): 제목, 텍스트, 텍스트 영역, URL, 색상, 번호, 전환기, 선택, 선택, WYSIWYG, 코드 및 날짜 시간과 같이 위젯에 드래그하는 검색 가능한 제어 유형 라이브러리입니다.
- 설정 패널(중앙): 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 콘텐츠, 스타일, 그리고 고급 해당 필드를 섹션으로 정렬하는 탭입니다. 이는 사용자가 Elementor 에서 볼 수있는 실제 옵션 패널입니다.
- 코드 패널(오른쪽): 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 HTML, CSS, JS, 그리고 포함 마크업, 스타일, 스크립트 및 라이브러리 참조를 작성하는 탭입니다.
상단 표시줄에는 옆에 설정 기어 아이콘이 있는 위젯 이름이 표시됩니다 미리보기 그리고 설정 저장 버튼.
옵션 패널 빌드: 콘텐츠, 스타일 및 고급 탭 #
컨트롤을 디자인하는 곳입니다. 왼쪽 패널에서 필드를 선택하고 아래 섹션으로 드래그합니다 콘텐츠, 스타일, 또는 고급 탭. 동일한 로직 Elementor 사용: 콘텐츠 아래의 텍스트 및 링크,스타일 아래의 색상 및 타이포그래피,고급 아래의 간격 및 레이아웃.
각 섹션에는 다음이 있습니다 섹션 제목 (섹션 헤더에 표시된 레이블) 및 a 섹션 이름의, 코드에서 참조 할 고유 식별자. 위젯이 필요로하는만큼 많은 섹션과 필드를 추가.
예를 들어, a를 드롭합니다 색상 필드 사용자가 위젯을 다시 색칠할 수 있도록 스타일 탭에 a 치수 필드 4 개의 측면 모두에서 패딩을 제어하는 고급 탭으로. 모든 필드 유형은 옵션의 전체 목록을 원하는 경우 자체 문서를 가지고 있습니다.
동적 단축 코드: 필드를 코드에 연결합니다 #
모든 것을 하나로 묶는 부분입니다. 여러분이 추가하는 모든 필드는 a 를 생성합니다 단축 코드 토큰그리고 그 토큰은 에 표시됩니다 문서 코드 편집기 옆에 있는 사이드바. 색상 필드를 추가하면 얻을 수 있습니다 {{color}}. 차원 필드를 추가하면 얻을 수 있습니다 {{dimensions}}.
필드의 값이 착륙하기를 원하는 곳이라면 어디든 이 토큰들을 HTML,CSS, JS 에 드롭하세요. 사용자가 Elementor 에서 해당 컨트롤을 변경하면 Master Addons 가 토큰을 라이브 값으로 바꾸기 때문에 코드가 동적으로 유지된다는 것을 기억해야 할 한 가지: 토큰은 일치하는 필드가 패널에 있는 경우에만 존재하므로 필드를 먼저 빌드한 다음 단축 코드를 참조하세요.
HTML, CSS 및 JS를 추가하세요 #
패널과 단축 코드가 준비되면 오른쪽의 코드 탭으로 전환하고 마크업, 스타일 및 스크립트를 붙여 넣습니다.
HTML 탭: 위젯 구조를 작성하고 동적 값이 속한 단축 코드 토큰을 배치합니다.
CSS 탭: 마크업의 스타일을 지정합니다. 패널에서 선택한 색상과 치수를 가져오려면 동일한 단축 코드 토큰을 참조하십시오.
JS 탭: 호버 효과나 슬라이더와 같은 모든 대화형 동작에 대해 JavaScript 를 추가합니다. 일반 바닐라 JS 가 작동하며,jQuery 를 아래에 로드하면 이 작업도 포함됩니다.
메인 편집기가 아닌 패널 내부에 코드 필드만 필요한 경우 코드 필드 구문 강조 표시된 입력을 컨트롤에 놓습니다.
포함: CDN CSS 및 JS 라이브러리 로드 #
열다 포함 위젯이 의존하는 외부 라이브러리를 첨부하는 탭. 두 개의 목록이 있습니다: CSS 라이브러리 그리고 JS 도서관. 각각에 대해 a를 추가합니다 핸들 (독특한 이름) 및 a 소스 URL 또는 등록된 핸들을 클릭한 다음 Css 추가하기 또는 Js 추가하기.
테마를 편집하지 않고 CDN 또는 jQuery 에서 Font Awesome 과 같은 것을 가져오는 방법입니다. 마스터 애드온은 위젯이 실제로 페이지에 있을 때만 라이브러리를 대기열에 추가하므로 다른 페이지는 깨끗하게 유지됩니다.
위젯 안에 아이콘이 필요하십니까? Master Addons 는 또한 8 개의 번들로 배송됩니다 아이콘 라이브러리 외부 CDN 호출 없이 사용할 수 있습니다.
위젯 설정: 제목, 아이콘, 카테고리, 내보내기 #
를 클릭합니다 기어 아이콘 열기 위쪽 막대의 위젯 이름 옆에 위젯 설정 왼쪽 패널에서. 여기에서 당신은 위젯이 Elementor 내부에 자신을 표시하는 방법을 제어:
- 위젯 제목: 위젯의 이름을 바꿉니다. 이 제목은 Elementor 위젯 목록에 표시됩니다.
- 위젯 아이콘: 클릭 아이콘 변경 마스터 애드온 아이콘 선택기에서 아이콘을 선택하려면 포함된 아이콘이나 글꼴 멋진 클래스를 사용할 수 있습니다.To pick an icon from the Master Addons icon picker.You can use any included icon or a Font Awesome class.
- 위젯 카테고리: 위젯이 아래에 나타나는 Elementor 카테고리를 선택하여 관련 위젯으로 그룹화합니다.
- 위젯 내보내기: 전체 위젯 구성을 JSON 파일로 내보내 저장, 백업 또는 누구와도 공유할 수 있습니다.
아이콘 선택기는 수천 개의 아이콘을 모든 아이콘,엘리멘터 아이콘,단순 선 아이콘,아이코닉 글꼴 아이콘,선형 아이콘,재질 아이콘 등의 범주로 그룹화합니다. 이름으로 필터링하고 하나를 선택한 후 클릭합니다 삽입.
JSON 파일에서 위젯 가져오기 #
공유는 양방향으로 작동합니다. Back on the 마스터 애드온 위젯 화면을 클릭하세요 위젯 가져오기 단추. 대화상자를 사용하면 a 를 끌어다 놓을 수 있습니다 .json 파일, 또는 찾아보기. 만 .json 위젯 빌더에서 내보낸 파일이 지원됩니다.
위젯의 JSON 파일을 가진 사람은 누구나 몇 초 만에 자신의 사이트에서 위젯을 가져올 수 있습니다. 그러면 위젯 빌더가 프로젝트 전체에서 위젯을 재사용하거나 클라이언트에 넘겨줄 수 있는 깔끔한 방법이 됩니다.
신뢰할 수 있는 사용자 정의 위젯을 구축하기 위한 팁 #
- 섹션의 이름을 명확하게 지정합니다. 섹션 이름은 코드에 들어가므로 짧고 의미 있게 유지하세요.
- 단축 코드를 참조하기 전에 필드를 추가하세요. 토큰은 일치하는 필드가 패널에 있는 후에만 존재합니다.
- Preview 를 자주 사용한다. 저장하기 전에 라이브 미리보기를 확인하여 라이브 페이지 대신 누락 된 토큰을 일찍 잡으십시오.
- 인라인이 아닌 포함을 통해 라이브러리를 로드합니다. 코드를 깨끗하게 유지하고 필요한 곳에만 스크립트를 로드합니다.
- 당신이가는대로 내보내기. JSON 내보내기는 백업 및 공유 파일로 두 배가됩니다.
- Elementor에서 위젯이 보이지 않습니까? 확인해보세요 문제 해결 가이드 가시성 수정용.
자주 묻는 질문 #
마스터 애드온 위젯 빌더란 무엇입니까?
위젯 빌더는 자신의 HTML,CSS, 자바스크립트를 편집 가능한 Elementor 위젯으로 바꾸는 Master Addons for Elementor 의 도구입니다. 드래그 앤 드롭 필드에서 옵션 패널을 디자인하고 PHP 가 필요 없는 단축 코드 토큰으로 코드에 연결합니다.
{{color}} 및 {{dimensions}} 단축 코드는 어떻게 작동하나요?
옵션 패널에 추가하는 각 필드는 다음과 같은 단축 코드 토큰을 생성합니다 {{color}} 또는 {{dimensions}}. 토큰을 HTML,CSS, JS 에 넣으면 마스터 애드온은 이를 사용자가 Elementor 에서 설정한 값으로 대체하여 위젯을 동적으로 만듭니다.
외부 CSS 및 JS 라이브러리를 사용자 지정 위젯에 추가할 수 있습니까?
예. 포함 탭을 열고 CSS 라이브러리 또는 JS 라이브러리 아래에 핸들과 CDN 소스 URL 을 추가한 다음 추가를 클릭합니다. 마스터 애드온은 위젯을 사용하는 페이지에만 라이브러리를 로드하므로 사이트의 나머지 부분이 느려지지 않습니다.
사용자 지정 Elementor 위젯을 공유하려면 어떻게 해야 합니까?
기어 아이콘에서 위젯 설정을 열고 위젯 내보내기 를 클릭하여 JSON 파일을 다운로드합니다. 그런 다음 누구나 위젯 빌더 화면의 위젯 가져오기 버튼을 사용하여 해당 JSON 파일을 끌어 들여 자신의 사이트에서 위젯을 사용할 수 있습니다.
위젯 빌더가 무료로 포함되어 있나요?
위젯 빌더는 Elementor 용 마스터 애드온의 일부입니다. 참조 가격 페이지 현재 계획 분석 및 각 계층에 포함된 기능에 대해 설명합니다.
감싸는 #
마스터 애드온 위젯 빌더는 코드 조각과 프로덕션 Elementor 위젯 사이의 간격을 좁힙니다. 패널을 빌드하고 HTML,CSS 및 JS 를 작성하고 단축 코드 토큰으로 연결하고 필요한 라이브러리를 로드한 다음 JSON 으로 결과를 내보내거나 가져 오기 의 나머지 부분을 살펴 봅니다 마스터 애드온 위젯 라이브러리 또 무엇을 만들 수 있는지 알아보려면.
