모두 공짜로 만드는 네이버 모두 홈페이지 modoo! - 모바일 화면제작02

모두 홈페이지의 메인 비주얼 영역까지 지난 시간에 제작해 보았습니다. 오늘은 메인 콘텐츠 영역과 서브페이지들을 제작해서 모바일 화면을 완성해 보도록 하겠습니다. 

 

가장 먼저 홈페이지를 소개하는 영역입니다. '소개' 부분에 원하는 타이틀을 입력한 후 '소개/공지 한마디'에 소개글을 아래와 같이 등록해 줍니다. 소개글의 사용 여부는 오른쪽에서 체크해 주셔야 합니다. 

위 화면에서 '이미지 갤러리'를 사용에 체크하여 활성화시킬 수 있습니다. '이미지 갤러리'의 이미지는 홈페이지 내 이미지를 자동으로 최대 4장 불러오며 노출을 원하지 않는 이미지는 해당 섬네일의 X 버튼을 눌러서 삭제할 수 있습니다. 

서브페이지를 제작하지 않았다면 '이미지 갤러리'기능을 사용할 수 없습니다.

 

홈페이지 소개 영역 아래 '버튼'항목이 있습니다. 사용에 체크를 해준 후 노출되기 원하는 아이콘 버튼을 클릭해 주면 됩니다. 전화를 클릭하면 이전 강좌의 전화/톡톡 설정에서 입력한 전화번호와 연동되는 버튼이 노출됩니다. 오시는 길은 서브페이지의 오시는 길로 연동되며 공유 버튼은 각종 SNS와 사이트에 공유할 수 있는 버튼입니다. 

사용자가 공유 버튼을 누를 때 나타나는 화면입니다. 

이 외에도 스토어, N예약, 톡톡 등과 자동 연동되는 버튼들이 있으며 버튼 오른쪽의 '+'를 눌러서 원하는 이름과 아이콘, 기능을 가진 버튼을 추가로 만들 수 있습니다. 

아래 화면은 스토어와 N예약 버튼을 활성화시킬 때 연결화면입니다.

메인화면의 마지막 설정인 '홈페이지 하단 정보/공유하기'입니다. 이 메뉴는 모바일 화면의 맨 아래쪽으로 스크롤하면 볼 수 있습니다. 이곳에서 설정한 내용들은 메인화면뿐만 아니라 모든 서브페이지 하단에 공통적으로 노출되는 정보입니다. 

정보를 입력하면 앞선 강좌에서 등록한 로고 이미지가 보이고 그 아래 입력정보가 노출됩니다. 

지금까지 메인화면을 구성해 보았습니다. 이제부터 서브페이지를 설명드릴 텐데 지금까지 따라 해 보셨다면 서브페이지는 쉽게 쉽게 만드실 수 있을 것입니다.

 

페이지 구성과 설정을 어떻게 할수 있는지 기능 위주로 설명드리겠습니다. 

모두 홈페이지 제작화면 제일 위쪽에 보면 아래 화면처럼 각 메뉴별로 섬네일을 볼 수 있습니다. 이 순서대로 메뉴가 나열된다고 보시면 됩니다.

지금까지 작업했던 메인 화면은 가장 처음에 있는 '홈'이란 타이틀의 섬네일입니다. 

1번 영역의 글자를 클릭하면 메뉴명을 직접 입력해서 변경해 줄 수 있습니다.

2번의 톱니바퀴 아이콘을 클릭하면 페이지의 노출 유무나 복제, 삭제할 수 있습니다. 일정을 관리하는 페이지가 필요 없는 분들은 '페이지 삭제'를 클릭해서 메뉴에서 없애버릴 수 있습니다. 

3번의 '+'버튼을 클릭하면  기존의 메뉴명 '문의하기'아래 새로운 페이지가 추가되어 총 2개의 페이지(서브메뉴)를 가지는 메뉴가 됩니다.

4번 영역을 좌우로 드래그하면 페이지의 순서를 정렬할 수 있습니다. 순서가 바뀌면 바뀐 순서대로 메뉴가 재 정렬됩니다. 

5번 클릭하면 아래 화면과 같이 페이지 추가 화면 팝업이 나타나며 이 부분에서 원하는 템플릿의 페이지를 선택해서 추가할 수 있습니다. (ex. 본인이 처음 선택한 홈페이지 템플릿에 견적 페이지가 없다면 이 부분에서 기능 페이지 쪽의 '문의/신청' 페이지를 추가해서 제작해 주면 됩니다.) 

각 메뉴별로 서브페이지를 제작하는 방법을 알아보겠습니다.

제작하기 원하는 페이지를 선택하면 모바일 화면이 관련 페이지 편집 화면으로 바뀝니다. 처음에는 내용이 비어있기 때문에 입력하기 원하는 영역을 클릭하면 오른쪽에 관련 정보와 설정이 나타납니다.

아래 그림은 사진 영역을 클릭했기 때문에 이미지 등록과 추가 설정을 할 수 있는 화면으로 바뀌었습니다.

사진의 경우 사진 위에 타이틀과 설명을 추가할 수 있으며 추가 설정 항목에서 타이틀의 크기나 테두리 설정이 가능합니다. 

 

제작 화면 왼쪽의 구성요소 추가 영역에서 모바일 화면에 다양한 구성요소(텍스트, 이미지, 지도, 버튼, 표, 동영상 등)를 추가할 수 있습니다. (주의하실 점은 모바일 화면에서 선택된 구성요소 바로 아래쪽에 추가된다는 점입니다.)

아래 화면에서 사진요소 하단에 위아래 화살표와 휴지통 등의 아이콘이 보일 것입니다. 위화살표 두 개는 현재 선택된 구성요소를 현재 페이지의 제일 상단으로 이동한다는 뜻입니다. 두 번째의 위 화살표 한 개는 바로 위의 구성요소 위쪽으로 이동한다는 뜻입니다. 마지막의 휴지통 아이콘은 삭제의 의미고 바로 왼쪽의 종이 두장은 선택된 구성요소를 복제해서 한 개 더 만든다는 의미입니다.  

나머지 구성요소 별반 다르지 않기 때문에 직접 해 보시면 쉽게 적용할 수 있을 것입니다.

두 번째 SNS 메뉴 섬네일을 클릭하면 블로그나 페이스북, 인스타그램에 자동 연결할 수 있습니다. 

나머지 서브페이지들은 직접 해보시면 문제없이 할 수 있을 것입니다. 

 

제가 만든 모두 홈페이지는 designtoolz.modoo.at입니다. 

홈 | DESIGN TOOLZ (modoo.at)

[DESIGN TOOLZ - 홈] DesignToolz만의 전문적이고 감각적인 서비스를 느껴보십시오

다들 무료로 '네이버 모두 홈페이지' 만드셔서 브랜딩도 하고 수익에도 큰 도움이 되길 바랍니다.  

감사합니다.