Wix 에디터: 전체 화면 팝업 메뉴 추가하기
4 분 분량
라이트박스 요소를 사용해 멋진 전체 화면 팝업 메뉴를 만들어 보세요. 방문자가 "메뉴" 버튼을 클릭하면 아래와 같이 사이트 콘텐츠 위에 열립니다.
1 단계 | 사이트에 라이트박스 추가하기
먼저 요소 추가 패널에서 사이트에 라이트박스를 추가합니다. 라이트박스는 나중에 다시 디자인할 수 있습니다.
라이트박스를 추가하려면:
- 에디터 왼쪽에서 요소 추가
를 클릭합니다. - 인터랙티브를 선택합니다.
- 라이트박스를 선택해 사이트에 추가합니다.
2 단계 | 라이트박스 메뉴 설정하기
라이트박스를 추가한 후 방문자가 사이트에 액세스할 때마다 자동으로 표시되지 않도록 설정합니다. 그런 다음 원하는 대로 라이트박스를 디자인하고 세로 메뉴를 추가합니다.
라이트박스를 설정하려면:
- 에디터에서 라이트박스를 클릭합니다.
- 설정
아이콘을 클릭합니다. - 라이트박스의 이름을 "메뉴"와 같이 알아보기 쉬운 이름으로 변경합니다.
- 라이트박스 자동 표시에서 OFF를 선택합니다.
3 단계 | 메뉴 열기 버튼 추가하기
이제 라이트박스와 메뉴가 준비되었으므로 방문자가 메뉴에 액세스하기 위해 클릭하는 버튼을 추가합니다. 그런 다음 버튼을 라이트박스에 연결합니다.
버튼을 추가하려면:
- 에디터 왼쪽에서 요소 추가
를 클릭합니다. - 장식을 선택합니다.
- 기본 모양을 선택합니다.
- 기본 모양에서 더보기를 클릭합니다.
- 검색창에 "메뉴"를 입력란 후 Enter 키를 누릅니다.
- 메뉴 버튼 디자인을 선택한 후 페이지에 추가를 클릭합니다.
도움말: 메뉴 버튼은 머리글과 같이 사이트에서 눈에 잘 띄는 위치에 배치하세요. - 에디터에서 메뉴 버튼을 선택합니다.
- (선택 사항) 디자인
아이콘을 클릭해 메뉴 버튼을 디자인합니다. - 링크
아이콘을 클릭합니다. - 왼쪽의 라이트박스를 선택합니다.
- 드롭다운 메뉴에서 라이트박스를 선택합니다.
- 완료를 클릭합니다.
도움말:
- 사이트에서 눈에 잘 띄는 위치에 메뉴 버튼을 배치합니다. 머리글에 배치하거나 위치 고정 기능을 사용해 사이트 상단에 고정할 수 있습니다. 메뉴 버튼을 머리글에 배치하지 않는 경우 모든 페이지에 표시되도록 설정하세요.
- 나만의 메뉴 버튼을 디자인할 수도 있습니다. 텍스트 버튼, 아이콘 버튼 또는 다른 모양으로 자유롭게 디자인할 수 있습니다. 아래에서 예시를 확인하세요.
4 단계 | 모바일 사이트에서 버튼 비공개하기
추가한 버튼을 이미 전체 화면 메뉴 프리셋이 있는 모바일 사이트에서 비공개합니다.
버튼을 비공개하려면:
- 모바일 에디터에 액세스합니다.
- 라이트박스에 연결된 메뉴 버튼을 클릭합니다.
- 비공개
아이콘을 클릭합니다.
도움이 되었나요?
|