> For the complete documentation index, see [llms.txt](https://didisam.gitbook.io/administrator-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://didisam.gitbook.io/administrator-guide/preparation-edu/homepage/decorating-homepage1.md).

# 홈페이지 꾸미기 1

디디쌤의 핵심 기능 중, 하나인 쌤페이지 테마편집 기능입니다😊 ( GNB메뉴 / 메뉴 이중화 )

{% embed url="<https://www.youtube.com/watch?index=5&list=PLa4u03U98QIo17q4U4ePDSaNy0kcgQ7GU&v=e73GUq2341k>" %}

***

## GNB 메뉴

#### **1️⃣ 상단 GNB 영역 선택**

GNB 메뉴를 설정하려면 상단 GNB영역을 클릭해주세요.

<figure><img src="https://content.gitbook.com/content/vUF4HkazUnP90Jswd5pe/blobs/uR03zG06mpQ1JRRScrGe/%E1%84%8A%E1%85%A2%E1%86%B7%E1%84%91%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%90%E1%85%A6%E1%84%86%E1%85%A1%E1%84%91%E1%85%A7%E1%86%AB%E1%84%8C%E1%85%B5%E1%86%B8%20_%20GNB.png" alt=""><figcaption></figcaption></figure>

#### **2️⃣ 로고**

로고 이미지는 jpg, png 파일만 등록 가능하며, 최대 20mb 등록 가능합니다.

권장이미지 사이즈는 테마 및 디자인에 따라 다를 수 있고,\
로고 이미지 미 등록 시 쌤페이지 이름만 표시됩니다.

<figure><img src="https://content.gitbook.com/content/vUF4HkazUnP90Jswd5pe/blobs/CmQMuAOWNWAYauGo0knV/%E1%84%8A%E1%85%A2%E1%86%B7%E1%84%91%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%90%E1%85%A6%E1%84%86%E1%85%A1%E1%84%91%E1%85%A7%E1%86%AB%E1%84%8C%E1%85%B5%E1%86%B8%20_%20GNB.png" alt=""><figcaption></figcaption></figure>

#### **3️⃣ 배경색**

배경색은 화이트, 블랙, 그레이, 직접 선택 4가지 옵션에서 선택하실 수 있습니다.\
직접선택 옵션 선택 시 자유롭게 컬러를 지정하실 수 있습니다.

<figure><img src="https://content.gitbook.com/content/vUF4HkazUnP90Jswd5pe/blobs/4PL0xkiaoebtdyqYUFhz/%E1%84%8A%E1%85%A2%E1%86%B7%E1%84%91%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%90%E1%85%A6%E1%84%86%E1%85%A1%E1%84%91%E1%85%A7%E1%86%AB%E1%84%8C%E1%85%B5%E1%86%B8%20_%20GNB.png" alt=""><figcaption></figcaption></figure>

<div align="left"><figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FU21p61Wj913WmNM6l4a7%2Fdialog_dialog_default.png?alt=media&amp;token=c5fd3741-677a-4378-b37d-add2f04e3fac" alt="" width="375"><figcaption></figcaption></figure></div>

#### **4️⃣ 상단 메뉴**

기본 제공 메뉴 (홈, 클래스, 커뮤니티, 공지사항)는 삭제가 불가능합니다. \
메뉴 추가는 최대 4개까지 가능합니다.

<figure><img src="https://content.gitbook.com/content/vUF4HkazUnP90Jswd5pe/blobs/92c020iTH5SBJWzucw6g/%E1%84%8A%E1%85%A2%E1%86%B7%E1%84%91%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%90%E1%85%A6%E1%84%86%E1%85%A1%E1%84%91%E1%85%A7%E1%86%AB%E1%84%8C%E1%85%B5%E1%86%B8%20_%20GNB.png" alt=""><figcaption></figcaption></figure>

#### 5️⃣ **임시 저장**

홈페이지에 반영하기 전, 수정사항들을 임시저장할 수 있습니다.

<figure><img src="https://content.gitbook.com/content/vUF4HkazUnP90Jswd5pe/blobs/fcgC9xZIfGxVi1FpyOER/%E1%84%8A%E1%85%A2%E1%86%B7%E1%84%91%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%90%E1%85%A6%E1%84%86%E1%85%A1%E1%84%91%E1%85%A7%E1%86%AB%E1%84%8C%E1%85%B5%E1%86%B8%20_%20GNB.png" alt=""><figcaption></figcaption></figure>

임시저장 완료 후에는 쌤페이지 반영까지 해주셔야 홈페이지에 반영됩니다.

<div align="left"><figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FpvX4jTV0k2rAWDBWbUKN%2Fdialog_dialog_default.png?alt=media&amp;token=24f5f076-910a-4b22-a905-51dd012b2003" alt="" width="563"><figcaption></figcaption></figure></div>

***

## 브랜드 컬러 설정

1️⃣ 브**랜드 컬러 변경**

연필아이콘 클릭 시 컬러 피커 모달 노출됩니다.\
컬러 피커 모달에서 자유롭게 브랜드 컬러를 변경해보세요.

<figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FFMnvUlFgGlTKwPrWgE5G%2F%E1%84%8A%E1%85%A2%E1%86%B7%E1%84%91%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%90%E1%85%A6%E1%84%86%E1%85%A1%E1%84%91%E1%85%A7%E1%86%AB%E1%84%8C%E1%85%B5%E1%86%B8%20_%20GNB.png?alt=media&amp;token=250d3b01-b1e7-4d2c-ac0d-7289edb1baa9" alt=""><figcaption></figcaption></figure>

<div align="left"><figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FyhhHruyWZQDsH6l3CJTA%2Fdialog_dialog_default.png?alt=media&amp;token=6c78e4b8-6418-49f7-b488-3ee383922379" alt=""><figcaption></figcaption></figure></div>

2️⃣ **브랜드 컬러 변경 화면**

스튜디오 및 마이페이지는 컬러는 변경되지 않습니다

<figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FiC1Zcrj1r6LxIlAr43KS%2F%E1%84%8A%E1%85%A2%E1%86%B7%E1%84%91%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%90%E1%85%A6%E1%84%86%E1%85%A1%E1%84%91%E1%85%A7%E1%86%AB%E1%84%8C%E1%85%B5%E1%86%B8%20_%20GNB%202.png?alt=media&amp;token=55ac9344-95a4-4636-8e31-b8a2a2789b42" alt=""><figcaption></figcaption></figure>

***

## 메뉴 이중화

#### 1️⃣ **상위 메뉴 추가하기**

상단의 상위 메뉴 추가하기 버튼으로도 상위메뉴를 추가할 수 있습니다.\
메뉴 노출여부도 설정할 수 있으며 하위메뉴를 추가/삭제하고 노출여부 설정이 가능합니다.

<figure><img src="https://content.gitbook.com/content/vUF4HkazUnP90Jswd5pe/blobs/mFOvK6kSyfbSbhAudEss/%E1%84%92%E1%85%A1%E1%84%8B%E1%85%B1%E1%84%86%E1%85%A6%E1%84%82%E1%85%B2%20%E1%84%86%E1%85%B5%E1%84%82%E1%85%A9%E1%84%8E%E1%85%AE%E1%86%AF.png" alt=""><figcaption></figcaption></figure>

<div align="left"><figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FO6iD0NTjg3oRNCixXkGN%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-11-10%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.27%201.png?alt=media&amp;token=c4f0d742-d097-4b51-b8b8-accc48ca9ee1" alt="" width="563"><figcaption></figcaption></figure></div>

#### 2️⃣ **상단 메뉴 수정**

상단 메뉴의 이름과 설명을 입력할 수 있습니다.\
메뉴 설명은 SNS에 공유 시, 보여집니다.

<figure><img src="https://content.gitbook.com/content/vUF4HkazUnP90Jswd5pe/blobs/z9jrqao9b1GQ687gsEVG/%E1%84%92%E1%85%A1%E1%84%8B%E1%85%B1%E1%84%86%E1%85%A6%E1%84%82%E1%85%B2%20%E1%84%86%E1%85%B5%E1%84%82%E1%85%A9%E1%84%8E%E1%85%AE%E1%86%AF.png" alt=""><figcaption></figcaption></figure>

#### 3️⃣ **하위 메뉴**

하위 메뉴 최대 5개까지 추가 가능하며, 메뉴명은 최대 10자까지 입력 가능합니다.

<figure><img src="https://content.gitbook.com/content/vUF4HkazUnP90Jswd5pe/blobs/4z4QStcRsT7IOqfYznQI/%E1%84%92%E1%85%A1%E1%84%8B%E1%85%B1%E1%84%86%E1%85%A6%E1%84%82%E1%85%B2%20%E1%84%86%E1%85%B5%E1%84%82%E1%85%A9%E1%84%8E%E1%85%AE%E1%86%AF.png" alt=""><figcaption></figcaption></figure>

<div align="left"><figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FYgegGC4Ck7LYHGGIAn1a%2F%E1%84%92%E1%85%A1%E1%84%8B%E1%85%B1%E1%84%86%E1%85%A6%E1%84%82%E1%85%B2%20%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5%20%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%86%A8%E1%84%89%E1%85%B5.png?alt=media&amp;token=13d86e96-fc78-47ff-885d-a8c585f553fd" alt="" width="550"><figcaption></figcaption></figure></div>

***