웹사이트 분위기를 바꾸는 메뉴 색상 설정법🎨 | 1분 디자인 레시피
2023. 11. 17
웹사이트 분위기에 살짝 변화를 주고 싶은데.. 너무 어렵게 느껴지시나요? 그렇다면 우선 메뉴 색상부터 다르게 설정해 봅시다. 클릭 몇 번이면 메뉴 내 텍스트와 색상을 다채롭게 변경할 수 있으니까요!
이번 아임웹 레시피에서는 케이크처럼 달콤 폭신한 수제 다이어리를 만드는 브랜드 <러브케이크바스켓>의 사례를 통해 웹사이트 메뉴 색상 설정하는 법을 알아보려 합니다. 이 브랜드는 메뉴 색상을 브랜드의 핵심 컬러로 설정하여, 브랜드 이미지를 감각적으로 느낄 수 있도록 했는데요.
러브케이크바스켓의 레시피, 지금 알아볼까요?👩🍳
📌이런 분이라면 특히 주목해 주세요!
- 웹사이트 분위기에 변화를 주고 싶으신 분
- 컨셉, 톤앤매너, 컬러 등의 컨셉이 확실한 브랜드를 운영하는 분
- 메뉴에 마우스 커서를 가져다 댔을 때, 텍스트 색상이 변화되는 디자인을 원하시는 분
STEP 1
아임웹 디자인 모드에 접속 후 상단에 마우스 우클릭, [상단 설정]으로 들어가 주세요.
STEP 2
[메뉴] 위젯에 마우스 우클릭, [메뉴 버튼 설정]으로 들어가 주세요.
STEP 3
[메뉴 버튼] 탭에서 아이콘 색상을 설정하고, [펼침 메뉴] 탭에서는 아이콘 클릭 시 펼쳐지는 메뉴의 색상을 설정해 주면 끝이에요!
💡TIP
모바일 메뉴 상단에 '로그인 영역'을 없애고 싶다면, 모바일 뷰로 바꾼 뒤 상단 설정의 [메뉴 버튼 설정]으로 다시 진입, 펼침 메뉴 탭에서 로그인 영역을 체크 해제해 주세요.
다른 브랜드들은 이 기능을 어떻게 활용했을까요?
🔎 MICH MICH
상단에 브랜드 로고를 삽입하고, 메뉴 배경을 반투명으로 설정했어요.
🔎 에이퍼센트
마우스 커서가 올라갔을 때 버튼 색상이 바뀌도록 설정했어요.
우리 브랜드만의 감도 높은 웹사이트, 쉽고 빠르게 만들어 보세요!
아임웹은 웹사이트, 온라인 쇼핑몰 제작을 고민하는 여러분들을 위해 70여 개의 템플릿을 무료로 제공하고 있어요. 조금만 수정해도 꽤 그럴듯한 웹사이트가 완성되죠! 마음에 드는 템플릿을 발견했다면, 지금 바로 가볍게 만들어 보세요👇
