비주얼섹션 한 줄에 텍스트와 이미지 첨부하기
테이블(표)를 사용해 비주얼섹션의 한 줄에 텍스트와 이미지를 나란히 삽입할 수 있습니다. 이 방법은 비주얼섹션뿐 아니라 텍스트 에디터를 제공하는 모든 위젯 및 관리자 페이지에서 적용 가능합니다.
1단계: 비주얼섹션 추가 및 설정 열기
메뉴에 비주얼섹션을 추가하고, 비주얼섹션의 설정을 여는 과정입니다.
- 디자인 모드에 접속합니다.
- 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
- 비주얼섹션을 클릭합니다.
- 비주얼섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
- 컨텍스트 메뉴가 나오면 비주얼 설정 을 클릭합니다.
2단계: 슬라이드 선택 및 배경색 채우기
비주얼섹션 슬라이드의 샘플 콘텐츠는 모두 삭제하고, 배경색을 지정하는 과정입니다.
비주얼 설정 창 왼쪽 상단에서, 편집할 슬라이드를 선택합니다.
참고: 새로운 슬라이드를 클릭해, 슬라이드를 추가하거나, 슬라이드 썸네일 상단의 ⨂를 클릭해 삭제합니다.
- 선택한 슬라이드에 있는 샘플 텍스트를 경우 모두 삭제합니다.
배경속성 / 배경색 항목에서, 컬러픽커를 클릭해, 원하는 배경색을 지정합니다.
3단계: 테이블 추가 및 테두리 없애기
테이블(표)을 추가하고, 추가한 테이블의 테두리를 없애는 과정을 다룹니다.
텍스트 편집도구의 테이블 아이콘을 클릭하고, 테이블을 추가합니다. (이 도움말에서는 2열로 테이블을 추가하였습니다.)
삽입된 테이블의 아무 곳에 마우스를 클릭합니다.
아래 그림처럼 테이블 옵션 메뉴가 나오면, 표 스타일 옵션에서 테두리 없음 을 선택합니다.
4단계: 테이블 셀에 텍스트 및 이미지 첨부하기
테이블 셀에 텍스트와 이미지를 첨부하고, 이미지 크기를 수정하는 과정입니다.
테이블 왼쪽 셀을 클릭하고, 텍스트를 입력합니다. 텍스트의 크기를 변경하거나, 두께, 단락 등을 원하는 스타일로 수정합니다.
테이블 오른쪽 셀을 마우스로 클릭하고, 텍스트 편집도구에서 이미지 첨부 아이콘을 클릭합니다.
내 PC에서 이미지를 올리면, 다음 그림처럼 작게 이미지가 삽입됩니다. 이제 이미지를 클릭해 주세요. 옵션 메뉴가 나오면, 크기 변경 옵션을 클릭합니다.
폭 또는 높이에 숫자가 있는 경우 삭제하고, 업데이트 를 클릭합니다.
참고: 폭과 높이를 빈 칸으로 두면, 테이블 셀 크기에 맞춰 꽉 차게 됩니다.
- (선택 사항) 비주얼섹션에 버튼이 필요한 경우 텍스트 위젯, 비주얼섹션, 상품 요약설명 등에 버튼 추가하는 방법 도움말을 참고해 추가해 주세요.
5단계: 테이블 셀 가로 크기 지정하기
테이블은 처음 생성 시, 선택하신 열과 행의 수에 따라 자동으로 크기가 지정됩니다. 우리는 이 단계에서 직접 테이블의 가로폭을 변경해줄 것입니다.
텍스트 편집도구에서 코드보기 아이콘을 클릭합니다.
<td> 태그의 width 값을 변경합니다. 이 도움말에서는 왼쪽 열의 크기를 30%, 오른쪽 열의 크기를 70%로 수정했습니다. 텍스트 및 이미지 크기에 따라 적절하게 조절합니다.
width 값 수정을 마쳤으면 다시 코드보기 </> 아이콘을 클릭합니다.
주의: 코드보기 아이콘을 꼭 다시 클릭해 주세요. 비주얼 설정 창을 바로 끄면 수정한 코드가 다시 초기화 될 수 있습니다.
- 비주얼 설정 창 바깥 영역을 클릭해, 설정을 완료합니다.
아래 그림처럼 비주얼섹션에 테두리 없는 테이블이 있고, 테이블 안에 텍스트와 이미지가 한 줄로 형식으로 삽입되는 걸 볼 수 있습니다.
6단계: 미리보기 및 게시하기
- 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
- 의도한대로 디자인이 되었는지 확인합니다.
- 문제가 없다면 디자인 모드로 돌아가 오른쪽 상단의 게시하기 버튼을 클릭해 적용합니다.
7단계: 모바일 버전 편집하기
모바일은 PC와 달리 가로폭이 좁기 때문에, 테이블을 2열로 만들어 텍스트와 이미지를 추가하는 건 보기 안 좋을 수 있습니다. 따라서 이 도움말에서는 비주얼섹션을 모바일에 맞게 재편집하는 방법을 설명합니다.
- 뷰포트를 PC에서 모바일로 변경합니다.
- 비주얼 섹션에 마우스 포인터를 올리면 나타나는 눈 모양 아이콘을 클릭합니다. 눈 모양 아이콘 클릭 시 PC에서 제작한 비주얼 섹션은 숨겨집니다.
- 새로운 모바일 전용섹션을 추가합니다.
- 모바일 전용섹션에 + 아이콘을 클릭해 비주얼 섹션을 추가합니다.
- 삽입된 비주얼섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
- 컨텍스트 메뉴가 나오면 비주얼 설정 을 클릭합니다.
- 제목 텍스트를 입력하고, 텍스트 편집도구에서 이미지 첨부 를 클릭해 이미지를 추가합니다.
- 비주얼 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
디자인 모드 오른쪽 상단의 게시하기 버튼을 클릭해 적용합니다.
