Elementor 디렉토리 웹사이트를 만드는 방법
무료 Elementor 플러그인으로 간단한 디렉토리 웹사이트를 구축하는 방법, 또는 Elementor PRO와 GeoDirectory 프리미엄 애드온으로 매우 전문적인 온라인 디렉토리를 만드는 방법을 안내합니다.
Elementor 디렉토리 웹사이트를 구축하는 방법은?
무료 Elementor 플러그인을 사용하여 Elementor 디렉토리 웹사이트를 구축하는 가장 쉬운 방법은 다음 4단계를 따르는 것입니다:
- Hello 테마 설치
- Elementor 설치
- GeoDirectory 설치 및 설정
- Elementor 디렉토리 웹사이트 디자인
이를 자세히 어떻게 할 수 있는지 알아보겠습니다. 하지만 먼저, 왜 이 솔루션이 최선인지 살펴보겠습니다.
Elementor를 사용하여 디렉토리 웹사이트를 구축하는 가장 좋은 방법.
Elementor 디렉토리 웹사이트를 구축하기 위해 Elementor.com은 Custom Post Type UI, Advanced Custom Fields, 그리고 Elementor Custom Skin 플러그인 사용을 권장합니다.
그것이 최선의 방법일까요?
어쩌면 그렇겠지만, 다음 사항 없이 간단한 디렉토리를 구축할 계획인 경우에만 해당됩니다:
- 많은 수의 리스팅 (wp-posts 데이터베이스 테이블은 확장성이 좋지 않습니다)
- 각 리스팅에 대한 많은 커스텀 필드 (Advanced Custom Fields는 확장에 한계가 있습니다 도 마찬가지입니다)
- 사용자가 프론트엔드에서 자신의 리스팅을 추가하고 편집할 수 있는 옵션
- 위치, 근접성, GeoLocation 또는 사용자 정의 필드별 고급 검색
- 추가 기능과 향상된 노출을 제공하는 유료 리스팅
- 리스팅 소유자가 자신의 리스팅을 클레임할 수 있는 옵션
- 사용자 리뷰 및 평점별 리스팅 정렬
- 비즈니스까지의 길 안내를 제공하는 인터랙티브 지도
- 비즈니스 소유자에게 이메일을 보낼 수 있는 문의 양식
- 기타 수익화 옵션
- 이벤트 디렉토리
해당 튜토리얼을 따라 진행하면, 필수 정보가 담긴 비즈니스 카탈로그를 구축할 수 있지만 웹사이트 방문자와의 상호작용은 매우 제한적입니다.
이 방식을 따를 때 직면하게 될 모든 과제를 아래에 정리했습니다:
커스텀 포스트 타입과 Advanced Custom Fields로 디렉토리 웹사이트 개발하기
대신 위에 나열된 항목 중 하나 이상이 필요한 경우, 많은 추가 플러그인과 경우에 따라서는 상당한 양의 커스텀 코드가 필요합니다.
더 나은 방법이 있을 거예요! 네, 있습니다!
GeoDirectory를 사용할 수 있습니다:
최고의 Elementor 디렉토리 플러그인
프리미엄 애드온을 사용하면 위에 나열된 모든 기능과 그 이상을 누릴 수 있습니다.
또한, 이 튜토리얼에서는 무료 버전의 Elementor로도 충분하기 때문에 Elementor PRO 사용을 피할 수도 있습니다.
Elementor PRO는 매우 정교하고 개인화된 디자인이 필요한 경우에만 필요합니다.
자, 더 이상 지체하지 말고, 무료 테마와 Elementor 플러그인 기본 버전, 그리고 서드파티 무료 애드온을 사용하여 GeoDirectory로 디렉토리 웹사이트를 구축하는 방법을 살펴보겠습니다.
무료 테마와 무료 플러그인만으로 Elementor 디렉토리 웹사이트 만들기
이 튜토리얼에서는 무료 Elementor 플러그인, 무료 Hello 테마, 무료 GeoDirectory 플러그인 등 무료 WordPress 리소스를 사용하여 간단한 디렉토리 웹사이트를 구축하는 방법을 소개하는 것으로 시작하겠습니다.
다음과 같은 기능이 포함됩니다:
- 무제한 커스텀 필드를 포함한 무제한 리스팅.
- 근접 위치 검색.
- 사용자 리뷰
- 사용자가 웹사이트 프런트엔드에서 리스팅을 제출하고 수정 및/또는 삭제할 수 있는 리스팅 추가 양식.
물론, WordPress는 기본적으로 블로그와 무제한 페이지를 생성할 수 있는 옵션을 제공합니다.
이미 호스팅 서비스와 WordPress가 설치되어 있다고 가정합니다.
이 튜토리얼에서는 필라델피아 시를 위한 비즈니스 디렉토리를 만들겠습니다.
이 튜토리얼에서는 다음을 다룹니다:
테마 및 플러그인 설치.
1. Hello 테마 설치
먼저 테마를 설치해야 하며, 이 튜토리얼에서는 Elementor 스타터 테마인 Hello 테마를 설치합니다.
다음으로 이동하세요 외관 >> 테마
새로 추가를 선택하고, 설치, 및 활성화 Hello 테마를 선택하세요.
2. Elementor 설치
이제 페이지 빌더를 설치해야 합니다. 이 경우, 무료 버전의 Elementor 플러그인을 설치합니다.
다음으로 이동하세요 플러그인 >> 새로 추가.
Elementor를 검색하세요. 설치 후 활성화하세요.
설정 마법사의 모든 단계를 건너뛰어도 됩니다.
3. GeoDirectory 설치
마지막으로, 설치해야 합니다 GeoDirectory.
다음으로 이동하세요 플러그인 >> 새로 추가, GeoDirectory를 검색하세요. 플러그인을 설치하고 활성화하면 지금 단계에서의 플러그인 설치가 완료됩니다.
4. GeoDirectory 설치 마법사
GeoDirectory를 사용하려면 설치 마법사를 완료하여 Google Maps API 키를 구성하고 몇 가지 샘플 목록을 가져와야 합니다.
지도 시스템 선택 (Google Maps 또는 OpenStreetMap)
마법사의 첫 번째 단계에서 두 가지 지도 시스템 중 하나를 선택할 수 있습니다. Google Maps와 Open Street Maps(API 키가 필요하지 않음)입니다.
이 튜토리얼에서는 Google Maps를 선택합니다.
키 생성 버튼을 클릭하고 이 문서 의 단계를 따라 유효한 API 키를 생성하세요.
필수 단계는 다음과 같습니다:
- 새 프로젝트를 만들거나 기존 프로젝트를 선택합니다.
- 키를 활성화합니다.
- 키를 발급받습니다.
- 결제 계정을 활성화합니다.
- API 키를 제한합니다(내 웹사이트 URL에서만 사용할 수 있도록).
네 번째 항목에 대해: 이는 필수 요건입니다. 하지만 임계값인 월 $200를 초과하는 경우에만 요금이 부과됩니다.
이 무료 크레딧은 99%의 디렉토리에 충분히 활용할 수 있습니다.
기본 도시 설정
그 다음, 기본 위치를 설정합니다. 이는 디렉토리가 생성되는 도시입니다. 기본 도시는 변경하지 않고 그대로 두겠습니다.
GeoDirectory는 Philadelphia를 기본 도시로 사용합니다.
필요한 위치를 자유롭게 사용할 수 있습니다.
두 개 이상의 도시에 목록을 추가해야 하는 경우 Location Manager 애드온이 필요합니다.
추가 기능 설정
이 단계에서는 UsersWP, 저희의 사용자 등록 플러그인 설치하겠습니다. 이 플러그인은 사용자가 웹사이트에 회원가입하고 로그인할 수 있도록 해줍니다.
이 기능은 사용자가 리스팅을 추가하고 수정할 수 있도록 하는 데 필요합니다. 또한 사용자가 자신의 리스팅, 리뷰 및 기타 관련 정보를 확인할 수 있는 사용자 프로필을 생성합니다.
또한 설치할 플러그인은 Ninja Forms 입니다. 이를 통해 모든 리스팅에 리스팅 소유자에게 직접 이메일을 발송하는 문의 양식이 추가됩니다.
AyeCode Connect는 이 튜토리얼에서 필수 사항이 아닙니다. 주로 GeoDirectory 프리미엄 애드온을 추가하고 WordPress 대시보드에서 직접 설치하려는 경우에 필요합니다.
더미 데이터 추가
설치 마법사의 마지막 단계는 샘플 리스팅을 추가하는 것입니다. 이 과정에서 나중에 필요에 따라 편집할 수 있는 리스팅 카테고리도 함께 추가됩니다.
사이드바 위젯과 메뉴 항목은 지금 추가하지 않으며, 이는 나중에 진행할 예정입니다.
Elementor 디렉토리 웹사이트 디자인
테마, 플러그인 설치와 GeoDirectory의 기본 설정을 완료했으니, 이제 Elementor로 디렉토리 웹사이트 디자인을 시작할 수 있습니다.
1. Elementor 디렉토리 웹사이트 홈 페이지 디자인
새 페이지를 만들거나 WordPress가 기본으로 생성하는 샘플 페이지(Sample Page)를 활용할 수 있습니다.
페이지로 이동하여 샘플 페이지를 편집하고 이름을 홈으로 변경하거나, 새 페이지를 만드세요.
다음으로 외관 > 사용자 정의 > 홈페이지 설정 을 선택하고 홈을 선택하세요.
게시물 페이지는 나중에 선택하겠습니다.
로고
무엇보다 먼저, 웹사이트에 사용할 로고가 필요합니다.
로고의 첫 번째 버전을 제작하기 위해 디자이너에게 비용을 지불할 필요는 없습니다.
새 사업을 시작할 때 저지를 수 있는 가장 큰 실수 중 하나는 제품 시장 적합성을 검증하기도 전에 너무 많은 시간과 돈을 투자하는 것입니다.
Canva와 같은 앱을 사용하면 단 5분 만에 로고를 디자인할 수 있으며, 놀라울 정도로 저렴하고 효과적입니다.
MVP(최소 기능 제품)의 경우, Canva로 디자인한 로고로도 충분합니다.
선택할 수 있는 로고 템플릿이 다양하며, 처음 만든 로고가 원하는 만큼 완벽하거나 독창적이지 않아도 괜찮습니다.
프로젝트가 성장하면 언제든지 개선하거나 나중에 대대적인 변경을 할 수 있습니다.
평범한 로고가 프로젝트 실패의 주된 원인이 되는 경우는 없습니다.
로고 디자인을 완료한 후 외관 > 사용자 정의 > 사이트 아이덴티티, 로고 선택을 클릭하고 PNG 파일을 업로드하세요. 자르기를 건너뛰거나 (또는 필요에 따라 이미지를 자르세요) 게시를 클릭하세요.
내비게이션 메뉴
로고를 만들고 추가한 후 외관 > 메뉴, 에서 메뉴를 만드세요.
필요한 링크를 추가하고 (왼쪽 열에서 오른쪽 열로) 저장하세요. 그리고 메뉴 설정 > 표시 위치 섹션, "헤더" 옵션을 체크하실 수 있습니다.
원하신다면 같은 메뉴를 푸터에도 표시하거나, 푸터에 표시할 별도의 메뉴를 만들 수 있습니다.
이 예제에서는 헤더 탐색 메뉴만 사용합니다.
저희는 7개의 링크를 추가했습니다:
- 홈
- 소개
- 블로그
- 장소
- 프로필
- 로그인
- 로그아웃
The Login link (from UsersWP Endpoints) 는 로그아웃한 사용자에게만 표시되며, 로그아웃 및 프로필 링크는 로그인한 사용자에게만 표시됩니다.
콘텐츠
이제 홈 페이지 디자인을 시작할 수 있습니다. 먼저, 헤더 아래에 히어로 이미지 를 추가해야 합니다.
이 작업을 수행하려면 페이지 > 홈으로 이동하여 Elementor로 편집을 클릭하세요.
샘플 페이지를 사용했다면, 텍스트를 마우스 오른쪽 버튼으로 클릭하고 삭제를 선택하여 텍스트 편집기를 삭제하세요. 새 페이지를 만들었다면 섹션을 추가하세요. (페이지 빌더에서 다음과 같이 표시된 곳의 플러스 버튼을 클릭하세요 여기에 위젯을 드래그하세요.)
이제 하나의 열로 구성된 섹션 하나만 있는 빈 페이지가 생성되었습니다.
섹션 편집 아이콘(섹션의 하늘색 중앙 아이콘)을 클릭하고 콘텐츠 너비 옵션에서 전체 너비를 선택하세요.
다음으로, 상단 탭에서 스타일을 클릭하세요. 배경 유형으로 > 클래식을 선택하세요.
히어로 섹션에는 Pexels.com 에서 제공하는 필라델피아의 무료 이미지를 사용할 것입니다. (감사합니다, @Kelly)
이미지를 업로드하고 위치 옵션을 사용하여 배경의 모양을 조정하세요. 이 경우
현재는 이미지의 일부분만 보이지만, 다음 단계를 통해 원하는 대로 표시할 수 있습니다.
이미지에 오버레이가 필요합니다. 그렇지 않으면 위에 올라가는 텍스트의 대비가 충분하지 않아 읽기 어려울 수 있습니다.
배경 오버레이를 클릭하고 배경 유형: 클래식, 색상: 검정(#000000), 불투명도: 0.5를 선택하세요 (이미 설정되어 있을 수 있습니다 해당 방식으로).
히어로 이미지를 더 어둡게 만들었으니 이제 텍스트를 추가할 수 있습니다.
이미지 중앙을 클릭하세요 (회색 플러스 버튼이 희미하게 보입니다). 그러면 왼쪽 Elementor 패널에 위젯이 표시됩니다.
히어로 이미지 안으로 제목 요소를 드래그 앤 드롭하세요.
이제 홈페이지 히어로 이미지에 제목을 붙일 시간입니다.
이 튜토리얼에서는 "My Philadelphia Directory"와 같이 간단한 내용을 사용할 것입니다. 원하는 슬로건을 자유롭게 입력하세요. 정렬 옵션을 활용하여 텍스트를 가운데 정렬하는 것도 잊지 마세요.
스타일 탭에서 텍스트 색상을 흰색(#FFFFFF)으로 변경하여 대비와 가독성을 높이세요.
다음으로, 히어로 이미지가 의도한 대로 표시되도록 패딩을 추가합니다. Elementor 패널 왼쪽의 고급 탭을 선택하고 패딩 값의 연결을 해제합니다 (값 끝의 링크 아이콘을 클릭하여 수행합니다).
상단 값에 250을, 하단 값에 50을 추가합니다. 오른쪽과 왼쪽 값은 모두 0으로 유지합니다.
제목 아래에 GeoDirectory 검색 위젯을 추가하여 홈페이지의 히어로 이미지를 완성할 수 있습니다.
단, 먼저 검색 폼의 너비를 조정하기 위해 내부 섹션을 추가해야 합니다.
Elementor 왼쪽 패널에서 그리드 아이콘(Elementor 로고 오른쪽)을 클릭하여 요소 목록으로 돌아갑니다.
제목 아래에 내부 섹션 요소를 드래그 앤 드롭합니다.
내부 섹션은 기본적으로 두 개의 열로 구성됩니다. 하나를 삭제해야 합니다.
그 중 하나를 마우스 오른쪽 버튼으로 클릭하여 삭제합니다. 그런 다음 나머지 하나를 클릭하고 너비를 700으로 설정합니다.
이제 내부 섹션에 GD > 검색 요소를 추가할 수 있습니다.
Elementor 왼쪽 패널에서 그리드 아이콘(Elementor 로고 오른쪽)을 다시 클릭하여 요소 목록으로 돌아갑니다.
검색 GD > Search 을(를) 드래그 앤 드롭하여 내부 섹션 안에 배치하세요.
마지막으로 고급 탭을 클릭하고 패딩 값의 연결을 해제한 다음, 하단 패딩 옵션에 200을 추가하세요. 이렇게 하면 히어로 이미지의 하단 부분이 표시됩니다.
이제 히어로 이미지 아래에 몇 가지 리스팅 위젯과 함께 블로그 게시물 몇 개를 보여주는 위젯을 추가할 수 있습니다.
예를 들어 네 개의 리스팅이 포함된 그리드를 추가하려면, 히어로 이미지 아래에 새 섹션을 추가하고 박스형 콘텐츠 너비로 설정한 다음 너비를 1140으로 지정해야 합니다.
이 섹션 안에 먼저 최근 리스팅을 위한 제목을 추가하고, 텍스트를 Recent Listings (또는 적절하다고 생각하는 텍스트)로 변경하고, 텍스트를 가운데 정렬하고, 색상을 진한 회색으로 변경한 다음 (#333333), 고급 탭에서 상단 여백을 50px 추가하세요.
다음으로, "GD > Listings" 위젯을 추가하세요. 변경해야 할 설정은 다음과 같습니다:
필터 > 표시할 게시물 수 = 4
정렬 > 정렬 기준 = 최신순
디자인 > 레이아웃 = 그리드 보기 (4열)
래퍼 스타일 > 상단 여백 = 5
이제 블로그 게시물을 추가할 차례입니다.
저는 이 플러그인을 사용하여 더미 게시물 (이미지 포함)을생성했습니다. 저는 the Post Grid Elementor Add-on 을(를) 사용하여 홈페이지에 표시했습니다.
리스팅 아래에 최근 게시물을 위한 제목을 추가하고, 텍스트를 Recent Posts (또는 적절하다고 생각하는 텍스트)로 변경하고, 텍스트를 가운데 정렬하고, 색상을 진한 회색으로 변경한 다음 (#333333), 고급 탭에서 상단 여백을 50px 추가하세요.
다음으로, Post Grid(WPC Element 제공)를 추가하고 다음 설정을 조정하세요:
Style 탭 > Title > Typography에서 글꼴 크기를 1.25rem으로 변경하고, 색상을 리스팅 제목 색상에 맞게 설정하세요 (#1E73BE).
마지막으로, Advanced 탭에서 상단 여백을 50px로 추가하세요.
이제 완성되었습니다. 홈페이지가 완성되었습니다. 이후에 원하는 내용을 추가할 수 있지만, 이 튜토리얼에는 이것으로 충분합니다.
2. Elementor 디렉토리 웹사이트 리스팅 및 검색 페이지 디자인
이제 모든 디렉토리에 필수적인 두 개의 페이지를 디자인해야 합니다.
리스팅 페이지(일반 아카이브, 카테고리, 태그)와 검색 결과 페이지입니다.
GeoDirectory는 기본적으로 페이지를 자동 생성하지만, 이 튜토리얼에서는 기본 페이지를 삭제하고 직접 만들어 보겠습니다.
두 개의 동일한 페이지를 만들 것입니다. 두 개의 넓은 열로 구성된 레이아웃을 사용하겠습니다.
왼쪽에는 리스팅이, 오른쪽에는 리스팅의 정확한 위치를 보여주는 고정 지도가 표시됩니다.
이 작업은 매우 간단합니다.
리스팅 페이지
Pages > Add new로 이동하여 제목을 Listings로 입력하세요. 새 페이지를 게시하세요.
페이지를 게시한 후, Edit with Elementor 버튼을 클릭하세요.
화면 왼쪽 하단의 톱니바퀴 아이콘을 클릭하고, 제목을 숨기고, 페이지 레이아웃을 Elementor Full Width로 설정한 다음 업데이트를 클릭하세요.
섹션 추가 (페이지 빌더에서 '여기에 위젯을 드래그하세요'라고 표시된 부분의 플러스 버튼을 클릭하세요.)
레이아웃 > 콘텐츠 너비에서 전체 너비로 설정하세요. 그런 다음 새 섹션 안의 플러스 버튼을 클릭하고, GD > Simple Archive를 검색한 후 위젯을 새로 만든 섹션 안으로 드래그 앤 드롭하세요.
다음 설정을 조정하세요.
기본 출력 > 검색 표시 체크
지도 > 고정 지도 활성화
업데이트를 클릭하세요. 목록 페이지 설정이 완료되었습니다.
검색 페이지도 동일한 과정을 반복합니다.
검색 페이지
페이지 > 새로 추가 > 제목 추가 = S. 새 페이지를 게시하세요.
페이지를 게시한 후, Edit with Elementor 버튼을 클릭하세요.
화면 왼쪽 하단의 톱니바퀴 아이콘을 클릭하고, 제목을 숨기고, 페이지 레이아웃을 Elementor Full Width로 설정한 다음 업데이트를 클릭하세요.
섹션 추가 (페이지 빌더에서 '여기에 위젯을 드래그하세요'라고 표시된 부분의 플러스 버튼을 클릭하세요.)
레이아웃 > 콘텐츠 너비에서 전체 너비로 설정하세요. 그런 다음 새 섹션 안의 플러스 버튼을 클릭하고, GD > Simple Archive를 검색한 후 위젯을 새로 만든 섹션 안으로 드래그 앤 드롭하세요.
다음 설정을 조정하세요:
- 기본 출력 > 검색 표시 체크
- 지도 > 고정 지도 활성화
업데이트를 클릭하세요. 검색 페이지 설정이 완료되었습니다.
GeoDirectory 설정을 변경하여 플러그인이 기본 페이지 대신 이 두 페이지를 사용하도록 지정해야 합니다.
WordPress 대시보드에서 GeoDirectory > 설정 > 페이지를 클릭하세요.
'Listings'라는 제목의 페이지를 아카이브 페이지로, 'S'라는 제목의 페이지를 검색 페이지로 지정하세요.
새로운 목록 페이지와 검색 페이지를 모두 완성했으며, GeoDirectory는 이 새 템플릿을 사용하는 방법을 알고 있습니다.
3. Elementor 디렉토리 웹사이트 단일 리스팅 페이지 디자인
디렉토리를 완성하려면 템플릿을 하나 더 디자인해야 합니다. 바로 GD Details 페이지입니다. 이 템플릿은 개별 리스팅을 표시하는 데 사용됩니다.
GeoDirectory가 자동으로 하나를 생성하지만, 새 페이지를 만들기 위해 이를 대체할 것입니다.
라고 이름을 붙였습니다. 임시 저장으로 저장하세요.
GeoDirectory 설정을 변경하여 플러그인이 기본 GD Details 페이지 대신 이 페이지를 사용하도록 지정해야 합니다.
WordPress 대시보드에서 GeoDirectory > 설정 > 페이지를 클릭하세요.
이라는 제목의 페이지를 세부 정보 페이지로 지정하세요.
이제 페이지로 돌아가서 열고, Elementor로 편집 버튼을 클릭합니다.
이전 페이지에서 했던 것처럼, 화면 왼쪽 하단의 기어 아이콘을 클릭하고, 제목을 숨기고, 페이지 레이아웃을 Elementor Full Width로 설정한 후 업데이트를 클릭합니다.
섹션 추가 (페이지 빌더에서 '여기에 위젯을 드래그하세요'라고 표시된 부분의 플러스 버튼을 클릭하세요.)
레이아웃 > 콘텐츠 너비에서 Full Width를 설정합니다. 이제 새 섹션 안의 더하기 버튼을 클릭하고 GD > Post Images를 검색한 후, 새로 생성된 섹션 안에 위젯을 드래그 앤 드롭합니다.
다음 설정을 조정하세요:
- 일반 > 표시 제한: 3
- 디자인 > 출력 유형: Slider
영역으로 드래그합니다.
다음 설정을 조정하세요:
- 일반 > 출력 유형: H1
- 디자인 > 글꼴 크기: H1
이제 리스팅 콘텐츠를 추가해야 합니다. 새 섹션을 추가합니다 (페이지 빌더에서 '여기에 위젯을 드래그하세요'라고 표시된 부분의 플러스 버튼을 클릭하세요.)
66/33 두 열 레이아웃을 선택합니다 (왼쪽 열이 오른쪽 열의 두 배 크기)
GD > Single Tabs 요소를 왼쪽 열로 드래그합니다. 활성화해야 할 유일한 옵션은 Content > Show as a list입니다.
각 리스팅의 설명, 사진 갤러리, 지도, 리뷰를 목록 형태로 출력합니다.
Show as List 옵션을 활성화하지 않으면, 앞서 언급한 콘텐츠를 각각 표시하는 4개의 탭 그룹이 출력됩니다.
오른쪽 열에 GD > Output location 요소를 추가합니다.
이 요소는 태그, 카테고리, 주소, 연락처 정보, 운영 시간 등 리스팅에 관한 여러 정보를 하나로 묶어 표시합니다.
이러한 세부 정보는 커스텀 디자인에 개별적으로 사용할 수 있는 고유 요소로도 제공됩니다.
예를 들어, GD > Post Address 요소를 사용하면 페이지 어디에서든 주소를 표시할 수 있습니다.
모든 콘텐츠에 대해서는 GD > Post Meta 요소를 사용할 수 있습니다. KEY 값을 적절히 설정하면 모든 커스텀 필드를 이 요소를 통해 출력할 수 있습니다.
또는 다음 요소를 사용할 수도 있습니다. GD > Badge 를 사용하면 거의 모든 리스팅 정보를 버튼 형태로 표시할 수 있습니다.
단일 디렉토리 리스팅 페이지를 완성하기 위해, 테마에 맞게 디자인을 조정하고 원하는 스타일을 구현하는 커스텀 CSS를 추가하겠습니다.
저는 모든 CSS를 한 곳에 모아두는 것을 선호하며, 주석과 함께 Appearance >> Customizer >> Additional CSS에 추가하는 방식을 즐겨 사용합니다.
/* Reduce list heading font size */ h2.gd-tab-list-title.h3 { font-size: 1.25rem; } /* Add white space between headings and content */ div#geodir-tab-content-post_content, div#geodir-tab-content-post_images, div#geodir-tab-content-post_map, div#geodir-tab-content-reviews { margin-top: 30px ; }
적용 후 단일 리스팅 페이지의 모습은 다음과 같습니다.
바로 이것입니다. 저희는 Hello 테마, 무료 버전의 Elementor, 그리고 GeoDirectory로 Elementor 디렉토리 웹사이트를 구축했습니다.
Elementor 디렉토리 웹사이트에 프리미엄 기능 추가하기
원하신다면, 이제 디렉토리에 다음과 같은 프리미엄 기능을 추가할 수 있습니다:
- 유료 리스팅: GeoDirectory Listing Price Manager 애드온을 사용하면 리스팅 제출에 대한 가격을 설정할 수 있습니다. 각 가격 등급별로 다음과 같은 기능을 활성화/비활성화할 수 있습니다: 무료 리스팅의 사진 수 제한 및 유료 리스팅의 사진 수 확대 허용, 태그 및 카테고리 수 조정, 특정 커스텀 필드 활성화 또는 비활성화, 더 길거나 짧은 설명 제출.
- Claim Listings: 이것은 디렉토리의 핵심 기능으로, 관리자가 데이터베이스를 생성하고 비즈니스 소유자를 초대하여 무료 리스팅을 관리할 수 있게 합니다. 리스팅 소유권을 이전하기 위해 유료 리스팅으로의 업그레이드를 요구하는 과정이 클레임 리스팅 절차에 포함될 수 있습니다.
- 광고: 광고 판매 는 또 다른 형태의 온라인 디렉토리 수익화. 트래픽이 많다면 광고 네트워크를 활용할 수 있습니다. 그렇지 않은 경우, 광고를 직접 판매하여 비즈니스가 웹사이트의 특정 영역에 배너를 추가하거나, 예를 들어 자연 검색 결과 상단에 리스팅을 광고로 노출할 수 있도록 허용할 수 있습니다.
이것은 세 가지 예시에 불과합니다. 하지만 디렉토리 웹사이트는 온라인으로 수익을 창출하는 다양한 방법을 제공합니다.
수공예품을 위한 글로벌 마켓플레이스를 만들거나, 이벤트 티켓을 판매하거나, 할인 쿠폰을 제공할 수 있습니다.
저희 회원 커뮤니티에 참여하여 아이디어를 실현해 보세요: 디렉토리 웹사이트 만들기.
가능성은 무한합니다.
Elementor PRO로 디렉토리 웹사이트 구축하기
앞서 언급했듯이, Elementor PRO를 사용하면 훨씬 더 정교한 디자인을 구현할 수 있습니다. Elementor PRO와 GeoDirectory 통합의 전체 범위를 확인하려면 이 블로그 게시물을 참고하시기 바랍니다:
Elementor Pro로 GeoDirectory 템플릿 디자인 커스터마이징하기
Elementor Pro 디렉토리 웹사이트 템플릿
Elementor PRO 사용자를 위해, 더미 데이터가 포함된 완전히 작동하는 디렉토리 웹사이트를 제공하는 원클릭 설치 템플릿을 여러 가지 제공합니다.
이 템플릿들은 무료이며 1분 이내에 설치할 수 있습니다.
다음으로, 더미 콘텐츠를 실제 콘텐츠로 편집하고, 로고 변경, 디렉토리 웹사이트 색상 팔레트 및 타이포그래피 조정을 통해 템플릿을 귀하의 브랜딩에 맞게 수정하세요.
다음은 GeoDirectory와 Elementor PRO로 구현할 수 있는 몇 가지 예시입니다.
원클릭 설치 데모 ( AyeCode connect plugin이용), 참고: 튜토리얼용 블로그 게시물
Elementor 대신 Gutenberg로 디렉토리 웹사이트를 만드는 튜토리얼에 관심이 있으신가요? 다음 게시물을 확인해 보세요: Astra 테마로 디렉토리 웹사이트를 만드는 방법.
GeoDirectory의 Elementor PRO 연동 기능을 다른 WordPress 디렉토리 플러그인과 비교하는 것은 플러그인 선택 시 매우 유용한 작업 중 하나입니다. 네이티브 동적 데이터 연동 문제는 다음에서 다루었습니다: Directorist 비교 및 HivePress 비교, 특히 HivePress는 비교 게시물에 문서화된 것처럼 2022년부터 Elementor 지원이 확정된 기능 요청으로 남아 있습니다.
뉴스레터 - 최신 소식을 받아보세요!
최신 뉴스, 팁, 독점 콘텐츠를 받은 편지함으로 직접 받아보세요.
