# 06. 디자인 편집 시작하기

# 디자인 편집기로 이동하기

디자인 편집기는 실제로 블럭을 선택해서 홈페이지를 만드는 편집 페이지 입니다.

디자인 편지기로 이동하는 방법은 먼저 \[관리자로 로그인\] - \[관리자 페이지로 이동\] - \[디자인 편집\] 순서로 이루어 집니다.

자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/06/page/d9640](https://docs.dothome.co.kr/books/06/page/d9640)

[![dhbd-06-01-01.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-01-01.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-01-01.jpg)

먼저 관리자 계정으로 로그인한 후 관리자 페이지로 이동합니다.

(초기 관리자 ID의 경우 admin으로 설정되어있습니다.)

[![dhbd-06-01-02.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-01-02.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-01-02.jpg)

관리자 페이지 좌측에서 언어별 설정에서 수정할 언어의 사이트를 설정하고,

<div class="col-xl-9 col-lg-9" id="bkmrk-%EC%83%81%EB%8B%A8%EC%9D%98-%5B%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8E%B8%EC%A7%91%5D%EC%9D%84-%ED%81%B4%EB%A6%AD%ED%95%98%EC%97%AC-%EC%9D%B4"><div class="contents"><div>상단의 [디자인 편집]을 클릭하여 이동합니다.</div><div></div><div></div><div></div></div></div><div id="bkmrk--7"></div><div id="bkmrk--9">[![dhbd-06-01-03.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-01-03.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-01-03.png)</div><div id="bkmrk-%5B%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8E%B8%EC%A7%91%EA%B8%B0-%ED%99%94%EB%A9%B4%5D"><span style="color: rgb(22, 145, 121);">\[디자인 편집기 화면\]</span></div>디자인 편집기 화면입니다.

# 기능 살펴보기

디자인 편집기는 편집 메뉴 영역, 메뉴 영역, 본문 영역, 푸터 영역으로 구성되어 있습니다.

자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/06/page/07cdf](https://docs.dothome.co.kr/books/06/page/07cdf)

디자인 편집기로 접속 시 보이는 화면으로 편집 화면 구성과 메뉴에 대해 알려드리겠습니다.

[![dhbd-06-02-01.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-02-01.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-02-01.png)

**● 디자인 편집 화면 구성**

[![dhbd-06-02-02.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-02-02.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-02-02.png)

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-1.%C2%A0-%ED%8E%B8%EC%A7%91-%EB%A9%94%EB%89%B4-%EC%98%81%EC%97%AD-%ED%8E%B8"><div class="contents"><table class="table table-bordered manual-table" style="width: 100%;"><thead><tr><td style="width: 23.1548%;">항목</td><td style="width: 76.9644%;">설명</td></tr></thead><tbody><tr><td style="width: 23.1548%;">1. 편집 메뉴 영역</td><td style="width: 76.9644%;">편집 메뉴가 있는 상단 메뉴 영역입니다. </td></tr><tr><td style="width: 23.1548%;">2. 메뉴 영역</td><td style="width: 76.9644%;">메뉴 영역입니다. 메뉴 레이아웃을 변경하거나 디자인을 수정할 수 있습니다. </td></tr><tr><td style="width: 23.1548%;">3. 본문 영역</td><td style="width: 76.9644%;">페이지의 본문 영역으로 블럭을 추가할 수 있습니다.  
</td></tr><tr><td style="width: 23.1548%;">4. 푸터 영역</td><td style="width: 76.9644%;">홈페이지의 푸터 영역입니다. 푸터 레이이웃을 변경하거나 디자인을 수정할 수 있습니다.</td></tr></tbody></table>

</div></div>● **디자인 편집기 메뉴**

**[![dhbd-06-02-03.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-02-03.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-02-03.png)**

<div class="col-xl-9 col-lg-9" id="bkmrk-%EB%A9%94%EB%89%B4-%EC%84%A4%EB%AA%85-1.-%EB%A9%94%EB%89%B4-%EA%B4%80%EB%A6%AC-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90"><div class="contents"><table class="table table-bordered manual-table" style="width: 100%;"><thead><tr><td style="width: 23.2445%;">메뉴</td><td style="width: 76.7555%;">설명</td></tr></thead><tbody><tr><td style="width: 23.2445%;">1. 메뉴 관리</td><td style="width: 76.7555%;">홈페이지에 메뉴를 추가하거나 수정, 삭제할 수 있습니다. 홈페이지 관리에서 생성한 홈페이지를 메뉴에 연결할 수 있습니다.</td></tr><tr><td style="width: 23.2445%;">2. 페이지 관리</td><td style="width: 76.7555%;">페이지의 페이지들을 수정, 디자인, 삭제할 수 있습니다</td></tr><tr><td style="width: 23.2445%;">3. 글로벌 디자인 설정</td><td style="width: 76.7555%;">홈페이지 디자인 시 기본적으로 공통 적용 될 디자인을 설정할 수 있습니다.  
</td></tr><tr><td style="width: 23.2445%;">4. 퀵메뉴 관리</td><td style="width: 76.7555%;">탑버튼&amp;퀵버튼을 수정, 삭제하여 관리할 수 있습니다.  
</td></tr><tr><td style="width: 23.2445%;">5. 홈페이지 이름</td><td style="width: 76.7555%;">편집 중인 홈페이지의 이름을 보여줍니다  
</td></tr><tr><td style="width: 23.2445%;">6. 디자인 모드 전환</td><td style="width: 76.7555%;">PC화면 디자인 모드 또는 모바일 화면 디자인 모드로 전환할 수 있습니다.  
</td></tr><tr><td style="width: 23.2445%;">7. 복원하기</td><td style="width: 76.7555%;">원하는 복원 시점을 선택하여 \[복원하기\]버튼을 누르면 선택한 복원시점으로 되돌아갑니다.  
</td></tr><tr><td style="width: 23.2445%;">8. 임시저장</td><td style="width: 76.7555%;">현재까지 작업한 해당 페이지의 내용을 저장하여 복원시점을 생성합니다.  
</td></tr><tr><td style="width: 23.2445%;">9. 게시하기</td><td style="width: 76.7555%;">작업한 내용을 실제 노출되어지는 페이지에 적용합니다.</td></tr><tr><td style="width: 23.2445%;">10. 종료하기</td><td style="width: 76.7555%;">디자인 편집기를 종료합니다. \[게시하기\] 클릭 없이 종료하시면 현재까지 작업한 내용이 홈페이지에 반영되지 않습니다.</td></tr></tbody></table>

</div></div>

# 페이지 관리하기

페이지 관리는 \[디자인 편집\] - \[페이지 관리\] 메뉴에서 제공되며 다음과 같은 기능들을 지원합니다.

관리 : 페이지 이동, 페이지 생성, 페이지 복제, 페이지 삭제 , 메인페이지 변경

설정 : 페이지 URL, 접근권한, 메뉴 표시 여부, SEO

일반 페이지 외에도 로그인 화면, 게시판 등 기본 제공 페이지의 디자인도 편집이 가능합니다.

자세한 내용은 아래 안내를 참고해 주세요.

[https://docs.dothome.co.kr/books/06/page/8f121](https://docs.dothome.co.kr/books/06/page/8f121)

편집 메뉴에서 \[페이지 관리\] 버튼을 눌러 페이지 관리창을 열어줍니다.

[![dhbd-06-03-01.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-01.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-01.jpg)

<span style="color: rgb(22, 145, 121);">\[페이지 관리 버튼\]</span>

● **메뉴에 연결된 페이지/ 연결 안 된 페이지 구분**

**[![dhbd-06-03-02.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-02.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-02.jpg)**

<div id="bkmrk-%5B%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B4%80%EB%A6%AC---%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%AA%A9%EB%A1%9D%5D"><span style="color: rgb(22, 145, 121);">\[페이지 관리 - 페이지 목록\]</span></div>메뉴에 연결 된 페이지와 연결되지 않은 페이지를 구분해주며,

해당 기능을 참고하여 페이지 관리를 하면 됩니다.

**● 페이지 이동하기**

[![dhbd-06-03-03.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-03.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-03.jpg)

<span style="color: rgb(22, 145, 121);">\[페이지 관리 - 페이지 이동\]</span>

페이지 관리창에서 이동하려는 페이지 명을 클릭하시면 선택한 페이지의 편집 화면으로 이동됩니다.

● **페이지 추가하기**

**[![dhbd-06-03-04.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-04.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-04.jpg)**

<span style="color: rgb(22, 145, 121);">\[페이지 추가 화면\]</span>

페이지 관리창 하단의 \[페이지 추가하기\] 버튼을 눌러 페이지 추가창을 열어줍니다.

URL명을 입력한 뒤 \[추가\]를 클릭하면 새 페이지가 추가됩니다.

이때, URL명은 영문, 숫자 조랍으로 가능하며 한글, 특수문자등은 입력되지 않습니다.

● **페이지 항목 설정 기능 목록**

[![dhbd-06-03-05.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-05.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-05.jpg)

<span style="color: rgb(22, 145, 121);">\[페이지 설정 버튼\]</span>

변결할 페이지 우측의 \[설정(톱니바퀴 모양)\]버튼을 누르면 드롭다운 메뉴가 표시됩니다.

드롭다운 메뉴의 \[설정\]을 누르면 페이지 설정창이 열립니다.

**\[기본\]**

**[![dhbd-06-03-06.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-06.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-06.jpg)**

<span style="color: rgb(22, 145, 121);">\[페이지 설정 - 기본\]</span>

<table class="table table-bordered manual-table" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-url%EB%AA%85-%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%A3%BC%EC%86%8C-%EB%92%A4%EC%97%90" style="width: 100%;"><thead><tr><td style="width: 22.7977%;">항목</td><td style="width: 77.3215%;">설명</td></tr></thead><tbody><tr><td style="width: 22.7977%;">URL명</td><td style="width: 77.3215%;">도메인 주소 뒤에 표시할 페이지 URL명을 입력합니다.</td></tr><tr><td style="width: 22.7977%;">접근 권한</td><td style="width: 77.3215%;">해당 페이지에 접근할 수 있는 권한을 설정합니다. </td></tr><tr><td style="width: 22.7977%;">숨김 설정</td><td style="width: 77.3215%;">체크할 경우 해당 페이지에서 메뉴 영역 또는 푸터 영역을 표시하지 않습니다.</td></tr></tbody></table>

**\[SEO\]** : 구글, 네이버와 같은 검색 엔진에 전달할 사이트에 대한 정보를 설정합니다.

[![dhbd-06-03-07.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-07.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-07.jpg)

<span style="color: rgb(22, 145, 121);">\[페이지 관리 - SEO\]</span>

<table class="table table-bordered manual-table" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%A0%9C%EB%AA%A9-%EA%B2%80%EC%83%89-%EA%B2%B0%EA%B3%BC%EC%97%90-" style="width: 100%;"><thead><tr><td style="width: 23.512%;">항목</td><td style="width: 76.6072%;">설명</td></tr></thead><tbody><tr><td style="width: 23.512%;">페이지 제목</td><td style="width: 76.6072%;">검색 결과에 표시될 페이지에 대한 제목을 입력합니다.</td></tr><tr><td style="width: 23.512%;">페이지 설명</td><td style="width: 76.6072%;">검색 결과에 표시될 페이지에 대한 설명을 입력합니다.</td></tr><tr><td style="width: 23.512%;">페이지 키워드</td><td style="width: 76.6072%;">해당 페이지에 대한 핵심 키워드를 입력합니다.  
</td></tr><tr><td style="width: 23.512%;">검색 차단</td><td style="width: 76.6072%;">체크할 경우 해당 페이지가 검색 엔진 사이트의 검색결과에 노출되지 않습니다.</td></tr></tbody></table>

**\[오픈그래프\]** : SNS 공유 등에 사용되는 사이트에 대한 정보를 설정합니다.

[![dhbd-06-03-08.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-08.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-08.jpg)

<span style="color: rgb(22, 145, 121);">\[페이지 관리 - 오픈그래프\]</span>

<table class="table table-bordered manual-table" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EB%8C%80%ED%91%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84%EC%97%90-" style="width: 100%;"><thead><tr><td style="width: 22.1698%;">항목</td><td style="width: 77.8302%;">설명</td></tr></thead><tbody><tr><td style="width: 22.1698%;">대표 이미지</td><td style="width: 77.8302%;">오픈그래프에 표시할 페이지 대표 이미지를 설정할 수 있습니다.</td></tr><tr><td style="width: 22.1698%;">페이지 제목</td><td style="width: 77.8302%;">오픈그래프에 표시할 페이지 제목을 설정할 수 있습니다.</td></tr><tr><td style="width: 22.1698%;">페이지 설명</td><td style="width: 77.8302%;">오픈그래프에 표시할 페이지 설명을 설정할 수 있습니다.  
</td></tr><tr><td style="width: 22.1698%;">페이지 URL</td><td style="width: 77.8302%;">오픈그래프에 표시할 페이지 URL 주소를 설정할 수 있습니다.</td></tr></tbody></table>

**● <span id="bkmrk-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%B3%B5%EC%A0%9C%ED%95%98%EA%B8%B0">페이지 복제하기</span>**

[![dhbd-06-03-09.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-09.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-09.jpg)

<span style="color: rgb(22, 145, 121);">\[페이지 관리 - 복제 버튼\]</span>

변경할 페이지 우측 \[설정(톱니바퀴 모양)\]버튼을 누르면 드롭다운 메뉴가 표시됩니다.

드롭다운 메뉴에서 \[복제\]를 눌러주세요.

[![dhbd-06-03-10.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-10.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-10.png)

<span style="color: rgb(22, 145, 121);">\[페이지 관리 - 복제하기 팝업창\]</span>

페이지 복제 창에 페이지명을 입력한 뒤 \[복제\]를 누르면 페이지가 복제됩니다.

**● 페이지 삭제하기**

[![dhbd-06-03-11.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-11.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-11.jpg)

<span style="color: rgb(22, 145, 121);">\[페이지 관리 - 삭제 버튼\]</span>

삭제할 페이지 우측 \[설정(톱니바퀴 모양)\]버튼을 누르면 드롭다운 메뉴가 표시됩니다.

드롭다운 메뉴에서 \[삭제\]를 눌러주세요

[![dhbd-06-03-12.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-12.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-12.png)

<span style="color: rgb(22, 145, 121);">\[페이지 관리 - 삭제 확인창\]</span>

\[삭제\] 버튼을 클릭하면 페이지가 삭제됩니다.

**● 메인페이지 변경하기**

[![dhbd-06-03-13.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-13.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-13.jpg)

<div id="bkmrk-%5B%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B4%80%EB%A6%AC---%EB%A9%94%EC%9D%B8%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%B3%80%EA%B2%BD-%EB%B2%84"><span style="color: rgb(22, 145, 121);">\[페이지 관리 - 메인페이지 변경 버튼\]</span></div>변경할 페이지 우측의 \[설정(톱니바퀴 모양)\]버튼을 누르면 드롭다운 메뉴가 표시됩니다.

드롭다운 메뉴에서 제일 하단 \[메인페이지로 변경\] 눌러주세요.

[![dhbd-06-03-14.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-14.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-14.png)

<span style="color: rgb(22, 145, 121);">\[페이지 관리 - 메인페이지 변경 확인창\]</span>

해당 메뉴 연결이 안되어 있을 시 체크박스가 나오지 않습니다.

이전 메인 페이지와 동일한 메뉴를 사용 하면 체크 박스를 체크해 주시고,

현재 연결되어 있는 메뉴에 연결을 원할 경우 체크하지 않으면 되며,

\[변경\] 버튼을 누르면 해당 페이지가 메인 페이지로 변경됩니다.

**● 기본 제공 페이지 관리하기**

[![dhbd-06-03-15.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-15.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-15.jpg)

<span style="color: rgb(22, 145, 121);">\[기본 제공 페이지 관리 버튼\]</span>

페이지 목록 상단의 '기본 제공 페이지' 탭을 누르면 기본 제공 페이지의 목록이 나옵니다.

기본 제공 페이지란 사용자가 생성한 페이지가 아닌 닷홈빌더에서 기본으로 제공되는 페이지 입니다.

본 제공 페이지는 삭제나 복제가 불가합니다.

● 기본 제공 페이지 설정 변경하기

[![dhbd-06-03-16.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-16.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-16.jpg)

<span style="color: rgb(22, 145, 121);">\[기본 제공 페이지 - 설정 버튼\]</span>

변경할 페이지 우측의 \[설정(톱니바퀴 모양)\]버튼을 누르면 드롭다운 메뉴가 표시됩니다.

드롭다운 메뉴의 \[설정\]을 누르면 페이지 설정창이 열립니다.

[![dhbd-06-03-17.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-17.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-17.png)

<span style="color: rgb(22, 145, 121);">\[기본 제공 페이지 설정 화면\]</span>

기본 제공 페이지는 메뉴 숨기기와 푸터 숨기기 설정만 제공하고 있습니다.

<table class="table table-bordered" id="bkmrk-%EC%88%A8%EA%B9%80-%EC%84%A4%EC%A0%95-%EC%B2%B4%ED%81%AC%ED%95%A0-%EA%B2%BD%EC%9A%B0-%ED%95%B4%EB%8B%B9-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90" style="width: 100%;"><tbody><tr><td style="width: 25.1786%;">숨김 설정

</td><td style="width: 74.9405%;">체크할 경우 해당 페이지에서는 메뉴 영역 또는 푸터 영역을 표시하지 않습니다.

</td></tr></tbody></table>

**● 기본 제공 페이지 편집하기**

[![dhbd-06-03-18.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-03-18.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-03-18.jpg)

<span style="color: rgb(22, 145, 121);">\[기본 제공 페이지 편집 화면\]</span>

페이지명을 클릭하시면 선택한 페이지의 편집 화면으로 이동 됩니다.

기본 제공 페이지의 경우 해당 페이지의 기능 영역의 배경색, 글자색 등을 수정할 수 있으며,

상·하단에 블럭을 추가할 수 있습니다.

# 글로벌 디자인 설정하기

글로벌 디자인이란 전체 홈페이지에 적용되는 기본 디자인을 의미합니다.

본문 너비, 본문 글자 사이즈, 배경색 등을 설정할 수 있습니다.

\[디자인 편집\] - \[글로벌 디자인 설정\] 메뉴에서 설정이 가능합니다.

자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/06/page/17d63](https://docs.dothome.co.kr/books/06/page/17d63)

[![dhbd-06-04-01.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-04-01.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-04-01.jpg)

디자인 편집기 메뉴에서 \[글로벌 디자인 설정\] 버튼을 눌러 글로벌 디자인 설정창을 열어줍니다.

기본과 버튼 두 개의 탭으로 나뉘어져 있습니다.

기본은 전체 페이지에 대한 설정, 버튼은 버튼 디자인에 대해 설정할 수 있습니다.

항목별 수정사항을 입력한 뒤 적용하기 버튼을 누르면 글로벌 디자인이 적용됩니다.

**\[기본\]**

**전체**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EB%B3%B8%EB%AC%B8%ED%8F%AD-%EB%B3%B8%EB%AC%B8-%EC%98%81%EC%97%AD%EC%9D%98-%EB%84%88%EB%B9%84%EB%A5%BC"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 24.2263%;">항목</td><td style="width: 75.8929%;">설명</td></tr></thead><tbody><tr><td style="width: 24.2263%;">본문폭</td><td style="width: 75.8929%;">본문 영역의 너비를 설정합니다. 보통 1100px에서 1300px 사이를 많이 사용합니다.</td></tr><tr><td style="width: 24.2263%;">배경색</td><td style="width: 75.8929%;">페이지의 배경색상을 설정합니다</td></tr><tr><td style="width: 24.2263%;">정렬</td><td style="width: 75.8929%;">이미지, 글자 등의 정렬을 설정합니다.</td></tr></tbody></table>

</div></div>**폰트**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9%C2%A0-%EC%84%A4%EB%AA%85-%EA%B8%80%EC%9E%90-%ED%81%AC%EA%B8%B0-%EA%B8%80%EC%9E%90-%EC%82%AC%EC%9D%B4%EC%A6%88%EB%A5%BC"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 24.5834%;">항목 </td><td style="width: 75.5358%;">설명</td></tr></thead><tbody><tr><td style="width: 24.5834%;">글자 크기</td><td style="width: 75.5358%;">글자 사이즈를 설정합니다. 보통 16px를 많이 사용합니다.</td></tr><tr><td style="width: 24.5834%;">글꼴</td><td style="width: 75.5358%;">기본 글꼴을 설정합니다.</td></tr><tr><td style="width: 24.5834%;">글자색</td><td style="width: 75.5358%;">글자 색을 설정합니다.</td></tr><tr><td style="width: 24.5834%;">링크색</td><td style="width: 75.5358%;">페이지 링크가 설정된 글자의 색을 설정합니다.</td></tr><tr><td style="width: 24.5834%;">링크 마우스오버색</td><td style="width: 75.5358%;">링크가 설정된 글자에 마우스를 올렸을 때 변경될 색을 설정합니다.</td></tr></tbody></table>

</div></div>**블럭**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%A2%8C%EC%9A%B0-%EC%97%AC%EB%B0%B1-%ED%94%84%EB%A0%88%EC%9E%84-%EB%B8%94%EB%9F%AD%EC%9D%98-"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 24.7025%;">항목</td><td style="width: 75.4167%;">설명</td></tr></thead><tbody><tr><td style="width: 24.7025%;">좌우 여백</td><td style="width: 75.4167%;">프레임 블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 24.7025%;">상하 여백</td><td style="width: 75.4167%;">프레임 블럭의 상하 여백을 설정합니다.</td></tr><tr><td style="width: 24.7025%;">프레임박스 간격  
</td><td style="width: 75.4167%;">프레임 블럭 안에 프레임박스간의 간격을 설정합니다.  
</td></tr></tbody></table>

</div></div>**요소 블럭**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%A2%8C%EC%9A%B0-%EC%97%AC%EB%B0%B1-%EC%9A%94%EC%86%8C-%EB%B8%94%EB%9F%AD%EC%9D%98-%EC%A2%8C"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 25.0596%;">항목</td><td style="width: 75.0596%;">설명</td></tr></thead><tbody><tr><td style="width: 25.0596%;">좌우 여백</td><td style="width: 75.0596%;">요소 블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 25.0596%;">상하 여백</td><td style="width: 75.0596%;">요소 블럭의 상하 여백을 설정합니다.</td></tr><tr><td style="width: 25.0596%;">애니메이션</td><td style="width: 75.0596%;">화면에 요소 블럭이 보일 때 동작할 애니메이션을 설정합니다.  
</td></tr></tbody></table>

</div></div>**\[버튼\]**

**버튼 기본**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B8%80%EC%9E%90-%ED%81%AC%EA%B8%B0-%EB%B2%84%ED%8A%BC%EC%9D%98-%EA%B8%80%EC%9E%90-%ED%81%AC"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 25.2977%;">항목</td><td style="width: 74.8215%;">설명</td></tr></thead><tbody><tr><td style="width: 25.2977%;">글자 크기</td><td style="width: 74.8215%;">버튼의 글자 크기를 설정합니다.</td></tr><tr><td style="width: 25.2977%;">글자색</td><td style="width: 74.8215%;">버튼의 글자 색을 설정합니다.</td></tr><tr><td style="width: 25.2977%;">배경색</td><td style="width: 74.8215%;">버튼의 배경 색을 설정합니다.</td></tr><tr><td style="width: 25.2977%;">테두리색</td><td style="width: 74.8215%;">버튼의 테두리 색을 설정합니다.</td></tr><tr><td style="width: 25.2977%;">좌우 여백</td><td style="width: 74.8215%;">버튼 안쪽의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 25.2977%;">상하 여백</td><td style="width: 74.8215%;">버튼 안쪽의 상하 여백을 설정합니다.</td></tr></tbody></table>

</div></div>**버튼 마우스오버**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B8%80%EC%9E%90%EC%83%89-%EB%B2%84%ED%8A%BC%EC%97%90-%EB%A7%88%EC%9A%B0%EC%8A%A4%EB%A5%BC-%EC%98%AC"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 25.4167%;">항목</td><td style="width: 74.7025%;">설명</td></tr></thead><tbody><tr><td style="width: 25.4167%;">글자색</td><td style="width: 74.7025%;">버튼에 마우스를 올렸을 때 변경될 글자 색을 설정합니다.</td></tr><tr><td style="width: 25.4167%;">배경색</td><td style="width: 74.7025%;">버튼에 마우스를 올렸을 때 변경될 배경 색을 설정합니다.  
</td></tr><tr><td style="width: 25.4167%;">테두리색</td><td style="width: 74.7025%;">버튼에 마우스를 올렸을 때 변경될 테두리 색을 설정합니다.  
</td></tr></tbody></table>

</div></div>**모바일 모드 글로벌 디자인 설정하기**

**[![dhbd-06-04-02.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-04-02.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-04-02.jpg)**

모바일 글로벌 디자인은 모바일 모드에서 설정할 수 있습니다.

디자인 편집기 메뉴에서 \[모바일 화면 디자인 모드로 전환\] 버튼을 눌러 편집기 화면 모드를 모바일로 전환합니다.

[![dhbd-06-04-03.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-04-03.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-04-03.jpg)

편집 메뉴의 \[글로벌 디자인 설정\] 버튼을 누르면 모바일 글로벌 디자인 설정창이 열립니다.

항목별 수정사항을 입력한 뒤 적용하기 버튼을 누르면 모바일 글로벌 디자인이 적용됩니다.

**폰트**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B8%80%EC%9E%90-%ED%81%AC%EA%B8%B0-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EB%AA%A8%EB%93%9C%EC%9D%BC-"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 25.5068%;">항목</td><td style="width: 74.4932%;">설명</td></tr></thead><tbody><tr><td style="width: 25.5068%;">글자 크기</td><td style="width: 74.4932%;">모바일 모드일 때의 글자 크기를 설정합니다. PC에서 설정한 글자 크기에 대비하여 적용됩니다.

1~5까지 설정할 수 있으며, 숫자가 클 수록 글자 크기가 커집니다.

</td></tr></tbody></table>

</div></div>**블럭**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%A2%8C%EC%9A%B0-%EC%97%AC%EB%B0%B1-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EB%AA%A8%EB%93%9C%EC%9D%BC-"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 25.1497%;">항목</td><td style="width: 74.8503%;">설명</td></tr></thead><tbody><tr><td style="width: 25.1497%;">좌우 여백</td><td style="width: 74.8503%;">모바일 모드일 때의 프레임 블럭의 좌우 여백을 설정합니다.  
</td></tr><tr><td style="width: 25.1497%;">상하 여백</td><td style="width: 74.8503%;">모바일 모드일 때의 프레임 블럭의 상하 여백을 설정합니다.  
</td></tr><tr><td style="width: 25.1497%;">프레임박스 간격

</td><td style="width: 74.8503%;">모바일 모드에서 추가한 프레임 블럭의 프레임박스 간의 간격을 설정합니다.

</td></tr></tbody></table>

</div></div>**요소 블럭**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%A2%8C%EC%9A%B0-%EC%97%AC%EB%B0%B1-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EB%AA%A8%EB%93%9C%EC%9D%BC--1"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 25.0302%;">항목</td><td style="width: 74.9698%;">설명</td></tr></thead><tbody><tr><td style="width: 25.0302%;">좌우 여백</td><td style="width: 74.9698%;">모바일 모드일 때의 요소 블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 25.0302%;">상하 여백</td><td style="width: 74.9698%;">모바일 모드일 때의 요소 블럭의 상하 여백을 설정합니다.</td></tr></tbody></table>

</div></div>

# 페이지 저장 및 복원하기

닷홈빌더는 작업한 페이지 내용을 저장하는 임시저장 기능을 제공합니다.

\[디자인 편집\] - \[임시저장\] 버트을 이용해서 사용하실 수 있으며

임시저장 시 현재까지 작업한 페이지 내용이 복원시점으로 저장됩니다.

저장된 페이지는 복원 버튼을 통해 되돌리기가 가능합니다.

자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/06/page/cb70a](https://docs.dothome.co.kr/books/06/page/cb70a)

[![dhbd-06-05-01.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-05-01.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-05-01.png)

상단 메뉴의 \[임시저장\]을 누르면 해당 시점의 페이지 내용이 저장됩니다.

최대 3개까지 저장이 가능하며, 3개가 넘어갈 경우 가장 오래된 저장 내용이 지워지고 최근 저장 내용이 추가됩니다.

[![dhbd-06-05-02.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-05-02.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-05-02.png)

상단 메뉴의 \[복원하기\] 버튼을 통해 저장된 복원시점들을 확인할 수 있습니다.

복원시점 목록에는 최근 저장된 페이지 기록이 표시 시간과 함께 표시됩니다.

복원하기를 원하는 시점의 \[복원하기\] 버튼을 클릭하시면 현재 페이지 내용이 해당 복원 시점으로 페이지 상태로 돌아갑니다.

페이지를 복원하기 전 <span style="color: #3da1ff;">현재 작업한 내용을 저장하지 않고 되돌리는 경우 작업 내용이 사라지니 주의해주세요!</span>

# 모바일 편집하기

디자인 편집기에서는 PC 편집모드, 모바일 편집모드 두가지의 편집모드를 제공합니다.

\[디자인 편집\] - \[편집모드 전환\] 버튼을 클릭해서 전환 가능합니다.

모바일 편집모드로 전환시 PC 편집모드에서 생성된 일부 블럭을 감추거나, 모바일 전용 블럭의 추가가 가능합니다.

자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/06/page/0353a](https://docs.dothome.co.kr/books/06/page/0353a)

● **편집모드 변경하기**

[![dhbd-06-06-01.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-06-01.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-06-01.jpg)

상단 메뉴 우측의 \[편집모드 전확\] 버튼(모바일 모양 아이콘)을 클릭하면 편집 모드로 전환됩니다.

[![dhbd-06-06-02.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-06-02.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-06-02.png)

<span style="color: rgb(22, 145, 121);">\[모바일 편집 모드 화면\]</span>

모바일 편집 모드 화면입니다.

**● 블럭 모바일 상세 설정하기**

[![dhbd-06-06-03.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-06-03.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-06-03.jpg)

블럭 위에 마우스를 올리면 우측 상단에 블럭 모바일 편집 메뉴가 표시됩니다.

첫 번째에 있는 \[설정(톱니 바퀴 모양)\]버튼을 클릭하여 상세 설정창을 열어줍니다.

[![dhbd-06-06-04.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-06-04.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-06-04.png)

모바일 상세 설정에서는 여백, 정렬, 글자 크기등을 변경할 수 있습니다.

**● 블럭 숨기기**

PC모드에서 제작한 블럭을 모바일 화면에서만 감추도록 설정할 수 있습니다.

[![dhbd-06-06-05.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-06-05.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-06-05.jpg)

블럭 숨기기 버튼(눈 모양 아이콘)을 클릭하시면 해당 블럭이 숨겨집니다.

[![dhbd-06-06-06.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-06-06.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-06-06.png)

블럭이 숨겨진 모습입니다.

[![dhbd-06-06-07.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-06-07.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-06-07.jpg)

숨긴 블럭을 확인 하려면 좌측의 숨김 해제 버튼 위에 마우스를 올리면 숨겨진 블럭이 연하게 표시됩니다.

숨김 해제 버튼을 클릭하면 블럭 숨기기를 해제할 수 있습니다.

**●** 모바일 전용 블럭 추가하기

PC화면에는 표시되지 않고 모바일 화면에서만 보이는 모바일 전용 블럭을 추가할 수 있습니다.

[![dhbd-06-06-08.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-06-08.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-06-08.jpg)

블럭 위에 마우스를 올리면 블럭의 상·하단으로 추가 버튼이 표시됩니다. 원하는 위치를 선택하여 추가 버튼을 클릭해주세요.

[![dhbd-06-06-09.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-06-09.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-06-09.png)

모바일 전용 블럭 선택창이 열리면 원하는 블럭을 선택하여 클릭하시면 해당 블럭이 추가됩니다.

# 사이트 복제하기

사이트 복제란 닷홈빌더로 제작한 홈페이지 내용을 그대로 다른 닷홈빌더에 복제하는 기능입니다.

비슷한 여러개의 홈페이지를 제작시 하나의 홈페이지를 완성한 후 복제하면 작업시간을 줄여 줍니다.

사이트 복제는 닷홈빌더 100G 이상의 서비스간에만 제공되고 있습니다.

  
사이트 복제는 닷홈 홈페이지의 아래 경로에서 진행하실 수 있습니다.

\[마이닷홈\] - \[닷홈빌더 관리\] - \[닷홈빌더 목록\] - \[상세보기\] - \[사이트 복제\]

자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/06/page/0aa18](https://docs.dothome.co.kr/books/06/page/0aa18)

  
  
먼저 닷홈으로 이동해 로그인해 주세요.

[<span style="color: #3c99f6;">닷홈 사이트 바로가기&gt;</span>](https://www.dothome.co.kr/)

[![dhbd-06-07-01.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-07-01.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-07-01.jpg)

상단 메뉴에서 우측의 \[마이닷홈\]을 눌러 마이닷홈으로 이동한 뒤, 좌측의 \[닷홈빌더 관리\] - \[닷홈빌더 목록\]을 눌러주세요.

복제하려는 닷홈빌더의 \[상세보기\] 버튼을 눌러 이동해 주세요.

(복제 받을 닷홈빌더가 아닌 복제할 디자인이 적용되어 있는 닷홈빌더의 \[상세보기\]를 눌러주세요!)

[![dhbd-06-07-02.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-07-02.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-07-02.jpg)

옵션추가 및 부가서비스의 \[사이트 복제\] 버튼을 눌러 주세요.

[![dhbd-06-07-03.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-07-03.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-07-03.jpg)

복제 창이 뜨면 \[서비스 선택하기\] 버튼을 눌러 <u>복제 받을</u> 닷홈빌더 계정을 선택해주세요.

\[복제하기\] 버튼을 눌러 사이트 복제가 진행됩니다.

사이트가 복제되는 동안 시간이 다소 소요될 수 있으며, 창을 닫거나 이동하면 복제가 중단되니 복제가 완료될 동안 잠시 기다려 주세요!

**<span style="color: #3c99f6;">(※ 사이트 복제 후에는 이전 사이트로 복구가 불가하니 꼭 복제할 닷홈빌더와 복제 받을 닷홈빌더를 구분하여 진행해 주세요!)</span>**

# 메뉴에 원하는 페이지 위치 연결하기

페이지 내의 특정한 위치로 이동할수 있도록 메뉴의 링크를 설정할 수 있습니다.

\[편집 모드\] - \[메뉴 관리\] - \[메뉴 설정\]에서 진행가능합니다.

자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/06/page/cf004](https://docs.dothome.co.kr/books/06/page/cf004)

메뉴를 클릭하면 페이지 내의 원하는 위치로 이동할 수 있는 방법을 안내드리겠습니다.

우선 \[디자인 편집기\]화면으로 이동합니다.

[![dhbd-06-08-01.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-08-01.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-08-01.png)

\[디자인 편집기\]화면에서 연결할 페이지명을 확인해줍니다.

[![dhbd-06-08-02.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-08-02.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-08-02.png)

연결할 페이지 위치에 있는 블럭의 \[상세 설정(톱니바퀴)\] 버튼을 눌러줍니다.

[![dhbd-06-08-03.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-08-03.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-08-03.png)

우측 하단의 블럭ID를 확인해줍니다.

[![dhbd-06-08-04.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-08-04.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-08-04.png)

좌측 상단의 \[메뉴관리\] - 연결할 메뉴의 \[상세설정(톱니바퀴)\] -\[설정\] 버튼을 눌러줍니다.

[![dhbd-06-08-05.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-08-05.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-08-05.png)

설정창에서 "메뉴 연결"을 \[링크\]로 해주고  
**<span style="color: #3c99f6;">http:// 또는 </span><span style="color: #3c99f6;">https://를</span><span style="color: #083139;"> </span><span style="color: #3c99f6;">포함하여 "닷홈빌더</span> <span style="color: rgb(60, 153, 246);">도메인"/"페이지 명"#"블럭 ID"</span>**로 입력하여 \[수정\] 버튼을 눌러주세요.

[![dhbd-06-08-06.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-08-06.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-08-06.png)

\[게시하기\] 버튼을 눌러주시면 됩니다.

<div id="bkmrk--19">  
</div><div id="bkmrk--20">[![dhbd-06-08-07.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-08-07.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-08-07.png)</div>\[게시하기\] 후 홈페이지로 돌아와 연결한 메뉴를 누르면 해당 페이지 안에 지정한 블럭의 위치로 이동 되어지는 걸 확인할 수 있습니다.