아임웹 상단 메뉴 위젯 이동 방법

아임웹 상단 메뉴 위젯 이동 방법

1. 시작하며

아임웹으로 홈페이지를 제작할 때, 상단 메뉴는 방문자에게 첫인상을 전달하는 매우 중요한 요소입니다.
상단 메뉴 위젯은 사이트의 전반적인 디자인과 사용자 경험을 결정짓는 핵심 구성 요소로, 메뉴의 위치와 배열에 따라 사이트의 가독성과 네비게이션이 크게 달라집니다!

상단 메뉴
상단 메뉴

그러나 상단 메뉴의 위젯을 원하는 위치로 이동하려고 할 때, 다른 위젯처럼 간단하게 되지 않아 당황한 경험이 있으신가요?

이번 글에서는 상단 메뉴 위젯을 이동하는 두 가지 방법을 자세히 설명드리겠습니다.
이 글을 참고하여 보다 깔끔하고 직관적인 메뉴를 구성하시길 바랍니다!






2. 상단 메뉴 위젯 이동 방법

상단 메뉴 위젯을 이동하는 방식은 크게 두 가지로 나눌 수 있습니다.

  • 1. 섹션의 왼쪽, 가운데, 오른쪽 열로 이동하기
  • 2. 열 안에서 원하는 위치로 이동하기



2.1 섹션의 왼쪽, 가운데, 오른쪽 열로 이동하기

상단 메뉴 섹션에는 최대 3개의 열(왼쪽, 가운데, 오른쪽)로 나뉘며, 위젯은 이 열 단위로 이동할 수 있습니다.

점선으로 구분되어 있는 3개의 열
점선으로 구분되어 있는 3개의 열

[이동 방법]

방법 1: 드래그로 이동

위젯을 클릭한 후 드래그하면 옅은 파란색 영역이 표시됩니다. 파란색 영역이 나타나면 마우스 버튼을 놓아 해당 열로 이동됩니다.

방법1 : 드래그로 이동 (VIVADE라는 로고 위젯을 드래그하여 왼쪽 열에 마우스를 가져다 놓은 캡처 화면)
방법1 : 드래그로 이동 (VIVADE라는 로고 위젯을 드래그하여 왼쪽 열에 마우스를 가져다 놓은 캡처 화면)

방법 2: 우클릭 메뉴로 이동

이동할 위젯을 우클릭한 후 '왼쪽으로 이동', '가운데로 이동', '오른쪽으로 이동' 중 원하는 옵션을 선택합니다.

방법2 : 위젯 우클릭 메뉴로 이동
방법2 : 위젯 우클릭을 통해 이동

2.2 열 안에서 원하는 위치로 이동하기

각 열 안에서도 위젯의 순서를 자유롭게 조절할 수 있습니다.

[이동 방법]

열 안에서 위젯을 클릭 후 드래그하면 검정색 가이드라인이 나타납니다. 이 가이드라인이 원하는 위치에 표시되면 마우스 버튼을 놓아 위젯을 이동합니다.

드래그로 이동 (VIVADE라는 로고 위젯을 왼쪽 열 안에 마우스를 가져다 놓은 캡처 화면)
드래그로 이동 (VIVADE라는 로고 위젯을 왼쪽 열 안에 마우스를 가져다 놓은 캡처 화면)

[주의 사항]

한 열에 여러 개의 위젯이 있을 경우, 위젯 간 간격을 충분히 확인하면서 배치해야 합니다.






3. 상단 메뉴 위젯 이동 요약

구분 설정 방법 사용 용도
열 간 이동 드래그 또는 우클릭 메뉴 사용 왼쪽, 가운데, 오른쪽 열 간 이동
열 내 이동 드래그로 검정 가이드라인 확인 후 배치 열 내부에서 순서 변경





4. 마무리

아임웹 상단 메뉴 위젯을 효과적으로 이동하는 방법에 대해 알아보았습니다.

상단 메뉴는 홈페이지의 첫인상을 결정하는 중요한 요소로, 메뉴의 위치와 배치는 전체 디자인과 사용자 경험에 큰 영향을 미칩니다. 위에서 소개한 두 가지 방법을 참고하여, 필요에 따라 적절히 사용해 보세요!

[함께 읽으면 좋은 글]

* 아임웹 상단 메뉴 설정: 상단 기본, 겹치기, 스크롤 고정, 고정메뉴

아임웹 상단 메뉴 설정: 상단 기본, 겹치기, 스크롤 고정, 고정메뉴 | 아임웹 홈페이지 지식 저장소, 웹카이브
아임웹 상단 메뉴 설정의 네 가지 주요 기능(상단 기본, 겹치기, 스크롤 고정, 고정메뉴)의 차이점과 설정 방법을 안내합니다.

* 아임웹 상단 설정에서 배너 만들기

아임웹 상단 설정에서 배너 만들기 | 아임웹 홈페이지 지식 저장소, 웹카이브
아임웹 상단 배너를 간단하면서도 효과적으로 만드는 방법과 고정 설정, 활용 팁을 소개합니다.

게시글 더보기

아임웹 동영상 위젯 모서리 둥글게 (코드)

아임웹 동영상 위젯 모서리 둥글게 (코드)

1. 시작하며 아임웹으로 홈페이지를 만들다 보면 다양한 위젯을 배치하게 됩니다. 그중에서도 동영상 위젯은 시각적인 정보 전달에 효과적인 요소인데요, 이때 다른 요소들과 조화롭게 보이기 위해서는 디자인 디테일이 매우 중요합니다. 예를 들어 이미지나 버튼은 둥글게 처리했는데, 동영상만 각져 있다면 화면의 전체적인 느낌이 어색해질 수 있습니다. 그래서 이번 글에서는 아임웹 동영상 위젯의 모서리를

아임웹 텍스트가 떠오르는 애니메이션 (코드)

아임웹 텍스트가 떠오르는 애니메이션 (코드)

1. 시작하며 홈페이지를 방문한 첫 순간, 사용자의 이목을 사로잡는 요소 중 하나는 바로 텍스트 애니메이션입니다. 정적인 텍스트보다 살짝 움직이는 텍스트는 훨씬 더 주목받을 수 있으며, 브랜드나 메시지를 자연스럽게 강조하는 데 유용합니다. 이번 글에서는 아임웹을 통해 텍스트 한 줄씩 부드럽게 떠오르는 애니메이션 효과를 구현하는 방법을 안내드립니다. 2. 텍스트가 위로 떠오르는 부드러운

아임웹 라이브 뱃지 만들기 (코드)

아임웹 라이브 뱃지 만들기 (코드)

1. 홈페이지에 ‘LIVE’ 뱃지가 필요한 이유 홈페이지에서 후기나 리뷰를 실시간으로 보여줄 때, 시각적으로 주목받을 수 있는 방법은 매우 중요합니다. 단순한 텍스트보다 시각적으로 강조된 뱃지를 활용하면 사용자의 집중도를 높이고, 정보의 긴급성이나 신뢰도를 효과적으로 전달할 수 있습니다. 실시간 후기, 라이브 상담, 긴급 공지, 한정 이벤트와 같이 현재 진행 중인 정보를 보여줄 때

아임웹 입력폼 개인정보수집동의 숨기기

아임웹 입력폼 개인정보수집동의 숨기기 (코드)

1. 시작하며 아임웹에서 입력폼을 통해 고객의 개인정보를 수집하거나 제3자에게 제공하는 경우, 반드시 관련 동의 항목을 명시해야 합니다. 하지만 입력폼 하단에 긴 동의 문구가 노출되면 폼이 길어지고 가독성도 떨어지기 쉬운데요, 이번 글에서는 입력폼 디자인을 해치지 않으면서도 개인정보 동의를 받을 수 있는 방법을 소개해 드리겠습니다. 2. 아임웹 입력폼 동의 항목 기본 설정