Elementor 및 Element Pack을 사용하여 비용 추정 계산기를 만드는 방법
게시 됨: 2022-01-11Elementor를 사용하여 비용 추정 계산기를 만드는 것은 특히 WooCommerce 비즈니스 사이트나 제품 조합이 많은 패키지 계획 웹사이트를 운영하는 경우 웹사이트에 매우 유용할 수 있습니다.
기술, 의류, 화장품, 식료품 및 은행 웹사이트에서 방문자를 돕기 위해 홈페이지에 비용 추정 계산기를 제공하는 것을 보았습니다. 예산을 신속하게 수정하고 매장에서 구매할 제품을 선택하는 데 편리합니다.
이제 Element Pack Pro 플러그인이 설치되어 있으므로 Elementor를 사용하여 나만의 비용 추정 계산기를 구축하는 것은 어려운 일이 아닙니다. 우리는 완전한 사용자 정의로 자신의 계산기를 훨씬 더 쉽게 설계할 수 있도록 하는 특별한 계산기 플러그인이 있습니다.
이 기사에서 우리는 그것을 수행하는 방법을 보여줄 것입니다. 의 시작하자!
비용 추정 계산기가 가치가 있습니까?
일반적인 WooCommerce 웹 사이트의 경우 사람들은 일반적으로 상당한 시간을 쇼핑에 보냅니다.
두 번 이상 그들은 찾고 있는 제품을 찾고 VAT 및 배송료를 포함하여 비용이 어떻게 되는지 알고 싶어합니다.
Elementor를 사용하는 비용추정 계산기 같은 것이 없다면, 제품 가격을 추정할 적절한 방법을 찾지 못한 사용자에게 영향을 미칠 것입니다.
따라서 사용자 경험을 향상시키기 위해 Element Pack Pro에서 제공하는 맞춤형 비용 추정 계산기 플러그인을 사용할 수 있습니다.
따라서 비용 추정 계산기를 만들려면 다음이 필요합니다.
- Elementor 페이지 빌더가 설치된 WordPress 사이트
- 요소 팩 프로 플러그인
- 고급 계산기 위젯(대시보드에서 활성화됨)
모든 준비가 끝나면 주 목표를 향해 나아갈 수 있습니다.
Elementor 및 Element Pack을 사용하여 비용 추정 계산기 만들기
Element Pack의 위젯을 사용하여 수동으로 계산기를 디자인해 보겠습니다. 이것은 단계별 프로세스이므로 따라 하는 것이 좋습니다.
자, 시작하겠습니다-
1단계: 고급 계산기 삽입 및 계산기 필드 설정
Elementor를 사용하여 비용 추정 계산기를 만들려면 먼저 대상 페이지 내부에 고급 계산기 위젯을 가져와야 합니다.
가장 먼저
Elementor 페이지 편집기 내부의 위젯 메뉴에 위젯 이름을 입력하고 페이지 내부로 드래그하기만 하면 됩니다. 보시다시피 페이지에 계산기를 멋지게 표시하기 위해 먼저 섹션을 만들었습니다.
이후
계산기 필드를 하나씩 만들어 봅시다. 먼저 제품이 옵니다. 항목 추가 버튼을 클릭하고 필드 사용자 정의를 시작하십시오.
여기에서 "선택" 필드 유형을 선택하고 레이블을 "제품 이름"으로 설정하고 옵션 필드에 제품을 삽입합니다.
각 새 줄은 여기에서 새 옵션을 의미하며 "|"를 사용해야 합니다. 계산에 추가하려면 값 앞에 부호를 붙입니다.
이것을 Elementor를 사용하는 비용 추정 계산기의 첫 번째 필드로 사용하십시오.
그런 다음 유사하게
두 번째 및 세 번째 필드에 대해 똑같은 설정으로 진행할 것입니다. 유형은 "선택"으로 이동하고 다른 값 세트를 사용하여 해당 유형에 대해 다른 레이블을 지정합니다.
한 행에 3개의 필드를 맞추기 위해 열 너비를 33%로 설정합니다.
다음을 위해
Elementor를 사용하는 비용 추정 계산기에 대한 요구 사항을 충족하기 위해 아래 3개 필드를 더 선택했습니다.
여기서 수량 필드는 구매하려는 제품의 수량에 대한 숫자를 선택해야 하는 숫자 유형 필드입니다.
다시 말하지만 VAT 필드는 타사의 입력을 받지 않는 Disabled 유형 계산기 필드입니다. 즉, 제품의 최종 비용에 추가되는 고정 비용입니다.
계산기의 이 부분에 대해 고정될 기본값을 삽입하려면 고급 하위 섹션으로 이동해야 합니다.
잊지 마세요
고급 계산기 위젯의 콘텐츠 탭으로 이동하여 콘텐츠 정렬을 설정합니다. 더 나은 클래식 보기를 위해 왼쪽 정렬을 유지합니다.
2단계: Elementor를 사용한 비용 추정 계산기 공식
이것은 가장 중요한 단계입니다.
양식 필드를 만드는 시작부터 여기의 이 단계까지, 공식을 포함하지 않는 한 계산기는 여전히 작동할 준비가 되지 않았습니다.
수식은 광범위한 선택에서 임의의 논리 방정식이 될 수 있습니다. 다음은 작업할 수 있는 사용 가능한 공식 목록입니다.
어쨌든.
방금 설계한 비용 추정 계산기에 대한 작업 공식을 삽입했습니다. 수식을 넣으면 바로 실행됩니다.
3단계: 비용 추정 계산기에 대한 기타 사용자 정의
우리의 주요 목표는 이미 달성되었습니다. 그러나 계산기는 아무 색도 없이 평범하고 칙칙해 보입니다.
이제 많은 변수를 사용하여 계산기의 모양을 사용자 정의합니다.
당분간
결과 섹션을 클릭하고 결과 표시 옵션에 대해 " 변경 시 " 옵션을 선택합니다. 즉, 버튼을 누를 필요 없이 계산기를 사용하기만 하면 결과가 생성됩니다.
그런 다음 왼쪽 정렬과 그에 대한 사용자 정의 텍스트가 있는 결과를 맨 아래에 표시합니다.
이후
오류가 발생할 경우 표시할 텍스트를 맨 아래 필드에 입력합니다. 잘못된 공식이나 잘못된 입력으로 인해 오류가 발생할 수 있습니다.
이제 Elementor를 사용하여 비용 계산기 플러그인을 만드는 마지막 부분에 도달했습니다.
4단계: 색상 추가
이제 위젯의 스타일 부분으로 이동하여 필요에 따라 모양을 변경하기만 하면 됩니다.
가장 먼저
필드 공간과 열 공간을 조정하여 양식 스타일 섹션에서 매개변수를 변경합니다.
이후
Elementor를 사용하여 비용 추정 계산기에 대한 다음 섹션에서 레이블 색상과 타이포그래피를 변경할 수 있습니다.
여기에서 레이블의 고유한 글꼴로 이동하여 시장의 나머지 부분과 차별화할 수 있습니다.
다음 단계에서
밝은 텍스트 색상, 매우 얇은 배경 색상, 얇은 테두리 및 일부 패딩을 사용하여 입력 필드를 사용자 정의했습니다.
또한 Elementor를 이용한 비용추정 계산기의 타이포그래피 옵션을 이용하여 폰트를 변경하였습니다.
그럼 다시
텍스트와 타이포그래피에 유사한 색조를 적용하여 결과 텍스트를 변경했습니다.
여기까지는 꽤 매끄럽게 보이죠?
그리고 마지막으로
오류 텍스트는 이제 새 레이블 색상을 가지며 배너에 대해 빨간색으로 칠해집니다.
텍스트 주위에 패딩을 추가하고 나머지 부분과 일치하도록 글꼴을 약간 변경했습니다.
이제 Elementor를 사용하는 비용 추정 계산기를 표시할 준비가 되었습니다.
결론
이 블로그는 Elementor 페이지 빌더 플러그인과 Element Pack을 사용하여 요구 사항에 따라 적절한 계산기 플러그인을 구축할 수 있도록 하는 것을 목표로 합니다.
바라건대, 당신은 모든 것을 배웠습니다.
결승선까지 함께해주셔서 감사합니다.
이 블로그는 BdThemes에서 제공합니다.