세안비누 상세페이지 샘플을 활용하여 디퓨저 상세페이지를 제작하는 방법을 알려드리도록 할게요!

먼저, 이미지빌더를 이용할 수 있어야겠죠? 

아직 닷홈 이미지호스팅을 이용 중이지 않으시다면 닷홈 홈페이지에서 이미지호스팅을 신청해 주세요!

닷홈 홈페이지 바로가기>

[이미지빌더 사이트로 이동하기]

이미지호스팅 신청이 완료되었다면 이미지빌더 사이트로 이동해 보도록 할게요.

닷홈 > 마이닷홈 > 이미지호스팅 관리에서 '편집툴 바로가기' 버튼을 통해 이동하시거나 직접 주소창에 아래와 같은 주소를 입력하여 이동하실 수 있어요!

이동하시면 로그인 화면이 나오는데 로그인을 진행해 주세요!

아이디 : 계정명

비밀번호 : 이미지호스팅 신청 시 입력했던 비밀번호

[이미지 업로드하기]

가장 먼저! 상세페이지를 제작하려면 이미지가 있어야겠죠?

이미지빌더 좌측 메뉴 중 '이미지호스팅 파일 관리' 메뉴를 클릭하시면 파일 관리창이 팝업 됩니다.

파일 관리창 안에 이미지를 업로드할 수 있는데요. 자세한 이용 방법은 아래의 매뉴얼에서 확인해 보세요!

파일 업로드 매뉴얼 보기 >

[상세페이지 샘플 사용하기]

이미지를 업로드했다면 이제 상세페이지를 제작할 차례에요!

우측 하단의 상세페이지 샘플 목록에서 세번째에 있는 세안비누 샘플을 사용할 거예요. 

섬네일 위에 마우스를 올린 뒤, 사용하기 버튼을 눌러주세요.

편집화면으로 이동되고 편집 영역에는 세안비누 샘플이 들어가 있을 거예요!

이제 이 샘플을 활용하여 디퓨저 상세페이지로 바꿔줄 건데요~

먼저 제일 위에 있는 인트로 영역의 제목을 변경해 주세요! 내 상품의 상품명과 설명으로 바꿔주면 돼요.

글꼴, 크기, 색상 등을 변경하시려면 해당 글자를 드래그하여 화면 하단에 뜨는 텍스트 편집 툴을 이용하여 변경하실 수 있어요!

이번에는 비누 이미지를 디퓨저 이미지로 변경해 볼게요!

이미지 위에 마우스를 올리면 이미지 편집 메뉴가 나오는데요. 제일 왼쪽의 이미지 변경 버튼을 눌러 이미지를 변경할 수 있어요!

아까 파일 관리창에서 업로드했던 이미지 중 선택하여 변경할 수 있어요.

저는 올린 이미지와 현재 적용되어 있는 배경색이 어울리지 않아서 배경색을 바꿔주려고 해요.

배경색이 적용된 블럭 위에 마우스를 올린 뒤, 설정 버튼을 눌러 상세 설정창을 열어주세요.

배경색을 클릭하면 컬러 선택창이 오픈되는데요, 원하는 색상을 선택한 뒤 적용을 눌러주면 해당 색상으로 변경돼요!

배경색이 적용된 블럭 모두 변경해 주세요!

수정된 인트로 모습이에요!

인트로 밑에 있던 상품 특징 부분을 저는 브랜드 소개 영역으로 바꿔주려고 해요!

브랜드명과 소개를 입력해 주었어요.

이미지 변경 버튼을 눌러 상품 이미지로 변경해 주세요!

만약 배경색을 변경하고 싶다면 인트로 영역의 배경색을 변경했던 것처럼 설정 버튼을 눌러 변경해 주세요!

상품 특징 부분을 브랜드 소개로 변경한 모습이에요~

이번에는 상품 비교 부분을 수정해 볼게요!

제목부터 변경해 주세요~

'이미지 변경' 버튼을 눌러 상품 이미지를 변경해 주세요.

저는 디퓨저 용량이 변경된 것을 비교하기 위해 외쪽에는 변경 전 용기 이미지, 오른쪽에는 변경 후 용기 이미지로 변경해 주었어요!

아래 텍스트는 위 이미지에 대한 설명으로 수정해 주세요~!

아래에 있는 큰 상품 이미지도 '이미지 변경' 버튼을 눌러 변경해 주세요.

이미지가 크게 보이는 부분이기 때문에 퀄리티가 높은 이미지로 변경해 주셔야 분위기가 산답니다!

아래에 있는 상품 소개 부분도 이미지와 문구를 변경해 주세요.

배경색이 너무 진해서 이미지와 어울리는 색으로 수정해 주었어요!

상세 설정을 열어 배경색을 변경해 주세요~

수정된 모습이에요~

'자연에서 답을 찾다' 부분은 디퓨저 향 옵션들을 보여주려고 해요.

저는 '향 선택'으로 문구를 수정해 주었어요.

이미지와 텍스트는 각 향과 그 향에 대한 설명을 입력해 주었어요!

오른쪽도 동일한 방법으로 수정해 주세요.

향 옵션이 여러 개라면 블럭이 더 필요하겠죠?

우측 상단의 블럭 복제 버튼을 누르면 해당 블럭이 동일한 내용으로 추가돼요!

블럭을 복제한 다음 내용도 수정해 주세요.

향 옵션이 수정된 모습이에요!

향 옵션 아래에는 유해 물질을 넣지 않았다는 내용을 추가적으로 보여주려고 해요.

총 다섯 개의 블럭을 추가해 줄 거에요.

블럭을 추가하기 위해 +버튼을 눌러 블럭 선택창을 열어줍니다.

블럭 선택 창에서 좌측 탭 메뉴 중 밑에서 다섯 번째에 있는 구분선 탭 버튼을 눌러주세요.

블럭 리스트에 구분선 블럭 목록이 나오면 가장 위에 있는 선 블럭을 선택하여 추가해 주세요.

그다음 다시 추가된 선블럭 아래에 + 버튼을 눌러 블럭 선택창을 열어주세요.

블럭 선택 창에서 좌측 탭 메뉴 중 인용구 탭 버튼을 눌러주세요.

블럭 리스트에 인용구 블럭 목록이 나오면 가장 위에 있는 큰따옴표 블럭을 선택하여 추가해 주세요.

다시 그 아래에 텍스트 블럭을 추가할 거에요.

블럭 선택 창에서 좌측 탭 메뉴 중 텍스트 탭 버튼을 눌러주세요.

블럭 리스트에 텍스트 블럭 목록이 나오면 가장 위에 있는 텍스트 1단 블럭을 선택하여 추가해 주세요.

다시 그 아래에 표 블럭을 추가해 주세요.

블럭 선택 창에서 좌측 탭 메뉴 중 표 탭 버튼을 눌러주세요.

블럭 리스트에 표 블럭 목록이 나오면 가장 위에 있는 표 디자인1 블럭을 선택하여 추가해 주세요.

다시 그 아래에 마지막으로 이미지+텍스트 블럭을 추가할 거에요.

블럭 선택 창에서 좌측 탭 메뉴 중 이미지+텍스트 탭 버튼을 눌러주세요.

블럭 리스트에 블럭 목록이 나오면 가장 위에 있는 이미지+텍스트 1단 블럭을 선택하여 추가해 주세요.

이제 추가한 각 블럭들을 수정해 주어야겠죠?

먼저 구분선 블럭의 색을 바꿔볼게요!

설정 버튼을 눌러 설정창을 연 뒤, 선색을 변경해 주세요!

인용구 블럭과 텍스트 블럭의 문구들도 수정해 주세요!

저는 유해 물질을 넣지 않는다는 내용들로 수정해 주었어요.

그다음 표 블럭을 수정해 줄 건데요.

저는 표 블럭 안에 유해 물질들을 적어줄 거예요.

수정할 셀 위를 클릭하면 표 편집 메뉴가 나오는데, 

순서대로 아래에 행 삽입, 위에 행 삽입, 왼쪽에 열 삽입, 오른쪽에 열 삽입, 행 지우기, 열 지우기예요!

안에 문구 수정은 일반 텍스트 블럭 수정 방법과 동일하게 드래그하여 수정하면 돼요!

그다음 저는 배경에 'ZERO!!'라는 문구가 새겨진 배경 이미지를 적용하려고 하는데요!

표가 배경을 가리지 않도록 표의 배경 색상들을 전부 투명하게 변경해 주어야 해요!

위 이미지의 3번이 투명도를 조절하는 부분이에요! 왼쪽으로 둘 수록 투명하게 적용돼요!

이제 배경 이미지도 변경해 주세요!

위의 'ZERO!!' 배경 이미지가 필요하신 경우 아래 다운로드 버튼을 눌러 다운로드하실 수 있어요!

[이미지 다운로드하기]

이미지 + 텍스트 블럭 부분에는 안정성 검증받은 것을 보여줄 인증서와 설명 내용을 넣으려고 해요.

이미지 변경 버튼을 눌러 이미지를 변경해 주세요.

저는 인증서 이미지를 넣어주었어요.

오른쪽에 문구도 함께 변경해 주세요!

이제 하단에 제품 정보 부분을 수정해 줄 차례에요!

기본 블럭은 항목 구분 없이 재료명만 들어있어서 블럭을 삭제하고,

항목별로 볼 수 있도록 표 블럭을 추가해 줄 거예요.

우측의 블럭 삭제 버튼을 눌러 블럭을 삭제해 주세요!

표 디자인1 블럭을 추가해 주세요.

표에 해당 제품의 정보를 입력한 뒤, 추가된 표 블럭의 설정 버튼을 눌러 상세 설정창을 열어주세요.

위 이미지처럼 표 설정 부분을 수정해 주세요.

제품 정보 작성 후 화면 우측 상단의 저장 버튼을 누르면 편집 내용이 저장돼요!

카테고리와 제목은 각 상품에 맞게 적어주시면 됩니다~

제목은 상세페이지 목록에 표시될 제목이에요!

[제작된 상세페이지 확인하기]

이제 제작된 상세페이지를 확인해 볼까요?

제작된 상세페이지의 다운로드 및 사용 방법은 아래의 매뉴얼을 참고해 주세요!

상세페이지 적용하기>

아래는 제가 제작한 디퓨저 상세페이지에요!

위 내용을 차근차근 따라하면 아래와 같은 상세페이지를 제작할 수 있어요~