처리중 처리중

공지사항

닷홈의 새로운 소식 및 공지를 확인해보세요!


[강좌] 닷홈 홈페이지빌더 강좌 - 5분만에 만드는 반응형 홈페이지 Step8. 메인화면 변경하기

  • 게시자 : 닷홈
  • 작성일 : 2015.04.20
닷홈 홈페이지 빌더 강좌 - 5분만에 만드는 반응형 홈페이지
Step8. 메인화면 변경하기
메인화면은 홈페이지에서 가장 많이 노출되는 중요한 부분이며
 
어떻게 꾸미느냐에 따라서 홈페이지 전체의 느낌이 달라집니다.

본 강좌에서는 메인화면을 꾸밀 수 있는 요소들을 하나씩 살펴보고 생성해 보겠습니다.




1. 레이아웃 설정하기

[관리자] > [메인화면] 으로 이동하여 최초로 설정해야 하는 것이 메인화면 레이아웃입니다.
슬라이드 (그림 모양), 위젯 (페이스 북마크). 게시판 (글 모양), html (div) 요소의 레이아웃이 네 가지 타입으로 정리되어 있습니다.
사용하고 싶은 레이아웃을 선택하고 저장을 합니다.

 

메인화면 레이아웃 설정하기

 

 

 

2. 슬라이드 이미지 생성하기 

 

이미지 업로드와 텍스트 문구를 입력할 수 있도록 설정되어 있습니다.

각각의 이미지에 설정 영역이 탭 형식으로 나누어져 있으며,
탭 제목에 ON/OFF 버튼이 있어 간편하게 활성화 여부를 설정할 수 있습니다.


슬라이드 1번 설정을 변경해 보겠습니다.

 

슬라이드 1번을 ON으로 설정된 상태에서 텍스트 문구를 입력합니다.

텍스트 문구 중 상단 입력창은 타이틀 하단 입력창은 설명내용입니다.  

텍스트를 입력하지 않을 경우 해당 슬라이드에 문구가 노출이 되지 않습니다.

 

이미지를 업로드하기 위해 "Upload from Browser" 버튼을 클릭합니다.

 

슬라이드 이미지 생성하기


샘플 이미지에서 slide1.jpg 파일을 선택합니다.

이미 업로드한 이미지의 경우 "Select photo from library" 를 이용해 기존의 저장된 이미지를 다시 호출할 수 있습니다.


사용자컴퓨터에서 이미지 불러오기

 

저장을 하면 아래와 같이 미리 보기 화면에 변경된 이미지가 나타납니다.

최종적으로 확인 후 저장을 합니다.
(slide2, slide3.... 이미지들도 동일한 방법으로 등록을 합니다)


미리보기 화면 확인하기



3. 게시판 메인화면 출력하기


 

 

생성된 게시판 내용을 메인 페이지에 노출할 수 있습니다.

각 게시판 스타일 별로 다양하게 메인화면에 노출이 됩니다.

 

메인화면 게시판 설정 항목에는 기본적으로 설정된 게시판 목록들이 있습니다.

새롭게 생성한 게시판을 적용해 보기 위해 기존의 게시판 항목들을 삭제합니다.

(게시판 메인 목록이 삭제되는 것입니다. 게시판 자체가 삭제되는 것은 아닙니다.)

 

게시판 메인화면 출력하기

 

 

게시판 이름 클릭 후 보이는 목록 중 이미지 갤러리를 선택하고 출력 개수를 8개로 조정하고 추가 버튼을 누릅니다. 

 

이미지 갤러리 선택 후 출력갯수 조정하기

 

목록에 이미지 갤러리 게시판이 추가 되었습니다.

이로써 이미지 게시판은 메인화면 게시물 영역에 노출됩니다.

노출된 게시판이 여러 개일 경우 목록 우측에 위아래 화살표를 이용하여 노출 순서를 변경할 수 있습니다.

 

 

이미지 갤러리 게시판 추가완료



4.위젯 메인화면에 출력하기


위젯도 게시판과 마찬가지로 기존에 세팅되어있는 위젯 항목들을 삭제합니다.


위젯 메인화면에 출력하기

 

 

위젯 목록이 삭제되면 이전시간에 만든 유튜브를 추가하기 위해 위젯 이름 영역에서 유튜브 항목을 선택합니다.
"Miss A(미쓰에이) - Only You(다른 남자 말고 너)" 선택한 후 추가 버튼을 누릅니다.


위젯을 유투브항목 선택하기

 

 

위젯 항목에 "Miss A(미쓰에이) - Only You(다른 남자 말고 너)" 동영상이 추가되었습니다.

위젯 항목에 동영상 추가완료



홈페이지를 확인하면 슬라이드와 유튜브, 갤러리 게시판이 노출되어 있는 것을 확인할 수 있습니다. 


홈페이지에서 슬라이드, 유투브, 갤러리 게시판 노출 확인

 

"닷홈 홈페이지 빌더 강좌 - 5분만에 만드는 반응형 홈페이지"  

강좌가 마무리되었습니다.

​닷홈 홈페이지빌더를 이용해서 좀 더 다양한 홈페이지를 제작해보고 싶다면

공식 빌더 매뉴얼 사이트를 방문해 주십시오.

 

 

 

 

 


 

닷홈 빌더 공식 매뉴얼 사이트

http://helpdesk.zoiweb.com


빌더 카페(닷홈|스터디)

http://cafe.naver.com/dothomebuilder


닷홈 공식 페이스북

https://www.facebook.com/dothome.co.kr