Studio 에디터: 사용자 지정 요소 추가하기
3 분 분량
고유한 요소로 클라이언트의 사이트를 개선하세요. 사용자 지정 요소를 서버 URL 또는 코드 파일에 연결해 자바스크립트 요소를 추가할 수 있습니다. 필요한 경우 에디터에서 직접 더 많은 속성을 설정할 수 있습니다.
다음 도움말을 참고하세요.
시작하기 전:
클라이언트의 사이트에 연결된 도메인이 있고 Wix 광고가 표시되지 않아야 합니다.
사용자 지정 요소란 무엇인가요?
사용자 지정 요소를 사용하면 고유한 HTML 태그를 사용할 수 있습니다. 이러한 요소는 지원되는 모든 브라우저에서 작동하며 모든 자바스크립트 ES6 라이브러리 또는 HTML 5를 사용하는 프레임워크와 함께 사용될 수 있습니다.
사용자 지정 요소를 삽입하는 경우 염두에 두어야 할 몇 가지 요구 사항이 있습니다.
- 자바스크립트 파일은 Velo를 사용해 Wix로 호스팅(권장)되거나 자체 외부 또는 로컬 서버로 호스팅되어야 합니다.
- 코드에는 HTTP가 아닌 HTTPS가 포함되어야 하며, 그렇지 않으면 라이브 사이트에 표시되지 않습니다.
- 코드는 최신 상태여야 하며 HTML5와 호환되어야 합니다. 대부분의 브라우저는 페이지 및 스크립트가 이전 버전의 JS 또는 HTML을 사용해 작성된 경우 제대로 표시하지 않습니다.
- 모든 관련 디자인 설정 및 복잡한 기능은 기본 JS 코드(예: CSS 및 기타 JS 파일) 내에 저장되어야 합니다. 이러한 설정이 별도로 저장되면 사이트에서 작동하지 않습니다.
도움말:
- 타사 소스의 사용자 지정 요소를 사용할 수 있습니다. 페이지에 사용자 지정 요소를 추가할 때 속성에서 태그 이름을 업데이트하기만 하면 됩니다.
- 사용자 지정 요소의 성능은 해당 요소의 구현에 따라 달라집니다.
사용자 지정 요소 추가 및 설정하기
필요한 만큼 사용자 지정 요소를 추가하세요. 사용자 지정 요소를 페이지로 끌어온 후 소스(서버 URL 또는 Velo 파일)를 정의하고 페이지 레지스트리에서 쉽게 인식할 수 있도록 태그 이름을 지정하세요.
사용자 지정 요소를 추가 및 설정하려면:
- 에디터 왼쪽에서 요소 추가
를 클릭합니다. - 삽입 및 SNS를 클릭합니다.
- 사용자 지정 요소를 클릭합니다.
- 요소 사용자 지정 옆 추가
아이콘을 클릭합니다. - 스크립트 파일을 추가합니다.
- 사용자 지정 요소를 선택합니다.
- 소스 선택을 클릭합니다.
- 사용자 지정 요소를 추가할 방법을 선택합니다.
- 서버 URL: 파일 이름을 포함해 파일 URL을 입력합니다.
- Velo 파일: Velo 파일 중 하나를 선택합니다.
- 요소의 태그 이름을 입력합니다.
참고: 태그 이름은 대시(-)로 구분된 2단어 이상이어야 합니다(예: Big-weather-widget).
- (선택사항) 속성 패널에서 요소의 크기, 도킹 및 정렬을 조정합니다.
참고:
- 보안상의 이유로 사용자 지정 요소는 에디터 및 미리보기 모드의 iFrame 내에서 렌더링됩니다. 이는 구성 요소 레이아웃에 영향을 미칠 수 있습니다. 게시된 사이트로 이동해 표시 상태를 확인할 수 있습니다.
- Velo API를 사용해 요소의 SEO 설정을 정의할 수 있습니다.
사용자 지정 요소 속성 설정하기
속성을 설정해 요소의 속성 및 동작을 추가로 조정하세요. 요소 속성 패널을 사용하면 실제 코드에 액세스하지 않고도 에디터에서 직접 속성을 추가, 편집 및 제거할 수 있습니다.
중요!
사용자 지정 요소의 코드는 정의된 속성을 인식하고 처리해야 합니다. 그렇지 않으면 요소가 제대로 작동하지 않습니다.
사용자 지정 요소의 속성을 설정하려면:
- 사용자 지정 요소를 선택합니다.
- 속성 설정을 클릭합니다.
- 속성 추가를 클릭합니다.
- 속성 이름을 입력합니다(예: "회전", "너비").
- 속성의 값을 입력합니다. 이는 모든 관련 문자열일 수 있습니다.
- 설정을 클릭합니다.
더 많은 정보를 찾고 계시나요?
Velo by Wix로 사용자 지정 요소 사용하기에 대한 자세한 도움말을 확인하세요. 특정 질문 및 문제 해결에 대해서는 사용자 지정 요소 자주 묻는 질문을 확인하세요.
도움이 되었나요?
|