버튼 위젯 을 사용 하면 다른 플러그인이나 단축 코드 없이도 버튼을 쉽게 디자인하고 사용자 지정할 수 있습니다.

콘텐츠

  1. 유형 : 5가지 스타일의 버튼 중에서 선택하여 디자인을 시작합니다. 기본값 , 정보 , 성공 , 경고 또는 위험 중에서 선택하십시오 .
  2. 텍스트 : 버튼의 텍스트를 입력합니다.
  3. 링크 : 버튼의 링크 URL을 설정합니다. 톱니바퀴를 클릭하여 링크를 새 창에서 열리도록 설정하거나 링크에 rel=nofollow 를 추가하세요.
  4. 정렬 : 버튼을 열을 기준으로 왼쪽, 중앙, 오른쪽 또는 양쪽으로 정렬합니다.
  5. 크기 : 매우 작은 크기에서 매우 큰 크기까지 사전 설정된 버튼 크기를 선택합니다(이 문서 하단의 패딩 기본 세부 정보 참조).
  6. 아이콘 : 버튼에 표시할 FontAwesome 아이콘을 선택합니다.
  7. 아이콘 위치 : 버튼 텍스트 앞 또는 뒤에 아이콘이 표시되도록 설정합니다.
  8. 아이콘 간격 : 아이콘과 버튼 텍스트 사이의 간격을 조정합니다.
  9. 버튼 ID : (선택 사항) Google 애널리틱스 이벤트 와 같은 상황에 사용할 고유한 버튼 ID를 할당합니다.

스타일

  1. 타이포그래피 : 버튼의 텍스트에 대한 기본 타이포그래피 옵션을 변경합니다.
  2. 텍스트 그림자 : 버튼의 텍스트에 그림자 및 흐림 효과 추가
  3. 텍스트 색상 : 버튼의 텍스트 색상을 선택합니다.
  4. 배경색 : 일반 및 호버 상태 모두에 대해 버튼의 배경색을 선택합니다 . 단색 또는 그라데이션 색상을 사용할 수 있습니다.
  5. 호버 애니메이션 : 호버 애니메이션을 설정하려면 호버 탭을 클릭 하십시오.
  6. 테두리 유형 : 버튼 주변에 사용할 테두리 유형을 선택합니다.
  7. Width : 버튼 주변의 테두리 두께 조절
  8. 색상 : 테두리의 색상을 선택합니다.
  9. 테두리 반경 : 모서리 원형을 제어하기 위해 테두리 반경을 설정합니다.
  10. 상자 그림자 : 버튼에 상자 그림자를 적용하는 옵션을 설정합니다.
  11. 패딩 : 버튼의 패딩 설정 변경

“Button onClick” 이벤트를 추적하는 방법(Facebook Pixel, Google Analytics 또는 Google 태그 관리자용)

버튼 onClick 이벤트를 추적하려면 다음 단계를 따르세요.

  1. 편집 버튼 > 고급 > CSS ID 설정 = My_Button
  2. 페이지에 HTML 위젯 추가(버튼 이후에는 괜찮음)
  3. HTML 코드 필드에 다음 코드를 붙여넣습니다.
    document.addEventListener("DOMContentLoaded", function(event) {
    jQuery('#My_Button a').click(function(){
    // tracking code here
    // for example Facebook Pixel:
    fbq('track','AddToCart');
    });
    });
  4. 사이트 사용자 정의 CSS 영역에 다음 CSS를 추가하십시오. 이것은 테마 사용자 정의 프로그램 , 사이트 설정 , 사용자 정의 코드 또는 하위 테마에 있을 수 있습니다.
    /** 태그 관리자용 버튼 수정(클릭 ID 트리거용) **/ .elementor-button-content-wrapper {pointer-events: 없음;} .elementor-button span { pointer-events:none} 
  5. 페이지 업데이트, 미리보기, 테스트

콘텐츠 더보기

메타태그