Bricks Builder로 디렉토리 웹사이트를 만드는 방법은?
🚨 새로운 Bricks 템플릿 출시! 🚨
GeoDirectory 기반 디렉토리 사이트를 100배 더 쉽고 빠르게 구축할 수 있는 멋진 Bricks Builder 템플릿을 방금 출시했습니다!
🎯 라이브 데모: 여기서 확인하세요
📥 다운로드 및 튜토리얼: Bricks Directory template
💬 대화에 참여하세요: 커뮤니티 포럼에서 토론하기
직접 사용해 보고 의견을 알려주세요!
직접 템플릿을 디자인하고 싶다면, Bricks Builder와 GeoDirectory 플러그인을 사용하여 디렉토리 웹사이트를 구축하는 시작 가이드를 참고하세요:
- Bricks 테마 설치
- GeoDirectory 설치 및 설정
- Bricks Builder로 디렉토리 웹사이트 디자인하기
Bricks Builder와 GeoDirectory 플러그인을 함께 사용하면 매우 정교한 온라인 디렉토리를 만들 수 있습니다.
이 조합을 통해 위치 기반 기능의 손쉬운 통합, 디자인 커스터마이징, 동적 콘텐츠 블록 추가가 가능하며, 사용자 친화적이고 매력적인 웹사이트 경험을 제공합니다.
이번 튜토리얼에서는 단순함과 사용 편의성에 초점을 맞추겠습니다.
주로 GeoDirectory 쇼트코드와 함께 Bricks 빌더를 사용할 예정입니다.
앞으로 몇 주 안에 Bricks 엘리먼트와 쿼리 루프(동적 데이터)를 활용해 각 GD 템플릿을 디자인하는 방법에 대한 상세 튜토리얼을 게시할 예정입니다.
이 튜토리얼에서는 다음을 다룹니다:
테마 및 플러그인 설치.
1. 설치하기 Bricks 테마
먼저 다음 사이트에서 테마와 차일드 테마를 다운로드하세요: Bricks website.
다음 경로에서 WordPress 웹사이트에 테마를 설치하세요: WP-Admin >> 외관 >> 테마
테마 라이선스를 활성화하세요.
2. GeoDirectory 설치
마지막으로, 설치해야 합니다. GeoDirectory.
다음으로 이동하세요 플러그인 >> 새로 추가, GeoDirectory를 검색하세요. 설치 후 활성화하면 플러그인 설치가 완료됩니다.
3. GeoDirectory 설치 마법사
GeoDirectory를 사용하려면 설치 마법사를 완료하여 Google Maps API 키를 구성하고 몇 가지 샘플 목록을 가져와야 합니다.
지도 시스템 선택 (Google Maps 또는 OpenStreetMap)
마법사의 첫 번째 단계에서 Google Maps와 OpenStreetMaps, 두 가지 지도 시스템 중 하나를 선택할 수 있습니다.
이 가이드에서는 OpenStreetMaps를 선택하겠습니다.
Google Maps를 사용하려면 몇 가지 추가 작업이 필요합니다:
- "Generate Key" 버튼을 클릭하고, 이 가이드의 안내에 따라 유효한 API 키를 생성하세요.
- 중요한 단계는 다음과 같습니다:
- Keys를 활성화하세요.
- 새 프로젝트를 만들거나 기존 프로젝트를 선택하세요.
- 키를 발급받습니다.
- 결제 계정을 설정하세요.
- API 키를 제한하세요 (웹사이트 URL에서만 작동하도록).
네 번째 항목은 반드시 해야 하지만, 월 $200을 초과할 때만 비용이 발생합니다.
이 무료 크레딧은 99%의 디렉토리에 충분히 활용할 수 있습니다.
기본 도시 설정
다음으로, 기본 위치를 선택하게 됩니다. 이는 디렉토리가 중심으로 삼는 도시입니다.
여기서는 Philadelphia를 기본 도시로 설정하지만, 원하는 곳 어디든 선택할 수 있습니다.
여러 도시를 위한 디렉토리를 만들 경우, Location Manager 애드온이 필요합니다.
추가 기능 설정
이 단계에서는 UsersWP를 설치합니다. UsersWP는 사용자 등록 플러그인 사용자가 웹사이트에 회원가입하고 로그인할 수 있게 해줍니다.
이 플러그인은 사용자가 리스팅을 추가하고 수정할 수 있도록 하는 데 필요합니다. 또한 사용자가 자신의 리스팅, 리뷰 등을 확인할 수 있는 사용자 프로필을 생성합니다.
또한 설치할 플러그인은 Ninja Forms 입니다. 이를 통해 모든 리스팅에 리스팅 소유자에게 직접 이메일을 발송하는 문의 양식이 추가됩니다.
이 튜토리얼에서 AyeCode Connect를 반드시 사용할 필요는 없습니다. WordPress 대시보드에서 바로 프리미엄 GeoDirectory 애드온을 추가하고 설치하려는 경우에만 필요합니다.
더미 데이터 추가
설치 마법사를 완료하는 마지막 단계는 더미 리스팅을 추가하는 것입니다. 이 과정에서 리스팅 카테고리도 설정되며, 나중에 원하는 대로 변경할 수 있습니다.
지금은 사이드바 위젯이나 메뉴 항목을 추가하지 않겠습니다. 나중에 처리하도록 하겠습니다.
디자인하기 Bricks 디렉토리 웹사이트
테마와 플러그인을 설치하고 GeoDirectory의 기본 설정을 마쳤으니, 이제 디렉토리 웹사이트 디자인을 시작할 수 있습니다.
1. 로고
가장 먼저 해야 할 일은 웹사이트에 사용할 로고를 준비하는 것입니다.
로고의 첫 번째 버전을 만들기 위해 디자이너를 고용할 필요는 없습니다.
새 디렉토리를 시작할 때 가장 큰 실수 중 하나는, 사람들이 원하는지 테스트하기 전에 너무 많은 시간과 돈을 쏟는 것입니다.
Canva 같은 앱을 사용하면 단 5분 만에 로고를 만들 수 있으며, 저렴하면서도 품질이 뛰어납니다.
제품의 기본 버전(MVP, 즉 최소 기능 제품이라고도 함)에는 Canva로 만든 로고로도 충분합니다.
선택할 수 있는 로고 템플릿이 매우 많으며, 첫 번째 로고가 완벽하지 않거나 독창적이지 않아도 괜찮습니다.
프로젝트가 잘 진행되기 시작하면, 나중에 언제든지 로고를 개선하거나 완전히 새롭게 바꿀 수 있습니다.
일반적으로 로고가 프로젝트 실패의 원인이 되지는 않습니다. 웹사이트 헤더를 만들 때 이 로고를 사용하겠습니다.
1. Bricks 디렉토리 홈페이지 디자인
새 페이지를 만들거나 WordPress가 기본으로 생성하는 샘플 페이지(Sample Page)를 활용할 수 있습니다.
페이지(Pages)로 이동하여 샘플 페이지를 편집하고 이름을 Home으로 변경하거나, 이를 위한 새 페이지를 만드세요.
이 페이지를 사이트 홈페이지로 설정해야 합니다. 이를 위해 다음으로 이동하세요 wp-admin >> 설정(Settings) >> 읽기(Reading)
이제 먼저 사이트 내비게이션 메뉴를 설정해 보겠습니다.
내비게이션 메뉴
다음으로 이동하세요 외관 > 메뉴, 에서 메뉴를 만드세요.
필요한 링크를 추가하고 (왼쪽 열에서 오른쪽 열로) 저장하세요. 그리고 메뉴 설정 > 표시 위치 섹션,헤더 메뉴 – 로그인한 사용자 및 헤더 메뉴 – 로그아웃한 사용자” options.
If you want, you can make the same menu appear on the mobile or create another menu to appear there.
이 예제에서는 헤더 탐색 메뉴만 사용합니다.
We added seven main navigation links and a few sub-navigation links:
- 홈
- Places and add places
- 검색
- 블로그
- 계정
- Register & Login pages
헤더
To set the site header go to wp-admin >> Bricks >> Templates >> 새로 추가
헤더용 Bricks 템플릿을 만듭니다.
30::70 비율의 두 열 레이아웃을 선택합니다.
왼쪽 열에 Logo 블록을 드래그하고 사이트 로고를 업로드합니다.
너비를 width:200px로 설정합니다.
오른쪽 열에 Nav menu 를 드래그합니다.
다음과 같은 설정을 사용합니다.
Algin main axis: center
Align cross axis: Right
타이포그래피
Text Transform: Poppins 500
콘텐츠
이제 홈페이지를 디자인합니다. Bricks로 편집 버튼을 클릭하여 홈페이지를 편집합니다.
다음 설정으로 빈 컨테이너를 추가합니다.
Align self: 가운데
Align Main Axes: 가운데
Align cross axis: 가운데
제목 블록의 스타일 섹션의 탭
패딩: 50px (위쪽) 50px (아래쪽)
최소 높이: 500
배경 이미지 업로드
배경 위치: 가운데 가운데
배경 반복: 반복
이제 이 컨테이너 위에 제목 태그를 추가해 보겠습니다.
텍스트: 필라델피아 최고의 레스토랑 찾기
이제 제목 태그의 스타일 탭에서 다음 설정을 추가합니다.
타이포그래피:
글꼴 크기: 48px
텍스트 정렬: 가운데
텍스트 변환: 첫 글자 대문자
폰트: Poppins
이제 아래에 숏코드 블록을 추가하고 [gd_search mb=”3″] 숏코드를 그 안에 추가합니다.
이제 빈 컨테이너를 하나 더 추가하고 다음 숏코드를 사용하여 그 안에 숏코드 블록을 추가해 보겠습니다.
[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"]
카테고리 컨테이너의 스타일 탭에서 레이아웃 > 여백으로 이동합니다.
패딩 위: 50px
패딩 아래: 50px
패딩 왼쪽: 50px
패딩 오른쪽: 50px
이제 최근 비즈니스를 표시하는 섹션을 추가하겠습니다.
헤더 태그가 있는 빈 섹션을 하나 더 추가하고
텍스트: 최근 비즈니스 목록
다음과 같은 타이포그래피 설정을 적용합니다
글꼴 크기: 32px
이제 그 아래에 다음 숏코드를 추가합니다
[gd_listings post_type="gd_place" post_limit="8" add_location_filter="1" sort_by="latest" title_tag="h3" layout="4" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3"]
이제 그 아래에 모든 비즈니스를 나열하는 지도를 추가하려고 합니다.
이를 위해 빈 컨테이너를 추가하고 그 안에 다음 숏코드를 포함한 숏코드 블록을 삽입합니다.
컨테이너에 다음 스타일을 적용합니다.
패딩 상단: 50px
패딩 하단: 50px
[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"]
이제 CTA를 추가하기 위해 두 열 레이아웃을 사용하겠습니다.
다음 설정으로
방향: 수평(행)
Align self: 가운데
Align cross axis: 가운데
열 간격: 20
행 간격: 20
왼쪽 열에는 이미지를 드래그하고, 오른쪽 열에는 텍스트와 리스팅 페이지로 이동하는 버튼을 추가합니다.
푸터
이제 푸터를 디자인하고 생성하려면 다음으로 이동하세요 wp-admin >> Bricks >> Templates >> 새로 추가
그리고 템플릿 태그 를 푸터로 선택한 후 Bricks로 템플릿을 편집합니다.
이제 빈 컨테이너를 추가해 보겠습니다. 배경색: #072027
기본 텍스트 블록에 텍스트와 스타일을 추가하세요 텍스트 정렬: 가운데
이제 홈페이지가 완성되었습니다.
2. Bricks 디렉토리 웹사이트 리스팅 및 검색 페이지 디자인
디렉토리를 위해 두 가지 중요한 페이지를 만들어야 합니다. 하나는 리스팅 페이지(아카이브, 카테고리, 태그 포함)이고, 다른 하나는 검색 결과 페이지입니다.
GeoDirectory는 기본 디자인으로 이 페이지들을 자동으로 설정합니다. 이 가이드는 이 페이지들의 모양을 조금 더 다듬는 데 도움이 될 것입니다.
리스팅 페이지와 검색 페이지는 매우 유사하기 때문에, 한 번만 디자인하고 동일한 레이아웃을 두 페이지 모두에 적용하겠습니다.
리스팅 페이지 디자인은 왼쪽에 리스팅을 배치하고, 오른쪽에는 각 리스팅의 위치를 보여주는 고정 지도를 배치하는 방식으로 구성할 것입니다.
이 작업은 매우 간단합니다.
GeoDirectory > 설정 > 일반 > 페이지 > GD Archive 페이지 템플릿 편집 클릭으로 이동하세요.
이 항목의 모든 콘텐츠를 삭제하세요. GD Archive 페이지 템플릿을 선택하고 Bricks Builder로 편집하세요.
이제 빈 섹션을 추가하고 그 안에 Post Title 블록.
섹션 스타일 설정에서 다음을 설정하세요
배경색: #072027
패딩: 30px 10px 30px 10px
Post Title 블록의 타이포그래피 설정을 다음으로 지정하세요
폰트: Poppins
색상: #fffff
이제 빈 섹션과 그 안에 두 개의 컬럼 컨테이너(50::50)를 추가해 보겠습니다.
다음으로 왼쪽 컨테이너에는 GD > Loop Action, GD > Loop, GD > Loop Pagination, GD > Search 등 GD 아카이브 페이지 관련 숏코드가 포함된 숏코드 블록을 추가합니다. 상단에 검색 기능을 배치하여 사용자가 아카이브 페이지에서 검색할 수 있도록 합니다.
[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='' ]
오른쪽 컬럼에는 다음 설정으로 GD > Map 숏코드가 포함된 숏코드 블록을 추가하겠습니다.
[gd_map map_type="auto" post_settings="1" width="100%" height="100vh" maptype="ROADMAP" zoom="0"]
스크롤 터치를 위해 클래스 scrolling-gd-loop 를 왼쪽 컬럼에 추가할 것입니다. 아래 스크린샷에서 표시된 옵션을 확인할 수 있습니다.
다음 스타일을 테마 커스터마이저에 추가해 보겠습니다.
.scrolling-gd-loop{ overflow-y: scroll !important; max-height: 1000px; }
이제 이 작업이 완료되면 아카이브 페이지가 준비됩니다.
검색 페이지 레이아웃을 만들기 위해.
다음을 생성하겠습니다. GD Search 페이지 템플릿 출처: Bricks >> Templates >> 새로 추가. 반드시 선택하세요. 템플릿 유형 선택: GD Search Results
다음의 모든 콘텐츠를 복사하세요. GD Archive Bricks 템플릿을 복사하여 GD Search 페이지 Bricks 템플릿에 붙여넣으세요.
이렇게 하려면 GD 아카이브 페이지에서 Bricks Builder 오른쪽 열(Structure)의 복사(전체) 아이콘을 클릭하세요.
검색 페이지로 이동하세요. 검색 페이지는 다음에서 찾을 수 있습니다. Geodirectory > Settings > General > Pages.
Bricks로 편집하세요. Bricks Builder 오른쪽 열의 제거(전체) 아이콘을 클릭하세요:
마지막으로, Bricks Builder 오른쪽 열의 붙여넣기(전체) 아이콘을 클릭하세요:
이렇게 하면 검색 페이지와 아카이브 페이지가 동일하게 전체 너비로 표시되며, 왼쪽 열에는 결과가, 오른쪽 열에는 고정 지도가 표시됩니다.
검색 페이지의 경우, 개별 페이지에 이 템플릿을 표시하도록 Bricks에 지시해야 합니다.
이를 위해 기어 아이콘 > 템플릿 설정 > 조건 > 개별 > 검색 페이지 (검색 페이지의 제목).
3. Bricks 디렉토리 웹사이트 단일 리스팅 페이지 디자인
이제 상세 페이지 템플릿을 만들 차례입니다. 다음으로 이동하여 GD Detail 페이지 템플릿을 Bricks에서 편집합니다.
다음으로 이동하세요. Geodirectory > 설정(Settings) > 일반 > 페이지 > GD Detail 페이지 템플릿 편집 클릭.
이 템플릿에서는 Geodirectory가 생성한 기본 콘텐츠를 이미 확인할 수 있습니다.
이 모든 기본 콘텐츠를 제거하고 Bricks를 사용하여 편집합니다.
빈 섹션을 추가하고 그 안에 숏코드 블록을 추가해 봅시다.
이미지 슬라이더를 표시하려면 다음 숏코드를 사용하세요.
[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide" image_size="large"]
이제 빈 섹션 안에 2열 컨테이너를 추가해 봅시다.
왼쪽 컨테이너에 다음 숏코드들을 추가합니다.
여기에는 GD > Post Title, GD > Single Taxonomies, 그리고 GD > Single Tabs.
[gd_page_title tag='h1' no_wrap='false' title_container='1' strip_html='] [gd_single_taxonomies taxonomy='' prefix='' link_style='' link_color='' link_color_custom='' link_icon='false'] [gd_single_tabs heading_font_size="0" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]
오른쪽 열에는
GD > Author Action, 그리고 GD > Output Location 블록.
[gd_author_actions hide_edit='false' hide_delete='false' author_page_only='false'] [gd_output_location location="detail" list_style="wrap"]
이 작업을 완료하면 리스팅 상세 페이지가 완성됩니다.
디렉토리에 프리미엄 기능 추가하기 Bricks 디렉토리 웹사이트
원하신다면, 이제 디렉토리에 다음과 같은 프리미엄 기능을 추가할 수 있습니다:
- 유료 리스팅: GeoDirectory Listing Price Manager 애드온을 추가합니다. 리스팅 등록 비용을 직접 설정할 수 있습니다. 가격 수준별로 포함하거나 제외할 기능을 선택할 수 있습니다. 예를 들어, 유료 리스팅에는 더 많은 사진을 허용하고 무료 리스팅에는 제한을 둘 수 있습니다. 특정 커스텀 필드의 사용 가능 여부도 설정할 수 있으며, 설명의 길이를 길거나 짧게 조정할 수도 있습니다.
- Claim Listings: 이 기능은 디렉토리에 있어 매우 중요합니다. 작동 방식은 다음과 같습니다: 관리자가 데이터베이스를 설정한 후 비즈니스 소유자를 초대하여 무료 리스팅을 관리하게 합니다. 비즈니스 소유자가 리스팅 소유권을 가져가려면 먼저 유료 리스팅으로 업그레이드해야 할 수도 있습니다.
- 광고: 광고 판매 는 또 다른 형태의 온라인 디렉토리 수익화. 웹사이트 방문자가 많다면 광고 네트워크를 활용할 수 있습니다. 방문자가 많지 않다면 광고를 직접 판매할 수 있습니다. 즉, 비즈니스가 사이트의 특정 위치에 배너를 게재하거나, 검색 결과 상단 등에 리스팅이 광고 형태로 노출되도록 비용을 지불할 수 있습니다.
이것은 세 가지 예시에 불과합니다. 하지만 디렉토리 웹사이트는 온라인으로 수익을 창출하는 다양한 방법을 제공합니다.
수공예 아이템의 글로벌 마켓플레이스를 만들거나, 이벤트 티켓 또는 할인 쿠폰을 판매할 수 있습니다.
첫 번째 프로젝트를 시작하는 분들을 위한 가이드입니다: 나만의 디렉토리 웹사이트 구축하기.
이 범용 튜토리얼은 어떤 테마나 페이지 빌더에도 적용할 수 있습니다.
가능성은 무한합니다.