코딩 지식 없이 사용자 정의 Elementor 위젯을 구축하는 방법

Elementor 위젯은 탐색 메뉴, 버튼, 이미지 상자, FAQ 섹션 등과 같은 페이지 작성 요소를 추가하는 데 도움이 됩니다. 여러 Elementor 애드온이 Elementor 위젯과 함께 제공되지만 이러한 애드온에서 필요한 모든 위젯을 얻을 가능성은 거의 없습니다.

여기에서 귀하의 요구 사항을 충족하기 위해 사용자 정의 Elementor 위젯이 필요합니다. ElementsKit에는 필요한 위젯을 즉시 구축하는 데 도움이 되는 기능이 있습니다.

이 게시물은 최소한의 방법으로 코딩하지 않고 사용자 정의 Elementor 위젯을 구축하는 방법을 안내합니다.

계속하자… 지금!

위젯이란 무엇입니까?

위젯은 특정 작업을 완료하는 데 사용되는 작은 GUI 응용 프로그램을 나타냅니다. 위젯은 버튼, 확인란, 대화 상자, 스크롤 막대, 검색 상자, 지도, 시계, 방문자 카운터 등과 같은 웹 사이트의 모든 요소가 될 수 있습니다.

Elementor 페이지 빌더를 예로 들어보겠습니다. 이 페이지 빌더는 다양한 기능을 갖추고 있습니다. 내장 위젯. 최고의 무료 Elementor 위젯을 추가하여 웹페이지를 디자인할 수 있습니다.

그러나 필요한 경우 Elementor용 사용자 정의 위젯을 만들 수도 있습니다. 그리고 ElementsKit 위젯 빌더 그렇게 하는 데 도움이 될 것입니다!

ElementsKit 위젯 빌더를 사용하여 사용자 정의 위젯을 구축할 때의 이점

우리 모두는 위젯이 웹사이트에 뛰어난 기능을 추가한다는 것을 알고 있습니다. 그러나 사용자 정의 작업을 수행하는 데 적합한 위젯을 찾는 것은 거의 불가능합니다. 이 경우 사용자 정의 위젯을 만드는 것 외에는 다른 선택이 없습니다.

그리고 위젯 빌더를 사용하면 이 사용자 정의 위젯 구축 프로세스가 그 어느 때보다 쉬워졌습니다. 위젯 빌더 사용의 주요 이점을 살펴보겠습니다.

• 코딩 지식 없이도 맞춤형 위젯 구축
• 위젯은 완벽하게 반응합니다.
• 요소를 드래그 앤 드롭하여 시각적으로 위젯을 만듭니다.
• 구조화된 콘텐츠 지원
• 독립형 코드 편집기 포함
• 다양한 필드 유형 등을 지원합니다.

ElementsKit 위젯 빌더의 주요 이점은 다음과 같습니다. 

ElementsKit(무료)로 사용자 정의 Elementor 위젯을 구축하는 방법은 무엇입니까?

모든 기능을 갖춘 위젯은 웹 사이트 구축 경험을 강화할 수 있습니다. 따라서 귀하의 웹사이트에 맞는 맞춤형 Elementor 위젯을 구축하는 것이 중요합니다.

사용자 정의 Elementor 위젯을 구축하는 방법을 알고 싶으십니까? ElementsKit 위젯 빌더를 사용하여 무료 사용자 정의 Elementor 위젯을 빌드하는 단계별 프로세스는 다음과 같습니다.

전제 조건

Elementor 사용자 정의 위젯을 구축하려면 다음 플러그인이 필요합니다.

• 엘레멘터
• ElementsKit

이러한 도구가 WordPress 웹사이트에 설치되고 활성화되면 이제 Elementor 사용자 정의 위젯 생성을 시작할 차례입니다.

#1단계: Widget Builder 켜기

위젯 구축 프로세스를 시작하려면 대시보드 패널에서 Widget Builder 모듈을 켰는지 확인하세요.

이 기능을 켜려면 ElementsKit 대시보드 패널로 이동한 다음 모듈. 모듈 섹션에서 'Widget Builder' 모듈을 찾아서 켭니다.

위젯 빌더가 켜져 있는지 꺼져 있는지 확인하는 과정은 다음과 같습니다.

위젯 빌더 켜기

'를 클릭하는 것을 잊지 마세요.변경 사항을 저장하다모듈을 켜거나 끈 후 '버튼을 누르세요.

#2단계: 위젯 생성

새 위젯을 만들려면 다음 단계를 진행하세요. ElementsKit > 위젯 빌더. 새 페이지에는 ''라는 새 버튼이 표시됩니다.새로운 걸 더하다". 해당 버튼을 클릭하면 Elementor 왼쪽 패널에 새 위젯이 생성됩니다.

새 위젯 만들기

이제 이 페이지에서 위젯 제목, 아이콘, 카테고리를 맞춤설정할 수 있습니다. 사용자 정의 위젯에 위젯 제목과 아이콘을 넣으세요. Font Awesome 아이콘 라이브러리의 모든 아이콘을 사용할 수 있습니다.

위젯 제목 및 아이콘 사용자 정의

위젯의 이름을 지정할 때 작업과 관련성을 유지하도록 하세요. 그리고 위젯에 관련 아이콘을 추가하세요.

#3단계: 새 위젯 사용자 정의

Elementor 위젯 개발이 완료되었으니 이제 커스터마이징을 할 차례입니다. Elementor용 새 사용자 정의 위젯을 구축하는 데 심층적인 코딩 지식이 필요하지 않습니다. ElementsKit 위젯 빌더는 프로세스를 그 어느 때보다 원활하게 만듭니다. 

간단히 왼쪽 패널에서 ElementsKit 위젯을 끌어서 중간 패널에 놓습니다. 드롭된 위젯은 자동으로 오른쪽 보드에 변수를 생성합니다.

해당 변수를 클릭하면 코드 편집기에 자동으로 포함됩니다. 필요한 경우 코드 편집기를 통해 추가 HTML, CSS 및 JavaScript 마크업을 추가할 수 있습니다.

새 위젯을 구축하거나 일부 사용자 정의를 수행한 후 저장 버튼을 클릭하면 완료됩니다.

자세한 과정은 다음과 같습니다 -

새 위젯 만들기

스타일 또는 고급 탭에도 이러한 컨트롤을 추가할 수 있습니다.

#4단계: 위젯 필드 수정

위젯을 생성하는 동안 모든 위젯 필드 또는 요소를 사용자 정의할 수 있습니다. 예를 들어 레이블 이름, 자리 표시자, 기본값 등을 사용자 정의할 수 있습니다.

그러나 사용자 정의 옵션은 모든 패널에서 동일하지 않습니다. 제어판마다 입력 필드가 다릅니다.

위젯 필드 사용자 정의

전문가의 팁: 동일한 컨트롤을 여러 번 추가하는 동안 이름은 고유해야 합니다. 그렇지 않으면 변수 충돌이 발생합니다.

#5단계: 새로 구축된 위젯 미리보기

새로 구축된 위젯은 기존 Elementor 위젯과 완전히 유사하게 작동합니다. 새로 구축된 사용자 정의 위젯은 Elementor 패널에서 사용할 수 있습니다. 새 위젯을 확인하려면 새 웹페이지를 열고 새 웹페이지에 위젯을 드래그 앤 드롭하세요.

새 위젯 확인 중

전문가의 팁: 모든 ElementsKit 컨트롤을 추가하여 Elementor 위젯 빌더를 통해 Elementor 사용자 정의 위젯을 구축할 수 있습니다. 더 많은 Elementor 컨트롤에 액세스하려면 ElementsKit pro 버전을 다운로드하세요.

ElementsKit 위젯 빌더에 대해 자세히 알아보려면 아래 비디오를 확인하세요.

ElementsKit 지원 제어 필드 목록

ElementKit은 사용자 정의 위젯을 구축하기 위한 많은 제어 필드를 제공합니다. 지원되는 제어 필드 목록은 다음과 같습니다.

• 텍스트 – 텍스트 필드를 사용하여 텍스트를 입력하고 있습니다.
• 숫자 – 사용자는 숫자 제어 필드를 통해 숫자를 입력할 수 있습니다.
• 텍스트 영역 – 텍스트 영역 필드는 숫자, 텍스트, 기호 등을 입력하는 데 사용됩니다.
• 위지위그 – WordPress TinyMCE 리치 텍스트 편집기입니다.
• 암호 – 이 컨트롤은 Ace 편집기를 기반으로 하는 코드 편집기를 추가합니다.
• 숨겨진 – 숨겨진 입력 필드는 제어판에서 입력 필드를 제공하지 않고 데이터를 데이터베이스에 직접 저장하는 데 사용됩니다.
• 스위처 – 스위처(Switcher)는 체크박스를 멋지게 표현한 것입니다. 웹페이지의 다양한 블록이나 요소를 표시하거나 숨기는 데 사용됩니다.
• 선택하다 – 선택 옵션은 사용자가 선택할 수 있는 여러 옵션을 제공합니다. 드롭다운 메뉴에 옵션이 표시됩니다. 
• 선택하다 – 선택은 아이콘과 기타 스타일 또는 정렬 설정이 포함된 버튼 또는 버튼 그룹을 표시하는 데 사용됩니다.
• 색상 – 알파 슬라이더로 채워진 색상 선택기 필드를 활성화합니다.
• 폰트 – 글꼴 컨트롤을 통해 사용자는 Google 글꼴 라이브러리에서 글꼴을 선택할 수 있습니다.
• 날짜 시간 – 날짜-시간 라이브러리는 다음을 사용합니다. Flatpickr 라이브러리 날짜와 시간을 선택하세요. 
• URL – URL 필드에는 버튼이 있는 링크가 제공됩니다. 동일한 탭이나 새 탭 내에서 링크를 열거나 팔로우하지 않도록 버튼을 설정할 수 있습니다.
• 미디어 – 사용자는 이 섹션을 사용하여 다른 미디어를 선택할 수 있습니다. WordPress 미디어 라이브러리의 미디어 파일을 표시합니다.
• 아이콘 – 아이콘 컨트롤을 사용하면 사용자는 Font Awesome 및 ElementsKit 라이트 아이콘 라이브러리에서 아이콘을 추가할 수 있습니다. 사용자는 WordPress 미디어 라이브러리에서 사용자 정의 아이콘 라이브러리를 업로드할 수도 있습니다.
• 슬라이더 – 슬라이더는 숫자 값 범위 중에서 선택하는 데 사용되는 드래그 가능한 눈금입니다.
• 치수 – 치수 제어는 요소에 적합한 위치를 설정하기 위한 4개의 입력 패널로 구성됩니다. 입력 패널은 상단, 오른쪽, 하단, 왼쪽입니다. 
• 국경 – 사용자가 테두리 유형, 너비 및 색상을 사용자 정의할 수 있습니다.
• 배경 – 배경 컨트롤을 사용하면 배경 이미지, 비디오, 색상을 추가할 수 있습니다. 비디오에 정적 색상이나 그라데이션 색상을 추가할 수 있습니다.
• 박스 섀도우 – 상자 그림자는 상자 주위에 5가지 유형의 그림자를 제공합니다. 가로 그림자, 세로 그림자, 그림자 흐림, 그림자 확산 및 다채로운 그림자가 포함됩니다.
• 텍스트 그림자 – 상자 그림자와 마찬가지로 텍스트 그림자 컨트롤도 네 가지 다른 컨트롤을 제공합니다. 가로 그림자, 세로 그림자, 그림자 흐림, 텍스트 주변의 다채로운 그림자 등이 있습니다.
• 타이포그래피 – 타이포그래피를 통해 사용자는 글꼴 모음, 글꼴 크기, 글꼴 두께, 글꼴 스타일, 줄 높이, 텍스트 변환 및 문자 간격을 사용자 정의할 수 있습니다.
• 이미지 크기 – 이미지 크기 제어는 이미지 높이, 너비, 적용 버튼으로 구성됩니다.
• 선택2 – 또한 선택 컨트롤과 같은 드롭다운 메뉴를 생성하지만 더 많은 스타일과 디자인을 제공합니다.
• 호버 애니메이션 – 이 컨트롤은 Hover.css 라이브러리를 기반으로 다양한 선택 상자에 애니메이션을 추가합니다.
• 입구 애니메이션 – 입구 애니메이션 컨트롤을 통해 사용자는 Animate.css 라이브러리를 기반으로 버튼의 모양을 사용자 정의할 수 있습니다.

이는 사용자 정의 Elementor 위젯을 구축하는 동안 사용할 수 있는 ElementsKit 위젯 빌더의 컨트롤입니다.

최종 단어

이것은 ElementsKit을 탭하여 사용자 정의 Elementor 위젯을 얼마나 쉽게 만들 수 있는지를 보여줍니다. ElementsKit에는 Elementor 페이지 구축에 드는 노력을 최소화할 수 있는 수많은 내장 위젯이 함께 제공됩니다.

동시에, 즐겨찾는 Elementor 사용자 정의 위젯을 생성하는 최소한의 방법도 제공합니다. 이제 ElementsKit을 설치 및 선택하고 Elementor 사용자 정의 위젯을 구축할 때 애드온의 이점을 누릴 차례입니다.