기본 버튼은 클릭을 가져옵니다; 약간의 움직임이있는 버튼은 더 많은 것을 얻습니다. The 크리에이티브 버튼 위젯 인 Elementor용 마스터 애드온 미묘한 배경 스윕부터 텍스트 교환 애니메이션까지 호버 효과 사전 설정 라이브러리를 제공하므로 CSS 줄을 작성하지 않고도 클릭 유도 문구가 이동할 수 있습니다.
사전 설정을 선택하고, 텍스트를 입력하고, 원하는 경우 아이콘을 추가하고, 일반 상태와 호버 상태의 스타일을 지정합니다. 이 가이드는 전체 위젯, 완성된 버튼으로 드래그인을 다룹니다.
Creative Buttons 위젯이 수행하는 작업 #
위젯은 미리 만들어진 호버 애니메이션으로 하나의 클릭 유도 문구를 렌더링합니다. 애니메이션은 이름이 지정된 사전 설정으로 제공되며,그 중 20 개가 넘으며 각각 고유한 움직임이 있습니다: 미끄러지는 배경,자신을 그리는 테두리,대체 메시지로 뒤집히는 텍스트,다른 모든 것은 일반 Elementor 버튼처럼 작동합니다: 상태당 텍스트,링크, 아이콘,정렬 및 풀 컬러 제어.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 기본 위젯 아래의 마스터 애드온 옵션 패널에서 크리에이티브 버튼 위젯이 활성화되었습니다.
Creative Buttons 위젯을 추가하는 방법 #
Elementor 편집기에서 다음을 검색합니다 요소 위한 패널 크리에이티브 버튼 그리고 위젯을 페이지로 드래그하십시오. “Add Your CTA Content”라고 적힌 어두운 버튼이 나타나며 이미 기본 효과로 배선되어 있습니다.
버튼 효과 사전 설정을 선택합니다 #
오픈 버튼 사전 설정 및 제어 내용 탭에서. The 버튼 효과 드롭 다운은 위젯의 핵심입니다: 기본,Winona, Ujarak,Wayra, Tamaya,Rayen, Pipaluk,Moema, Isi,Aylen, Saqui,Wapasha, Nina,Nanuk, Nuka,Antiman, Itzel,Naira, Quidel,Sacnite, Shikoba,그리고 더.
각 이름은 다른 호버 애니메이션입니다. 각 픽 후 캔버스에 버튼을 올리면 편집자가 효과를 실시간으로 재생하므로 오디션 사전 설정에는 몇 초가 걸립니다. 이름은 그들이하는 일을 암시하지 않으므로 4 ~ 5 개를 시도하는 것이 올바른 것을 찾는 가장 빠른 방법입니다. 버튼 정렬 그리고 버튼 텍스트 정렬 바로 아래에 앉아 장치별 설정을 위한 반응형 토글을 각각 사용합니다.
텍스트, 링크 및 대체 텍스트를 설정합니다 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 버튼 컨트롤 그룹은 내용을 다룹니다. 버튼 텍스트 는 레이블, 그리고 링크 URL 새 탭 및 팔로우 없음 옵션에 대한 기어 아이콘이 있는 버튼을 어딘가로 가리킵니다.
Winona 와 Rayen 과 같은 일부 사전 설정은 레이블을 호버의 두 번째 메시지로 바꿉니다. 그 중 하나와 an 을 선택하십시오 대체 버튼 텍스트 필드 표시; 데모에서는 “지금 클릭하세요!”로 설정합니다. 따라서 버튼은 정지 상태에서 “CTA 콘텐츠 추가”를 읽고 호버를 누르면 뒤집힙니다.
아이콘 추가 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 아이콘 control은 Font Awesome과 설치한 모든 아이콘 세트가 포함된 Elementor 아이콘 라이브러리를 엽니다.
하나를 고른 후, 아이콘 위치 라벨 앞이나 뒤에 배치합니다 아이콘 간격 간격을 설정합니다; 데모에서는 아이콘과 텍스트가 숨을 쉴 수 있도록 12픽셀로 충돌합니다.
버튼을 스타일링합니다 #
로 전환하십시오 스타일 탭 및 열기 버튼 스타일. 상단 그룹은 모양을 처리합니다: 폭, 타이포그래피, 버튼 패딩, 국경 유형, 테두리 반경 (데모에서는 8개, 부드럽게 둥근 모서리용), 박스 섀도우, 그리고 아이콘 크기.
그 아래, 보통의 그리고 호버 탭에는 각각 세 가지 색상이 있습니다: 텍스트 색상, 배경 색상, 그리고 아이콘 색상. 데모는 파란색에 일반 상태 흰색 텍스트를 제공합니다:
그런 다음 호버 상태를 녹색의 어두운 텍스트로 뒤집어 효과가 두 가지 분명히 다른 모양 사이에 애니메이션됩니다:
A 패턴 하단 섹션은 장식 버튼 배경을 위한 Pro extra입니다.
페이지의 결과 #
라이브 페이지에서 버튼은 커서가 도착할 때까지 일반 색상으로 표시됩니다. 그런 다음 사전 설정이 재생됩니다: 배경이 호버 색상으로 스윕되고 아이콘과 텍스트 이동이 이루어지며 사전 설정에서 하나를 사용하면 대체 텍스트가 나타납니다.
일반적인 사용 사례 #
- 영웅 섹션 CTA 애니메이션이 주요 액션에 시선을 끄는 곳입니다.
- 가격 페이지 버튼 “시작하기”와 같은 텍스트 스왑을 통해 “무료입니다!” 호버에.
- 다운로드 및 가입 버튼 즉시 인식할 수 있는 아이콘과 짝을 이룹니다.
- 랜딩 페이지 섹션 테마의 기본값과 구별하려면 버튼 하나가 필요합니다.
더 나은 창조적 인 버튼을위한 팁 #
- 캔버스에 오디션 사전 설정. 각 효과 선택 후 버튼을 누르세요; 애니메이션은 편집기에서 재생되며 미리보기가 필요하지 않습니다.
- 호버 상태 대비를 만듭니다. 애니메이션은 파란색에서 녹색 데모처럼 일반 색상과 호버 색상이 명확하게 다를 때 가장 잘 읽혀집니다.
- 대체 텍스트를 짧게 유지하십시오. 두 메시지의 길이가 거의 같을 때 텍스트 교환 사전 설정이 깨끗해 보입니다.
- 섹션당 하나의 크리에이티브 버튼. 모션은 관심을 얻습니다; 연속으로 움직이는 세 개의 버튼이 서로 경쟁합니다.
- 모바일에서 탭 동작을 확인합니다. 터치 스크린에는 호버가 없으므로 정상 상태가 자체적으로 클릭 가능한 것으로 읽혀 지는지 확인하십시오.
비디오 자습서 #
사전 설정된 효과 선택부터 라이브 페이지의 완성된 호버 애니메이션까지 Creative Button의 실제 작동을 보고 싶다면 아래 비디오를 시청할 수도 있습니다.
자주 묻는 질문 #
마스터 애드온의 Creative Buttons 위젯은 무엇입니까?
미리 만들어진 호버 애니메이션이 있는 클릭 유도 문구 버튼용 Elementor 위젯입니다. 20개 이상의 명명된 효과 사전 설정 중에서 선택하고 텍스트, 링크 및 아이콘을 설정하고 Elementor 패널과 별도로 일반 상태와 호버 상태의 스타일을 지정합니다.
버튼 효과는 몇 개나 포함되어 있나요?
버튼 효과 드롭다운에는 Winona,Ujarak, Wayra,Tamaya, Rayen,Moema, Naira,Shikoba 를 포함한 20 개 이상의 사전 설정이 나열되어 있습니다. 각각 다른 호버 애니메이션을 적용하고,버튼을 호버하면 편집기 캔버스가 효과를 실시간으로 재생합니다.
대체 버튼 텍스트 필드는 무엇입니까?
일부 사전 설정에서는 버튼 레이블을 호버링 시 두 번째 메시지로 바꿉니다. 이러한 효과 중 하나를 선택하면 대체 버튼 텍스트 필드가 나타나 “시작하기”를 “무료입니다!”로 전환하는 것과 같이 호버 메시지를 설정할 수 있습니다.
크리에이티브 버튼에 아이콘을 추가할 수 있나요?
예. 아이콘 컨트롤은 Elementor 아이콘 라이브러리를 엽니다. 아이콘을 선택한 후 아이콘 위치는 텍스트 앞이나 뒤에 아이콘을 배치하고 아이콘 간격은 간격을 설정하고 아이콘 크기와 아이콘 색상은 스타일 탭에 라이브로 표시됩니다.
호버 상태를 따로 스타일링할 수 있나요?
예. 버튼 스타일에는 일반 탭과 호버 탭이 있으며 각각 고유한 텍스트 색상,배경 색상 및 아이콘 색상이 있습니다. 사전 설정은 두 상태 사이에서 애니메이션을 적용하므로 대비되는 색상이 효과를 더욱 잘 보이게 합니다.
감싸는 #
Creative Buttons 위젯은 일반 CTA 를 사용자 정의 코드 없이 애니메이션으로 바꿉니다: Effects 드롭다운에서 사전 설정을 선택하고,텍스트와 아이콘을 설정하고,그 사이에 애니메이션할 가치가 있는 일반 상태와 호버 상태 색상을 제공합니다. 애니메이션 텍스트 링크에 대한 Creative Links 위젯과 잘 페어링됩니다. 전체 세트 찾아보기 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 버튼 패턴과 같은 Pro 엑스트라의 경우.
