1. 디자인 편집 구조 파악하기

★ 두부플러스는 코딩 없이 쉽고 간편하게 웹사이트를 디자인 할 수 있는 기능을 제공합니다. 

웹사이트 스타일에 맞게 다양한 요소와 앱을 활용하여  멋진 웹사이트를 만들어 보세요.

① [디자인편집]을 클릭합니다.

[디자인 편집 및 레이아웃]

①

• x : 운영모드로 이동됩니다.

• 레이아웃 : 디자인편집의 현재페이지 명칭

• 페이지 : 페이지(메뉴) 만들기로 이동

• 앱 : 나의앱으로 이동

② 

• 요소추가 : 웹사이트를 구성하는 다양한 요소 및 앱을 마우스로 드래그하여 설정 

• 섹션추가 : 행(Row)을 열(Colum)로 구분한 영역을 마우스로 드래그하여 설정

• 디자인 : 템플릿 변경 및 폰트 설정

• 전체설정 : 레이아웃의 전체 영역 설정

③ 

• 소스편집 : Code Editor로 코딩 

• 미리보기 : 현재 편집 중인 화면 미리보기 

• 환경설정 : [운영모드 > 환경설정 > 기본정보] 페이지로 이동

• 도움말 : 튜토리얼과 가이드보러가기로 이동

• 나의사이트 : 현재까지 작업한 나의사이트를 웹상으로 확인

④ 

• PC, 태블릿, 모바일 미리보기 버튼을 통해 나의사이트 화면 확인

⑤ 

• Undo : 이전 작업환경으로 되돌리기 

• Redo : 이전에서 이후 작업환경으로 되돌리기 

• 저장목록 : 저장목록 불러오기

• 저장 : 변경사항 저장

• 게시하기 : 마지막 작업환경 저장 및 웹사이트 적용

[요소추가 - 텍스트요소] 

⑥ 텍스트요소

⑧ 미디어요소

[요소추가 - 구성요소]

⑨ 구성요소 

⑩ 앱

• 회원관리: 회원제로 운영되는 웹사이트의 경우, 메인 또는 서브 디자인에 로그인창을 노출할 수 있습니다.

• 게시판: 유형별 게시판을 삽입하여 노출할 수 있습니다.

• 슬라이드쇼: 메인이미지로 많이 사용되며, 여러 이미지들을 슬라이드하여 보여줍니다.

• 지도: 웹사이트의 위치가 표시되는 장소를 지도로 삽입할 수 있습니다. 

• 카운터: 웹사이트 방문자수를 노출시킬 수 있는 기능입니다.

• 슬라이더갤러리: 숙박사이트의 객실안내에서 많이 사용되며, 슬라이드쇼처럼 이미지 이동이 가능하고, 
　　　　　　　　　슬라이더 메인이미지와 서브이미지들이 썸네일 형태로 동시에 노출됩니다. 

• 문자상담: 실시간으로 고객과 메시지를 주고 받을 수 있는 기능입니다.

• 상품검색: 쇼핑상품 검색 시 사용됩니다.

• 소셜스트림: 다양한 소셜미디어(Naver, Youtube, Instaram 등)에 업로드된 내용을 웹사이트 한 페이지에 모아 노출 및 운영할 수 있습니다.

• 납부관리 : 협회 및 단체 등의 회비, 신청비 등을 관리할 수 있습니다. 
• 쇼핑: 쇼핑몰을 운영하는 사용자를 위한 특화된 앱으로 웹사이트에서 판매할 상품을 노출합니다.

• 숙박예약: 숙박사이트를 운영하는 사용자를 위한 특화된 앱으로 숙박예약의 객실안내를 설정할 수 있습니다.

• 예약검색: 웹사이트의 숙박예약을 조건에 맞게 검색하여 보다 편리하게 예약 및 상세검색이 가능합니다.

[세부설정 및 아이콘]