이지스트 사용 가이드

이지스트를 사용하는데 필요한

방법들에 대해 배워보세요.

사이트 생성부터 디자인, 사이트 운영까지

이지스트를 활용하여 사이트를 관리하는

모든 과정을 안내합니다.



메인 패이지 만들기 실습 (2부)

사이트 디자인메인 패이지 만들기 실습 1부에서는 메뉴, 메인 베너, 설명 텍스트, 이벤트 베너를 삽입하는 것을 알아보았습니다.

2부에서는 판매 상품 전시,  그리고 이벤트 띠 배너, 회사 홍보용 유튜브 동영상을 삽입하여 메인 페이지를 완성하겠습니다.


1. 판매 상품 전시를 위한 상품 컴포넌트를 삽입합니다.

상품 컴포넌트를 선택합니다.


② 다양한 상품 컴포넌트 디자인 중에서 하나를 선택합니다. 이번 실습에서는 1단 구성으로 스와이핑이는 C005를 선택하겠습니다.


③ 상품 노출방식을 수동으로 선택하여 직접 노출될 상품을 선택합니다. 상단 필터 기능을 활용하면 좀 더 쉽게 상품을 찾아 선택할 수 있습니다.


⑤  미리보기 적용을 눌러 사이트에 반영 합니다.


사이트 디자인 프리뷰에 상품  컴포넌트가 페이지에 정상적으로 반영된 것을 확인할 수 있습니다.


2. 상품 컴포넌트의 타이틀을 추가 합니다. 
  • 상품에 대한 간단한 설명이 있으면 홈페이지를 이용자들의 이해가 높아 질 것입니다.  그래서 상품 컴포넌트 위에 [금주의 특가 상품] 이라는 타이틀을 입력합니다.


사이트 디자인 프리뷰의 상품 컴포넌트를 더블 클릭 하여 컴포넌트 편집창을 불러 옵니다.

.


섹션명 텍스트 입력란에 원하는 문구를 삽입합니다.


④ 상품 선택 후 미리보기 적용을 눌러 사이트에 반영 합니다.


사이트 디자인 프리뷰 화면에 입력한 타이틀이 반영된 것을 확인할 수 있습니다.



3. 컴포넌트간 여백을 추가하여 공간 띄우기
  • 기존 삽입하였던 이벤트 베너상품이 붙어 있어 답답한 느낌을 주고 있습니다. 이것을 해결하기 위해 이벤트 베너와 상품 사이 적절한 여백을 삽입해보겠습니다.


여백 컴포넌트를 선택합니다.


② 여백 높이를 설정합니다. 기본값은 10px 이며 상황에 따라 여백값을 수정할 수 있습니다. 여백값을 수정 후 미리 보기 적용을 눌러 편집중인 페이지에 반영합니다.


사이트 디자인 프리뷰 화면 하단에 여백이 삽입된걸 확인할 수 있습니다. 이번 실습에서는 이벤트 베너와 상품 사이에 여백을 삽입해야 하기 때문에 여백 영역을 클릭한 상태로 끌어올려 원하는 위치에 배치 합니다.


여백이 원하는 위치에 정상 반영 되어 있는지 확인 할 수 있습니다.



4. 이벤트 띠 베너삽입하기
  • 페이지 중간에 분위기 환기 등의 목적으로 띠베너를 추가하도록 하겠습니다.

① 이미지 베너를 선택합니다.


② 모니터 좌우를 꽉 채우는 띠 베너를 삽입하기 위해 B011베너를 선택합니다.

 

③ 베너추가를 선택하여 베너 편집 창을 불러 옵니다. 이미지 불러오기를 통해 기존 별도로 편집한 띠베너 이미지를 추가 합니다. 이번 실습에 사용된 이미지 크기는 (1920*165) 입니다. 텍스트 까지 편집된 이미지를 삽입할 것이기 때문에 타이틀, 설명은 공란으로 설정 합니다.


 미리보기 적용 버튼을 눌러 편집중인 페이지에 반영합니다.


 사이트 디자인 프리뷰 화면에 정상적으로 반영되어 있는지 확인합니다.


5. 유튜브 동영상을 삽입합니다.
  • 다양한 유튜브 영상 콘텐츠를 사이트에 삽입하여 시각적 효과를 극대화 할 수 있습니다.

① 동영상 콘텐츠의 효과를 높이기 위해 홍보, 안내 문구를 먼저 추가합니다.


② 유튜브 콘텐츠를 추가하기 위해 동영상 컴포넌트를 선택합니다.


③ 추가할 유튜브 영상의 전체 주소를 입력합니다. 그리고 재생 옵션을 선택한 후 미리보기 적용을 선택하여 편집중인 페이지에 반영합니다.


사이트 디자인 프리뷰 화면에 유튜브 동영상이 정상적으로 삽입되었는지 확인 할 수 있습니다


5. 페이지 저장을 눌러 편집한 내용을 최종 반영합니다.
  • 우측 상단 디자인 URL을 선택하면 임시로 편집중인 사이트의 실제 웹브라우져 반영 모습을 확인할 수 있습니다.
  • 이번 실습을 통해 생성한 웹사이트의 디자인 URL은  https://total.tripbox.co.kr/goods?id=9697&pageID=1043 입니다.



원하시는 답변이 아닌가요? 우측 하단 실시간 채팅을 신청하시면 최대한 빨리 답변 드리도록 하겠습니다.


카카오톡 채널 채팅하기 버튼