하단을 꾸미기 위한 각종 요소들을 편집할 수 있습니다.


하단 설정 열기


하단 요소를 변경하려면 하단 설정을 열어야 합니다. 하단 영역에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭해 하단 설정을 열어주세요. 상세한 지침이 필요한 경우 다음 하단 설정 열기 도움말을 참조합니다.



하단 요소 설명


1. 표시 요소

하단 설정에서 수정할 수 있는 요소들을 설명합니다.

  1. 사이트 명: 하단에 사이트 이름을 표시합니다.
  2. 메인 메뉴: 상단 메뉴(메인 메뉴)를 하단에 표시합니다.
  3. 하단 메뉴: 하단 메뉴를 하단에 표시합니다. 하단 메뉴가 없는 경우 선택해도 표시되지 않습니다.
  4. SNS 바로가기: Facbook, Instargram, YouTube, 카페, 블로그 등 링크 아이콘을 표시합니다. SNS 링크 이외에도 즐겨찾기, 전화걸기, 파일첨부 등 다양한 링크를 연결할 수 있습니다. 링크 방식 종류
  5. 저작권 문구 표시: 저작권 문구(Copyright)를 표시합니다.
  6. 앱 링크 표시: 안드로이드/iOS 앱 사용자의 경우 앱 다운로드 링크를 표시할 수 있습니다.
  7. 약관/개인정보처리방침: 이용약관 및 개인정보처리방침 링크를 표시합니다.
  8. 국내/국외여행약관: 여행업에 종사하는 경우 여행약관을 표시합니다.


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. 모바일 상단 디자인 가능


뷰포트모바일로 변경하여, 모바일 상단 디자인을 변경할 수 있습니다. 모바일 상단 편집하기


  1. 상단 기본과 겹치기 상태를 전환해가며 비교/디자인할 수 있습니다.
  2. 섹션이 여러 개인 경우, 원하는 섹션만 핀을 클릭해, 상단에 메뉴를 고정시킬 수 있습니다.
  3. 원하는 위젯을 추가할 수 있으며, 위치 역시 마음대로 변경이 가능합니다.
  4. PC와 마찬가지로 섹션 설정을 통해, 배경색, 글자색, 간격 등을 조절할 수 있습니다.
  5. 평소에는 숨겨져 있다가, 메뉴를 터치하면 나타나는 펼침메뉴를 넣는 것도 가능합니다.
  6. 뷰포트를 변경해, 언제든 PC와 모바일 상단 디자인을 비교해가며 디자인할 수 있습니다.


자주 묻는 질문 BEST

  • 상단 메뉴가 점으로 표시됩니다.
  • 메가 드롭다운 상단 메뉴 사용하기
  • 상단 사이드 메뉴에 로고, 추가/변경하기
  • 상단 구분선 추가하기
  • 마우스 휠 스크롤 시 전환되는 상단 고정메뉴 만들기


도움말에 찾으시는 답변이 없으신가요? 문의하기

웹사이트 제작 중 상단(로고, 메뉴바 등) 또는 하단(사업자정보, 저작권 정보 등) 영역을 감추고 표시할 수 있습니다. 

중요: 모바일에서도 상단 영역과 하단 영역은 감춰집니다.


  • 메뉴 상단 숨김
  • 메뉴 하단 숨김




관련 도움말


인트로 페이지, 공사중/점검중 페이지를 제작하고자 하시나요? 그렇다면 아래의 도움말을 살펴보세요. 


  • 인트로 페이지(대문) 만들기
  • 나만의 공사중/점검중 페이지 만들기


도움말에 찾으시는 답변이 없으신가요? 문의하기

 


원페이지는 하나의 웹 페이지에 주요한 내용들을 포함하여 구성하는 웹 디자인 방법입니다. 아임웹에서도 디자인한 여러 메뉴들을 하나의 원페이지로 구성할 수 있습니다. 


시작에 앞서

원페이지 사이트로 구성하기에 앞서 메뉴를 생성하고 디자인해야 합니다. 디자인을 모두 마치고 원페이지 구성을 설정하면, 디자인한 1차 상위 메뉴들이 하나의 페이지로 구성됩니다.

2차 이하의 하위 메뉴는 원페이지 구성에 포함되지 않으며, 각각 독립적인 페이지로만 접근할 수 있습니다.


원페이지 구성방법


  1. 디자인 모드에 접속합니다. 접속방법
  2. 디자인 모드 오른쪽 상단의 톱니바퀴 아이콘을 클릭합니다.
  3. 마우스 휠 스크롤을 내려 옵션 항목으로 이동합니다.
  4. 원페이지 구성을 선택합니다.

  5. 공통 디자인 설정 바깥 영역을 클릭합니다.
  6. 저장 버튼을 클릭합니다.
  7. 사이트가 원페이지로 재구성됩니다.


원페이지 구성에서 제외하기


  1. 디자인 모드 왼쪽 상단의 메뉴 관리 ≡ 를 클릭합니다.
  2. 원페이지 구성에서 제외할 메뉴명 오른쪽 끝의 ⓘ을 클릭합니다.
  3. 메뉴 설정 창이 켜지면, 옵션 항목에서 원페이지 구성 항목에 제외를 선택합니다.
참고: 제외 옵션은 웹사이트를 원페이지로 구성했을 때만 표시됩니다.

4. 디자인 오른쪽 상단의 미리보기 아이콘을 클릭합니다.

5. 원페이지 구성에서 제외한 메뉴는, 해당 메뉴를 클릭해 확인합니다.

6.문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.


도움말에 찾으시는 답변이 없으신가요? 문의하기 


아임웹은 코딩을 모르더라도 원하는 사이트를 만들 수 있는 쉬우면서 강력한 쇼핑몰, 웹 제작 솔루션입니다. 그러나 처음 아임웹을 접하는 분들은 조금 막막해 하는 경우도 있는데요. 디자인 모드에서 가장 중요한 세 가지만 알고 있다면 막막했던 부분들이 순식간에 해소될 것입니다. 


드래그로 위젯 이동


디자인 모드에서 추가된 이미지, 텍스트, 게시판 등 모든 위젯은 마우스 드래그로 쉽게 이동이 가능합니다. 순서를 변경하는 것 뿐 아니라 위/아래 어디든 배치할 수 있습니다. 


마우스 오른쪽 버튼으로 설정

아임웹은 최대한 간결한 사용자 경험을 제공하기 위해 보이지 않도록 숨어 있는 경우도 있습니다. 그 중 하나가 바로 "설정" 부분인데요, 위젯이나 섹션에서 마우스 오른쪽 버튼을 누르면 팝업 메뉴가 나타나고 설정 및 삭제 등을 할 수 있습니다.


원하는 위치에 위젯 추가

페이지에 위젯을 추가하는 방법이 몇 가지 있지만 가장 쉬운 방법은 추가할 부근에서 버튼을 누르는 것입니다. 이 버튼을 누르고 추가할 위젯을 선택하기만 하면 해당 위치에 바로 삽입됩니다.


도움말에 찾으시는 답변이 없으신가요? 문의하기


네. 가능합니다.


아임웹 디자인 모드를 사용하면, 코딩을 몰라도 디자인 레이아웃을 비롯해 페이지, 텍스트, 이미지, 동영상, 각종 페이지 꾸미기에 필요한 위젯(지도, 달력, 갤러리, 게시판 등등)들로 빠르고 멋진 사이트 제작이 가능합니다. 


도움말에 찾으시는 답변이 없으신가요? 문의하기


중요: 2017년 10월 16일 아임웹 79차 업데이트 이후 상단 디자인 자유도가 대폭 향상되었습니다. 놀라울 만큼 다양한 표현이 가능해졌으며, 이제 내 마음대로 이미지나 텍스트를 추가할 수도, 위치를 마음대로 옮길 수도 있습니다. 새로운 상단 디자인에 대해 더 자세히 알아보세요. 상단 디자인 주요 기능 알아보기


알림: 새로워진 상단 설정 업데이트와 함께 아래 도움말은 더 이상 유효하지 않음을 알려드립니다.


상단 메뉴의 활성화 스타일을 변경할 수 있습니다. (2016년 5월 17일자 업데이트) 총 7가지 활성화 스타일을 제공하고 있으며, 상세 스타일 옵션을 변경해 다양한 디자인이 가능합니다.



변경방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 상단 메뉴 스타일 변경을 위해 상단 설정으로 진입합니다. 상단 설정 열기
  3. 메뉴 위젯을 추가합니다. 상단 위젯 추가하기
  4. 메뉴 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 컨텍스트 메뉴가 나오면 메뉴 설정을 클릭합니다.
  6. 활성 스타일 항목에서, 스타일 옵션을 변경해 원하는 모양을 선택합니다.

  7. 필요에 따라 색상, 크기 등을 변경합니다.
  8. 사이드 바의 바깥 영역을 클릭해 저장합니다.


도움말에 찾으시는 답변이 없으신가요? 문의하기


테이블 도구를 사용해 테이블(표) 디자인을 편집할 수 있습니다.


시작에 앞서

테이블을 디자인하기 위해선 먼저 텍스트 위젯을 사용해 테이블을 추가해야 합니다.

테이블(표) 추가하기


테이블 도구 열기

  1. 테이블을 클릭합니다.
  2. 테이블 도구가 나타납니다.
  3. 테이블 도구에서 테이블의 행 또는 열을 추가하거나, 셀 분할/합치기, 정렬 등 테이블을 편집할 수 있습니다.


테이블 스타일 옵션 보기

테이블 스타일을 변경할 수 있으며, 스타일은 여러 옵션들로 조합할 수 있습니다. 예를 들어, 가로 구분선만 추가하거나, 가로 구분선 외 Hover 효과, 줄무늬 행, 반응형 테이블을 한꺼번에 활성화 시킬 수도 있습니다.

  • 가로 구분선만: 이 옵션이 활성화 되면 세로 구분선이 사라지고 가로 구분선만 남게 됩니다.
  • 테두리 없음: 모든 테두리가 보이지 않게 됩니다. 이 옵션 이 활성화 될 경우 가로 구분선만, 테두리 진하게의 옵션이 무시됩니다.
  • 테두리 진하게: 테두리를 조금 더 진하게 표시합니다.
  • Hover 효과(행 단위): 마우스 커서가 테이블 위에 올라가면 행 단위로 음영을 표시합니다.
  • 테이블 헤더 음영: 테이블 툴바의 H 를 클릭하여 테이블 헤더를 추가할 수 있습니다. 테이블 헤더는 주로 테이블 열의 제목으로 사용하며, 이 옵션을 적용하면 음영이 삽입됩니다.
  • 줄무늬 행: 음영이 행 단위로 번갈아 가면서 삽입됩니다.
  • 반응형 테이블: 모바일 기기와 같이 화면 크기가 작은 기기에서 테이블이 지나치게 좁아져 방문자가 읽기 어려운 현상을 최소화 시킵니다.


도움말에 찾으시는 답변이 없으신가요? 문의하기



페이지에 글을 작성하고, 이미지, 표, 링크 등을 삽입할 수 있습니다. 텍스트를 작성할 땐 텍스트 위젯을 사용합니다. 텍스트 위젯은 텍스트 에디터를 포함하고 있으며, 텍스트 에디터에는 글을 작성하고 꾸미기 위한 다양한 도구가 준비되어 있습니다.


페이지에 텍스트 작성하기

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 위젯 추가+ 아이콘을 클릭합니다.
  3. 텍스트 위젯을 클릭합니다.
  4. 삽입된 텍스트 위젯을 마우스로 더블-클릭합니다.
  5. 텍스트 에디터가 나오면 키보드로 글을 작성하고, 텍스트 도구를 활용해 스타일을 추가합니다. (필요에 따라 이미지나 표를 추가할 수 있으며, 이모티콘을 사용할 수도 있습니다.)

  6. 텍스트 편집기 영역 바깥을 클릭하여 텍스트 작성을 완료합니다.


관련 도움말

  • 테이블(표) 추가하기
  • 텍스트 줄간격 기본 조절 방법
  • 텍스트 링크 추가하기
  • 텍스트 위젯, 비주얼섹션, 상품 요약설명 등에 버튼 추가하는 방법


도움말에 찾으시는 답변이 없으신가요? 문의하기


아임웹 디자인 모드는 사이트의 모양을 쉽게 맞춤설정할 수 있는 새로운 방식입니다. 다양한 섹션과 위젯을 이용하여 나만의 사이트를 표현할 수 있습니다.


기본 사용방법

아임웹은 위젯과 섹션의 조합으로 사이트를 구성합니다. 각 위젯은 시각적으로 안정된 느낌과 사용의 편의를 위해 12 그리드 단위로 조정할 수 있습니다. 


아임웹에서 위젯은 사이트를 구성하는 가장 작은 단위입니다. 이미지, 텍스트, 버튼, 구분선을 비롯해 게시판, 갤러리, 지도도 위젯으로 구성되어 있습니다.


위젯 추가

페이지에 위젯을 추가하는 두 가지 방법이 있습니다.


1. 페이지에 위젯 삽입

  1. 디자인 모드의 왼쪽 상단에 있는 위젯 추가  를 클릭합니다.
  2. 추가할 위젯을 선택합니다.
  3. 현재 보고 있는 화면 부근에 위젯이 추가되며, 추가된 위젯 위치로 화면이 스크롤 됩니다.


2. 사용자 정의 위치에 위젯 삽입

특정 위젯의 아래나 위에 위젯을 추가하고 싶은 경우에는 다음과 같은 방법을 사용할 수 있습니다.

  1. 위젯과 위젯 사이 경계면에 마우스 포인터를 올립니다.
  2. ⨁ 버튼이 나타나면 클릭합니다.
  3. 추가할 위젯을 선택합니다.
  4. ⨁를 클릭한 곳에 위젯이 삽입됩니다.


위젯의 이동

추가된 위젯은 언제든지 이동할 수 있습니다. 이동을 원하는 위젯을 드래그하면 됩니다. 위젯 이동방법


위젯의 설정 변경 및 삭제

각 위젯들은 고유의 속성들을 가지고 있으며 이를 맞춤설정할 수 있습니다. 예를 들어 이미지 위젯에 포함된 이미지를 변경하기 위해서는 이미지 위젯의 속성에 진입해야 합니다. 이미지 위젯의 속성은 다음과 같은 방법으로 진입할 수 있습니다.

  1. 위젯에 마우스 포인터를 올립니다.
  2. 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴(컨텍스트 메뉴)가 나타납니다.
  3. 맞춤설정하고 싶은 경우, 컨텍스트 메뉴 맨 위에 있는 (위젯이름) 설정을 클릭합니다.
  4. 위젯을 삭제하고 싶은 경우, 맨 아래에 있는 삭제를 클릭합니다.


도움말에 찾으시는 답변이 없으신가요? 문의하기



도움말에 찾으시는 답변이 없으신가요? 문의하기
TOP