# 퍼널과 웹사이트에서 미리 제작된 요소(Prebuilt Elements) 사용하는 방법

좌측 사이드바에 멋진 새 기능을 출시했습니다 - 미리 제작된 요소(Prebuilt Elements)입니다. 디자인 과정을 효율화하고 웹사이트 기능을 강화하는 강력한 디자인 요소들이에요. 최신 업데이트에는 미리 제작된 버튼, 이미지, 소셜 미디어 아이콘, 그리고 진행률 바가 포함되어 있습니다.

**1. 미리 제작된 버튼:** 다양한 종류의 아름답고 미리 디자인된 버튼 컬렉션으로, 처음부터 만드는 번거로움 없이 퍼널/웹사이트에 전문적인 느낌을 더할 수 있습니다.

**2. 미리 제작된 이미지:** 디자인 바에 완벽하게 통합된 고품질 무료 이미지 라이브러리로 웹사이트를 향상시키세요. 드래그 앤 드롭 기능을 활용해 이미지를 웹페이지에 쉽게 추가할 수 있어, 시간을 절약하고 창작 흐름을 유지할 수 있습니다.

**3. 소셜 미디어 아이콘:** 미리 디자인된 소셜 미디어 아이콘의 포괄적인 세트로 웹사이트의 도달 범위와 사용자 참여도를 확장하세요. 페이스북, 트위터, 인스타그램, 링크드인 등 모든 주요 소셜 미디어 플랫폼의 아이콘을 제공합니다.

**4. 진행률 바:** 마일스톤, 로딩 표시기, 진행률 지표를 보여주는 시각적으로 매력적인 진행률 바로 사용자 경험을 개선하세요.

### **접근 방법**

* 웹사이트 빌더 인터페이스에서 좌측 디자인 바를 여세요.
* 각 기능에 대한 새로운 섹션들을 찾을 수 있으며, 바로 탐색하고 적용할 수 있습니다.

### **장점**

* **생산성 향상:** 처음부터 디자인할 필요 없이 고품질 웹 요소를 빠르게 구축하고 커스터마이징할 수 있습니다.
* **사용자 참여도:** 소셜 미디어 아이콘과 진행률 바를 사용해 사이트의 상호작용과 참여도를 향상시킬 수 있습니다.
* **일관성:** 쉽게 커스터마이징할 수 있는 요소들로 웹사이트 전반에 일관된 디자인 언어를 유지할 수 있습니다.

![미리 제작된 요소 컬렉션](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155029909647/original/5DBl1gG4sEH8OoSbGdNXoAdGnVl1z8Kr8A.jpeg?1721940940)

![디자인 바 인터페이스](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155029909646/original/MDLdqukQqy-C4iK_z8O9AZbIdW-McjlwJQ.png?1721940939)

![소셜 미디어 아이콘 예시](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155029909649/original/JNJvxitczjoN5y095CFQcLH_SoCcfJMVQw.jpeg?1721940940)

![진행률 바 예시](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155029909648/original/1-C7VPdViIt5ffm2mQjofw4iH_ivv6DkvA.jpeg?1721940940)

***

*원문 최종 수정: Thu, 25 Jul, 2024 at 3:59 PM* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hyperclass.gitbook.io/hyperclass-docs/and-sites/xml-sitemaps/how-to-use-prebuilt-elements-in-your-funnels-and-websites.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.