무료 워드프레스 페이지 빌더 Elementor를 사용하여 랜딩 페이지 만들기

0

Elementor 페이지 빌더란

Elementor는 무료로 사용이 가능한 오픈 소스 라이브 페이지 빌더 플러그인이며 코딩 지식이 없이도 쉽게 원하는 웹 사이트를 만들 수 있습니다.  이 빌더를 사용하여 사용자들은 기존 워드프레스 테마나 외부 테마를 커스터마이징(사용자 정의)할 수 있습니다.

참고로 비주얼 컴포저가 많은 인기를 끌고 있지만 비컴은 그리 좋은 플러그인은 아닙니다(워드프레스 페이지 빌더의 장점과 단점 참고). 최근에는 Elementor가 사용되는 테마가 조금씩 나오고 있습니다. “Elementor 페이지 빌더를 사용하는 워드프레스 테마“를 참고해보세요.

Elementor 페이지 빌더로 랜딩 페이지 만들기

이 페이지 빌더 플러그인은 매우 쉽게 사용이 가능합니다. 이 글에서는 Elementor에서 랜딩 페이지를 만드는 방법에 대해 설명합니다. Elementor를 사용하여 랜딩 페이지를 처음 만드는 경우 이 글이 도움이 될 것입니다.

단계 1: Elementor Page Builder 설치

먼저 워드프레스 관리자 패널에 로그인하여 사이드 메뉴에서 플러그인 > 플러그인 추가하기 옵션을 클릭합니다.

플러그인 라이브러리에서 Elementor를 검색합니다. Elementor Page Builder 항목을 찾아서 “지금 설치하기“를 클릭합니다.

또는, Elementor 웹사이트 https://elementor.com에서 Elementor를 직접 다운로드한 다음에 플러그인 업로드 기능을 사용하여 업로드할 수 있습니다.

Elementor 플러그인이 설치되면 활성화를 눌러 Elementor를 활성화합니다.

단계 2: Elementor 편집기

사이드바 메뉴로 이동하여 페이지 > 새 페이지 추가를 클릭하여 새로운 페이지를 만듭니다. 페이지 제목을 입력하고 저장한 다음 ‘Edit with Elementor’를 선택하십시오.

Elementor 편집기가 초기화되면 아래 그림과 같이 많은 기능이 포함된 Elementor 에디터가 표시되어 원하는 대로 페이지를 커스터마이징할 수 있습니다.

단계 3: 미리 디자인된 템플릿 사용하기

Add Template(템플릿 추가)을 클릭하거나 왼쪽 맨 아래의 파일 아이콘을 클릭하고 Template Library를 선택하면 사전 디자인된 템플릿 화면이 표시됩니다.

원하는 템플릿을 선택하여 Insert를 클릭하여 삽입합니다. 템플릿이 로드되면 원하는 대로 수정이 가능합니다.

단계 4: 처음부터 새 페이지 디자인하기

처음부터 새 페이지를 디자인할 수도 있습니다. 사이드바 메뉴로 이동하여 페이지 > 새 페이지 추가를 클릭하여 새 페이지를 만듭니다. 페이지 제목을 이력하고 ‘Edit with Elementor’를 클릭합니다.

 

Elementor Editor가 로드되면 Elements 탭의 다양한 콘텐츠 블록을 끌어다 놓아서 원하는 대로 편집합니다.

현재 다음과 같은 요소(Element)가 제공됩니다.

  • Columns (컬럼)
  • Heading (제목)
  • Image (이미지)
  • Text Editor (텍스트 에디터)
  • Video (비디오)
  • Button (버튼)
  • Divider (디바이더)
  • Spacer (스페이서)
  • Google Maps (구글 지도)
  • icon (아이콘)
  • Image Box (이미지 박스)
  • Icon Box (아이콘 박스)
  • Image Gallery (이미지 갤러리)
  • Image Carousel (이미지 캐러셀)
  • Icon List (아이콘 목록)
  • Counter (카운터)
  • Progress Bar (진행률 표시줄)
  • Testimonial (사용기, 경험담)
  • Tabs (탭)
  • Accordion (아코디언)
  • Toggle (토글)
  • Social Icons (소셜 아이콘)
  • Alert (경고 표시)
  • SoundCloud
  • Shortcode (쇼트코드)
  • HTML
  • Menu Anchor (메뉴 앵커)
  • Sidebar (사이드바)
  • 이외에 워드프레스 요소:  페이지, 달력, 글 목록, 오디오, 이미지, 비디오, 그 밖의 기능, 검색, 텍스트, 카테고리, 최근 글, 최근 댓글, RSS. 태그 구름, 사용자 정의 메뉴, 사용자 정의 HTML

이외에도 Elementor Pro 버전에서는 더 많은 기능이 제공된다고 하네요.

단계 5: 빈 페이지에 캔버스 템플릿 사용하기

빈 페이지에 캔버스 템플릿을 사용하려면 워드프레스 알림판 > 페이지 > 새 페이지 추가하기를 선택해야 합니다. 페이지 제목을 입력한 후에 페이지 오른쪽의 템플릿 드롭다운에서 Elementor Canvas를 선택한 다음 ‘Edit with Elementor’를 클릭합니다.

 

단계 6: 새로운 섹션 추가하기

새 섹션을 매우 쉽게 추가할 수 있습니다. Elementor 편집기에서 ‘Add Section’을 선택하도록 합니다.

 

원하는 구조를 선택하면 섹션이 추가됩니다.

단계 7: 2컬럼 추가하기

Elements 탭에서 ‘Columns’ 옵션을 선택하여 새 컬럼을 추가할 수 있습니다.

원하는 컬럼 구조를 선택하면 새 컬럼이 생성됩니다.

새로운 컬럼이 추가되면 Edit Section 탭에서 추가 옵션을 설정하여 컬럼을 사용자 정의할 수 있습니다.

단계 8: 제목(머리글) 추가하기

Elements 탭에서 ‘Heading’ 옵션을 선택하여 새 제목(머리글)을 추가할 수 있습니다.

그러면 Edit Section 탭에서 추가 옵션을 설정하여 제목(머리글)을 사용자 정의할 수 있습니다.

단계 9: 이미지

패널에서 ‘Image’ 위젯을 선택하여 새로운 이미지를 추가할 수 있습니다.

이제 Edit ImageStyle 탭에서 추가 옵션을 지정하여 이미지를 사용자 정의할 수 있습니다.

단계 10: 버튼 추가하기

Elements 탭에서 ‘Button’ 옵션을 선택하여 새 이미지를 추가할 수 있습니다.

마찬가지로 Edit Button 탭에서 추가 옵션을 지정하여 버튼을 사용자 정의할 수 있습니다.

마치며

다양한 툴(요소)을 제공하는 Elementor 페이지 빌더는 무료이지만 높은 완성도를 보여주는 것 같습니다. 보통 페이지 빌더는 사이트 로딩 속도에 부정적인 영향을 미치지만 Elementor는 사이트의 속도를 그다지 저하시키지 않는다고 하네요(개별 사이트에 따라 차이가 있을 수 있습니다).

페이지 빌더는 사용하지 않는 것이 가장 이상적이겠지만, 레이아웃 작업을 위해 페이지 빌더를 사용해야 하는 경우 무료 페이지 빌더인 Elementor를 고려해볼 수 있을 것 같습니다.

참고:

Related Posts