Divi로 디렉토리 웹사이트 구축하기

create directory webiste divi

Divi 테마로 디렉토리 웹사이트를 만드는 방법?

Divi WordPress 테마를 사용하여 디렉토리 웹사이트를 구축하는 가장 쉬운 방법은 다음 3단계를 따르는 것입니다:

  1. Divi 테마 설치
  2. GeoDirectory 설치 및 설정
  3. Divi 테마를 사용하여 디렉토리 웹사이트 디자인

비즈니스 디렉토리를 단계별로 만드는 방법에 대한 자세한 내용을 설명하기 전에, 2023년 9월 11일에 Divi 테마 개발사인 Elegantthemes 공식 블로그에 게재된 글을 하나 인용하고자 합니다.

GeoDirectory는 Divi 테마로 비즈니스 디렉토리 웹사이트를 만들기 위한 최고의 WordPress 플러그인일까요?

Elegant Themes가 준비한 순위에서 GeoDirectory 플러그인이 1위를 차지했습니다.

Elegant Themes 블로그에는

GeoDirectory 플러그인이 순위에서 1위를 차지했습니다. 본문에서 저자는 왜 GeoDirectory가 디렉토리 웹사이트를 만들기 위한 최고의 WordPress 플러그인인지.

이 글을 꼭 읽어보시길 권장합니다. 아래는 해당 글의 FAQ 섹션에서 발췌한 내용입니다.

WordPress에서 가장 좋은 디렉토리 플러그인은 무엇인가요?
GeoDirectory는 최고의 WordPress 디렉토리 플러그인입니다. 커스터마이징 가능한 리스팅, 고급 검색, 사용자 리뷰, Google Maps 연동, 수익화 옵션, 그리고 뛰어난 테마/플러그인 호환성을 제공합니다. GeoDirectory를 사용하면 기능이 풍부한 디렉토리 웹사이트를 손쉽게 만들 수 있습니다.

기사 FAQ 섹션에서 발췌: 7 Best WordPress Directory Plugins in 2023 (Ranked).

2013년에 제가 처음 만든 WordPress 사이트는 전용 플러그인 없이 구축한 비즈니스 디렉토리였습니다.

WP GeoDirectory의 창시자인 Paolo Tajani와 Stiofan O'Connor가 Templatic의

그들은 성능을 개선하고, 이후 10년여 전에 GeoTheme을 선보였습니다.

이후 진화하는 WordPress 생태계에 적응하고 자신들의 경험을 바탕으로, 그들은 테마 개발에서 방향을 전환했습니다.

이 기반을 바탕으로, 그들은 거의 모든 종류의 디렉토리 사이트 제작을 가능하게 하는 GeoDirectory 플러그인을 개발했습니다.

저는 디렉토리 웹사이트 제작을 지원하는 WordPress 플러그인과 테마 대부분을 테스트해 보았습니다.

앞서 언급한 경험과 저의 11년 경력 모두, WP GeoDirectory가 이 목적에 가장 적합한 플러그인임을 확인해 줍니다.

Divi 테마와 GeoDirectory 플러그인을 사용하여 디렉토리 웹사이트를 만드는 방법에 대한 단계별 가이드

GeoDirectory와 Divi 테마를 활용하여 디렉토리 웹사이트를 구축하는 방법을 자세히 살펴보겠습니다.

이 튜토리얼에서는 다음을 다룹니다:

목차

테마 및 플러그인 설치.

1. Divi 테마 설치

먼저 Divi 테마를 설치해야 합니다

Divi 테마 설치


외모 >> 테마 >>로 이동하세요

새로 추가, 테마 업로드, 설치, Divi 테마 활성화를 선택하세요.

2. GeoDirectory 설치

이제 GeoDirectory 플러그인을 설치해야 합니다.

다음으로 이동하세요 플러그인 >> 새로 추가, GeoDirectory를 검색하세요. 설치 후 활성화해 주세요.

GeoDirectory 플러그인 설치 및 활성화

완료되었습니다. Divi 테마와 GeoDirectory 플러그인이 활성화되면 다음 단계로 넘어갈 수 있습니다.

3. GeoDirectory 설치 마법사

Divi Builder의 간편함을 높이 평가하신다면, GeoDirectory 플러그인에 내장된 설정 마법사도 분명 마음에 드실 것입니다.

지도 시스템 선택 (Google Maps 또는 OpenStreetMap)

이제 설정 마법사를 완료하여 구성해야 합니다. 마법사의 첫 번째 단계에서 두 가지 지도 시스템 중 하나를 선택할 수 있습니다. Google Maps와 Open Street Maps(API 키가 필요하지 않습니다)입니다.

GeoDirectory 설정 마법사 1단계

이 튜토리얼에서는 OpenStreetMaps를 선택합니다.

OpenStreetMap을 선택하고 계속을 클릭하세요.

Google Maps를 선택하려는 경우 다음 추가 단계를 따르세요.

키 생성 버튼을 클릭하고 이 문서 의 단계를 따라 유효한 API 키를 생성하세요.

필수 단계는 다음과 같습니다:

  1. 키를 활성화합니다.
  2. 새 프로젝트를 만들거나 기존 프로젝트를 선택합니다.
  3. 키를 발급받습니다.
  4. 결제 계정을 활성화합니다.
  5. API 키를 제한합니다(내 웹사이트 URL에서만 사용할 수 있도록).

네 번째 항목에 대해: 이는 필수 요건입니다. 하지만 임계값인 월 $200를 초과하는 경우에만 요금이 부과됩니다.

이 무료 크레딧은 99%의 디렉토리에 충분히 활용할 수 있습니다.

기본 도시 설정

GeoDirectory 설정 마법사 – 기본 위치 선택

그런 다음 기본 위치를 설정합니다. 이는 디렉토리가 생성되는 도시입니다. GeoDirectory는 Philadelphia를 기본 도시로 사용합니다.

이 튜토리얼에서 선택한 니치를 고려하여, 기본 도시를 크로아티아의 Split으로 설정하겠습니다.

지도 마커를 드래그하여 원하는 위치를 설정하거나, "고급 설정 표시"를 클릭하여 고급 설정을 사용할 수 있습니다.

두 개 이상의 도시에 리스팅을 추가해야 하는 경우에는 Location Manager 애드온.

추가 기능 설정

이 단계에서는 UsersWP를 설치합니다. UsersWP는 사용자 로그인 플러그인으로 사용자가 웹사이트에 회원가입하고 로그인할 수 있게 해줍니다.

이 플러그인은 사용자가 리스팅을 추가하고 수정할 수 있도록 하는 데 필요합니다. 또한 사용자가 자신의 리스팅, 리뷰 등을 확인할 수 있는 사용자 프로필을 생성합니다.

또한 설치할 플러그인은 Ninja Forms 입니다. 이를 통해 모든 리스팅에 리스팅 소유자에게 직접 이메일을 발송하는 문의 양식이 추가됩니다.

AyeCode Connect는 이 튜토리얼에서 필수 사항이 아닙니다. 주로 GeoDirectory 프리미엄 애드온을 추가하고 WordPress 대시보드에서 직접 설치하려는 경우에 필요합니다.

더미 데이터 추가

설치 마법사 더미 데이터

설치 마법사를 완료하기 위한 마지막 단계는 더미 리스팅을 추가하는 것입니다. 이 과정에서 나중에 필요에 따라 수정할 수 있는 리스팅 카테고리도 함께 추가됩니다.

사이드바 위젯과 메뉴 항목은 지금 추가하지 않으며, 이는 나중에 진행할 예정입니다.

Divi 디렉토리 웹사이트 디자인

divi directory
Divi Directory 웹사이트

테마와 플러그인을 설치하고 GeoDirectory의 기본 설정을 완료했으니, 이제 Divi 테마로 디렉토리 웹사이트 디자인을 시작할 수 있습니다.

1. Divi 디렉토리 웹사이트 홈 페이지 디자인

새 페이지를 만들거나 WordPress가 기본으로 생성하는 샘플 페이지(Sample Page)를 활용할 수 있습니다.

페이지(Pages)로 이동하여 샘플 페이지를 편집하고 이름을 Home으로 변경하거나, 이를 위한 새 페이지를 만드세요.

다음으로 설정(Settings) > 읽기(Reading) > 홈페이지 설정 을 선택하고 홈을 선택하세요.

게시물 페이지는 나중에 선택하겠습니다.

홈페이지 Divi 비즈니스 디렉토리 설정

초기 로고를 위해 디자이너에게 비용을 지출하지 마세요.

시장 적합성을 평가하기 전에 많은 투자를 하는 실수를 범하는 경우가 많습니다.

빠르고 합리적인 가격으로 고품질 디자인을 원한다면 Canva 같은 앱을 활용하세요.

Canva.com을 사용하여 로고 초안을 만드세요.

MVP의 경우, Canva로 디자인한 로고로도 충분합니다.

처음부터 완벽할 필요는 없으며, 프로젝트가 성공하면 로고를 개선할 수 있습니다.

평범한 로고가 프로젝트 실패의 원인이 되지는 않는다는 점을 기억하세요.

로고 디자인을 완료한 후 Divi > Theme Options로 이동하여 업로드를 클릭하고 Canva.com에서 만든 로고를 선택하세요.

자르기를 건너뛰거나 (또는 필요에 따라 이미지를 자르세요) 화면 왼쪽 상단의 변경 사항 저장을 클릭하세요.

canva.com에서 만든 로고를 설정하세요.

내비게이션 메뉴

로고를 만들고 추가한 후 외관 > 메뉴, 에서 메뉴를 만드세요.

Divi Directory 탐색 메뉴

필요한 링크를 추가하고 (왼쪽 열에서 오른쪽 열로) 저장하세요. 그리고 메뉴 설정 > 표시 위치 섹션에서 "기본 메뉴" 옵션을 선택할 수 있습니다.

이 예제에서는 헤더 탐색 메뉴만 사용합니다.

총 12개의 링크를 추가했습니다:

  1. 홈
  2. 소개
  3. 블로그
  4. 계정
  5. 프로필 ( 로그인한 사용자에게 표시)
  6. 비밀번호 변경 ( 로그인한 사용자에게 표시)
  7. 로그아웃 ( 로그인한 사용자에게 표시.)
  8. 회원가입 ( 로그인하지 않음)
  9. 로그인 (로그인하지 않은 사용자에게 표시)
  10. 비밀번호를 잊으셨나요? (표시 대상: 로그인하지 않음)
  11. 검색 페이지
  12. 리스팅 추가

UserWP 엔드포인트의 링크는 동적입니다. 위의 괄호를 참조하세요.

로그인한 사용자에게 표시되는 메뉴
로그인하지 않은 사용자에게 표시되는 메뉴

콘텐츠

Divi 테마는 330개 이상의 완성된 레이아웃 팩을 제공합니다.

이 튜토리얼에서는 Divi 모듈의 스타일링이라는 번거로운 작업 없이도 매력적인 비즈니스 디렉토리를 만들 수 있는 바로 사용 가능한 레이아웃을 선택하겠습니다.

이 튜토리얼에서는 미리 만들어진 Charter Divi Layout Pack을 선택했습니다.

미리 만들어진 레이아웃 팩을 기반으로 Divi 비즈니스 디렉토리 만들기

홈페이지로 이동하여 '비주얼 빌더 활성화'를 클릭한 다음 '레이아웃 찾아보기'를 클릭하세요.

미리 만들어진 레이아웃 라이브러리에서 'Charter Boat Landing Page'를 선택하고 '이 레이아웃 사용'을 클릭하세요.

두 번째 텍스트 모듈 뒤에 코드 모듈을 추가하고 단축코드 추가를 클릭하세요.

Divi는 Gutenberg 블록 사용을 지원하지 않지만, GeoDirectory 플러그인 개발팀이 단축코드 생성기를 구현해 두었습니다.

덕분에 Divi 코드 모듈을 사용하여 동적 위젯을 손쉽게 추가할 수 있습니다.

따라서 단축코드 생성기 기능은 Divi에서 디렉토리 웹사이트를 만들 때 유용한 도구입니다.

검색 양식에 단축코드 추가하기

드롭다운 목록에서 "gd_search"(GD > Search)"를 선택하고 단축코드 복사를 클릭하세요.

복사된 숏코드가 클립보드에 있습니다. 복사된 코드를 코드 모듈에 붙여넣으세요. 그런 다음 체크 표시 아이콘을 클릭하세요.

텍스트 모듈 콘텐츠 및 h1 글꼴 크기 편집

첫 번째 텍스트 모듈의 콘텐츠를

콘텐츠 탭의 헤더 내용을 Yacht Delivery로 변경하세요. 디자인 탭에서 h1 헤더 글꼴 크기를 70px로 변경하고 체크 표시를 클릭하세요.

Remove the “Book a Trip” button module.

이제 히어로 섹션이 완성되었습니다.

다음 섹션에서는 미리 정의된 Divi 랜딩 페이지 템플릿을 사용하여 H2 헤더의 내용을

헤딩 아래의 텍스트 모듈을 삭제(금색 글꼴)하거나 내용을 직접 변경하세요. 저는 웹사이트 디자인을 더욱 흥미롭게 만들기 위해 Lorem Ipsum 단락을 그대로 두겠습니다.

사진과 텍스트가 있는 두 열 행을 삭제한 다음 코드 모듈이 포함된 새 행을 추가하세요. 추가할 때 검색 폼과 동일한 방식으로 'Add Shortcode'를 클릭하세요.

드롭다운 목록에서

아래와 같은 카테고리 컬럼 모양을 구현하기 위해 숏코드 생성기에서 변경한 옵션:

Filters 탭:
CPT당 최대 카테고리 표시 수: 3
표시: 빈 항목 숨기기
Card Design 탭:
디자인 유형: 이미지 배경
행 정렬: 가운데
카드 그림자: 크게
아이콘 / 이미지 탭:
표시: 카테고리 이미지 사용
이미지 크기: 크게

아래의 숏코드를 복사하여 코드 모듈에 붙여넣을 수도 있습니다.

생성된 숏코드:

[gd_categories post_type="0" hide_empty="1" max_level="1" max_count="3" max_count_child="all" sort_by="count" design_type="image" row_positioning="center" card_shadow="large" use_image="1" image_size="large" cat_text_color_custom="#000000" cat_font_size="0" badge_text_color_custom="#000000" badge_color="light" badge_font_size="0" title_tag="h4" mb="3"]
리스팅 카테고리 섹션

wp-admin -> places -> Place Categories에서 카테고리를 편집하여 카테고리에 이미지를 설정할 수 있습니다.

각 카테고리에는 기본 이미지를 설정하는 옵션이 있습니다.

또한 이 튜토리얼에서 선택한 틈새 시장에 맞게 카테고리 이름도 변경했습니다.

카테고리 기본 이미지
최신 리스팅 섹션

다음 섹션을 사용하여 최신 항목을 표시하겠습니다.

"Our boats" 제목을 "Latest Yacht providers"로 변경하세요. 제목 아래 행을 삭제하고 Divi 코드 모듈이 포함된 새 섹션을 추가하세요.

검색 양식 및 카테고리와 마찬가지로, 최신 리스팅을 표시할 숏코드를 생성해야 합니다.

최신 리스팅용 숏코드 생성

드롭다운 목록에서 "gd_listings "(GD > Listings)"을 선택하세요.

아래와 같은 모습을 구현하기 위해 숏코드 생성기에서 변경한 옵션:

Filters 탭:
표시할 게시물 수: 3
디자인 탭:
레이아웃: 그리드 보기 (3열)

아래의 숏코드를 복사하여 코드 모듈에 붙여넣을 수도 있습니다.

생성된 숏코드:[gd_listings post_type=

불필요한 섹션 제거

이 섹션은 필요하지 않으므로 삭제하세요.

다음 섹션은 CTA 섹션으로 사용됩니다. 텍스트를 "요트 배송 서비스를 제공하시나요?"로 변경하세요. 텍스트 모듈의 디자인 탭에서 h2 헤더의 크기를 60px로 변경하세요.

버튼 모듈 텍스트를 수정하여 리스팅 추가를 넣고 링크를 "/add-listing/places/"로 설정하세요.

다음 "FAQ" 섹션은 제거할 수 있지만, 프로젝트를 더 흥미롭게 만들기 위해 저는 제거하지 않겠습니다.

FAQ 섹션에는 비즈니스 디렉토리를 만들고 있는 틈새 시장과 관련된 콘텐츠를 채워 넣는 것을 권장합니다.

주제에 맞는 콘텐츠가 많을수록 검색 엔진에서 웹사이트 최적화에 유리합니다.

다음 섹션도 마찬가지로, 이 가이드에서는 제거하겠지만 검색 엔진 최적화에 활용할 수 있습니다.

더 나은 홈페이지 디자인을 위해 리뷰 섹션은 제거하지 않겠습니다. 원하시는 대로 하셔도 됩니다.

Divi 디렉토리 웹사이트의 홈페이지가 완성되었습니다. 이제 사이트의 글로벌 푸터를 만들어 보겠습니다.

이 섹션을 글로벌 푸터로 사용하겠습니다

섹션을 라이브러리에 저장 아이콘을 클릭하고, 섹션 이름 필드에 "global-footer"를 입력한 후 라이브러리에 저장을 클릭하세요. 마지막으로, 화면 오른쪽 하단의 저장 버튼으로 홈페이지 레이아웃을 저장하세요.

Divi 라이브러리에 저장한 섹션을 삭제하고 프로젝트를 다시 저장하세요.

Divi 글로벌 푸터 만들기

WordPress 대시보드로 이동한 후 Divi > Theme Builder를 클릭하고, 글로벌 푸터 추가를 클릭한 다음 글로벌 푸터 빌드를 선택하세요.

새 섹션을 삽입하고, 라이브러리에서 추가를 클릭한 후 이전에 만든 섹션을 선택하고 이 섹션 사용을 클릭하세요.

글로벌 푸터 링크 편집

글로벌 푸터 섹션은 사진 모듈, 텍스트 모듈 4개, 소셜 아이콘 모듈로 구성되어 있습니다.

텍스트 모듈의 콘텐츠와 링크를 변경하세요. 저는 텍스트 모듈을 활용해 비즈니스 디렉토리의 카테고리를 웹사이트에 다시 표시하여 탐색을 더 쉽게 만들 것입니다.

소셜 미디어 팔로우 모듈에 적절한 링크를 입력하세요.

빈 섹션을 삭제하고 글로벌 푸터를 저장하세요

빈 섹션을 삭제하고 글로벌 푸터를 저장한 후, 화면 오른쪽 상단의 닫기 버튼을 클릭하세요. 

매우 중요: Divi 테마 빌더로 돌아가면 반드시 변경사항 저장 버튼을 클릭하세요.

디렉토리 웹사이트의 홈 페이지와 글로벌 푸터가 완성되었습니다.

Divi 디렉토리 웹사이트 목록 및 검색 페이지 디자인

이제 모든 디렉토리에 필수적인 두 개의 페이지를 디자인해야 합니다.

리스팅 페이지(일반 아카이브, 카테고리, 태그)와 검색 결과 페이지입니다.

GeoDirectory는 기본적으로 이 페이지들을 생성하지만, 이 튜토리얼에서는 기본 페이지에 소폭의 변경을 가할 것입니다.

지도와 동적 제목이 있는 텍스트 모듈을 추가해야 합니다.

Divi로 GD Archive 편집하기

WordPress 대시보드의 '모든 페이지' 탭으로 이동하여 'GD Archive' 페이지를 찾고, 'Divi로 편집'을 클릭한 후 기존 콘텐츠를 편집하세요.

텍스트 모듈을 삭제하고 코드 모듈 두 개를 추가하세요.

왼쪽에는 지도 숏코드, 오른쪽에는 리스팅 숏코드를 배치하세요.

이제 카테고리나 최근 리스팅의 숏코드를 생성할 때와 동일한 방식으로 숏코드 생성기를 사용하세요.

드롭다운 목록에서 다음 숏코드를 순서대로 선택하여 복사하고 붙여넣으세요:

GD > Map

GD > Notifications

GD > Search

GD > Loop Action

GD > Loop

GD > Loop paging

다음 숏코드를 코드 모듈에 직접 붙여넣을 수도 있습니다.

첫 번째 코드 모듈에는 지도를 담당하는 숏코드를 추가해야 합니다:

[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"]

두 번째 코드 모듈:

[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"] <br>

[gd_notifications]

[gd_search bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop_actions bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop layout=’2′ row_gap=” column_gap=” card_border=” card_shadow=” bg=” mt=” mr=” mb=” ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop_paging show_advanced=” bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

이제 Divi 코드 모듈 섹션 위에 Divi 제목 모듈이 포함된 새 섹션을 추가해야 합니다.

아카이브 페이지의 제목을 표시하려면 동적 콘텐츠 표시를 위한 Divi의 기본 제공 옵션을 사용합니다.

GD 아카이브 페이지에 대한 동적 콘텐츠를 설정합니다.

콘텐츠 탭에서 제목 필드 위에 마우스를 올린 후 오른쪽에 있는 동적 콘텐츠 사용을 클릭합니다. 드롭다운 목록에서 페이지/아카이브 제목을 선택합니다.

확인 표시를 클릭하고 GD 아카이브 Divi 레이아웃을 저장합니다.

검색 페이지

검색 페이지의 경우 비슷한 과정을 반복하지만, 푸터를 만들 때와 마찬가지로 Divi Theme Builder를 사용합니다.

Divi Theme Builder로 GD 검색 페이지 만들기

WordPress 대시보드에서 Divi > Theme Builder로 이동합니다. 새 템플릿 추가를 클릭한 후 새 템플릿 빌드를 클릭합니다.

템플릿 설정이 표시됩니다. 사용 위치 탭의 기타 섹션에서 GD Search Results Page를 선택하고 템플릿 만들기를 클릭합니다.

GD 검색 페이지를 담당하는 새 템플릿이 표시됩니다.

사용자 지정 본문 추가를 클릭한 후 기존 페이지 탭에서 라이브러리에서 추가를 클릭합니다. GD Archive Layout을 클릭한 다음 이 레이아웃 사용을 클릭합니다.

연필 아이콘을 클릭하여 사용자 지정 본문을 편집합니다. 별도로 작업할 내용은 없으며, 레이아웃을 저장하고 Divi Builder Theme에서 변경 사항을 저장하면 됩니다.

단 한 단계만 더 거치면 Divi로 구축한 디렉토리 웹사이트가 완벽하게 작동합니다.

단일 목록 페이지

단일 리스팅 페이지는 디렉토리 웹사이트에서 개별 항목을 표시하는 역할을 합니다.

GD 아카이브 및 GD 검색 페이지와 마찬가지로, 이 페이지 템플릿은 GD 설치 마법사에 의해 생성되었습니다.

WordPress 대시보드의 페이지 목록으로 이동하여 Divi GD Details 페이지를 편집하세요.

콘텐츠를 삭제하고 아래 이미지와 같이 2열 행을 추가하세요.

Gd Details 열 레이아웃

왼쪽 코드 모듈에는 게시물 콘텐츠와 갤러리를 담당하는 숏코드를 추가합니다.

오른쪽 코드 모듈에는 전화번호, 주소, 소셜 미디어 링크 등 게시물 세부 정보를 표시하는 숏코드를 추가합니다.

숏코드 생성기 사용 방법을 이미 알고 계시니, 다음 숏코드를 생성하여 복사한 후 붙여넣으세요. 아래에 바로 복사할 수 있는 숏코드도 준비해 두었습니다.

왼쪽 코드 모듈

[gd_post_images title='' types='' fallback_types='' ajax_load='true' limit='' limit_show='' css_class='' type='slider' slideshow='true' controlnav='1' animation='slide' show_title='true' show_caption='true' image_size='' aspect='' cover='' link_to='' link_screenshot_to='' bg='' mt='' mr='' mb='' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ]

[gd_single_taxonomies taxonomy=” prefix=” link_style=” link_color=” link_color_custom=” link_icon=’false’ mt=” mr=” mb=’2′ ml=” pt=” pr=” pb=” pl=” ]

[gd_single_tabs show_as_list=’false’ output=” tab_style=” disable_greedy=’false’ ]

[gd_single_next_prev bg=” mt=’4′ mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=” ]

GD Output location 숏코드

오른쪽 코드 모듈

[gd_output_location location="detail" list_style="wrap"]

거의 다 왔습니다!

이제 GD 아카이브 페이지 템플릿을 만들 때와 마찬가지로, 동적 리스팅 제목을 표시하는 Heading 모듈을 추가해야 합니다.

코드 모듈 위 첫 번째 열에 새 Divi Heading 모듈을 추가하고, Dynamic title을 Page/Archive Title로 설정하세요.

체크 표시를 클릭하고 레이아웃을 저장하세요. 단일 게시물 페이지는 다음과 같이 표시됩니다.

Divi 테마 GeoDirectory 플러그인 리스팅 상세 페이지 완성

Divi 디렉토리 사이트 세부 조정

Divi 디렉토리 웹사이트가 거의 완성되었습니다. 이제 몇 가지 옵션을 설정하여 웹사이트를 다듬어 보겠습니다.

색상 및 타이포그래피

이 웹사이트를 위해 선택한 메인 색상은 네이비 블루 계열입니다. 헥스 코드: #1e2d44.

Theme Customizer > General Settings > Layout settings로 이동하여 Divi 테마 강조 색상을 다음으로 변경하세요: #1e2d44.

이제 GeoDirectory 플러그인의 기본 색상을 변경해야 합니다.

테마 커스터마이저에서 AyeCode UI를 클릭하고 기본 색상을 다음과 같이 설정하세요: #1e2d44.

테마 커스터마이저로 색상과 타이포그래피를 사용자 지정하세요.

이제 전체 폰트를 설정해야 합니다. 테마 커스터마이저 > 일반 설정 > 타이포그래피로 이동하여 헤더 폰트를 Cinzel로 변경하세요.

보시다시피, WpGeodirectory에서 생성된 헤더의 폰트가 Cenzel 폰트로 변경되지 않았습니다.

테마 커스터마이저의 추가 CSS 탭으로 이동하여 다음 CSS 코드를 붙여넣으세요.

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Cinzel', Georgia, "Times New Roman", serif!important;
}

BootStrap 버전 변경

AyeCode UI BootStrap 버전 설정

WordPress 대시보드에서 설정 및 AyeCode UI를 클릭하고 버전을 BootStrap V5로 변경한 후 저장하세요.

Divi 디렉토리 웹사이트가 완성되었습니다.

DiviGeo로 Divi 디렉토리의 잠재력을 극대화하세요

이것은 GeoDirectory와 Divi로 디렉토리를 구축하는 간단한 방법입니다.

이 프로젝트를 혼자 진행하기 부담스럽거나 더 정교한 결과물이 필요하시다면, 주저하지 말고 저에게 연락해 주세요.

제 웹사이트를 방문하여 미리 디자인된 제품 중 하나를 구매하거나 Divi Business GeoDirectory 차일드 테마 DiviGeo, 또는 저를 고용하여 귀하의 요구에 맞춘 맞춤형 웹사이트를 제작하세요.

Divi 디렉토리 웹사이트에 프리미엄 기능 추가하기

원하신다면, 이제 디렉토리에 다음과 같은 프리미엄 기능을 추가할 수 있습니다:

  1. 유료 리스팅: GeoDirectory Listing Price Manager 애드온을 사용하면 리스팅 등록에 대한 가격을 설정할 수 있습니다. 각 가격 등급별로 다음과 같은 기능을 활성화/비활성화할 수 있습니다: 무료 리스팅의 사진 수 제한 및 유료 리스팅의 사진 수 확대 허용. 태그 및 카테고리 수 조정. 특정 커스텀 필드 활성화 또는 비활성화. 더 길거나 짧은 설명 제출.
  2. Claim Listings: 이것은 디렉토리의 핵심 기능으로, 관리자가 데이터베이스를 생성하고 비즈니스 소유자를 초대하여 무료 리스팅을 관리할 수 있게 합니다. 리스팅 소유권 주장 과정에는 리스팅 소유권을 이전하기 위해 유료 리스팅으로의 업그레이드를 강제하는 절차가 포함될 수 있습니다.
  3. 광고: 광고 판매 는 또 다른 형태의 온라인 디렉토리 수익화입니다. 트래픽이 많다면 광고 네트워크를 활용할 수 있습니다. 그렇지 않은 경우, 비즈니스가 웹사이트의 특정 영역에 배너를 추가하거나 리스팅이 광고 형태로(예: 유기적 검색 결과 상단에) 표시되도록 허용하는 방식으로 광고를 직접 판매할 수 있습니다.

이것은 세 가지 예시에 불과합니다. 하지만 디렉토리 웹사이트는 온라인으로 수익을 창출하는 다양한 방법을 제공합니다.

수공예품 글로벌 마켓플레이스를 만들거나, 이벤트 티켓을 판매하거나, 할인 쿠폰을 판매할 수도 있습니다.

다음 팁으로 구축 과정에 대한 인사이트를 얻어보세요: 디렉토리 웹사이트 구축: 팁과 노하우.

가능성은 무궁무진합니다.

GeoDirectory의 강력한 기능을 활용하세요!

지금 바로 온라인 비즈니스를 시작하세요

오늘 가입하세요!

뉴스레터 - 최신 소식을 받아보세요!

최신 뉴스, 팁, 독점 콘텐츠를 받은 편지함으로 직접 받아보세요.

로딩 중...
20% 할인 혜택
서두르세요! 만료되기 전에 20% 할인을 받으세요. 20% 할인 받기