Breakdance – Website Builder for WordPress로 디렉토리 웹사이트 만들기

디렉토리 브레이크댄스 만들기

Breakdance Website Builder 플러그인을 사용하여 디렉토리 웹사이트를 만드는 방법에 대한 이해하기 쉬운 가이드입니다:

  1. Breakdance 플러그인 설치
  2. GeoDirectory 설치 및 설정
  3. 다음을 사용하여 디렉토리 웹사이트를 디자인하세요: Breakdance 플러그인

The Breakdance 플러그인은 GeoDirectory 플러그인과 함께 사용하면 유연한 온라인 디렉토리를 만드는 탁월한 방법입니다. 이 조합을 통해 위치 기반 기능을 손쉽게 추가하고, 레이아웃을 커스터마이즈하며, 사용자 친화적인 경험을 위한 동적 콘텐츠를 포함할 수 있습니다.

이 시스템을 통해 웹 개발자와 디자이너는 특정 산업이나 더 넓은 커뮤니티의 요구에 맞는 고품질 디렉토리 웹사이트를 구축할 수 있습니다.
이를 수행하는 방법의 세부 사항을 살펴보겠습니다.

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

플러그인 설치 및 설정하기.

1. 설치하기 Breakdance 플러그인

Breakdance 플러그인은 breakdance.com에서 구매하실 수 있습니다. 플러그인 zip 파일을 받게 됩니다. 설치하려면  플러그인 >> 새로 추가 >> 플러그인 업로드 클릭

설치 후, 다음 경로에서 WordPress 테마를 비활성화합니다. Breakdance >> 설정 >> 테마 >> 테마 비활성화

2. GeoDirectory 설치

마지막으로, 설치해야 합니다. GeoDirectory.

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

install-geodirectory-720x386-1012537
GeoDirectory 플러그인 설치

3. GeoDirectory 설치 마법사

GeoDirectory 플러그인의 경우, 설정 마법사를 완료하여 Google Maps API 키를 구성하고 몇 가지 더미 목록을 가져와야 합니다.

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

gd-wizard-map-api-key-720x338-8258688
GeoDirectory 설치 마법사

마법사의 첫 번째 단계에서 Google Maps와 OpenStreetMaps(API 키가 필요하지 않음) 두 가지 지도 시스템 중 하나를 선택할 수 있습니다.

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

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

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

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

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

네 번째 항목에 대해: 이것은 필수 사항입니다. 다만, 월 $200 한도를 초과하는 경우에만 요금이 부과됩니다.

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

기본 도시 설정

gd-wizard-default-city-720x535-6899549
디렉토리 기본 도시 설정

그 후, 기본 위치를 설정합니다. 이것은 디렉토리가 생성될 도시입니다.

기본 도시로 Philadelphia를 설정하겠습니다.

필요한 위치를 자유롭게 사용할 수 있습니다.

여러 도시에 목록을 추가해야 하는 경우 Location Manager 애드온이 필요합니다.

추가 기능 설정

gd-wizard-extra-features-720x583-5463319

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

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

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

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

더미 데이터 추가

gd-wizard-dummy-data-720x256-9149338
GeoDirectory 더미 리스팅

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

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

디자인하기 Breakdance 디렉토리 웹사이트

플러그인 설치와 GeoDirectory의 기본 설정을 마쳤으니, 이제 Breakdance Suite의 도구들을 활용해 디렉토리 웹사이트 디자인을 시작할 수 있습니다.

무엇보다 먼저: 웹사이트에 사용할 로고가 필요합니다.

로고의 첫 번째 버전을 제작하기 위해 디자이너에게 비용을 지불할 필요는 없습니다.

새 디렉토리를 시작할 때 저지를 수 있는 가장 큰 실수 중 하나는 제품 시장 적합성을 검증하기 전에 너무 많은 시간과 돈을 투자하는 것입니다.

Canva와 같은 앱을 사용하면 5분 만에 로고를 디자인할 수 있으며, 가격도 저렴하고 놀라울 정도로 퀄리티가 좋습니다.

Canva.com을 사용하여 첫 번째 로고 초안을 만들어 보세요.

MVP(최소 기능 제품)의 경우, Canva로 디자인한 로고로도 충분합니다.

선택할 수 있는 로고 템플릿이 여러 가지 있으며, 처음 만든 로고가 완벽하거나 독창적이지 않아도 괜찮습니다.

프로젝트가 성장하면 나중에 언제든지 개선하거나 완전히 새롭게 바꿀 수 있습니다.

평범한 로고가 프로젝트 실패의 주된 원인이 되는 경우는 없습니다.

2. Breakdance 디렉토리 홈페이지 디자인

새 페이지를 만들거나 WordPress가 기본으로 제공하는 페이지(예: 샘플 페이지)를 사용할 수 있습니다.

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

다음으로 외관 > 사용자 정의 > 홈페이지 설정 을 선택하고 홈을 선택하세요.

내비게이션 메뉴

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

디렉토리 탐색 메뉴

필요한 링크를 추가하고 (왼쪽 열에서 오른쪽 열로) 저장합니다.

제목 블록의 메뉴 설정 > 표시 위치 섹션,기본” option.

원하신다면 같은 메뉴를 푸터에도 표시하거나, 푸터에 표시할 별도의 메뉴를 만들 수 있습니다.

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

We added seven main navigation links and a few sub-navigation links:

  1. 홈
  2. 소개
  3. 블로그
  4. Places and add places
  5. 프로필
  6. 로그인
  7. 로그아웃

The Login link (from UsersWP Endpoints) will only appear for Logged-out users, while the log-out, account, and profile links will only appear for logged-in users.

타이포그래피

Let’s set global Typography settings from the Breakdance >> 설정 >> 글로벌 스타일 >> Breakdance 실행

다음은 타이포그래피 설정입니다
제목 폰트: Poppins
본문 폰트: Poppins
기본 크기: 16px
비율: 1.2

헤더 설정

사이트 헤더를 설정하기 위해 다음으로 이동해 보겠습니다. Breakdance >> Header 를 클릭하세요. Add header.

여기서 헤더에 제목을 지정하고 다음을 선택합니다.
위치: 모든 곳
우선순위: 1

다음을 클릭하세요. 새로 추가 왼쪽 상단 모서리의 버튼을 클릭하세요. 사용 가능한 블록 요소를 사용하여 헤더를 만들거나 라이브러리 를 클릭하여 이미 제작된 헤더 템플릿을 사용할 수 있습니다.

저는 다음의 기존 헤더 템플릿 중 하나를 사용하고 있으며 라이브러리에서 업로드했습니다. 로고 를 선택하고 메뉴 를 선택했습니다.

이제 헤더가 준비되었으니, 홈페이지 콘텐츠로 넘어가겠습니다.

콘텐츠

저는 Breakdance 플러그인을 사용하여 이 페이지를 처음부터 만들어 보겠습니다.

이를 위해 홈페이지에 히어로 헤더가 필요합니다.

먼저 Breakdance 에서 홈페이지를 Edit in Breakdance 버튼을 클릭하여 편집해 보겠습니다.

왼쪽 상단의 추가 버튼을 클릭하여 빈 섹션을 드래그합니다.

섹션 스타일 탭에서 다음을 설정합니다.
정렬: 가운데
배경 유형: 이미지
이미지 크기: 전체
크기: 커버
반복: no-repeat
위치: 가운데
첨부: 스크롤
이미지 해제 위치: 데스크톱
높이: 사용자 지정
사용자 지정 높이: 400px

이제 다음 설정으로 제목 요소를 드래그해 보겠습니다.

텍스트: 필라델피아 최고의 레스토랑 찾기
색상: #FFFFFFFF
글꼴 크기: 48
글꼴 두께: 600

다음 숏코드가 포함된 숏코드 블록을 추가하겠습니다. [gd_search] 그 아래에 숏코드를 입력하세요.

검색 숏코드 추가

이제 카테고리 목록을 표시하기 위해 다음 숏코드를 사용하여 아래에 빈 컨테이너를 하나 더 추가해 보겠습니다. 

[gd_categories post_type="0" max_level="1" max_count="all" max_count_child="all" sort_by="az" design_type="image" row_items="4" card_shadow="small" 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" rounded="rounded"]

상단과 하단에 50px의 패딩을 적용합니다.

이제 최근 리스팅 섹션이 필요합니다. 다음 숏코드를 사용하여 숏코드 요소를 추가하겠습니다.

[gd_listings post_type="gd_place" post_limit="6" add_location_filter="1" sort_by="latest" title_tag="h3" layout="3" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3" rounded="rounded"]

이제 리스팅 지도를 표시하기 위해 숏코드를 하나 더 추가해 보겠습니다. 

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

마지막으로 CTA 가 필요한데, 기존 CTA 템플릿을 사용하겠습니다.

이제 마지막으로 사이트 푸터를 설정해 보겠습니다. Breakdance >> Footer 를 클릭하세요. 추가 Footer.

푸터를 처음부터 만들 수도 있고 기존 푸터를 사용할 수도 있습니다. 저는 기존 푸터 템플릿을 사용하겠습니다. 필요에 따라 푸터 메뉴를 손쉽게 커스터마이징할 수 있습니다.
지금은 그대로 유지하겠습니다.

축하합니다! 홈페이지가 완성되었습니다.

2. Breakdance 디렉토리 웹사이트 리스팅 및 검색 페이지 디자인

리스팅 페이지

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

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

GeoDirectory는 기본적으로 일반 레이아웃으로 페이지를 생성합니다. 이 튜토리얼에서는 Breakdance Builder를 사용하여 이 페이지들의 레이아웃을 만들고 커스터마이징하겠습니다.

다음으로 이동합니다 Breakdance >> Templates >> Add Template

다음 옵션에서 아래 설정을 선택하고 클릭합니다 Add Template 버튼을 클릭하여 편집해 보겠습니다.
위치: 아카이브/포스트 타입 아카이브
조건: 포스트 타입 = Places

템플릿에서 빈 섹션을 추가하고 섹션 블록에 다음 설정을 적용합니다.
레이아웃
정렬: 가운데
수직 정렬: 가운데
배경:
색상: F5F8FFFF
유형: 그라디언트

이제 그 안에 Archive Title 블록을 추가해 보겠습니다.

두 가지 옵션이 있으며, 둘 다 안내해 드리겠습니다:

더 간단한 방법은 단일 열을 사용하고 다음 숏코드를 활용하는 것입니다: [gd_simple_archive layout="2″ height="100vh" maptype="ROADMAP" marker_cluster="1″]

2) 디자인을 완전히 제어하고 싶다면, 대신 2열 레이아웃의 열 블록을 추가해야 합니다.

설정에서 다음을 사용합니다 너비: 전체

이제 숏코드 컨테이너를 드래그하여 그 안에 필요한 숏코드를 사용합니다.

왼쪽 컨테이너에서는 GD 아카이브 페이지 관련 위젯(예: GD > Loop Action, GD > Loop, GD > Loop Pagination, 그리고 GD > Search 을 상단에 배치하여 사용자가 아카이브 페이지에서 검색할 수 있도록 합니다.

[gd_search mb="3"]
[gd_loop_actions]
[gd_loop layout='2']
[gd_loop_paging]

오른쪽 열에는 GD > Map block, 그리고 모든 설정은 기본값으로 유지하겠습니다. 단, GD > Map block의 높이를 100vh로 설정하겠습니다.

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

이제 다음 항목을 추가하겠습니다 gd-archive-left-container 클래스를 왼쪽 섹션에 추가합니다.

왼쪽 열에 다음 클래스를 추가하겠습니다 gd-archive-left-column.

마지막 마무리 작업으로, 다음 CSS를 테마 커스터마이저의 외관 => 사용자 정의 => CSS 추가

.geodir-archive .gd-archive-left-container{
    overflow-Y: scroll;
    max-height: 100%;
    height:100vh;
    padding-right:15px;
}

.gd-archive-left-column{
	overflow:hidden;
}

이제 리스팅 아카이브 페이지가 완성되었습니다.

검색 페이지

이제 GeoDirectory 검색 페이지용 템플릿을 만들겠습니다. 먼저 Breakdance >> Templates >> Add Template >> 검색 결과

이제 다음 템플릿의 모든 콘텐츠를 GD Archive 템플릿에서 GD Search 템플릿으로 복사하겠습니다.

이제 GD 검색 및 아카이브 페이지 템플릿이 모두 준비되었습니다.

4. Breakdance 디렉토리 웹사이트 단일 리스팅 페이지 디자인

다음으로 이동합니다 Breakdance >> Templates >> Add Template

다음 옵션에서 아래 설정을 선택하고 클릭합니다 Add Template 버튼을 클릭하여 편집해 보겠습니다.
위치: Single/Places
조건: 포스트 타입 = Places

모든 면에서 패딩이 0인 빈 섹션을 추가하겠습니다.

이미지 슬라이더를 표시하기 위해 다음 숏코드를 추가합니다.

[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide"]

이제 섹션을 하나 더 추가하고 그 안에 두 열 레이아웃을 추가해 보겠습니다.

이제 필요한 모든 GD Detail 페이지 숏코드를 왼쪽 열에 하나씩 추가해 보겠습니다.

여기에는 GD > Post Title, GD > Single Taxonomies, 그리고 GD > Single Tabs.

[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 heading_font_size="0" heading_text_color="primary" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]
[gd_single_next_prev bg=''  mt='4'  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]

오른쪽 열에는 GD > Author Action 및 GD > Output Location 블록.

[gd_author_actions hide_edit='false'  hide_delete='false'  author_page_only='false'  display=''  size=''  alignment=''  color='primary'  text_color='white'  btn_mt='1'  btn_mr=''  btn_mb='1'  btn_ml=''  bg=''  mt=''  mr=''  mb=''  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_output_location location="detail" list_style="wrap"]

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

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

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

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

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

이 필수 가이드로 핵심 내용을 익혀보세요: 디렉토리 웹사이트 제작의 기본 요소.

가능성은 무한합니다.

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

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

오늘 가입하세요!

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

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

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