매뉴얼

친절한 상담, 빠른 답변

견적문의, 기능상담 등 모든 궁금증을 해결해 드립니다.

Page : Home 고객지원 매뉴얼

총 9건, 1/1 페이지

[디자인팜 2.0] 디자인팜2.0 계정 생성 방법

디자인팜 2.0으로 계정을 생성하는 방법에 대해서 말씀드리겠습니다.

디자인팜 2.0으로 계정을 생성하는 방법은 크게 2가지 방법이 있습니다. 

사용자가 직접 홈페이지에서 디자인팜 2.0템플릿을 구매를 하는 방법이 있고,

관리자가 직접 디자인팜 2.0으로 설치를 하는 방법이 있습니다.

관리자의 경우는 또다시 두가지 방법으로 나뉘는 데요...

하나는 디자인팜2.0으로 생성을 하는방법이고 또 다른 하나는 매직템플릿에서 디자인팜 2.0으로 제작된 템플릿을 선택하는 방법입니다.

이번 생성방법은 관리자 페이지에서 생성하는 두가지 방법에 대해서 설명을 드리도록 하겠습니다.

 

마스터 관리자 모드로 로그인 후  [마스터 관리 > 홈페이지관리 > 홈페이지 만들기]를 클릭 합니다.

디자인팜 2.0으로 제작을 하는 방법은 위의 홈페이지 생성 방식에서 디자인팜2.0을 선택을 하거나 매직템플릿에서 선택을 하셔서 설치를 하시면 됩니다 

디자인팜 2.0으로 생성을 하시게 되면 빈화면이 나오며 메인 및 세부페이지를 원하시는 형태로 제작이 가능합니다. 

매직템플릿을 선택을 해서 생성을 하게되면 이미 제작해 놓은 템플릿을 선택을 해서 간단하게 생성을 할 수 있습니다.

 

 

먼저 디자인팜 2.0으로 생성하는 방법을 말씀드리겠습니다.

홈페이지 생성방식에서 디자인팜 2.0을 선택을 합니다 

그리고 원하는 형태를 선택합니다. 홍보형부터 뉴스기사까지 있는데요..

원하시는 형태를 선택을 하시기 바랍니다. (디자인팜2.0 솔루션 유형은 선택 이후 변경이 불가능하므로 신중하게 선택하시기 바랍니다.)

형태를 선택을 한뒤 기본정보(아이디, 비밀번호, 사이트명등)를 기재를 하시고 홈페이지 계정 만들기를 클릭합니다.

 

 

홈페이지 계정만들기를 클릭 후 일정시간이 지나면(최장 5분가량 소요가됩니다.) 메시지가 뜨면서 홈페이지 계정이 생성이 됩니다.

(※ 홈페이지 계정이 생성되는 동안 다른페이지로 넘어가거나 창을 닫게되면 제대로 생성이 되지 않으니

반드시 아래와 같은 메시지가 나타날때까지 기다려주시기 바랍니다.)

 

 

 

이번에는 매직템플릿을 이용한 디자인팜 2.0생성 방법에 대해서 설명하도록 하겠습니다.

 "매직 템플릿 선택"을 선택한 후, 우측에 있는 [타사 템플릿 선택]을 클릭합니다.

 

 

 

 

아래와 같이 새창으로 템플릿 목록이 출력됩니다.

상단 검색부분에서 디자인 팜 제작여부에 디자인팜으로 제작을 선택 후 검색을 하시면 디자인팜으로 제작된 내역이 출력이 됩니다.

검색된 내여에서 템플릿명이 디자인팜 2.0으로 시작하는 템플릿 중 마음에 드는 템플릿을 선택을 해주시기 바랍니다.

(템플릿명에 디자인팜2.0이 들어있는지 확인한 이후 생성해주세요.)

 

 

 

 

템플릿을 선택을 하면 아래와 같이 선택된 템플릿 이 표시가 됩니다. 

(잘못 선택을 하셨다면 다시 타사 템플릿 선택에서 원하는 형태의 템플릿을 선택하시기 바랍니다. )

선택한 템플릿 내역 확인 하신뒤 기본정보(아이디, 비밀번호, 사이트명등)를 입력을 하시고  홈페이지 계정만들기를 하시면 됩니다.

 

 

홈페이지 계정만들기를 클릭 후 일정시간이 지나면(최장 5분가량 소요가됩니다.) 메시지가 뜨면서 홈페이지 계정이 생성이 됩니다.

(※ 홈페이지 계정이 생성되는 동안 다른페이지로 넘어가거나 창을 닫게되면 제대로 생성이 되지 않으니

반드시 아래와 같은 메시지가 나타날때까지 기다려주시기 바랍니다.)

 

홈페이지 계정생성이 완료가 되었으면 마스터관리 > 홈페이지 관리 > 홈페이지 관리에서 생성한 홈페이지를 확인하실 수 있습니다.

 

감사합니다.

 
[디자인팜 2.0] 메뉴 추가/수정 방법 안내

디자인팜 2.0으로 제작된 홈페이지의 메뉴부분이 추가,수정,삭제 방법에 대해서 말씀드리겠습니다.

먼저 디자인팜2.0의 메뉴에 대한 추가/수정은 디자인팜 2.0을 실행을 먼저 하셔야 됩니다. 

 

관리자 페이지 접속을 하셔서 디자인 관리를 클릭 후 디자인팜2.0실행 버튼을 클릭합니다.

 

디자인팜 2.0실행 버튼을 클릭을 하면 새로운 창이 하나 뜰건데요...

거기서 메뉴관리를 클릭합니다

 

 

메뉴관리를 클릭을 하면 아래와 같은 화면이 나옵니다 여기서 대메뉴 추가를 클릭을 해서 대메뉴를 추가를 하도록 하겠습니다.

아래의 이미지에서 대매뉴 추가 버튼을 클릭하시기 바랍니다.

 

대메뉴는 2가지 유형중 선택을 할 수 있는데요...

일반적인 대메뉴와 URL직접입력이 있습니다.

일반 대메뉴는 메뉴추가를 통해서 생성가능한 페이지를 만들때 사용을 하시면 됩니다. 

URL직접 입력은 외부URL을 참고하거나 메뉴추가를 통해서 생성이 불가능한 페이지 링크를 걸떄 사용을 합니다.

일반 대메뉴를 선택을 하면 대메뉴명만 기재가능하도록 됩니다.

 

URL 직접입력의 경우는 대메뉴명과 함께 URL을 입력하는 공간이 나옵니다.

 

 

일반 대메뉴를 생성을 하면 아래와 같이 나옵니다. 

 

 

여기서 대메뉴부분에 마우스를 가져다가면 아래과 같이 메뉴가 나옵니다.

대메뉴명옆에 톱니바퀴는 대메뉴설정을 변경하는 페이지로 이동이 되며,

<>표시는 대메뉴이동을 말합니다 여러개의 대메뉴가 있을때 순서를 조정하기 위한 버튼입니다.

아래부분에 페이지 추가는 대메뉴안에 하위메뉴를 추가를 하는 기능입니다.


 

 

URL 직접입력을 하게 되면 아래와 같이 나옵니다. 

대메뉴의 설정이나 위치이동은 가능하나 하위메뉴는 추가를 할 수가 없으니 참고하시기 바랍니다.

 

대메뉴 설정버튼을 눌렀을때는 아래와 같이 나옵니다. 

대메뉴의 유형은 등록할때만 가능합니다. 설정에서 수정을 한다고 하더라도 유형은 변경이 불가능합니다.

이점 유념하시기 바랍니다.

 

 

대메뉴추가시 pc웹 디자인 설정은 각 스킨마다 설정하는 내용이 달라 각 스킨을 참고하시기 바라며

우측에 썸네일 이미지에 마우스를 올리면 노출되는 위치가 표시가 되니 해당 썸네일을 참고하셔서 기재를 해주시면 됩니다. 

 

 

 

그럼 이제는 대메뉴안에 하위메뉴를 생성하는 방법에 대해서 말씀드리겠습니다.

대메뉴추가시 일반휴형으로 등록을 하셔야지만 하위메뉴 생성이 가능하며, URL 직접입력으로는 하위메뉴 생성이 되지 않습니다. 

이점 유념하시기 바랍니다. 

하위메뉴 출력할 대메뉴에 마우스를 올려서 페이지 추가버튼을 클릭을 하시기 바랍니다.

 

 

페이지 추가를 클릭했을때 나타나는 화면입니다.

상단에는 메뉴유형을 선택할 수 있습니다. 

일반메뉴는 디자인팜내에 존재하는 페이지를 추가를 할때 사용을 하며

URL직접 입력은 외부URL을 걸거나 디자인팜내에 존재하지 않는 페이지를 링크를 걸때 사용을 합니다. 

일반 메뉴의 경우는 빈페이지를 생성을 할 수도 있고 기본적으로 제공하는 페이지를 추가를 하는 방법이 있습니다. 

하단에 있는 탭을 클릭을 하면 여러 유형의 디자인을 확인을 할 수 있으며, 썸네일 이미지에 마우스를 가져다가면 

큰화면으로 내용을 확인을 하실 수 있습니다.

 

 

필자는 여기서 인사말, 오시는길, 연혁을 추가하고자 합니다. 

먼저 인사말부터인데요..메뉴유형은 일반메뉴 페이지명은 인사말 그리고 인사말탭에 가서 원하는 형태의 디자인을 선택을 하고 만들기를 클릭합니다.

 

 

이렇게 생성을 하면 아래와 같이 인사말이 추가가 됩니다. 

 

 

동일한 방법으로 연혁, 오시는길도 추가를 하면 아래와 같이 노출이 됩니다. 

 

 

위와 같은 방법으로 대메뉴 및 하위메뉴를 추가를 하면 아래와 같은 메뉴구성을 할 수 있습니다.

그럴듯 한 홈페이지 메뉴구성이 만들어졌는데요...천천히 따라하다보면 아래와 같은 구성으로 

금방 만드실 수가 있습니다.

 

감사합니다.

 

 

[디자인팜 2.0] 블럭 추가/수정/삭제 방법

이번장은 블록추가/수정/삭제부분에 대해서 말씀드리겠습니다. 

디자인팜 2.0에서 사용하는 블록이라고 하는것은 디자인의 최소단위를 말합니다. 

블록부분이 쌓여서 메인페이지, 추가페이지를 제작을 할 수 있습니다. 

이러한 블록의 추가, 수정, 삭제 부분에 대해서 알아보도록 하겠습니다.

 

디자인팜2.0을 실행 후 내용출력되는 부분 제일 하단에 보시면 아래와 같이 블록추가라는 버튼이 있습니다.

이 버튼을 통해서 블럭을 추가를 할 수 있습니다. 블록추가 버튼을 클릭하시기 바랍니다.

   

 

 

블록추가버튼을 클릭을 하면 아래와 같은 화면에 나타나는데요...

블록은 기본적으로 디자인블록, 페이지블록, 블록즐겨찾기, 삭제한 블록복원 이렇게 4가지의 메뉴가 있습니다.

각각에 대해서 설명드리도록 하겠습니다.

   

 

 

1. 블록 추가하는 방법

1) 기본블럭

"기본블록"은 컨텐츠가 들어있지 않은 기본 레이아웃 1개 블록입니다.

사용하실 블록을 선택 후 "블록추가" 버튼을 클릭하면 블록이 추가됩니다.

<블록추가 팝업창화면>

 

<기본블록 추가된 사용자화면>

 

 

2) 디자인블록

"디자인블록"은 컨텐츠가 들어있고 디자인이 완료되어 있는 1개 블록을 말합니다.

"블록 추가"버튼을 클릭하고 디자인 블록을 선택 후 블록추가버튼을 클릭하면 해당 디자인된 블록이 추가가 됩니다.

디자인블록에는 디자인블록 이외에 설명안내블록, 지도 및 오시는길 블록등 여러 유형의 블럭을 종류별로 모아놓았습니다.

원하시는 형태의 블럭을 추가하시면 됩니다.

<디자인블록 선택화면>

 

 

디자인블록이 설치가 완료되면 아래의 이미지와 같이 디자인이 완성된 블록 1개가 설치됩니다.

<디자인블록 설치 완료화면>

 

 

 

3) 페이지블록

"페이지블록"은 디자인 작업이 완료되어 있는 여러개의 디자인블록이 모여 페이지를 이루고 있는 블록입니다.

페이지블록에서 원하시는 형태의 디자인을 설치하기버튼을 클릭을 하면 해당 페이지에 설치가 됩니다. 

썸네일에 마우스를 올리면 큰 화면을 보실 수 있으며 pc웹 미리보기를 통해서 디자인된 내역을 자세하게 확인이 가능합니다.

<페이지블록 선택화면>

 

페이지블록 설치하기를 클릭하면 아래와 같이 나타납니다. 

<페이지블록 설치완료 화면>

 

 

2. 블록 즐겨찾기 기능 사용방법

마음에 드는 디자인블록 또는 직접만든 나만의 블록 이 모든블록들은 블록별로 즐겨찾기 저장할 수 있습니다.

저장된 즐겨찾기 블록은 저장되었던 블록을 그대로 설치하여 다음에 다시 사용하기 편리하도록 지원하고 있습니다.

즐겨찾기를 하고싶은 블록에 마우스를 올리면 아래의 이미지처럼 설정 버튼이 나옵니다. 해당 버튼에서 "★" 버튼을 클릭합니다.

<블록 즐겨찾기 화면>

 

 

저장된 블록은 "블록 추가" 팝업창에서 확인이 가능합니다.

사용하실 즐겨찾기 블록을 선택하고 "추가" 버튼을 클릭하여 설치 하시면 됩니다.

<블록추가 팝업창>

 

 

[블록 수정]

블록 수정을 통해 레이아웃칸, 배경색상, 블록별 상하간격, 셀 배경색상등 블록의 모든 내역을 조정할 수 있습니다.

수정하실 블록에 마우스를 가져다가면 아래의 화면처럭 우측에 블록관련 정보가 뜨는데요 톱니바퀴모양의 수정버튼을 클릭합니다.

 

 

- 수정 버튼을 클릭하시면 아래와 같이 팝업창이 나옵니다.

<블록설정 팝업창>

1) 블록과 셀을 설정하고 디자인할 수 있는 부분입니다.

2) 태블릿화면과 모바일 화면상에 나타날 레이아웃 모양을 선택할 수 있습니다.

 

 

1. 블록설정

<블록설정 팝업창의 옵션화면>

1) 블록형태

반응형은 태블릿, 모바일화면의 레이아웃을 설정하여 기기별로 레이아웃을 선택할 수 있습니다.

가로 Full을 선택하시면 출력화면에서 화면 사이즈에 맞춰 최대로 출력합니다.

(선택을 하지않을 경우 스킨에 설정되어 있는 가로값으로 자동 설정됩니다.)

 

2) 간격

셀사이 간격은 블록 내부에 있는 셀끼리의 사이를 뜻합니다.

블록 상/하 간격은 블록의 위아래로 간격을 적용할 수 있습니다.

즉, "셀사이 간격"을 10으로 주고 "블록 상/하 간격"을 20px로 줬다고 가정하면 아래의 이미지와 같이 설정됩니다.

<간격 적용 화면>

녹색배경 : 셀사이 간격 10px

노란배경 : 블록 상/하 간격 20px

 

 

3) 블록배경

컬러배경에서 색상을 지정하거나 이미지배경에서 이미지를 적용하시면 해당 블록에만 적용됩니다.

컬러배경과 이미지배경 모두 적용한 경우에는 이미지배경의 우선순위가 높기 때문에 이미지 배경이 노출됩니다.

아래 적용이미지는 컬러배경은 "연두색" 이미지배경은 "폭죽놀이의 이미지"을 배경으로로 적용한 예시입니다. 이미지배경이 노출되고있죠?

 

설정된 블록의 배경이나 이미지를 초기화를 하실려면 블록배경아래부분에 초기화 버튼을 클릭을 해서 초기화 처리를 해주시면 됩니다.

 

 

2. 셀 설정

<블록 설정 팝업창의 옵션화면>

 

1) 셀 합치기

기본 블록을 설치하면 셀이 6칸으로 설정되어 있습니다.

각 셀을 합치거나 나누기를 해서 원하는 형태로 구성이 가능합니다. 

셀을 합치려면 합할 셀들을 마우스로 드래그해 선택하고 [셀합치기] 버튼을 클릭하시면 됩니다.

아래의 화면은 1, 2, 3 셀을 합하는 화면입니다.

<블록 설정 팝업창의 옵션화면>

  

 

 

셀 합치기가 완료되면 6칸의 기본레이아웃에서 아래 이미지와 같이 4칸 레이아웃으로 수정이됩니다.

<셀 합치기 결과화면>

 

 

2) 셀 나누기

셀 나누기는 선택된 셀을 나누는 기능입니다.

나눌 셀을 마우스로 선택을 하고 "셀 나누기" 버튼 클릭 후 "블록 수정"버튼을 클릭합니다.

<블록 설정 팝업창의 옵션화면>

 

 

셀 나누기가 완료되면 4개의 레이아웃에서 아래의 이미지와 같이 5개의 레이아웃으로 수정됩니다.

<셀 나누기 결과화면>

 

 

3) 셀 너비를 같게

선택된 셀의 너비를 같게 조정합니다.

간격조정을 수정할 셀을 드래그해서 선택하고 "셀 너비를 같게" 버튼을 클릭합니다.

<블록 설정 팝업창의 옵션화면>

 

수정이 완료되면 넓이가 달랐던 각 셀들이 아래의 이미지와 같이 수정됩니다.

<"셀 너비를 같게" 완료 화면>

 

 

4) 셀 배경 지정

각 셀마다 배경을 따로따로 지정할 수 있습니다. 배경을 변경할 셀을 선택을 한뒤 컬러배경 및 배경이미지를 등록을 하시면 해당 셀의 배경이 지정이 됩니다.

* 셀에서도 블록배경과 마찬가지로 두가지 모두 사용할 경우 이미지 배경이 우선시 됩니다.

<셀별 색상지정 완료 화면>

 

 셀 배경 삭제는 셀 설정 하단에 있는 "선택된 셀의 컬러배경 삭제(초기화)", "선택된 셀의 이미지배경 삭제(초기화)" 버튼을 클릭하면 초기화 됩니다.

 

 

[블록 삭제]

삭제를 원하는 블록에 마우스를 올려 우측에 휴지통모양을 클릭을 하면 해당 블록이 삭제가 됩니다.

삭제를 한 블록은 블록추가에서 휴지통에 보관을 하고 있으니 잘못 삭제한 블록은 블록추가에서 휴지통을 클릭 후 복구를 하시면 됩니다.


1. 블록 삭제

삭제할 블록에 마우스를 올리면 아래의 이미지와 같이 우측에 휴지통 옵션이 있습니다. 삭제 버튼을 클릭하면 해당 블록이 삭제됩니다.

 

2. 삭제한 블록 복구

잘못삭제를 하였거나 기존의 삭제한 내용을 복구를 할 경우에 사용하는 기능입니다.

블록추가버튼을 클릭 후 휴지통 모양을 클릭후 삭제된 블록을 클릭을 하신뒤 복원버튼을 클릭을 하시면 됩니다.

(※ 삭제된 블럭은 휴지통에 보관이 되며 1일이 지나면 휴지통에서도 제거가 되며,

휴지통에서 제거된 블럭은 복구가 불가능하니 이점 참고하시기 바랍니다.)

<블록 추가 팝업창>

 

이상 블록의 추가, 수정, 삭제에 대해서 알아 봤습니다.

블록은 디자인팜2.0에서 가장 기본적으로 구성되는 디자인형태입니다. 

이 블록이 쌓이고 쌓여서 메인페이지 혹은 서브페이지로 구성이 되는데요...

블록을 잘 활용하시면 다양한 형태의 홈페이지를 구성 할 수 있으니 천천히 살펴보시기 바랍니다.

 

감사합니다.

[디자인팜 2.0] 스킨 변경 방법 및 소스 수정

이번장은 스킨변경 및 스킨소스 수정에 대해서 말씀드리겠습니다. 

스킨이라고 함은 홈페이지의 외각디자인을 말합니다. 본문이 출력되는 부분을 제외한

상,하단부분 혹은 좌측부분까지를 말하며, 이 스킨을 간단하게 클릭만으로 다른 스타일의 레이아웃으로 변경이 가능합니다.

 

[스킨변경]

디자인팜 2.0을 실행을 한뒤 상단에 보면 스킨관리라는 버튼이 있습니다. 이 버튼을 클릭을 해서 스킨을 변경 할 수 있습니다.

스킨은 홈페이지의 유형에 맞게 출력됩니다. 현재 홈페이지 유형이 "제품소개"일 경우에 다른 유형(쇼핑몰전용스킨, 홍보용스킨등)의 전용스킨은 출력되지 않습니다.

(즉, 다른 유형의 홈페이지에 있는 스킨이 해당 홈페이지에는 없을 수도 있습니다.)

 

<스킨 선택화면>

1) 스킨 레이아웃의 유형을 선택할 수 있습니다.

- 와이드형 : 메인&서브페이지 스킨이 상하단에 배치됩니다.

- 와이드+좌측메뉴형 : 메인페이지 스킨은 상하단에 배치되고 서브페이지는 좌측에 메뉴가 추가됩니다.

- 와이드+우측메뉴형 : 메인페이지 스킨은 상하단에 배치되고 서브페이지는 우측에 메뉴가 추가됩니다.

- 좌측 메뉴형 : 메인&서브페이지 좌측에 메뉴가 생성되어 있습니다.

- 모바일웹 : 모바일 스킨을 확인하실 수 있습니다.

2) 스킨컬러로 해당 컬러를 가지고 있는 스킨을 확인할 수 있습니다. 자세한 부분은 아래에서 설명드리겠습니다.

 

 

1. 스킨 선택

1) 유형별 스킨찾기

- "스킨 관리"를 클릭하면 아래와 같이 팝업창이 나옵니다. 현재 선택되어 있는 스킨은 Skin. 796입니다. 스킨 Skin.745로 변경해보도록 하겠습니다.

- Skin. 745를 클릭합니다.

<스킨 선택 팝업창>

 

변경할 스킨을 클릭하면 아래와 같이 색상선택을 하는 팝업창이 나옵니다.

한스킨에 색상을 여러개 포함하고 있습니다. Skin. 745는 5가지의 색상을 가지고 있습니다.

메인 및 서브보기를 통해서 적용할 스킨의 설치된 디자인을 확인 하신후 원하시는 색상으로 "스킨설치"버튼을 클릭합니다.

<스킨 색상선택화면>

 

설치가 완료되면 해당 홈페이지를 확인합니다.

<브라우저 실제화면>

 

 

2) 유형별&색상별 스킨찾기

레이아웃 와이드형을 선택하고 스킨컬러에서 녹색 동그라미를 클릭합니다.

선택이 완료되면 스킨 리스트에 와이트형이고 녹색색상을 가진 스킨이 나열됩니다.

Skin. 759 스킨을 클릭하여 녹색색상 스킨을 설치해 보겠습니다.

 

<스킨 관리 - 와이드형+녹색스킨을 보유한 스킨 화면>

Skin. 759도 5가지의 색상을 가지고 있습니다. 5가지중에 Skin. 759-95 녹색스킨을 설치합니다.

 

<Skin. 759의 색상리스트>

 

설치가 완료되면 아래의 이미지처럼 실제 브라우저에서 녹색스킨의 레이아웃이 자동생성 됩니다.

<브라우저 실제화면>

 

 

3) 스킨별 옵션 확인 및 변경

스킨별로 로고변경이나 일부 디자인 변경이 가능합니다.

현재 적용된 스킨의 하단에 스킨옵션설정을 클릭을 하셔서 스킨의 옵션을 변경하시면 됩니다. 

(각 스킨마다 변경되는 내용이 다를 수 있으니 참고하시기 바랍니다.)

 

 

 

현재 적용된 스킨은 상단 팝업이미지, 팝업이미지 링크값, 상단로고, 하단로고 이렇게 변경이 가능한 스킨이네요..

해당 스킨에서 로고부분을 변경을 한다면 우측에 상단로고부분에 로고이미지를 등록을 해주시면 됩니다. 

우측의 내역을 변경을 좌측의 동일한 번호에 기재된 내역이 변경이 되니 참고하시기 바랍니다.

<스킨 옵션 설정팝업창>

1) 스크린샷의 좌측은 옵션변경시 변경되는 부분을 나타내고 있습니다.

2) 옵션 리스트입니다. 1-상단 팝업 이미지는 스크린샷 좌측 상단에 빨간박스 1번을 가리키고 있습니다.

 

- 이미지를 등록하고 실제 브라우저 화면을 확인하시면 로고가 봐뀐것을 확인할 수 있습니다.

<로고가 변경된 브라우저 실제화면>

 

 

 

 

[스킨 소스수정모드]

스킨의 경우 로고 및 간단한 문구만 변경이 가능합니다. 

만약 스킨을 일부 수정을 해야될 필요가 있으면 스킨 수정모드로 가셔서 수정을 하시면 됩니다. 

스킨 소스 수정모든는 소스기반으로 제공이 되며, html파일 및 css 파일을 직업 수정을 해서 원하시는 형태의 디자인으로 만드시면 됩니다.

 

1. [소스 수정 모드]로 변경&수정

현재 적용되어있는 스킨 하단에 보면 [소스수정모드]로 전환버튼이 있습니다. 

이 버튼을 클릭하면 소스기반으로 스킨 수정이 가능하게 됩니다.

 

[소스 수정 모드]로 변환이 되면 아래와 같이 스킨 관리 팝업창이 전환됩니다.

스킨소스는 pc쪽 스킨과 모바일쪽 스킨을 수정을 할 수 있습니다. 

수정할 스킨항목을 선택을 해서 원하시는 위치에 소스기반으로 수정을 하시면 됩니다.

<[소스 수정 모드]로 변환된 스킨관리 팝업창 화면>

   

 

css나 js파일의 경우는 각 스킨우측상단에 css소스를 클릭하면 해당 페이지에 적용되어있는 css나 js파일을 확인하실 수 있습니다.

CSS소스 버튼을 클릭을 해서 css및 js파일을 수정하시기 바랍니다.

 

 

2. [스킨 선택 모드]로 변경

소스 수정모드로 작업을 하다가 잘못작업을 하여 이상하게 출력이 된다거나 더이상 소스수정방식이 불필요한 경우 

다시 스킨선택모드로 돌아갈 수 있습니다. 

[소스 수정 모드]에서 [스킨 선택 모드]로 변경하게 되면 기존의 소스수정드에서 작업한 내역은 모두 삭제처리가 되며 이전상태로 복구가 불가능하니

신중히 작업을 해주시기 바랍니다.

 

- 변경이 완료되면 아래의 이미지와 같이 기존의 스킨 선택모드로 돌아옵니다.

 

이상 스킨변경에 대해서 설명을 드렸습니다.

스킨이라면 디자인팜2.0에서 뼈대를 이루는 구조로서 클릭몇번만으로 홈페이지 스타일을 다르게 변경을 할 수 있는 장점이 있습니다. 

지속적인 스킨형태를 추가를 해서 보다 다양한 형태의 스킨을 선택가능하도록 노력하겠습니다.

 

감사합니다

[디자인팜 2.0] 컨텐츠 추가/수정/삭제 방법 안내 (소스 수정 방법 안내)

이제 디자인팜2.0의 컨텐츠 추가 및 수정 방법에 대해 알려드릴 차례입니다^^

디자인팜 내에서의 컨텐츠라고 하면, 사이트 레이아웃(스킨)을 제외한 컨텐츠 페이지를 구성하는 요소이며 쉽게 설명드리자면 컨텐츠 덩어리라고 생각하시면 됩니다.

현재 디자인팜에서 기본적인 컨텐츠들을 제공하고 있으며 이 컨텐츠들을 조합하면 메인화면 또는 서브 메뉴 페이지가 완성이 됩니다.

그럼 컨텐츠 추가 및 수정&삭제 방법에 대해 설명해 드리도록 하겠습니다.

 


 

1. 컨텐츠를 추가 할 페이지 선택

처음 디자인팜2.0을 실행하면 메인화면을 선택하는 팝업창이 먼저 나타납니다.

이 때, 기존에 제공되는 메인화면을 선택하지 않고 나만의 메인화면 또는 서브 페이지를 만들고 싶다면 메인화면 팝업창을 닫아 주세요. 그럼 아래와 같은 화면이 보일 것 입니다.

 

 

메인화면 선택 창을 닫고 나면 빈 메인화면 페이지가 나타납니다. 만약 메인화면이 아닌 다른 페이지의 화면을 편집하고 싶으시다면 상단에 있는 '메뉴관리' 버튼을 눌러주세요.

그럼 아래와 같이 페이지를 선택 할 수 있는 메뉴화면이 나타날 것 입니다. 메뉴를 등록한 상태라면 아래처럼 메뉴들이 나타날 것이고, 만약 메뉴가 등록되지 않은 상태라면 '대메뉴 추가' 후 '페이지 추가'를 해서 작업 할 메뉴 페이지를 생성해 주시면 됩니다.

그리고 생성된 메뉴명을 클릭하시면 해당 페이지의 편집화면으로 이동됩니다^^

 

 

 

2. 컨텐츠를 넣을 블록 추가

컨텐츠를 넣기 위해서는 반드시 블록이 필요합니다. 페이지에 아무것도 없는 상태에서는 컨텐츠가 설치되지 않으며, 컨텐츠를 담을 그릇인 블록을 먼저 추가해 주셔야 컨텐츠를 설치 할 수 있습니다.

우선 기본 블록을 추가해 보겠습니다. ( 블록 추가에 대한 자세한 설명은 여기서 봐주세요^^ ☞ 블록 추가방법 )

 

 

처음 기본 블록을 추가하면 6칸짜리의 블록이 기본으로 생성이 됩니다. 저는 컨텐츠를 3칸 넣을 예정이기 때문에 블록의 칸을 3칸으로 만들도록 하겠습니다.

블록의 칸을 수정한 후 우측의 블록 출력형태 선택에서 모바일과 태블릿별로 원하는 레이아웃을 선택해 주세요. 이렇게 선택된 레이아웃은 실제 페이지 화면에서 브라우저 크기를 줄였을 때

선택된 모양대로 레이아웃이 변화합니다. 반응형으로 제작하시는 분들은 반드시 원하는 형태를 선택해 주셔야 해요^^

 

 

 

3. 컨텐츠 추가

컨텐츠를 넣는 방법은 2가지가 있습니다.

첫 번째, 좌측의 기본 컨텐츠 넣기

두 번째, 디자인 블록에 등록된 컨텐츠를 활용

 

좌측의 기본 컨텐츠 넣기는 주로 서브 페이지를 편집 할 때 많이 사용됩니다. 텍스트, 이미지, 표 등을 이용하면 설명 또는 안내 페이지가 손쉽게 완성되기 때문입니다.

그리고 디자인 블록이 등록된 컨텐츠를 활용하는 것은 완성되어 있는 컨텐츠들을 가져와 블록에 배치하면 페이지가 완성되는데 손쉽게 퀄리티 높은 메인화면, 서브 페이지를 만들 수 있습니다.

 

3-1. 좌측의 기본 컨텐츠를 넣는 방법

우선 좌측의 기본 컨텐츠 넣기부터 설명해 드리겠습니다^^

좌측에 제공되는 기본 컨텐츠들은 컨텐츠명 클릭 후 마우스 오른쪽 버튼을 누른 상태로 드래그(끌어오기)를 해서 원하는 블록 칸 안에 넣어주시면 컨텐츠가 설치됩니다.

만약 원하는 블록 칸이 아닌 다른 칸에 컨텐츠가 설치되었을 경우 당황하시지 마시고 설치된 컨텐츠를 다시 클릭하신 후 똑같이 드래그(끌어오기) 해서 원하는 블록 칸으로 이동해서 재배치 해주시면 됩니다~

저는 타이틀 텍스트와 이미지 컨텐츠를 설치해 보겠습니다.

 

 

컨텐츠를 끌어와서 설치하기까지 완료 되셨나요?^^ 참 쉽죠~?

설치한 컨텐츠의 내용을 바꾸는 방법을 알려드리기 전에 한 가지 설명하고 넘어가야 할 것이 있습니다~

블록 안에 설치된 컨텐츠 위에 마우스를 올려보면 컨텐츠 영역에 테두리가 생기면서 우측 상단에 버튼들이 나타날 것 입니다.

그럼 여기서 잠깐 이 버튼들에 대해 설명하고 넘어가도록 하겠습니다^^

아래의 이미지와 이미지 밑에 첨부한 설명을 참고해 주세요.

 

① : 컨텐츠 즐겨찾기

    -  화면에 컨텐츠 영역으로 표시되어 있는 '타이틀 텍스트 입력' 의 컨텐츠를 즐겨찾기 할 수 있습니다.
       자주 쓰는 컨텐츠들은 이 버튼을 이용해 즐겨찾기에 등록한 다음, 좌측 상단에 있는 같은 별 모양의 탭에서 가져와서 다시 사용하실 수 있습니다.

② : 컨텐츠 수정

    - 컨텐츠를 수정 할 수 있는 버튼입니다. 이 버튼을 누르면 우측에 컨텐츠 편집 항목들이 나타나고 항목에 맞춰서 컨텐츠 내용을 수정해 주시면 됩니다.

③ : 컨텐츠 삭제

    - 이 버튼을 누르면 해당 컨텐츠가 삭제되며, 삭제된 컨텐츠를 다시 복구하고 싶으시면 좌측 상단에 있는 휴지통 탭에서 다시 가져오실 수 있습니다.

④ : 해당 셀(블록의 칸) 즐겨찾기

    - 이미지에 보면 블록 한 칸이 파란색으로 표시가 되어있을 것 입니다. 이 한 칸을 셀이라고 하며, 블록 한 칸에 설치 되어있는 컨텐츠들의 배치 상태를 그대로 다시 재사용 하고 싶으시면 이 버튼을 이용해 주세요.
      이 셀을 즐겨찾기한 뒤 좌측 상단에 있는 같은 별 모양의 탭에서 등록한 셀을 블록 안으로 드래그 해서 가져와 사용하시면 됩니다.

 

그럼 설치된 '타이틀 텍스트 입력' 컨텐츠의 글자 내용을 바꿔보도록 하겠습니다. 위에 설명 드렸던 수정 버튼을 클릭해 주시면 우측에 컨텐츠의 내용 항목들이 나타날 것 입니다.

이 항목들의 내용을 바꿔보도록 하겠습니다^^

타이틀 내용 글자를 변경하고 글자 색상, 그리고 타이틀 글자 앞에 나타날 아이콘 모양을 변경해 보겠습니다.

그리고 타이틀 컨텐츠와 그 아래 설치했던 이미지 컨텐츠와 간격이 너무 좁으니 이 사이의 간격을 넓히기 위해 여백을 주도록 하겠습니다.

컨텐츠의 여백을 주는 방법은 우측 항목 중 상단에 있는 '기본옵션' 버튼을 누르면 여백을 지정하는 칸들이 나타는데 여기에서 여백을 설정하시면 됩니다.

상단 여백을 제외한 좌측, 우측, 하단 여백만 설정 가능하니 참고 바랍니다^^

변경되는 항목의 내용들은 아래의 이미지를 참고해 주세요.

 

 

내용을 변경하고 하단에 있는 적용버튼을 누르면 편집 화면에 변경된 내용이 적용 되어있을 것 입니다. 편집 화면 상단에 보시면 '미리보기' 버튼이 있는데 이 버튼을 누르면 실제 페이지에서의 모습을 확인 하실 수 있습니다.

 

 

타이틀 내용이 변경되었나요?^^ 변경이 완료 되었다면 이제 이미지 컨텐츠를 바꿔보도록 하겠습니다.

위와 같은 방법으로 이미지 컨텐츠 내용을 수정해 주세요~

 

 

이제 어느정도 컨텐츠 사용법에 대해 감이 잡히시나요? 아직 어려우신가요?ㅜㅜ

그렇다면 컨텐츠 하나를 더 추가해서 따라해 보도록 합시다^^

저는 사진 밑에 사진 설명을 넣고 싶으니 좌측 컨텐츠에서 '장문 텍스트' 컨텐츠를 드래그 해서 설치해 보도록 하겠습니다.

이 컨텐츠는 사진 밑에 넣고 싶으니 마우스로 끌어다가 사진 밑에다가 놔두도록 하겠습니다.

그리고 컨텐츠 수정 버튼을 누르고 우측에서 '텍스트 수정' 버튼을 눌러 장문 텍스트의 내용을 입력해 보겠습니다.

 

 

내용을 입력한 후 '미리보기' 버튼으로 페이지를 확인해 보면 아래와 같이 나올 것 입니다. 저는 사진과 장문 텍스트 사이의 간격이 좁은 것 같아 여백을 줘서 간격을 띄웠습니다~^^

 

 

예제에서 사용한 컨텐츠 외에도 여러가지의 다양한 컨텐츠들이 제공되고 있으니 하나씩 다 살펴보시고 설치해서 사용해 보시면 기본 컨텐츠에 대한 전반적인 파악이 될 것 입니다.

기본 컨텐츠를 잘 활용하면 여러 타입의 페이지들을 쉽게 제작하실 수 있습니다~^^

그럼 이제 디자인 블록에 등록된 컨텐츠를 활용하는 방법에 대해 설명해 드리겠습니다.

 

 

3-2. 디자인 블록에 등록된 컨텐츠를 활용하는 방법

디자인 블록은 제작 난이도가 높은 구조의 컨텐츠를 미리 제작해 고객님들이 사용하시기 편하도록 블록에 배치하여 제공하는 컨텐츠 모음입니다.

기본 컨텐츠와 마찬가지로 내용 수정 및 위치 이동이 자유롭기 때문에 활용도가 높을 것 이라고 생각됩니다^^

디자인 블록에 등록된 컨텐츠를 확인하는 방법은 앞서 설명해드렸던 기본블록 추가 할 때처럼 '블록 추가' 버튼을 클릭해 주세요.

그럼 블록 추가 팝업창이 뜨는데 팝업창 상단의 디자인블록 탭에 있는 것들이 한 블록별로 컨텐츠들이 채워져있는 디자인 블록들 입니다.

기본 컨텐츠들로 제작하기 어려운 디자인의 컨텐츠이나 이미 만들어져 있는 완성도 높은 컨텐츠들을 사용하고 싶으실 때엔 이 탭에서 찾아서 사용하시면 됩니다^^

디자인 블록들 중에 마음에 드시는 것을 찾으셨다면 우측 하단에 있는 '블록 추가' 버튼을 눌러주시면 화면에 설치됩니다~

 

 

블록 추가 하셨나요?^^ 블록 추가한 후 페이지를 확인해 보면 아래처럼 블록이 추가되어 컨텐츠들이 늘어난 것이 보이실 겁니다.

그런데 앞서 제작해놓은 컨텐츠와 위아래 간격이 너무 좁다 싶으시죠? 그럴때는 블록 하단에 있는 하단 여백을 설정해 주시면 됩니다^^

편집 화면에서 처음 제작한 블록과 조금 전 추가했던 블록 사이의 틈새에 마우스를 올려 보시면 여백 설정하는 부분이 나타나는데 이 곳을 클릭해 주세요~

 

 

 

이렇게 추가된 컨텐츠들의 내용은 컨텐츠 수정 버튼을 눌러 위와 동일하게 내용을 수정해 주시면 됩니다~

디자인 블록의 컨텐츠들 역시 마우스 드래그로 이동이 가능하기 때문에 원하는 디자인의 블록을 추가하신 후 사용하고자 하시는 컨텐츠를 다른 블록의 칸으로 옮겨 재배치 해주시면 간단하게 페이지가 바뀝니다^^

 

컨텐츠 추가하는 방법에 대한 설명이 끝났습니다~

아주 간단하게 컨텐츠가 추가되죠?^^ 디자인팜2.0은 별도의 소스 코딩없이 간단하게 컨텐츠가 완성되는 큰 장점이 있습니다.

그럼 이제 컨텐츠의 내용 및 설정을 수정하는 방법에 대해 알려드리도록 하겠습니다.

 

 

4. 컨텐츠 수정

설치된 컨텐츠의 내용을 제작하는 사이트에 맞게 내용이 수정되어야겠죠?^^

컨텐츠 내용을 수정하는 방법에 대해 위에서 어느정도 설명하고 넘어왔기 때문에 수정 방법에 대해 이미 짐작하시고 계시는 분들이 있으실 것 입니다~ㅎㅎ

마우스를 올려 나타나는 수정 버튼을 눌러 우측 항목에서 수정하면 되는데 일반적인 글자 수정이나 이미지 수정 같은 경우는 위에서 하셨던대로 수정 버튼을 눌러 우측의 항목에서 수정하시면 됩니다.

만약 설치한 디자인 블록 중에 최근 게시글, 쇼핑몰 상품 출력 등 프로그램 관련 컨텐츠들은 설정이 초기화 되기 때문에 이 부분을 다시 설정하는 방법에 대해 알려드리겠습니다.

 

예제로 사용한 디자인 블록을 설치하도록 하겠습니다.

 

 

위 블록에는 최근 게시글 컨텐츠가 포함되어 있는 블록입니다. 앞서 말씀드렸다시피 프로그램 관련 설정은 블록 설치시에 초기화 됩니다.

초기화되는 이유는 이미 컨텐츠에 지정되어 있던 프로그램 코드가 해당 사이트의 프로그램 코드와 중복되거나 설치되어 있지 않은 프로그램 코드일 수가 있기 때문에 이러한 문제점을 방지하고자 블록 설치시 초기화가 됩니다^^

설치한 블록의 컨텐츠 중 최근 게시글 컨텐츠에 마우스를 올려 수정 버튼을 클릭해보도록 하겠습니다. 그럼 아래의 이미지와 같이 우측에 설정 항목들이 출력이 되겠죠~?

 

 

자, 여기서 제가 말씀드린 프로그램 코드인 '게시판 코드' 항목이 보이실 겁니다. 이 항목은 현재 아무 값도 설정되어 있지 않는 상태입니다.

만약 게시판들의 전체 글을 다 출력하고 싶으시면 저 설정 그대로 두시면 되구요. 만약 특정 게시판의 게시글을 출력해오고 싶으시다면 이미지에 표시된 게시판 코드를 설정해 주셔야 합니다.

다른 프로그램 관련 컨텐츠들도 역시 같은 형태로 되어있기 때문에 이와같은 방법으로 설정해서 수정해 주시면 됩니다^^

 

5. 컨텐츠 삭제

컨텐츠 삭제 방법은 컨텐츠 위에 마우스를 올리면 나타나는 버튼들 중 휴지통 모양인 버튼을 클릭하면 해당 컨텐츠가 삭제 됩니다.

이 방법은 개별적으로 컨텐츠를 삭제하는 방법이며, 블록 한줄의 컨텐츠를 다 삭제하고 싶으시면 블록 우측의 휴지통 버튼을 클릭해 주시면 됩니다^^

그리고 블록이 여러 줄이고 설치된 컨텐츠가 많은데 다 없애고 싶으시다면 편집화면 중앙 하단에 있는 '모든블록삭제' 버튼을 눌러주시면 화면이 깨끗하게 비워집니다~

각 버튼들의 위치는 아래의 이미지를 참고해 주세요^^!

 

 

[고급 사용자 전용 - 소스 수정 방법]

현재 디자인팜2.0에서는 초급 사용자들을 위해 컨텐츠의 소스 수정이 불가능한 상태이지만 세부적인 컨텐츠 디자인 수정을 원하는 고급 사용자들을 위한 소스 수정 방법을 알려드리겠습니다.

수정하고자 하는 컨텐츠 위에 마우스를 올리고 나타나는 버튼들 중 수정 버튼을 클릭하면 우측에 설정 항목들이 나오는 것은 이제 아실 겁니다^^

여기서 소스 수정을 하는 버튼은 우측 상단에 보시면 빨간색 망치버튼이 소스 수정 창으로 이동할 수 있는 버튼입니다~

이 버튼을 클릭하면 css / html / js 를 수정 할 수 있는 소스 창이 나타나며 여기에서 수정을 해주시면 됩니다^^

 

 

만약 컨텐츠의 우측 설정 항목을 추가 / 수정 / 삭제를 하고 싶으시면 소스 창의 하단에 있는 '변수관리' 버튼을 눌러 해당 팝업 창에서 수정해 주시면 됩니다~

변수관리에서 수정하신 후 해당 창 하단에 있는 '저장' 버튼을 눌러주신 다음 소스 수정 창의 하단에 있는 '수정' 버튼을 최종적으로 눌러 주셔야 변경된 내용이 적용되니 주의해 주세요^^

 

[디자인팜 2.0] 게시판 추가 방법 (각종 프로그램 추가 설치 방법)

디자인팜2.0에서는 게시판 및 각종 프로그램 설치하는 방법이 기존의 관리자 페이지에서 설치하는 방법과 많이 다른 과정을 거칩니다.

하지만 디자인팜 내에서 추가하는 방법이기 때문에 어떻게 보면 훨씬 편리하게 추가가 가능하기 때문에 설명드리는 내용을 잘 봐주세요~^^

 


 

기존 관리자 페이지에서는 메뉴 따로 생성, 게시판 따로 생성을 해서 네비게이션 마법사에서 메뉴와 게시판을 연결해주는 방식었다면

디자인팜2.0에서는 모든 페이지 추가가 '메뉴 관리' 페이지에서 이뤄집니다. 메뉴가 추가가 되면서 해당 페이지가 동시에 생성이 되기 때문인데요.

 

추가하는 방법은 편집 화면 상단의 '메뉴관리 버튼 > 대메뉴 추가 또는 생성된 대메뉴 아래에 페이지 추가 > 페이지명 입력 > 페이지 종류 선택' 순으로 하시면 됩니다.

각 버튼들의 위치는 아래의 이미지를 참고해 주세요^^

 

1. 메뉴관리 창에서 페이지 추가 클릭

게시판이나 프로그램을 설치하고 싶은 메뉴의 위치에 '페이지 추가' 버튼을 눌러 해당 페이지를 생성해 주세요.

만약 대메뉴가 생성되지 않았다면 대메뉴 먼저 생성하신 후 생서된 대메뉴 밑에 페이지를 추가해 주셔야 합니다^^

 

 

2. 페이지 생성하기

페이지 추가 버튼을 누르면 페이지를 생성하는 창이 나타납니다. 여기서 만들어진 페이지가 곧 게시판 페이지 또는 프로그램 페이지가 됩니다.

페이지명을 작성한 후 그 아래에 있는 탭 중에 '프로그램 추가' 탭을 선택해 주시면 디자인팜에서 설치 가능한 프로그램들의 목록이 나타납니다.

이 페이지에서 게시판 추가 및 각종 프로그램들 설치가 가능합니다. 원하시는 프로그램을 선택하신 후 '만들기' 버튼을 눌러주세요~

이 때 주의하셔야 할 점은 한번 선택되어 만들어진 페이지 타입은 다시 변경이 되지 않으니 신중히 생성해 주셔야 합니다.

만약 페이지 타입을 변경하고 싶으시면 메뉴 관리 창에서 해당 페이지 메뉴를 삭제하신 후 다시 생성해 주세요~ (이때 삭제된 메뉴와 함께 게시판 및 프로그램도 같이 삭제되니 주의 바랍니다.)

 

- 게시판 추가

 

- 맞춤전송폼 추가

 

예시로 게시판과 맞춤전송폼 설치하는 모습을 보여드렸습니다~

이외 '프로그램 추가' 탭에 있는 다른 프로그램들(각종 게시판, 맞춤 게시판 등) 설치가 가능하니 등록되어 있는 프로그램들을 쭈욱 훑어봐주세요^^

 

3. 게시판 및 프로그램 설정 변경 방법

게시판 및 프로그램을 설정하는 방법은 '메뉴 관리' 페이지 창에서 설정을 변경하고 싶은 메뉴 페이지를 클릭하면 해당 프로그램 페이지로 이동이 됩니다.

각종 설정 변경은 이 페이지에서 해주시면 됩니다^^

 

 

 

4. 게시판 및 프로그램 페이지에 디자인 컨텐츠를 추가하는 방법

만약 게시판 및 프로그램 목록 위에 다른 디자인적인 요소를 추가하고 싶으시다면 해당 페이지 내에서 블록 추가를 통해 추가하실 수 있습니다.

해당 페이지 내로 이동하는 방법은 위의 3번에 첨부된 이미지를 참고해 주세요~

블록 추가를 하신 후 블록 안에 원하는 컨텐츠를 추가해서 제작해 주시면 되는데 컨텐츠를 추가 및 삭제 방법은 여기에서 확인해 주세요^^  ☞컨텐츠 추가 및 삭제 방법

 

 

저는 맞춤 게시판 위에 블록을 두고 컨텐츠를 추가해 보았습니다^^ 추가된 모습의 편집 화면과 실제 페이지의 모습은 아래 이미지를 참고해 주세요~

컨텐츠가 추가된 페이지의 실제 화면은 여기에서 확인이 가능합니다.  ☞적용된 페이지 확인

 

[디자인팜 2.0] 오늘 본 상품을 퀵메뉴로 출력 하는 방법

1. 관리자모드 [마케팅 - 마케팅 지원 - Quick메뉴관리] 메뉴로 이동 후 우측 Quick메뉴 등록 버튼을 클릭합니다.



 

 

2. Quick메뉴 설정

사용함에 체크하고  출력할 위치 및 크기를 입력 합니다.

세부적인 옵션은 각 옵션옆에 도움말이 있으므로 참고하셔서 설정하시기 바랍니다.

소스 내용에는 다음과 같이 추가해주세요.

 

 

 

 

 

 

{@	$program_set[cate_code] = '00000000'; // 쇼핑몰 상품분류	$program_set[img_thumb_w] = 80; // 썸네일 이미지 가로크기	$program_set[img_thumb_h] = 80; // 썸네일 이미지 세로크기	$program_set[img_thumb_type] = 2; // 썸네일 이미지 생성방식 (1:일반 이미지축소, 2: 위 사이즈보다 큰경우 잘라내기)	$program_set[limit] = 4; // 출력수 (1~999)	$shop_goods_view = program_load(SHOP_GOODS_VIEW);	$fWidth = 80 + 2;@}<style>	.pm-goods_today * {-webkit-box-sizing: border-box; box-sizing: border-box;}	.pm-goods_today a {display:block; color:#333; text-decoration:none;}	.pm-goods_today ul {margin:0; padding:0; list-style:none;}	.pm-goods_today .empty {width:100% !important; padding:10px 8px; font-size:14px; color:#666; text-align:center;}	.pm-goods_today li {position:relative; text-align:center;}	.pm-goods_today li > a,	.pm-goods_today li > div {display:inline-block; max-width:100%; padding:5px 5px 15px; text-align:center;}	.pm-goods_today .figure {width:{$fWidth}px; margin:0 auto;}	.pm-goods_today .figure > div {position:relative; padding:1px;}	.pm-goods_today .figure img {display:block; max-width:100%; margin:0 auto;}	.pm-goods_today dl {margin:0; font-size:13px; line-height:1.6em; vertical-align:middle;}	.pm-goods_today dl dt span {display:block; padding:5px 0;}	.pm-goods_today dl dd {margin:0;}	.pm-goods_today dl dd span {display:block; padding:2px 0;}	.pm-goods_today dl .goods_name {overflow:hidden; font-size:13px; color:#333; white-space:nowrap; text-overflow:ellipsis;}	.pm-goods_today dl .sijung_price {display:none; font-size:12px; color:#888; text-decoration:line-through;}	.pm-goods_today dl .price {font-size:14px; font-weight:bold; color:#333;}	.pm-goods_today dl .soldout {font-size:13px; color:#c40000;}	.pm-goods_today dl .icon {display:none;}	.pm-goods_today li:hover .figure > div {padding:0; border:1px solid #ccc;}</style><div class="pm-goods_today">	<ul>		<!--@foreach($shop_goods_view as $k=>$v)-->			<li>				<a href="{$v[read_url]}">					<div class="figure">						<div>							<!--@if($v[img1_url])-->								<img src="{$v[img1_url]}" alt="{$v[goods_name]}">							<!--@else-->								<img src="/img_up/_noimg/80.png" alt="NO IMAGE">							<!--@end-->						</div>					</div>					<dl>						<dt>							<span class="goods_name">{$v[goods_name]}</span>						</dt>						<dd>							<!--@if($v[goods_stock])-->								<span class="sijung_price" cond="$v[sijung_price_str]">{$v[sijung_price_str]|money}</span>								<span class="price">{$v[price_str]}</span>							<!--@else-->								<span class="soldout">품절</span>							<!--@end-->							<span class="icon" cond="$v[icon_str] || $v[icon_str2]">{$v[icon_str]} {$v[icon_str2]}</span>						</dd>					</dl>				</a>			</li>		<!--@end-->		<li cond="!count($shop_goods_view)" class="empty">등록된 상품이 없습니다.</li>	</ul></div>
[디자인팜 2.0] 맞춤게시판 항목추가

맞춤 게시판에서 항목을 추가했을때 실제 페이지에서는 추가한 항목값이 안보이는 경우가 있습니다.

이 경우 해당 항목의 변수값을 확인하여 소스에 추가해주셔야되는데요~

아주 간단하게 수정이 가능하답니다.

아래 메뉴얼 잘 읽고 따라해보세요~

 

맞춤 게시판 항목 설정

저는 디자인팜 2.0에서 [맞춤게시판 기본형]을 선택하여 페이지 추가를 했는데요,

※ 페이지 추가 방법은 http://wdev.good-web.co.kr/bbs/faq/6668 참고 하시기 바랍니다.

디자인팜 2.0 실행 > 메뉴관리 > 맞춤 게시판을 클릭하면 아래와 같이 입력 항목 설정 버튼이 확인됩니다.

  

 

입력항목 설정을 클릭하시면 기본항목값을 확인 할 수 있습니다. 여기에 신청일이라는 항목을 추가해보도록 하겠습니다.

※항목 수정 및 삭제도 아래 페이지에서 가능합니다

 

 

 

저장 후 적용 페이지를 확인해보시면, 리스트 화면에 새로 추가했던 [신청일] 이 노출이 안되고있네요.

 

 

수정을 하는 방법은 먼저 해당 항목에 대한 변수값을 찾아야합니다.

맞춤게시판의 기본 환경 설정 클릭

 

 

하단의 SMS,e-Mail 설정을 체크하시면 다음과 같은 변수값을 확인 할 수 있습니다.

 

 

새로이 추가했던 신청일 의 변수값은 항목명이 {$s_v5_name} 입력값이 {$s_v5_value} 로 확인되네요.

이 변수값을 맞춤게시판의 리스트 디자인에 추가를 해주셔야합니다.

소스 수정 페이지로 접근하는 방법은

디자인팜2.0 실행 > 메뉴관리 > 맞춤게시판 클릭하시고 소스 수정을 클릭합니다.

 

 

아래의 리스트 화면의 소스를 살펴봅니다.

이미지의 빨간 박스 부분을 보시면 항목의 변수값이 {$s_v4_name} 인 소속까지만 작성되어 있는 것을 확인 할 수 있습니다. 

 

  

 

신청일의 항목명 변수값인  {$s_v5_name} 을  추가해 줍니다.

 

 

목록에 항목명이 노출 되도록 수정했으니 그에 따른 입력값도 노출이 될 수 있도록 소스를 추가 해줘야합니다.

추가 후 디자인소스 저장을 클릭합니다.

 

 

완성된 페이지입니다.

 

 

 

 

 

[디자인팜 2.0] 스킨 & 블록 가로 크기 변경하기

디자인팜 2.0에서 제공하는 대부분의 스킨들은 가로 크기가 1000px 을 기준으로 작업되어 있습니다.

 

일반 모니터에서는 1000px 의 크기로도 이쁘게 출력이 되지만,

최근에 많이 보급된 와이드 모니터로 사이트를 확인할 경우 가로 크기가 조금 작다고 느낄 수 있습니다.

 

그렇다면, 와이드 모니터에 맞게 스킨의 가로크기를 1200px 로 변경하려면 어떻게 해야 할까요?

 

스킨 관리에서 소스 수정 모드로 전환해서 작업할 수도 있지만,

새로 추가된 PC 스킨 가로 크기 변수를 사용하면 쉽게 변경이 가능합니다.

 

 

[PC 스킨 가로 크기 변경]

 

1) 디자인팜 2.0을 실행을 한뒤 상단에 보면 스킨관리라는 버튼이 있습니다.

   이 버튼을 클릭을 해서 스킨을 변경할 수 있습니다.

 

 

2) 현재 적용된 스킨의 하단에 스킨옵션설정을 클릭을 해서 스킨의 옵션을 변경할 수 있습니다.

 

 

3) 스킨 옵션 설정 창에서 0-PC 스킨 가로 크기의 내용에 1200 을 입력합니다.

 

 

4) 하단의 적용 버튼을 누른 후 사이트를 확인합니다.

 

# 스킨 가로 크기 - 1000

 

# 스킨 가로 크기 - 1200

 

 

5) 위와 같이 상단의 스킨 영역의 가로 크기가 늘어난 것을 확인할 수 있습니다.

 

 

스킨의 가로 크기를 변경했다면, 블록도 스킨처럼 크기를 변경하시는게 보기에 좋겠죠?

 

 

[PC 블록 가로 크기 변경]

 

1,2) 스킨의 가로 크기를 변경했을 때와 동일하게 스킨 옵션 설정 창으로 들어갑니다.

 

 

3) 스킨 옵션 설정 창에서 0-PC 블록 가로 크기의 내용에 1200 을 입력합니다.

 

 

4) 하단의 적용 버튼을 누른 후 사이트를 확인합니다.

 

# 블록 가로 크기 - 1200

 

5) 위와 같이 블록의 크기가 늘어난 것을 확인할 수 있습니다.

 

 

※ 블록의 크기는 사이트의 모든 블록에 적용됩니다.

※ 일부 콘텐츠의 경우 1000px 에 맞추어서 디자인 되어 있어서 소스 수정이 필요할 수 있습니다.

 

1