WooCommerce + Elementor: 멋진 물건을 만들어 봅시다
게시 됨: 2022-07-27개발자를 고용하지 않고 WordPress 웹 사이트를 조정하고 디자인하고 싶습니까? 좋은 소식: WordPress 페이지 빌더 플러그인을 사용하면 완전히 가능합니다.
WordPress 페이지 빌더 플러그인은 직관적인 드래그 앤 드롭 인터페이스와 함께 제공되어 아름다운 사용자 정의 페이지와 웹 사이트를 만들 수 있습니다. 따라서 기술이나 기술 노하우에 관계없이 페이지 빌더 플러그인을 사용하면 코드를 한 줄도 작성하지 않고도 이상적인 웹사이트를 쉽게 디자인할 수 있습니다.
이제 어떤 WordPress 페이지 빌더 플러그인을 고려해야 하는지 궁금하시다면 바로 찾아오셨습니다. 이 기사에서는 가장 인기 있는 옵션 중 하나인 Elementor를 검토할 것입니다. 이는 최고의 표준으로 간주됩니다. Elementor는 200만 개의 활성 설치가 있는 두 번째로 많이 설치된 WordPress 플러그인으로, WordPress 웹사이트의 약 15.9%에서 사용됩니다.
Elementor의 간략한 개요부터 시작하여 플러그인의 인터페이스, 기능 및 가격을 추가로 검토하여 사이트에 적합한 선택인지 판단하는 데 도움이 됩니다. 갑시다!
Elementor 플러그인: 간략한 개요
Elementor는 WooCommerce 또는 WordPress 테마와 함께 제공되는 표준 페이지 템플릿과 비교하여 고유한 웹 페이지 및 게시물을 만들 수 있는 시각적 드래그 앤 드롭 WordPress 페이지 빌더 플러그인입니다.
코딩이 필요하지 않으며 드래그 앤 드롭 도구를 사용하여 설정을 쉽게 구성하고 페이지의 콘텐츠와 요소를 구성할 수 있습니다.
Elementor 인터페이스가 어떻게 작동하는지 살펴보고 플러그인 검토를 시작하겠습니다.
Elementor 플러그인 인터페이스 이해하기
다른 많은 페이지 빌더 플러그인과 비교할 때 Elementor는 가장 간단하고 원활한 인터페이스 중 하나를 가지고 있습니다. 플러그인을 처음 실행하면 다음과 같은 페이지가 나타납니다.
점선 모양의 회색 영역이 콘텐츠 영역입니다. 이 영역 외부에는 일반 테마가 표시되고 점선 영역에는 위젯을 추가하고 자신만의 디자인을 만들 수 있습니다.
왼쪽에는 페이지를 디자인하기 위해 조합할 수 있는 빌딩 블록 역할을 하는 위젯이 표시됩니다. 이 위젯 아래에는 이미지와 같이 디자인을 미리 보고, 변경 사항을 실행 취소하거나, 반응 모드를 켜기 위한 일반 설정이 있습니다.
페이지에서 원하는 요소를 드래그 앤 드롭하는 방법은 다음과 같습니다.
페이지에 요소를 놓을 때 – Elementor는 요소를 두 개의 레이아웃 구조로 나누어 아래와 같이 두 개의 다른 구조적 요소를 제공합니다.
이러한 구조적 요소에는 다음이 포함됩니다.
- 섹션: 파란색으로 표시됩니다.
- 열: 검은색으로 표시된 섹션 내부에 있습니다. 섹션 내에서 필요한 만큼 열을 추가할 수 있습니다.
요소를 놓으면 너비를 조정하고 열 간격과 높이를 변경하여 레이아웃을 쉽게 사용자 지정할 수 있습니다.
또한 특정 요구 사항에 따라 적절한 섹션 구조 를 선택하고 열 내에 이미지, 비디오 또는 아이콘과 같은 다른 요소를 추가할 수도 있습니다.
예를 들어, 아래 이미지와 같이 이미지를 추가하고 기본 Elementor 이미지 라이브러리에서 하나를 선택했습니다. 이미지의 크기와 정렬을 변경하고 캡션을 추가하고 적절한 URL을 연결할 수 있습니다.
요소, 구조 또는 열의 추가 스타일 지정을 위해 사이드바에서 스타일 및 고급 탭을 사용할 수 있습니다. 스타일을 지정하려는 콘텐츠를 클릭하고 사이드바 탭을 클릭하여 변경하기만 하면 됩니다.
사이드바의 오른쪽 모서리에 표시된 사각형 아이콘 을 클릭하여 탭에서 요소 사이드바로 이동할 수도 있습니다.
따라서 Elementor는 사용이 매우 간편하고 간단한 드래그 앤 드롭과 손쉬운 사용자 지정 옵션을 통해 꿈의 웹사이트를 순식간에 구축할 수 있습니다.
이제 많은 시간을 들이지 않고 Elementor 페이지 빌더의 기능으로 바로 이동해 보겠습니다.
WooCommerce를 위한 탁월한 페이지 빌더로 만드는 최고의 Elementor 기능
다음은 WordPress 및 WooCommerce 웹 사이트에서 가장 인기 있는 페이지 빌더 중 하나로 만드는 뛰어난 Elementor 이점입니다.
- 광범위한 사전 제작 템플릿 라이브러리
Elementor는 광범위한 템플릿을 제공합니다. 템플릿을 추가하려면 아래 템플릿 추가 아이콘을 클릭하십시오.
Elementor 템플릿 라이브러리 에서 300개 이상의 템플릿을 선택하고 클릭 한 번으로 페이지에 추가하세요.
Elementor 2.0 릴리스 이후 이러한 템플릿은 두 가지 형식으로 제공됩니다.
- 블록: 전체 페이지 대신 특정 섹션에 대한 디자인을 제공합니다. 예를 들어, 블록을 사용하여 기존 페이지 레이아웃에 회사 정보 섹션 또는 미리 작성된 연락처 섹션을 추가할 수 있습니다.
- 페이지 – 클릭 한 번으로 가져오고 필요에 따라 조정할 수 있는 전체 페이지 디자인을 제공합니다.
또한 일부 디자인을 블록 및 템플릿으로 저장하여 나중에 다른 페이지나 웹사이트에서 재사용할 수 있으므로 웹사이트 전체에서 공통 템플릿 디자인을 유지 관리하는 것이 매우 편리합니다.
또한 매번 처음부터 새로운 페이지 디자인을 만드는 번거로움을 덜어줍니다.
- 반응형 디자인 컨트롤 및 모바일 미리보기
모바일 사용은 매월 꾸준히 증가하고 있으며, 웹 디자이너의 약 73.1%는 웹 사이트 이탈의 가장 큰 원인 중 하나가 반응하지 않는 페이지 디자인이라고 생각합니다.
Elementor에서 만드는 모든 디자인과 페이지는 자동으로 반응하며 모바일 장치에서 멋지게 보입니다. 또한 인터페이스를 벗어나지 않고도 웹사이트가 다른 장치에서 어떻게 보이는지 빠르게 미리 볼 수 있습니다.
사이드바 하단에 있는 반응형 모드 버튼을 클릭하고 아래 이미지에서 강조 표시된 버튼을 클릭하여 웹사이트의 데스크톱, 모바일 및 태블릿 버전을 미리 봅니다.
장치 유형에 따라 페이지 디자인을 사용자 정의하고 특정 장치에서 특정 위젯을 표시하거나 숨길 수 있습니다. 예를 들어 웹 사이트의 데스크톱 버전에 거대한 영웅 이미지가 있는 경우 사이트의 모바일 버전에 해당 이미지를 표시하지 않을 수 있습니다. 한 번의 토글 클릭으로 Elementor의 반응형 디자인 컨트롤 을 사용하여 모바일 장치에서 숨기려는 이미지 또는 섹션을 선택하고 숨길 수 있습니다.
따라서 웹 사이트가 100% 반응하도록 보장하므로 데스크톱, 태블릿 및 모바일 장치를 포함한 모든 장치에서 멋지게 보입니다.
- 무한한 사용자 정의 옵션
Elementor를 사용하면 사용자 정의가 무한하며 웹 사이트와 해당 요소를 디자인하는 방법에 제한이 없습니다.
Elementor 편집기의 스타일 및 고급 메뉴는 다양한 스타일 사용자 정의 옵션을 제공합니다. 색상, 너비, 크기, CSS 필터 및 테두리를 비롯한 여러 속성에 따라 콘텐츠의 스타일을 지정할 수 있습니다.
동시에 고급 메뉴에서는 아래와 같이 레이아웃, 모션 효과, 배경, 테두리, 속성 및 기타 요소를 관리할 수 있습니다.
- 세부 레이아웃 컨트롤
Elementor는 사용자 정의 옵션에 대해 더 깊이 파고들어 레이아웃 디자인에 대한 세부적인 제어를 제공하므로 사용자 정의 코드를 작성할 수 없기 때문에 디자인 유연성을 타협할 필요가 없습니다.
Elementor를 사용하면 여러 직관적인 제어 옵션을 통해 섹션, 위젯 및 열을 원하는 위치에 간단하게 배치할 수 있습니다.
고급 메뉴의 레이아웃 컨트롤을 사용하여 다음을 수행할 수 있습니다.
- 섹션, 위젯 및 열에 대한 여백 및 패딩 을 수동으로 설정합니다.
- 섹션의 너비 (기본, 전체 너비, 인라인 및 사용자 지정)를 선택합니다.
- 열 내에서 위젯의 위치 를 조정합니다(기본, 고정 및 절대).
- 열 사이의 간격 을 조정하고 깔끔한 레이아웃을 위해 여백을 만듭니다.
따라서 코딩 기술이 없어도 위젯의 위치를 쉽게 조정하고 필요에 따라 열과 섹션을 사용자 지정할 수 있습니다.
- 실행 취소/다시 실행 변경으로 진행 상황의 전체 개정 내역
Elementor의 가장 좋은 기능 중 하나는 모든 변경 사항의 전체 기록 을 미리 볼 수 있으므로 기록의 모든 작업을 기록할 수 있다는 것입니다.
또한 변경 사항을 쉽게 취소하고 필요할 때마다 이전 버전으로 되돌릴 수 있습니다. 또한 새 디자인을 저장할 때마다 필요한 경우 완전히 새로운 개정판으로 쉽게 되돌릴 수 있습니다.
- 깨끗한 코드를 남깁니다.
앞으로 어떤 이유로 Elementor를 비활성화하려는 경우 Divi Builder와 같은 수많은 단축 코드를 남기는 것에 대해 걱정할 필요가 없습니다.
Elementor는 깨끗한 코드를 남겨 최적의 성능과 페이지 속도를 보장합니다.
더 많은 Elementor 기능
다음은 Elementor 페이지 빌더 플러그인의 몇 가지 추가 기능입니다.
- 머리글 및 바닥글 편집기: 코딩 기술 없이도 Elementor를 사용하여 사이트의 머리글과 바닥글을 쉽게 편집할 수 있습니다.
- 인라인 텍스트 편집: 이 기능을 사용하면 화면에서 실시간으로 텍스트를 편집할 수 있으므로 기존 텍스트 내용을 쉽게 편집하거나 블로그 게시물을 작성할 수 있습니다.
- RTL 및 번역 준비: Elementor는 23개의 번역된 언어로 제공되며 완전한 RTL 언어 지원으로 인해 추가 언어로 쉽게 번역할 수 있습니다.
- WooCommerce 위젯: 가격 목록 및 가격 테이블과 같은 사전 구축된 WooCommerce 위젯을 제공하여 전자 상거래 웹사이트를 쉽게 구축할 수 있도록 합니다.
- 타사 통합: Elementor는 ActiveCampaign 및 MailChimp를 포함한 타사 통합을 지원합니다.
- 글로벌 색상 및 타이포그래피 옵션: Elementor를 사용하면 글로벌 타이포그래피와 색상을 설정하여 모든 페이지에서 포괄적인 디자인을 만들 수 있습니다. 게다가 웹사이트 디자인을 위해 800개 이상의 Google 글꼴 중에서 선택할 수도 있습니다.
- 유지 관리 모드: Elementor의 유지 관리 모드 템플릿을 활용하여 웹 사이트를 유지 관리 모드로 설정할 수 있습니다.
엘리멘터 프로 리뷰
핵심 Elementor 페이지 빌더는 오픈 소스이며 무료이지만 유용한 추가 기능을 제공하는 Elementor Pro 버전으로 업그레이드할 수 있습니다.
다음은 새로운 Elementor Pro 플러그인의 몇 가지 기능에 대한 간략한 설명입니다.
- 전체 WordPress 테마를 만들 수 있습니다.
- 슬라이더, 소셜 공유 버튼, 양식, 카운트다운 타이머 및 로그인 양식을 포함하여 더 흥미로운 위젯이 있습니다.
- 수많은 고품질 프리미엄 Elementor Pro 템플릿을 제공합니다.
따라서 더 많은 기능, 프리미엄 템플릿 및 글로벌 위젯을 원할 경우 $49부터 시작하는 Elementor Pro 플러그인을 사용할 수 있습니다.
Elementor 가격 검토
단순하고 기본적인 스타일의 웹사이트를 구축하려는 경우 가장 기능이 풍부한 무료 페이지 빌더라는 점을 고려하면 플러그인의 무료 버전으로 충분해야 합니다.
그러나 보다 전문적인 웹 사이트를 만들기 위해 Elementor는 VIP 지원 및 Elementor 전문가 프로필과 같은 프리미엄 기능이 포함된 4가지 프리미엄 플랜을 제공합니다.
Elementor 플러그인의 Essential, Expert, Studio 및 Agency 요금제는 연간 $49, $199, $499 및 $999입니다. 따라서 Elementor는 웹 디자이너, 개발자 또는 대행사 소유자 여부에 관계없이 모든 사람을 위한 것입니다. Elementor는 모든 필요와 요구에 맞는 기능을 제공합니다.
결론: 최종 평결
이 포괄적인 검토 후에 Elementor는 WordPress 또는 WooCommerce 웹 사이트를 구축하는 데 필요한 모든 필수 기능을 제공한다고 말할 수 있습니다.
가볍고 단순하며 이해하기 쉽고 부풀려지지 않은 인터페이스가 제공되므로 코딩 경험이 없는 웹사이트 디자이너도 아름다운 웹사이트를 구축할 수 있습니다. 그리고 가장 좋은 점은 모든 사람의 요구에 맞는 가격 책정 계획이 함께 제공된다는 것입니다. 또한 Elementor 개발자는 계속해서 새로운 기능과 개선 사항을 출시하고 출시합니다.
플러그인의 사용 용이성, 전반적인 기능, 성능, 지원, 인터페이스 및 가격을 검토한 후 WordPress 페이지 빌더 플러그인의 최상위에 Elementor를 선정했습니다. 따라서 Elementor 플러그인을 직접 확인하고 사용해 보고 특정 비즈니스 요구 사항에 적합한 계획을 선택하십시오.