매뉴얼

디자인팜 1.0 [초보자용] 디자인 수정 방법 (메인화면 및 서브 페이지 공통)

 

 

디자인팜에서 웹페이지 수정이 이렇게 쉽습니다.

디자인팜은 기본적으로 반응형웹과 하이브리드 APP을 고려하여 설계 되어 있으며, html을 모르더라도 누구나 쉽게 웹페이지를 만들수 있도록 기획 되어 있습니다.

간혹, 디자인팜은 틀이 짜여져 있어서 수정하는데 한계가 있다라고 생각하시는 분들이 계시는데, 결론부터 말씀드리면 어떠한 웹페이지라도 99% 모두 자유자제로 수정 가능하도록 고급기능까지 갖추어져 있는 솔루션 입니다.

 

이번장에서는 html 을 모르는 사용자를 위주로 설명드고자 하며, 기본내용은 아래와 같습니다.

 - 모든 컨텐츠는 클릭만으로도 본문에 추가 됩니다.

 - 모든 컨텐츠는 반응형으로 제작되어 있으므로 모바일웹에 대해서 신경쓰실 필요 없습니다.

 - 모든 컨텐츠는 상하 자유롭게 드래그해서 옮길수 있습니다.

 - 모든 컨텐츠는 HTML을 자유자재로 수정 할 수 있습니다. (고급사용자용이며, 다음 강좌에서 따로 설명 드리도록 하겠습니다.)

 - 모든 컨텐츠는 Ctrl+C(복사), Ctrl+V(붙여넣기)가 지원되므로  얼마든지 재사용이 가능합니다. (현재 계정이 아닌 다른계정이더라도 Ctrl+V를 통해 쉽게 복사 할수 있습니다.)

 - 디자인팜에서 제공되는 레이아웃은 반응형 또는 일반형으로선택해서 사용할수 있습니다.

 - 100개가 넘는 다양한 프로그램 기능을 제공 합니다.

 

 

 

 

이번장에서는 메인화면을 수정하는 방법에 대해서 설명하고자 합니다.

아래와 같이 메인화면을 선택해주세요.

 

1. 고급관리자 모드에서 디자인팜을 실행해주세요.

 

 

 

2. [테마 관리]를 클릭 하고 해당 테마의 [수정]을 클릭하세요.

 

 

 

 

3.  테마 정보 수정 페이지에서  메인화면을 "새로 만들기"를 선택하고 저장 하세요.

 

 

 

4. 테마정보를 수정하였다면 아래 [메인화면] 페이지를 선택하세요.

 

 

 

5. 아래와 같은 화면이 나온다면 정상적으로 메인화면이 빈페이지로 만들어 진겁니다.

 

 

 

 

[메인화면]에 컨텐츠를 추가해 봅시다!!

 

본 강좌를 보기 전에 아래 강좌를 반드시 꼭 숙지 후 보세요.

 

- 홈페이지 시작! 1단계 테마란? : http://lab.anybuild.co.kr/bbs/faq/4318

- 테마 수정하는 방법 : http://lab.anybuild.co.kr/bbs/faq/4320

디자인팜이란? 레이아웃이란? 컨텐츠란? : http://lab.anybuild.co.kr/bbs/faq/4328

 

 

 

1. 메인 화면에 슬라이드를 추가해봅시다.

홍보형 홈페이지 90%는 메인에 큰 이미자가 옆으로 흘러가는 이미지를 많이 보셨을 겁니다.

이를 슬라이드 이미지라고 하며, 이번장에서 직접 만들어 보도록 하겠습니다.

 

 

- 왼쪽 컨텐츠박스에서 이미지 > 이미지리스트[슬라이드] 를 추가합니다.

아직 이미지가 없죠? 오른쪽 세부옵션에서 [1.이미지추가]를 클릭해서 이미지를 추가해줍니다.

 

 

 

 

- 밑에 [이미지추가]로 개수를 늘릴 수도 있고, 링크 값을 넣을 수도 있습니다. 

 

                         

 

 

 

 

 

- [적용]을 누르시면 바로 확인이 가능합니다. 슬라이드에 이미지가 잘 나오나요? 사이즈는 오른쪽에서 수치를 조정합니다.

 

 

 

 

 

여기까지 작업 하고 실제 홈페이지가서 확인해보면 빈페이지로만 나오게 되는데 실제 반영되려면 반드시  [홈페이지 적용] 버튼을 클릭해야지만 정상적으로 반영 됩니다.

 

 

 

중간 확인하기 : http://farmmanual2.anybuild.com/page/manual41

 

 

 


 

 

 

2. 공지사항 게시글 출력하기!

먼저 컨텐츠 박스에서 [반웅형레이아웃] > [3칸 레이아웃]을 클릭하면  페이지 가장 밑에 레이아웃이 추가됩니다.

 

 

 

 

이번에는 텍스트 타이틀을 추가 해줍니다.

컨텐츠 박스에서 [텍스트] > [타이틀텍스트] 를 클릭하면 페이지 가장 밑에 텍스트가 추가 됩니다.

 

추가된 텍스트를 클릭 해서 레이아웃 첫번째 칸으로 드래그해서 넣습니다.

 

 

그리고 텍스트를 "공지사항"이라고 바꿔줍니다.변경 방법은 해당 텍스트를 클릭 하고 우측 옵션창에서 수정 할 수 있습니다.

 

 

 

 

 

공지사항 타이틀을 추가했다면 바로 밑에 공지게시글을 불러올수 있도록 해보겠습니다.

컨텐츠 박스에서 [프로그램마법사 > 최근게시글 목록형]을 클릭합니다.

 

ps. 프로그램 마법사 탭 밑에 보면 "더보기"가 있습니다.  애니빌드에서는 다양한 프로그램이 지원되고 있으니 필요에 따라 추가 설치해서 사용 하시기 바랍니다.

 

추가된 최근게시글을  공지사항 타이틀 밑으로 드래그해서 옮깁니다.

 

 

 

 

최근게시글을 옮기고 나니 타이틀하고 너무 붙어 있네요.

보기 좋게 여백을 추가해보도록 하겠습니다. 이때 여백을 추가 하고 난뒤 PC버젼, 테블릿버젼, 모바일버젼 모두 각각 확인해보시기 바랍니다.

디자인팜에서 제공되는 모든 컨텐츠는 반응형을 기본으로 제작되더 있기때문에 여백추가로 인해 컨텐츠가 깨져 보일수도 있기 때문입니다.

오른쪽 세부옵션에서 컨텐츠 정렬에 TOP에 20px를 넣어줍니다.

 

 

 

 

 [적용]을 눌러주면 공지사항과 최근게시글 사이가 20px만큼 벌어집니다. 이렇게 컨텐츠간의 여백을 조절하시면 됩니다.

 

그리고 아래  디바이스 버튼을 통해 어떻게 출력되는지 확인해보시기 바랍니다.

 

 

 

 

중간 확인하기 : http://farmmanual2.anybuild.com/page/manual42

 

 

 


 

 

 

3. 이미지 배너를 추가 해봅시다.

이미지 배너를 추가해 봅시다. [메인화면]에서 제일 많이 사용되는 것이 게시글 출력 다음에 배너자나요?!

 

컨텐츠박스에서  [텍스트] > [타이틀텍스트] 클릭 해서 위에서 만든 "3칸 레이아웃"의 두번째 칸에 넣습니다.

그리고 "EVENT"라고 수정 합니다.  (수정방법은 위에서 설명했으므로 생략합니다. ^^)

 

컨텐츠 박스에서 [이미지] > [이미지] 2개를 추가해 볼게요.

 

이미지 추가 후 옵션창에서 실제 이미지 사이즈를 꼭 입력하세요.

디자인팜에서 제공되는 이미지는 대부분 썸네일 기능이 적용 되어 있습니다.

ps 썸네일 이미지란? 이미지의 실제 크기를 줄이는 방식 입니다.

예를들어 요즘 스마트폰으로 사진 촬영시 해상도가 3000px*3000px이며, 용량은 약 5MB 정도 됩니다.

이렇게 사이즈가 큰이미지를 단순히 사이즈만 가로200px, 세로200px로 변경해서 사용시 실제 용량이 줄어든게 아니기때문에 웹페이지 로딩하는데만 몇초가 걸릴수 있습니다. 이런 이미지가 만약 10개 정도 된다면 더더욱 느려지겠죠~~

이를 보안하기 위해 썸네일기능을 사용하게 됩니다.  만약 썸네일을 200px*200px로 설정 했다면, 실제 이미지의 사이즈를  200px*200px 으로 줄이기 때문에 용량 또한 줄어 들게 됩니다. 참고로 꼭 알고 계세요 ^^

 

필자는 이미지 사이즈를 330x76으로 설정하고 이미지를 업로드 하였습니다.

 

 

 

이미지 세부 옵션에  정렬, 여백, 링크정보등을 입력할수 있습니다.

여러분은 필요에 따라 직접 수정해보시기 바랍니다.

 

중간 확인하기 : http://farmmanual2.anybuild.com/page/manual43

 

 

 


 

 

 

4. 이미지리스트로 SNS공유하기 만들기!

 

컨텐츠박스에서  [텍스트] > [타이틀텍스트] 클릭 해서 위에서 만든 "3칸 레이아웃"의 마지막칸에 넣습니다.

그리고 "SNS 공유하기"라고 수정 합니다.  (수정방법은 위에서 설명했으므로 생략합니다. ^^)

 
컨텐츠 박스에서 [이미지] > [이미지리스트(타일형)]을 클릭 합니다.
 

옵션창에서 줄당 출력 수를 3개씩으로 하고 컨텐츠 가운데정렬을 해줍니다.

이미지 3개를 추가하고 제목을 입력해 줍니다. 저는 페이스북 / 트위터 / 카카오톡으로 했습니다.

필자는 임의로 SNS공유하기라고 했지만 여러분은 필요에 따라 다른 내용을 넣으셔도 됩니다. ^^

 

 

 

 

그리고 각 이미지를 클릭했을때 링크정보를 입력해주세요.

SNS 링크주소는 아래 매뉴얼 참고 바랍니다.

 

SNS연동하기 : http://manual.anybuild.co.kr/page/basic1_05

중간 확인하기 : http://farmmanual2.anybuild.com/page/manual44

 

 

 

 


 

필자는 정말 많이 사용되는 컨텐츠기준으로 설명드렸습니다.

나머지 컨텐츠 사용방법은 모두 위와 동일하기 때문에 추가 설명은 생락 하도록 하겠습니다.

위 강좌만 재대로 따라하셨다면 누구나 쉽게 모든 컨텐츠를 사용할수 있으리라 봅니다. ^^;;;;

 

수고 많으셨습니다.

 

 

게시글 공유 URL복사 cyworld
댓글작성

열기 닫기

댓글작성
top