아임웹에서 상단이란 웹사이트 최상단에 위치한 로고, 메뉴, 마이페이지 등이 들어가는 영역을 가리킵니다. 이 도움말에서는 아임웹 상단 디자인 모드의 주요 기능들에 대해 설명합니다.
Point 1. 최대 3개 열로 구성
사용자는 페이지 본문을 디자인할 때, 메뉴를 추가한 다음, 위젯을 추가해 콘텐츠를 삽입하고, 필요한 경우 섹션을 나누기도 합니다. 상단 역시 기본적인 제작 방식은 같습니다. 상단은 가로로 최대 3개 열까지 나눌 수 있으며, 각 열마다 필요한 위젯을 나누어 배치할 수 있습니다.
1. 위젯 배치에 따라 자동으로 나눠지는 상단 섹션
상단에 위젯을 추가할 수 있습니다. 추가한 위젯은 왼쪽/가운데/오른쪽으로 배치할 수 있으며, 배치된 위젯의 개수에 따라 최대 3개 열로 구성됩니다.
2. 열 너비 조절 방법
열의 너비를 조절할 수 있습니다. 열의 너비는 파란 점선을 통해 구분이 가능하며, 파란 점선을 마우스 클릭 후 좌우로 드래그함으로써 그 크기를 조절할 수 있습니다. 위젯이 차지하는 영역 대비 열의 너비가 모자라면, 해당 위젯은 정상적으로 표시되지 않을 수 있습니다.
Point 2. 다수의 행으로 구성 가능
페이지 본문을 여러 개의 섹션으로 구성할 수 있듯, 상단도 2개 이상의 섹션들로 구성할 수 있습니다.
1. 상단 섹션을 추가 방법
상단 위젯이 없는 영역에 마우스 포인터를 올리고 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴가 나타납니다. 컨텍스트 메뉴에서 빈 섹션 추가를 클릭해 섹션을 여러 개로 추가할 수 있습니다.
2. 섹션 단위로 상단 스크롤 고정하기
마우스 휠 스크롤 시 상단 섹션이 브라우저 최상단에 고정되도록 설정할 수 있습니다. 섹션을 여러 개 사용하시는 경우 특정 섹션만 고정되도록 개별 설정도 가능합니다.상단에 고정되길 원하는 섹션의 왼쪽 상단에 위치한 핀 아이콘을 클릭해 보세요. 상단 섹션 고정하기
3. 상단 고정메뉴 설정하기
마우스 스크롤 시 기본 상단 디자인과는 완전히 다른 디자인의 상단이 나타나도록 설정할 수도 있습니다. 오른쪽 상단 고정메뉴 설정을 클릭해 보세요.
Point 3. 상단 전용 위젯
로고, 로그인/장바구니, 메뉴 버튼 등 상단 디자인을 위한 전용 위젯들이 제공됩니다. 상단 전용 위젯 살펴보기
1. 위젯 추가 방법
마우스 포인터를 상단에 올리면 위젯 추가 아이콘이 나타납니다. 이 아이콘을 클릭하면 위젯 목록이 나타납니다.
2. 위젯 배치 방법
기존 위젯 위치 이동 방법과 똑같이 마우스로 위젯을 클릭 후 드래그 하는 것으로 위치를 옮길 수 있습니다. 위젯이 위치하는 열 역시 왼쪽 또는 오른쪽으로 드래그 하여 변경할 수 있습니다.
3. 위젯 디자인 변경 및 설정 방법
위젯 설정을 열면 각 위젯이 가진 고유의 옵션을 변경할 수 있습니다.
Point 4. 기본 상단과 겹치기 상단 디자인
상단 디자인은 크게 기본과 겹치기 상태로 나눠집니다. 겹치기란 상단 기본 디자인과 본문 배경 이미지를 겹치는 기능입니다. 따라서 일부 설정을 제외하고 디자인을 완전 다르게 할 수는 없지만 일부 설정을 다르게 지정할 수 있습니다.
상단 기본을 먼저 제작하고 겹치기 메뉴로 이동해 배경 이미지 어둡기 정도에 맞춰 로고, 메뉴 색상 등 설정을 변경해 보세요.
Point 5. 모바일 상단 디자인 가능
뷰포트를 모바일로 변경하여, 모바일 상단 디자인을 변경할 수 있습니다. 모바일 상단 편집하기
상단 기본과 겹치기 상태를 전환해가며 비교/디자인할 수 있습니다.
섹션이 여러 개인 경우, 원하는 섹션만 핀을 클릭해, 상단에 메뉴를 고정시킬 수 있습니다.
아임웹은 코딩을 모르더라도 원하는 사이트를 만들 수 있는 쉬우면서 강력한 쇼핑몰, 웹 제작 솔루션입니다. 그러나 처음 아임웹을 접하는 분들은 조금 막막해 하는 경우도 있는데요. 디자인 모드에서 가장 중요한 세 가지만 알고 있다면 막막했던 부분들이 순식간에 해소될 것입니다.
드래그로 위젯 이동
디자인 모드에서 추가된 이미지, 텍스트, 게시판 등 모든 위젯은 마우스 드래그로 쉽게 이동이 가능합니다. 순서를 변경하는 것 뿐 아니라 위/아래 어디든 배치할 수 있습니다.
마우스 오른쪽 버튼으로 설정
아임웹은 최대한 간결한 사용자 경험을 제공하기 위해 보이지 않도록 숨어 있는 경우도 있습니다. 그 중 하나가 바로 "설정" 부분인데요, 위젯이나 섹션에서 마우스 오른쪽 버튼을 누르면 팝업 메뉴가 나타나고 설정 및 삭제 등을 할 수 있습니다.
원하는 위치에 위젯 추가
페이지에 위젯을 추가하는 방법이 몇 가지 있지만 가장 쉬운 방법은 추가할 부근에서 버튼을 누르는 것입니다. 이 버튼을 누르고 추가할 위젯을 선택하기만 하면 해당 위치에 바로 삽입됩니다.
중요: 2017년 10월 16일 아임웹 79차 업데이트 이후 상단 디자인 자유도가 대폭 향상되었습니다. 놀라울 만큼 다양한 표현이 가능해졌으며, 이제 내 마음대로 이미지나 텍스트를 추가할 수도, 위치를 마음대로 옮길 수도 있습니다. 새로운 상단 디자인에 대해 더 자세히 알아보세요. 상단 디자인 주요 기능 알아보기
알림: 새로워진 상단 설정 업데이트와 함께 아래 도움말은 더 이상 유효하지 않음을 알려드립니다.
상단 메뉴의 활성화 스타일을 변경할 수 있습니다. (2016년 5월 17일자 업데이트) 총 7가지 활성화 스타일을 제공하고 있으며, 상세 스타일 옵션을 변경해 다양한 디자인이 가능합니다.
하단을 꾸미기 위한 각종 요소들을 편집할 수 있습니다.
하단 설정 열기
하단 요소를 변경하려면 하단 설정을 열어야 합니다. 하단 영역에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭해 하단 설정을 열어주세요. 상세한 지침이 필요한 경우 다음 하단 설정 열기 도움말을 참조합니다.
하단 요소 설명
1. 표시 요소
하단 설정에서 수정할 수 있는 요소들을 설명합니다.
2. 디자인 요소
하단의 텍스트 크기 및 색상, 상하 여백, 배경색 또는 배경이미지 설정이 가능합니다.
3. SNS 바로가기
하단에 표시되는 SNS 바로가기 링크를 편집합니다. 이곳에서 SNS 링크를 편집해도, 위 1번 표시 요소에서 SNS 바로가기를 선택하지 않으면 표시되지 않습니다. SNS 링크 편집방법은 다음 도움말을 통해 자세히 알아보실 수 있습니다.
하단 SNS 링크 추가 및 삭제하기
도움말에 찾으시는 답변이 없으신가요? 문의하기
아임웹에서 상단이란 웹사이트 최상단에 위치한 로고, 메뉴, 마이페이지 등이 들어가는 영역을 가리킵니다. 이 도움말에서는 아임웹 상단 디자인 모드의 주요 기능들에 대해 설명합니다.
Point 1. 최대 3개 열로 구성
사용자는 페이지 본문을 디자인할 때, 메뉴를 추가한 다음, 위젯을 추가해 콘텐츠를 삽입하고, 필요한 경우 섹션을 나누기도 합니다. 상단 역시 기본적인 제작 방식은 같습니다. 상단은 가로로 최대 3개 열까지 나눌 수 있으며, 각 열마다 필요한 위젯을 나누어 배치할 수 있습니다.
1. 위젯 배치에 따라 자동으로 나눠지는 상단 섹션
상단에 위젯을 추가할 수 있습니다. 추가한 위젯은 왼쪽/가운데/오른쪽으로 배치할 수 있으며, 배치된 위젯의 개수에 따라 최대 3개 열로 구성됩니다.
2. 열 너비 조절 방법
열의 너비를 조절할 수 있습니다. 열의 너비는 파란 점선을 통해 구분이 가능하며, 파란 점선을 마우스 클릭 후 좌우로 드래그함으로써 그 크기를 조절할 수 있습니다. 위젯이 차지하는 영역 대비 열의 너비가 모자라면, 해당 위젯은 정상적으로 표시되지 않을 수 있습니다.
Point 2. 다수의 행으로 구성 가능
페이지 본문을 여러 개의 섹션으로 구성할 수 있듯, 상단도 2개 이상의 섹션들로 구성할 수 있습니다.
1. 상단 섹션을 추가 방법
상단 위젯이 없는 영역에 마우스 포인터를 올리고 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴가 나타납니다. 컨텍스트 메뉴에서 빈 섹션 추가를 클릭해 섹션을 여러 개로 추가할 수 있습니다.
2. 섹션 단위로 상단 스크롤 고정하기
마우스 휠 스크롤 시 상단 섹션이 브라우저 최상단에 고정되도록 설정할 수 있습니다. 섹션을 여러 개 사용하시는 경우 특정 섹션만 고정되도록 개별 설정도 가능합니다.상단에 고정되길 원하는 섹션의 왼쪽 상단에 위치한 핀 아이콘을 클릭해 보세요. 상단 섹션 고정하기
3. 상단 고정메뉴 설정하기
마우스 스크롤 시 기본 상단 디자인과는 완전히 다른 디자인의 상단이 나타나도록 설정할 수도 있습니다. 오른쪽 상단 고정메뉴 설정을 클릭해 보세요.
Point 3. 상단 전용 위젯
로고, 로그인/장바구니, 메뉴 버튼 등 상단 디자인을 위한 전용 위젯들이 제공됩니다. 상단 전용 위젯 살펴보기
1. 위젯 추가 방법
마우스 포인터를 상단에 올리면 위젯 추가 아이콘이 나타납니다. 이 아이콘을 클릭하면 위젯 목록이 나타납니다.
2. 위젯 배치 방법
기존 위젯 위치 이동 방법과 똑같이 마우스로 위젯을 클릭 후 드래그 하는 것으로 위치를 옮길 수 있습니다. 위젯이 위치하는 열 역시 왼쪽 또는 오른쪽으로 드래그 하여 변경할 수 있습니다.
3. 위젯 디자인 변경 및 설정 방법
위젯 설정을 열면 각 위젯이 가진 고유의 옵션을 변경할 수 있습니다.
Point 4. 기본 상단과 겹치기 상단 디자인
상단 디자인은 크게 기본과 겹치기 상태로 나눠집니다. 겹치기란 상단 기본 디자인과 본문 배경 이미지를 겹치는 기능입니다. 따라서 일부 설정을 제외하고 디자인을 완전 다르게 할 수는 없지만 일부 설정을 다르게 지정할 수 있습니다.
상단 기본을 먼저 제작하고 겹치기 메뉴로 이동해 배경 이미지 어둡기 정도에 맞춰 로고, 메뉴 색상 등 설정을 변경해 보세요.
Point 5. 모바일 상단 디자인 가능
뷰포트를 모바일로 변경하여, 모바일 상단 디자인을 변경할 수 있습니다. 모바일 상단 편집하기
자주 묻는 질문 BEST
도움말에 찾으시는 답변이 없으신가요? 문의하기
웹사이트 제작 중 상단(로고, 메뉴바 등) 또는 하단(사업자정보, 저작권 정보 등) 영역을 감추고 표시할 수 있습니다.
관련 도움말
인트로 페이지, 공사중/점검중 페이지를 제작하고자 하시나요? 그렇다면 아래의 도움말을 살펴보세요.
도움말에 찾으시는 답변이 없으신가요? 문의하기
원페이지는 하나의 웹 페이지에 주요한 내용들을 포함하여 구성하는 웹 디자인 방법입니다. 아임웹에서도 디자인한 여러 메뉴들을 하나의 원페이지로 구성할 수 있습니다.
시작에 앞서
원페이지 사이트로 구성하기에 앞서 메뉴를 생성하고 디자인해야 합니다. 디자인을 모두 마치고 원페이지 구성을 설정하면, 디자인한 1차 상위 메뉴들이 하나의 페이지로 구성됩니다.
2차 이하의 하위 메뉴는 원페이지 구성에 포함되지 않으며, 각각 독립적인 페이지로만 접근할 수 있습니다.
원페이지 구성방법
원페이지 구성을 선택합니다.
원페이지 구성에서 제외하기
4. 디자인 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
5. 원페이지 구성에서 제외한 메뉴는, 해당 메뉴를 클릭해 확인합니다.
6.문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.
도움말에 찾으시는 답변이 없으신가요? 문의하기
아임웹은 코딩을 모르더라도 원하는 사이트를 만들 수 있는 쉬우면서 강력한 쇼핑몰, 웹 제작 솔루션입니다. 그러나 처음 아임웹을 접하는 분들은 조금 막막해 하는 경우도 있는데요. 디자인 모드에서 가장 중요한 세 가지만 알고 있다면 막막했던 부분들이 순식간에 해소될 것입니다.
드래그로 위젯 이동
디자인 모드에서 추가된 이미지, 텍스트, 게시판 등 모든 위젯은 마우스 드래그로 쉽게 이동이 가능합니다. 순서를 변경하는 것 뿐 아니라 위/아래 어디든 배치할 수 있습니다.
마우스 오른쪽 버튼으로 설정
아임웹은 최대한 간결한 사용자 경험을 제공하기 위해 보이지 않도록 숨어 있는 경우도 있습니다. 그 중 하나가 바로 "설정" 부분인데요, 위젯이나 섹션에서 마우스 오른쪽 버튼을 누르면 팝업 메뉴가 나타나고 설정 및 삭제 등을 할 수 있습니다.
원하는 위치에 위젯 추가
페이지에 위젯을 추가하는 방법이 몇 가지 있지만 가장 쉬운 방법은 추가할 부근에서 버튼을 누르는 것입니다. 이 버튼을 누르고 추가할 위젯을 선택하기만 하면 해당 위치에 바로 삽입됩니다.
도움말에 찾으시는 답변이 없으신가요? 문의하기
sample-gird-move.webm
653KB네. 가능합니다.
아임웹 디자인 모드를 사용하면, 코딩을 몰라도 디자인 레이아웃을 비롯해 페이지, 텍스트, 이미지, 동영상, 각종 페이지 꾸미기에 필요한 위젯(지도, 달력, 갤러리, 게시판 등등)들로 빠르고 멋진 사이트 제작이 가능합니다.
도움말에 찾으시는 답변이 없으신가요? 문의하기
상단 메뉴의 활성화 스타일을 변경할 수 있습니다. (2016년 5월 17일자 업데이트) 총 7가지 활성화 스타일을 제공하고 있으며, 상세 스타일 옵션을 변경해 다양한 디자인이 가능합니다.
변경방법
활성 스타일 항목에서, 스타일 옵션을 변경해 원하는 모양을 선택합니다.
도움말에 찾으시는 답변이 없으신가요? 문의하기
테이블 도구를 사용해 테이블(표) 디자인을 편집할 수 있습니다.
시작에 앞서
테이블을 디자인하기 위해선 먼저 텍스트 위젯을 사용해 테이블을 추가해야 합니다.
테이블(표) 추가하기
테이블 도구 열기
테이블 스타일 옵션 보기
테이블 스타일을 변경할 수 있으며, 스타일은 여러 옵션들로 조합할 수 있습니다. 예를 들어, 가로 구분선만 추가하거나, 가로 구분선 외 Hover 효과, 줄무늬 행, 반응형 테이블을 한꺼번에 활성화 시킬 수도 있습니다.
도움말에 찾으시는 답변이 없으신가요? 문의하기
페이지에 글을 작성하고, 이미지, 표, 링크 등을 삽입할 수 있습니다. 텍스트를 작성할 땐 텍스트 위젯을 사용합니다. 텍스트 위젯은 텍스트 에디터를 포함하고 있으며, 텍스트 에디터에는 글을 작성하고 꾸미기 위한 다양한 도구가 준비되어 있습니다.
페이지에 텍스트 작성하기
텍스트 에디터가 나오면 키보드로 글을 작성하고, 텍스트 도구를 활용해 스타일을 추가합니다. (필요에 따라 이미지나 표를 추가할 수 있으며, 이모티콘을 사용할 수도 있습니다.)
관련 도움말
도움말에 찾으시는 답변이 없으신가요? 문의하기
아임웹 디자인 모드는 사이트의 모양을 쉽게 맞춤설정할 수 있는 새로운 방식입니다. 다양한 섹션과 위젯을 이용하여 나만의 사이트를 표현할 수 있습니다.
기본 사용방법
아임웹은 위젯과 섹션의 조합으로 사이트를 구성합니다. 각 위젯은 시각적으로 안정된 느낌과 사용의 편의를 위해 12 그리드 단위로 조정할 수 있습니다.
아임웹에서 위젯은 사이트를 구성하는 가장 작은 단위입니다. 이미지, 텍스트, 버튼, 구분선을 비롯해 게시판, 갤러리, 지도도 위젯으로 구성되어 있습니다.
위젯 추가
페이지에 위젯을 추가하는 두 가지 방법이 있습니다.
1. 페이지에 위젯 삽입
2. 사용자 정의 위치에 위젯 삽입
특정 위젯의 아래나 위에 위젯을 추가하고 싶은 경우에는 다음과 같은 방법을 사용할 수 있습니다.
위젯의 이동
추가된 위젯은 언제든지 이동할 수 있습니다. 이동을 원하는 위젯을 드래그하면 됩니다. 위젯 이동방법
위젯의 설정 변경 및 삭제
각 위젯들은 고유의 속성들을 가지고 있으며 이를 맞춤설정할 수 있습니다. 예를 들어 이미지 위젯에 포함된 이미지를 변경하기 위해서는 이미지 위젯의 속성에 진입해야 합니다. 이미지 위젯의 속성은 다음과 같은 방법으로 진입할 수 있습니다.
도움말에 찾으시는 답변이 없으신가요? 문의하기