지금까지 배운 위젯 배치 및 그리드 조절방법을 응용해 다음과 같은 페이지를 디자인할 수 있습니다.
이번 튜토리얼에서는 이미지와 텍스트만 사용되었으나, 소유한 콘텐츠에 따라 다른 위젯을 사용할 수도 있습니다. 예를 들어 특정 이미지 위젯 대신 동영상 위젯을 사용하거나, 단일지도, 갤러리 위젯 등으로 대체할 수 있습니다.
이 튜토리얼을 진행하기에 앞서 모든 이전 튜토리얼을 미리 실습해보신 후 진행하시길 권장해 드립니다.

실습진행
1단계: 한 줄 3열 위젯 배치하기
한 줄에 여백, 텍스트, 이미지 위젯을 배치하고, 이미지 위젯이 차지하는 그리드 수를 조절합니다. 어려움이 있는 경우 다음 3x1 위젯 배치하기 튜토리얼을 참고하세요.

- 새로운 메뉴를 추가합니다. 메뉴 추가방법
- 여백, 텍스트, 이미지 위젯을 1개씩 추가합니다. 위젯 추가방법
- 위젯들을 왼쪽부터 여백, 텍스트, 이미지 순으로 한 줄에 3열이 되도록 배치합니다.
- 배치한 위젯들의 그리드 수를 위 그림처럼 여백(3칸), 텍스트(3칸), 이미지(6칸)으로 조절합니다. 그리드 조절방법
2단계: 한 줄 4열 위젯 배치하기
한 줄에 텍스트와 이미지 위젯을 4열로 배치합니다. 문제가 있는 경우 4x2 이미지, 텍스트 여백 배치하기 튜토리얼을 참고해 볼 수 있습니다.

- 텍스트와 이미지 위젯을 각각 2개씩 추가합니다.
- 위젯들을 왼쪽부터 텍스트, 이미지, 이미지, 텍스트 순으로 한 줄에 4열이 되도록 배치합니다.
3단계: 한 줄 2열 위젯 배치하기
한 줄에 여백과 이미지 위젯을 2열로 배치하고, 텍스트 위젯을 이미지의 하단에 맞춰지도록 여백의 높이를 조절합니다.
- 여백, 이미지, 텍스트 위젯을 각각 1개씩 추가합니다.
- 다음 애니메이션을 참조하여, 위젯들을 배치하고, 그리드 수를 조절합니다.

- 이미지 위젯을 여백 위젯의 오른쪽으로 이동합니다.
- 텍스트 위젯을 왼쪽 여백 위젯의 바로 아래로 이동합니다.
- 여백 위젯 최하단 끄트머리에 마우스 포인터를 올립니다.

- 마우스를 클릭한 다음, 마우스를 아래로 드래그합니다. 여백의 높이가 길어지며, 적당하다 싶으면 마우스를 놓습니다.
- 이미지 위젯과 여백 위젯 사이 마우스 포인터를 올리고, 드래그하여 이미지 위젯의 그리드 수를 8칸으로 늘립니다. 여백과 텍스트 위젯은 자동으로 4칸으로 줄어듭니다.
4단계: 텍스트 입력 및 이미지 추가하기
- 텍스트 위젯을 마우스로 더블-클릭합니다.
- 텍스트 편집기로 전환되면 글자를 입력합니다.
참고: 별도로 작성한 글이 없는 경우 다음 한글입숨 사이트를 활용해 예시 한글 문장을 복사해 사용해볼 수 있습니다. 옵션을 선택하고, 생성하기 버튼을 클릭해 복사해 주세요. - 이미지 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
- 설정 창 왼쪽 상단에 마우스 포인터를 올립니다.
- 내 PC에서 이미지를 업로드하거나, 무료 이미지 버튼을 클릭해 이미지를 추가합니다.
- 설정창 오른쪽 상단 닫기를 클릭해 설정 창을 끕니다.
- 남은 텍스트와 이미지 위젯에도 콘텐츠를 추가합니다.

5단계: 디자인 확인 및 게시하기
- 디자인 모드 오른쪽 상단 미리보기
아이콘을 클릭합니다. - 의도한 디자인으로 나타나는지 확인합니다.
- 문제가 없다면 아임웹 디자인 모드로 돌아가 게시하기를 클릭해 적용합니다.