버튼 추가하기

엘리멘터 편집 화면에서 왼쪽 패널에서 “단추” 위젯을 찾아 중앙 캔버스로 드래그 앤 드롭합니다.

버튼이 캔버스에 추가되면 텍스트와 링크를 설정할 수 있습니다.

버튼 텍스트 변경하기

버튼의 기본 텍스트는 “여기를 클릭하세요”로 설정되어 있습니다.  왼쪽 패널 > 콘텐츠(Content) 탭에서 텍스트를 변경하세요.
예: “더 알아보기”, “구매하기”, “문의하기” 등.

버튼 링크 설정하기

• 링크(Link) 필드에 버튼이 이동할 URL을 입력하세요.
  • 외부 페이지로 연결: https://example.com
  • 내부 페이지로 연결: 페이지 제목을 입력하거나 슬러그 추가.
  • 링크를 새 탭에서 열고 싶다면 “새 창에서 열기(Open in New Window)” 옵션을 활성화합니다.

버튼 스타일링하기

버튼의 디자인을 변경하는 방법 : 스타일(Style) 탭으로 이동합니다.

여기서 버튼의 색상, 크기, 배경 등을 수정할 수 있습니다.

버튼에 고급 기능 추가하기

애니메이션 효과 추가

고급(Advanced) 탭 > 모션 효과(Motion Effects) 에서 버튼에 애니메이션을 추가합니다. (예: “페이드 인(Fade In)”, “슬라이드(Slide)” 등.)

버튼이 페이지에서 자연스럽게 나타나도록 설정할 수 있습니다.

아이콘 추가

콘텐츠(Content) 탭에서 “아이콘(Icon)” 옵션을 활성화합니다.

버튼 옆에 아이콘을 추가하여 시각적 효과를 높이세요.
예: 다운로드 버튼에 “” 아이콘 추가.

팝업과 연동

엘리멘터 프로(Pro)를 사용하는 경우, 버튼 클릭 시 팝업이 열리도록 설정할 수 있습니다.
동작(Action After Click) 옵션에서 “팝업 열기(Open Popup)”를 선택하세요.

앵커 링크 설정

페이지 내 특정 섹션으로 이동하도록 버튼을 설정할 수 있습니다.

예: 버튼을 클릭하면 페이지 하단의 “문의하기” 섹션으로 이동.
링크 필드에 #문의하기를 입력하고 해당 섹션 ID를 설정하세요.

버튼을 효율적으로 활용하는 팁

1. 눈에 띄는 색상을 사용하라!

   버튼은 방문자의 행동을 유도합니다. 배경색과 텍스트 색의 대조를 통해 더 눈에 잘 띄게 만드세요.

2. 명확하고 간결한 텍스트 사용

   버튼의 텍스트는 2~3단어로 간결하게 작성하세요.
   예: “시작하기”, “지금 구매”, “자세히 보기”.

3. 모바일 최적화

   응답성(Responsive) 설정에서 모바일 화면에 맞는 버튼 크기와 위치를 조정하세요.

4. 호버 효과로 인터랙션 제공

   버튼에 마우스를 올렸을 때 색상이 변하는 호버 효과를 추가하면, 사용자가 버튼을 클릭하도록 유도할 수 있습니다.

5. CTA(콜투액션) 버튼

   버튼의 목적은 방문자가 행동하도록 유도하는 것입니다.
   따라서 페이지 디자인에서 버튼이 돋보이도록 배치하고, 관련성이 높은 콘텐츠와 연결하세요.

엘리멘터의 버튼은 간단해 보이지만, 디자인과 설정 옵션을 활용하면 강력한 기능을 발휘할 수 있습니다. 초보자는 기본 텍스트와 색상 변경부터 시작하고, 점차 고급 설정(애니메이션, 팝업 연동 등)을 활용해보세요. 작은 버튼 하나로도 웹사이트의 전환율을 높일 수 있습니다!

The post 엘리멘터 버튼활용 first appeared on 매뉴얼.