06. 디자인 편집 시작하기

• 디자인 편집기로 이동하기
• 기능 살펴보기
• 페이지 관리하기
• 글로벌 디자인 설정하기
• 페이지 저장 및 복원하기
• 모바일 편집하기
• 사이트 복제하기
• 메뉴에 원하는 페이지 위치 연결하기

디자인 편집기로 이동하기

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

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

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

https://docs.dothome.co.kr/books/06/page/d9640

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

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

 

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

 

디자인 편집기 화면입니다.

기능 살펴보기

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

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

https://docs.dothome.co.kr/books/06/page/07cdf

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

● 디자인 편집 화면 구성

● 디자인 편집기 메뉴

페이지 관리하기

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

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

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

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

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

https://docs.dothome.co.kr/books/06/page/8f121

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

[페이지 관리 버튼]

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

메뉴에 연결 된 페이지와 연결되지 않은 페이지를 구분해주며,

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

● 페이지 이동하기

[페이지 관리 - 페이지 이동]

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

● 페이지 추가하기

[페이지 추가 화면]

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

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

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

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

[페이지 설정 버튼]

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

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

[기본]

[페이지 설정 - 기본]

항목	설명
URL명	도메인 주소 뒤에 표시할 페이지 URL명을 입력합니다.
접근 권한	해당 페이지에 접근할 수 있는 권한을 설정합니다.
숨김 설정	체크할 경우 해당 페이지에서 메뉴 영역 또는 푸터 영역을 표시하지 않습니다.

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

[페이지 관리 - SEO]

항목	설명
페이지 제목	검색 결과에 표시될 페이지에 대한 제목을 입력합니다.
페이지 설명	검색 결과에 표시될 페이지에 대한 설명을 입력합니다.
페이지 키워드	해당 페이지에 대한 핵심 키워드를 입력합니다.
검색 차단	체크할 경우 해당 페이지가 검색 엔진 사이트의 검색결과에 노출되지 않습니다.

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

[페이지 관리 - 오픈그래프]

항목	설명
대표 이미지	오픈그래프에 표시할 페이지 대표 이미지를 설정할 수 있습니다.
페이지 제목	오픈그래프에 표시할 페이지 제목을 설정할 수 있습니다.
페이지 설명	오픈그래프에 표시할 페이지 설명을 설정할 수 있습니다.
페이지 URL	오픈그래프에 표시할 페이지 URL 주소를 설정할 수 있습니다.

● 페이지 복제하기

[페이지 관리 - 복제 버튼]

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

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

[페이지 관리 - 복제하기 팝업창]

 

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

● 페이지 삭제하기 

[페이지 관리 - 삭제 버튼]

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

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

[페이지 관리 - 삭제 확인창]

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

● 메인페이지 변경하기

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

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

[페이지 관리 - 메인페이지 변경 확인창]

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

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

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

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

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

[기본 제공 페이지 관리 버튼]

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

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

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

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

[기본 제공 페이지 - 설정 버튼]

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

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

[기본 제공 페이지 설정 화면]

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

숨김 설정

체크할 경우 해당 페이지에서는 메뉴 영역 또는 푸터 영역을 표시하지 않습니다.

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

[기본 제공 페이지 편집 화면]

 

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

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

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

글로벌 디자인 설정하기

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

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

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

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

https://docs.dothome.co.kr/books/06/page/17d63

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

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

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

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

[기본]

전체

폰트

블럭

요소 블럭

[버튼]

버튼 기본

버튼 마우스오버

모바일 모드 글로벌 디자인 설정하기

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

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

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

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

폰트

블럭

요소 블럭

페이지 저장 및 복원하기

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

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

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

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

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

https://docs.dothome.co.kr/books/06/page/cb70a

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

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

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

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

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

페이지를 복원하기 전 현재 작업한 내용을 저장하지 않고 되돌리는 경우 작업 내용이 사라지니 주의해주세요!

모바일 편집하기

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

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

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

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

https://docs.dothome.co.kr/books/06/page/0353a

 

● 편집모드 변경하기

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

[모바일 편집 모드 화면]

 

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

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

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

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

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

● 블럭 숨기기

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

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

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

 

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

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

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

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

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

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

사이트 복제하기

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

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

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

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

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

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

https://docs.dothome.co.kr/books/06/page/0aa18

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

닷홈 사이트 바로가기>

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

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

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

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

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

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

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

(※ 사이트 복제 후에는 이전 사이트로 복구가 불가하니 꼭 복제할 닷홈빌더와 복제 받을 닷홈빌더를 구분하여 진행해 주세요!)

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

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

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

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

https://docs.dothome.co.kr/books/06/page/cf004

 

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

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

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

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

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

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

설정창에서 "메뉴 연결"을 [링크]로 해주고
http:// 또는 https://를 포함하여 "닷홈빌더 도메인"/"페이지 명"#"블럭 ID"로 입력하여 [수정] 버튼을 눌러주세요.

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

[게시하기] 후 홈페이지로 돌아와 연결한 메뉴를 누르면 해당 페이지 안에 지정한 블럭의 위치로 이동 되어지는 걸 확인할 수 있습니다.