웹플로우: 메뉴 외부에 CTA 버튼을 만드는 방법은 무엇입니까?

효과적인 CTA(Call to Action) 버튼을 만드는 것은 웹 디자인에서 가장 중요한 요소 중 하나입니다. CTA 버튼은 방문자에게 뉴스레터 가입, 구매, 업체 연락 등의 특정 조치를 취하도록 유도합니다. 많은 웹사이트가 탐색 메뉴 내부에 CTA 버튼을 갖추고 있지만 메뉴 외부에 CTA 버튼을 배치하면 더 눈에 띄고 더 많은 전환을 유도할 수 있습니다. 이 문서에서는 Webflow의 메뉴 외부에서 CTA 버튼을 디자인하고 배치하는 방법을 안내합니다.

메뉴 외부에 CTA 버튼을 배치하는 이유는 무엇입니까?

CTA 버튼을 기본 탐색 메뉴 외부에 배치하면 방문자가 더 잘 볼 수 있습니다. 헤더나 페이지 상단과 같이 트래픽이 많은 영역에 전략적으로 배치하면 이 버튼은 사용자의 관심을 빠르게 끌 수 있습니다. 목표는 CTA에 대한 접근성을 높이고 사용자가 사이트를 탐색하지 않고도 즉시 알 수 있도록 하는 것입니다.

메뉴 외부에 CTA 버튼을 배치하면 다음과 같은 이점이 있습니다.

• 가시성 향상 : 헤더 안이나 측면 플로팅 등 눈에 띄는 위치에 배치하여 사용자가 쉽게 발견할 수 있습니다.
• 향상된 전환율 : 눈에 띄는 CTA는 클릭 가능성이 높아져 전환율이 높아집니다.
• 향상된 사용자 경험 : 사용자가 다른 섹션을 탐색하지 않고도 신속하게 조치를 취할 수 있는 직관적인 방법을 제공합니다.

Webflow의 메뉴 외부에 CTA 버튼을 만드는 단계

Webflow는 코드를 작성할 필요 없이 웹사이트를 구축할 수 있는 사용자 친화적인 인터페이스를 제공합니다. Webflow 프로젝트의 메뉴 외부에 CTA 버튼을 추가하려면 다음 단계를 따르세요.

1. Webflow 프로젝트 설정

시작하기 전에 Webflow 프로젝트가 설정되어 있고 디자이너 보기에 있는지 확인하세요.

• 1.1단계 : Webflow 프로젝트를 열고 CTA 버튼을 추가하려는 페이지로 이동합니다.
• 1.2단계 : 디자이너 모드에서 탐색 메뉴가 제자리에(또는 버튼을 추가하려는 위치에) 페이지 레이아웃이 준비되었는지 확인합니다.

2. 새 CTA 버튼 만들기

메뉴 외부에 새 CTA 버튼을 만들려면 페이지에 전략적으로 배치해야 합니다.

• 2.1단계 : 왼쪽 패널에서 패널 추가의 Button 요소를 캔버스로 끌어서 놓습니다.
• 2.2단계 : 사용자에게 제공하려는 작업(예: '시작하기', '가입', '자세히 알아보기')과 일치하도록 버튼 텍스트를 맞춤설정합니다.
• 2.3단계 : 디자인 기본 설정에 따라 버튼 스타일을 지정합니다. 브랜드의 미학에 맞게 글꼴, 크기, 색상, 배경 및 테두리 반경을 조정할 수 있습니다.

3. CTA 버튼을 메뉴 외부에 배치

이제 버튼이 생겼으니 메뉴 외부에 배치할 차례입니다. 버튼을 표시하려는 위치에 따라 몇 가지 방법이 있습니다.

옵션 1: 플로팅 CTA 버튼

플로팅 CTA 버튼은 가시성을 위해 널리 사용되는 선택입니다. 사용자가 스크롤하는 동안에도 페이지 측면이나 하단에 고정됩니다.

• 3.1단계 : 생성한 버튼을 선택하고 오른쪽 스타일 패널의 Position 설정으로 이동합니다.
• 3.2단계 : 위치를 Fixed 으로 설정합니다. 이렇게 하면 사용자가 스크롤할 때 버튼이 화면에 그대로 유지됩니다.
• 3.3단계 : Top , Right , Bottom 또는 Left 값을 설정하여 버튼을 화면에서 원하는 위치(예: 오른쪽 아래 모서리 또는 왼쪽 위 모서리)에 배치하여 위치를 조정합니다.
• 3.4단계 : Z-색인 값을 추가하여 버튼이 메뉴와 같은 다른 요소 위에 표시되도록 합니다. z-index를 10 또는 100 과 같이 더 높은 값으로 설정하여 맨 위에 오도록 할 수 있습니다.

옵션 2: 헤더 섹션에 위치

CTA 버튼을 메뉴 외부의 보다 전통적인 고정 위치에 두기를 원하는 경우 헤더 섹션 내에 배치할 수 있습니다.

• 3.1단계 : Navigator 패널로 이동하여 헤더 섹션을 찾습니다.
• 3.2단계 : CTA 버튼의 컨테이너 역할을 할 새 Div Block 만듭니다. 이는 다른 요소를 기준으로 버튼 위치를 지정하는 데 도움이 됩니다.
• 3.3단계 : 버튼을 Div Block 컨테이너로 드래그합니다.
• 3.4단계 : 스타일 패널의 Margin 또는 Padding 설정을 사용하여 버튼을 헤더 내의 원하는 위치로 이동합니다(예: 기본 메뉴 외부이지만 여전히 헤더와 정렬됨).

옵션 3: 고정 Navbar의 CTA 버튼

또 다른 옵션은 고정 탐색 모음에 CTA 버튼을 배치하는 것입니다. 이는 사용자가 페이지를 아래로 스크롤할 때 버튼이 사용자를 따르지만 기본 메뉴 외부에 남아 있음을 의미합니다.

• 3.1단계 : 탐색 모음 요소를 선택하고 스타일 패널에서 해당 Position Sticky 으로 설정합니다.
• 3.2단계 : 버튼을 표시하려는 메뉴 항목 옆에 새 Div Block 추가합니다.
• 3.3단계 : 이 Div Block 안에 버튼을 배치하고 여백이나 패딩을 사용하여 위치를 조정합니다.

4. 버튼을 대화형으로 만들기

버튼이 배치되면 상호 작용을 추가하여 더욱 매력적으로 만들 수 있습니다.

• 4.1단계 : 버튼을 선택하고 Webflow의 Interactions 패널로 이동합니다.
• 4.2단계 : 배경색을 변경하거나 사용자가 버튼 위로 마우스를 가져갈 때 버튼 크기를 약간 조정하는 등 마우스 오버 상호 작용을 추가합니다.
• 4.3단계 : 버튼에 대한 링크를 설정합니다. 다른 페이지나 외부 URL에 연결하거나 모달이나 양식 열기와 같은 작업을 설정할 수 있습니다.

5. 미리보기 및 게시

CTA 버튼을 설정한 후에는 CTA 버튼이 페이지에서 어떻게 작동하는지 미리 보는 것이 중요합니다.

• 5.1단계 : 오른쪽 상단에 있는 Preview 버튼을 클릭하여 페이지에서 버튼의 모양과 동작을 확인합니다.
• 5.2단계 : 다양한 화면 크기에서 반응성을 테스트하여 올바르게 배치되었는지 확인합니다.
• 5.3단계 : 결과가 만족스러우면 Publish 클릭하여 웹사이트에 버튼을 활성화하세요.

메뉴 외부의 CTA 버튼에 대한 모범 사례

CTA 버튼을 메뉴 외부에 배치하는 것은 매우 효과적일 수 있지만 제대로 작동하려면 몇 가지 모범 사례를 따르는 것이 중요합니다.

1. 단순하게 유지하세요 . CTA 버튼이 너무 많아 페이지를 너무 복잡하게 만들지 마세요. 최상의 결과를 얻으려면 하나의 주요 작업에 집중하세요.
2. 좋은 가시성 보장 : 버튼이 배경과 잘 대비되어 사용자의 시선을 사로잡는지 확인하세요.
3. 전략적으로 위치 지정 : 버튼을 오른쪽 상단이나 옆면에 떠 있는 등 사용자가 쉽게 알아볼 수 있는 위치에 배치합니다.
4. 다양한 기기에서 테스트 : CTA 버튼이 모바일, 태블릿, 데스크톱 기기에서 잘 보이는지 확인하세요.

결론

Webflow의 메뉴 외부에 CTA 버튼을 추가하는 것은 가시성을 높이고 전환율을 높이는 강력한 전략이 될 수 있습니다. 위에 설명된 단계를 따르면 나머지 페이지 콘텐츠에서 눈에 띄는 CTA 버튼을 쉽게 만들고 배치할 수 있습니다. 플로팅 버튼, 고정 navbar 또는 기존 헤더 위치 중 무엇을 선택하든 핵심은 사용자가 이를 인지하고 조치를 취하도록 유도할 수 있는 위치에 CTA를 배치하는 것입니다. Webflow의 직관적인 디자인 도구를 사용하면 이를 달성하는 것이 그 어느 때보다 간단해졌습니다!