Elementor 및 PowerPack으로 랜딩 페이지를 만드는 방법

WordPress를 사용하면 블로그, 비즈니스 웹사이트, 복잡한 ERP 등 모든 사람이 온라인에서 쉽게 인지도를 높일 수 있습니다. WordPress 테마와 플러그인을 사용하면 전문가 고용에 대해 걱정할 필요 없이 사용자가 웹사이트를 훨씬 쉽게 구축할 수 있습니다. Page Builder 플러그인은 WordPress로 웹사이트를 구축하는 방식을 바꾸는 데 중요한 역할을 했습니다. Elementor는 인기 있는 페이지 빌더 플러그인 중 하나입니다.

웹 디자이너이고 코드에 대해 걱정할 필요 없이 디자인에 생명을 불어넣고 싶다면 Elementor를 사용할 수 있습니다. 하지만 개발자라면? 글쎄, 당신이 개발자라면 개발자 친화적 인 기능과 API 확장이 용이하기 때문에 Elementor도 사용할 수 있습니다.

이 게시물에서는 Elementor에 대해 자세히 알아보고 이를 Elementor 애드온과 함께 사용하여 웹사이트, 랜딩 페이지, 팝업을 빠르게 구축하는 방법을 배우게 됩니다.

엘리멘터란?

Elementor는 WordPress용으로 널리 사용되는 Page Builder 플러그인입니다. Elementor는 섹션 및 열과 같은 기본 구조 요소와 함께 위젯이라는 즉시 사용 가능한 콘텐츠 블록을 제공합니다.

이러한 위젯을 WordPress 웹사이트의 모든 페이지에 끌어다 놓을 수 있으며 필요에 따라 사용자 정의 레이아웃을 구축할 수 있습니다.

Elementor Pro에는 60개 이상의 위젯과 모든 페이지를 디자인하는 데 사용할 수 있는 미리 디자인된 템플릿이 많이 있습니다.

엘리멘터의 특징

Elementor에는 웹 사이트 개발을 보다 편안하고 빠르게 만들 수 있는 다양한 기능이 포함되어 있습니다. 가치가 있는 Elementor의 모든 인상적인 기능을 살펴보겠습니다.

빠르고 사용하기 쉬운

Elementor는 성능에 최적화되어 있습니다. 초보 사용자라도 Elementor에서 사용하고 쉽게 탐색할 수 있습니다. Elementor가 디자인 과정에서 당신을 끌어당기는 것을 결코 느끼지 않을 것이며, 당신을 위해 빠르고 쉽게 작업을 수행할 것입니다.

Elementor가 빠르게 타오르는 동안 Cloudways Elementor 호스팅을 사용하면 Elementor를 최대한 활용할 수 있습니다. CW는 성능에 관한 모든 것이며 서버 기능에 대한 슈퍼 제어를 제공합니다. 보안과 관련하여 Cloudways 는 서버를 안전하고 안전하게 유지하기 위해 사전 예방적 보안 관행에 의해 관리되는 정말 안정적이고 안전한 서버를 제공합니다. Cloudways 와 함께 제공되는 기능의 수는 오늘날 업계에서 찾기 힘든 것입니다.

미리 디자인된 페이지 템플릿

Elementor를 사용하면 한 번의 클릭으로 웹 페이지를 만드는 데 사용할 수 있는 미리 디자인된 템플릿이 많이 제공됩니다. 방문 페이지, 페이지 정보 등과 같은 거의 모든 웹 페이지 카테고리에 대한 템플릿이 있으며 웹 사이트 디자인 프로세스를 훨씬 빠르게 만들 수 있습니다.

Elementor 라이브러리에서 좋은 템플릿을 찾을 수 없으면 타사 Elementor 템플릿을 확인할 수 있습니다. 디자이너와 개발자로 구성된 활발한 커뮤니티를 통해 Elementor를 한 단계 더 쉽게 업그레이드할 수 있습니다.

위젯으로 로드됨

무료 버전과 Pro 버전 모두 Elementor에는 기능이 탑재된 위젯이 함께 제공됩니다. 제목, 텍스트 편집기, 버튼과 같은 단순한 콘텐츠 위젯에서 게시물 그리드, 로그인 양식, WooCommerce, 소셜 공유와 같은 고급 위젯에 이르기까지 Elementor를 사용하면 많은 기능을 사용할 수 있습니다.

위젯과 관련하여 더 많은 기능을 원하면 타사 Elementor 애드온을 사용해 볼 수 있습니다. Elementor용 PowerPack을 사용하는 것이 좋습니다. Elementor의 주요 애드온이며 인기 있는 PowerPack Beaver Builder 애드온 뒤에 있는 동일한 팀에서 구축했습니다.

Elementor 팝업 빌더

팝업 빌더는 Elementor 빌더의 최신 추가 기능 중 하나입니다. 팝업 빌더 기능을 사용하면 웹사이트에서 타사 팝업 빌더 플러그인을 사용할 필요가 없습니다. Elementor를 사용하여 고급 타겟팅 규칙 및 기능으로 인상적인 팝업을 디자인할 수 있습니다.

팝업 빌더 기능으로 로그인 양식, 전체 화면 매트, 할인 팝업 등을 만들 수 있습니다.

전역 설정

웹 사이트를 구축할 때 일관된 색상 설정, 타이포그래피 등을 유지하는 것이 중요합니다. Elementor의 전역 설정을 사용하여 디자인 프로세스를 쉽게 하기 위해 색상, 글꼴 및 색상 선택기를 미리 사용자 정의할 수 있습니다.

머리글, 바닥글, 아카이브 등과 같은 테마 부분을 빌드합니다.

Elementor를 사용하면 디자인이 페이지의 콘텐츠 영역에만 국한되지 않습니다 . 코드 작성에 대해 걱정할 필요 없이 사용자 정의 머리글, 바닥글, 사이드바 및 웹사이트의 거의 모든 부분을 만들 수 있습니다. 이 모든 것은 Elementor Pro의 Theme Builder 기능을 사용하여 쉽게 만들 수 있습니다.

동적 콘텐츠

Elementor Pro의 동적 콘텐츠 기능을 사용하면 WordPress 사용자 정의 필드, ACF, 도구 세트, 포드, MetaBox 또는 기타 사용자 정의 필드 플러그인의 동적 데이터/콘텐츠를 표시할 수 있습니다. 사용자 정의 필드의 데이터를 사용하고 사이트의 모든 부분에서 Elementor 위젯으로 표시할 수 있습니다. 여기에서 동적 콘텐츠에 대해 자세히 알아볼 수 있습니다.

라이트 및 프로 버전

Elementor는 제공할 것이 많지만 사용자가 액세스하기 위해 막대한 비용을 지불해야 할 필요는 없습니다. 사실 Elementor에는 Lite와 Pro의 두 가지 버전이 있습니다. 라이트 버전 자체에서 Elementor의 많은 기능에 액세스할 수 있습니다. 두 버전 모두 제공하는 고유한 기능이 있습니다. 다음은 결정을 내리는 데 도움이 될 수 있는 Elementor Lite와 Pro를 자세히 비교한 것입니다.

Elementor용 파워팩

Elementor는 확실히 전체 패키지입니다. 최소한의 학습 각도로 웹 페이지 디자인을 시작하는 데 필요한 유일한 도구입니다.

Elementor를 사용하는 동안 약간의 제약을 받는 경우가 있습니다. 이를 위해 PowerPack Elementor 추가 기능과 같이 잘 코딩된 타사 추가 기능이 도움이 됩니다. 이 추가 기능은 해당 카테고리에서 최고 중 하나이며 사용자를 위한 다양한 사용자 정의 옵션이 포함된 우수하고 인상적인 위젯을 제공합니다.

현재 Pro 버전의 PowerPack에는 50개 이상의 위젯이 있으며 팀은 Elementor 애드온 중에서 탁월한 선택이 되는 새로운 위젯을 계속 추가하고 있습니다.

PowerPack은 성능을 염두에 두고 전문 WordPress 개발자 및 디자이너 팀에 의해 구축되었습니다. 플러그인은 잘 코딩되어 있으며 최신 버전의 Elementor 및 WordPress와의 호환성을 위해 정기적으로 업데이트됩니다.

Elementor와 PowerPack 추가 기능을 함께 사용하여 환상적인 웹 페이지를 만드는 방법을 살펴보겠습니다.

랜딩 페이지 만들기

이 튜토리얼에서는 Elementor 및 PowerPack Elementor 애드온으로 빠른 랜딩 페이지를 만드는 방법을 배웁니다. 사용자 친화적인 인터페이스 덕분에 Elementor를 쉽게 시작할 수 있습니다.

사이트에 Elementor와 PowerPack이 모두 설치되어 있는지 확인하십시오. 아래 링크에서 무료 버전을 다운로드할 수 있습니다.

1. 엘리멘터
2. Elementor용 PowerPack Lite

Elementor로 페이지 만들기

WordPress 관리 대시보드에 로그인하고 페이지 아래에서 새로 추가 옵션을 클릭합니다. 이제 페이지에 제목/이름을 지정하고 Elementor로 편집 버튼을 클릭하십시오.

이 튜토리얼에서는 Pizzeria의 랜딩 페이지를 만들고 있으므로 그에 따라 페이지 이름을 지정하겠습니다. 최종 결과는 다음과 같습니다.

첫 번째 섹션부터 시작하겠습니다 . 이 작업을 수행하기 전에 편집기의 왼쪽 하단 모서리에 있는 작은 설정 아이콘을 클릭하여 레이아웃을 Elementor Canvas 로 변경합니다.

1단계: 영웅 섹션

영웅 섹션은 배경 이미지, 두 개의 제목 위젯 및 CTA 버튼으로 구성됩니다.

먼저 더하기 아이콘을 클릭하고 옵션에서 단일 열 구조를 추가합니다. 이제 섹션 설정으로 이동하여 섹션 늘이기 옵션을 활성화 하고 고급 탭에서 아래쪽 및 위쪽 패딩을 250으로 설정합니다.

이제 스타일 탭 > 배경 유형 > 클래식 에서 원하는 배경 이미지를 선택하고 미디어 디스플레이에서 이미지를 선택할 수 있습니다.

배경이 준비되었습니다. 이제 영웅 섹션에 제목과 버튼을 추가해 보겠습니다.

Dual Heading 위젯 을 페이지에 끌어다 놓고 각각 텍스트를 변경합니다. 이제 아래 그림에서와 같이 가격을 더 강조하기 위해 첫 번째와 두 번째 제목을 적절 하게 나누어야 합니다 . 제목의 두 부분에 대한 활자체 를 변경합니다 .

영웅 타이틀을 원하는 방식으로 만들기 위해 변경할 수 있는 다른 많은 사항이 있습니다.

변경한 후에는 이중 제목 아래에 다른 제목 위젯을 끌어다 놓고 필요에 따라 텍스트 및 타이포그래피 설정을 변경합니다. 여기에서는 텍스트 크기를 90 , 글꼴을 Elsie , 글꼴 두께를 600 으로 변경했습니다 .

이제 CTA 버튼을 추가하겠습니다 .

Heading 위젯 바로 아래 섹션에 Elementor Button 위젯을 끌어다 놓습니다. 이제 버튼에 대한 설정을 변경하기 시작합니다.

다음은 버튼에 대한 변경 사항입니다.

• 텍스트를 지금 주문으로 변경했습니다 !
• 중앙 정렬 버튼.
• CTA 링크 추가
• 타이포그래피 를 엘리스로 변경했습니다 . 24 600 각각 폰트, 크기 및 무게.
• 배경색을 빨간색( #ff0000 )으로, 글꼴색을 흰색( #ff0000 )으로 변경했습니다.
• 위쪽, 오른쪽, 아래쪽, 왼쪽에 각각 패딩 18, 40, 18, 40 을 추가했습니다.

변경 후 영웅 섹션은 다음과 같습니다.

2단계: 정보 섹션

이제 정보 섹션에서 작업하고 "+" 아이콘을 클릭하여 페이지에 2열 구조를 추가합니다.

이제 이와 유사한 레이아웃을 만드는 것을 목표로 하고 있으므로 왼쪽 열에 제목 위젯, 텍스트 편집기 위젯 및 평가 위젯을 추가합니다. 오른쪽 열에 Heading 위젯, Text 위젯, Button 위젯을 추가합니다.

섹션 에서 위젯 을 끌어다 놓기 시작하고 위에 제공된 이미지와 같이 보이도록 변경하기만 하면 됩니다. 제목을 추가하고 동일한 타이포그래피 를 변경합니다 .

다음과 같이 표시됩니다.

이제 왼쪽 열의 제목 아래에 텍스트 편집기를 추가하고 타이포그래피를 아래 표시된 것과 동일하게 변경합니다.

이제 우리는 텍스트 편집기 위젯 아래에 Testimonial Carousel 위젯을 추가할 것입니다. 귀하의 웹사이트에 표시할 "항목" 또는 평가를 추가하십시오. 더 많은 사용자 정의 기능을 제공하는 PowerPack의 평가 위젯을 사용할 수도 있습니다.

변경 작업이 완료되면 정보 섹션의 왼쪽 열이 다음과 같이 표시됩니다.

이제 오른쪽 열에 배경을 추가하여 섹션에 약간의 대비를 추가합니다.

이제 왼쪽 열에 만든 제목의 복제본을 만들고 오른쪽 열에 끌어다 놓습니다. 텍스트 편집기에 대해서도 동일한 작업을 수행하면 불필요한 중복을 방지 하고 시간도 절약할 수 있습니다. 이제 버튼의 경우 영웅 섹션에서 버튼을 복제 하고 정보 섹션의 오른쪽 열로 끌어서 이동합니다.

편집 열> 레이아웃> 수직 정렬 에서 오른쪽 열을 가운데에 수직으로 정렬 하면 정보 섹션이 준비됩니다!

정보 섹션의 최종 결과는 다음과 같습니다.

3단계: "자세히 알아보기" CTA 섹션

Pizzeria에 대해 이야기하는 또 다른 섹션을 추가할 것입니다. 이 섹션은 이전에 만든 섹션과 유사하지만 구조가 약간 다릅니다.

따라서 최종 결과가 다음과 같이 표시되기를 바랍니다.

여기서 비슷한 점을 눈치채셨나요?

예! 제목, 텍스트 편집기는 이전에 이미 만든 것과 유사합니다. 따라서 모든 위젯을 다시 디자인하는 대신 간단히 복제 하여 원하는 위치로 드래그합니다.

하자!

먼저 새로운 2열 구조를 추가 하고 섹션 설정으로 이동하여 미디어 창에서 배경 이미지 를 추가하고 상단 패딩을 100 으로 추가하여 패널을 더 넓게 보이게 합니다. 또한 설정에서 늘이기 섹션 옵션을 활성화하십시오 .

이제 이전 섹션으로 이동 하여 제목, 텍스트 편집기 및 버튼 위젯을 복제합니다 . 위젯 을 마우스 오른쪽 버튼으로 클릭 하고 복제 옵션을 선택하면 됩니다. 복제되면 복제된 위젯을 새 위치로 끌어다 놓습니다.

섹션은 다음과 같습니다.

이제 오른쪽 열에 대해 이미지 위젯을 끌어다 놓고 미디어 갤러리에서 이미지를 선택합니다. 이미지 크기 등의 측면에서 이미지를 조정하고 완료되면 섹션이 다음과 같이 보입니다.

4단계: 연락처/주문 섹션

이것은 사용자가 주문하는 데 도움이 되는 CTA 섹션입니다. 이제 이 모든 섹션에 무엇이 포함되어야 할까요? 여기서 우리가 무엇을 만들고자 하는지 봅시다.

PowerPack으로 두 개의 제목 및 텍스트 편집기 위젯, 연락처 양식 및 가격 목록 메뉴 위젯을 만들어야 합니다.

우선, 제목과 텍스트 편집기의 디자인과 모양을 동일하게 유지해야 한다는 것을 알고 있습니다. 계속해서 이전 섹션에서 복사 하여 여기에 배치할 수 있습니다. 이제 원하는 텍스트로 변경하십시오.

Elementor Pro의 양식 위젯을 사용하여 간단한 드래그 앤 드롭 프로세스로 연락처 양식을 만들 수 있습니다. 그렇게하면 연락처 양식이 페이지에 나타납니다. 이제 양식을 추가로 사용자 정의할 수 있습니다. 내가 변경한 사항은 다음과 같습니다.

• 양식 필드를 추가 하고 필드 크기를 변경했습니다.
• 버튼 의 텍스트, 크기 및 정렬 을 변경했습니다 .
• 이메일 을 제출 버튼 작업으로 추가하고 이메일 세부 정보를 추가했습니다.
• 열 간격을 조정하고 텍스트와 필드의 타이포그래피와 색상 을 다시 수정했습니다.
• 문의 양식을 더 매력적으로 보이게 하기 위해 필요한 기타 변경 사항.

Gravity Forms, WPForms, Ninja Forms 등과 같은 연락처 양식 플러그인을 사용하는 경우 PowerPack의 양식 스타일러 위젯을 사용하여 Elementor로 양식의 스타일을 지정할 수 있습니다.

이제 오른쪽 열에 제품의 가격표를 추가합니다. 이를 위해 PowerPack의 Price Menu 위젯을 사용할 것입니다. 끌어다 놓기만 하면 세부 정보를 추가하고 동일한 디자인과 레이아웃을 변경할 수 있습니다. 전체 섹션은 다음과 같습니다.

지금 경품을 입력하세요!

Cloudways에서 주최하는 PowerPack 경품

와인딩!

모든 변경을 수행한 후의 전체 레이아웃은 다음과 같습니다.

이제 Elementor 및 PowerPack for Elementor를 사용하여 자신을 위한 멋진 레이아웃을 만들 수 있습니다. Elementor는 많은 기능을 제공하지만 PowerPack은 창의적이고 기능 지향적인 위젯으로 이를 더욱 확장합니다. 툴킷에 있는 50개 이상의 매우 유용한 위젯으로 웹사이트를 더 빠르게 구축할 수 있습니다.

Elementor와 PowerPack을 사용하면 시간과 노력을 절약하고 웹 디자인 비즈니스를 확장할 수 있습니다. 이뿐만 아니라 두 제품 모두 놀라운 WordPress 전문가 팀의 지원을 받으므로 안심하고 사용할 수 있습니다.