GeoDirectory

GeoDirectory와 Avada로 Airbnb 같은 리스팅 페이지 만들기

Paolo

약 6개월 전 GeoDirectory V2를 출시하면서 디자인 커스터마이징이 훨씬 쉬워질 것이라고 약속했습니다.

GeoDirectory V2는 대부분의 페이지 빌더 및 테마와 호환되어 이미 멋진 템플릿 디자인이 가능했지만, 현재 세밀하게 다듬고 있는 만큼 앞으로는 훨씬 더 멋진 것들을 구현할 수 있게 될 것입니다.

저희는 Avada와 Fusion Builder부터 시작하기로 했습니다.

현재 버전의 GeoDirectory에서는 다음과 같이 해야 했습니다:

그것과 CSS를 이용하면 거의 모든 것을 구현할 수 있었지만, 직관적이지 않았고 Fusion Builder의 기본 요소로 디자인을 커스터마이징하는 것만큼 쉽지도 않았습니다.

GeoDirectory 요소가 Fusion Builder 안에 포함됩니다

다음 버전의 GeoDirectory부터(버전은 2.0.0.68 (현재 GitHub에서 베타 버전으로 이용 가능), 모든 GeoDirectory 위젯 / 숏코드 / 블록이 Fusion Builder의 요소로도 제공됩니다.

이를 통해 디자인이 훨씬 쉬워지며, 이제 Airbnb의 리스팅 페이지 또는 검색 결과 페이지와 유사하게 보이는 페이지를 만드는 방법에 대한 튜토리얼을 본격적으로 살펴볼 수 있습니다.

Avada와 GeoDirectory가 설치되어 있다고 가정하고, 제가 만든 방법을 소개합니다.

면책 조항: GeoDirectory와 Fusion Builder만으로 Airbnb처럼 보이는 페이지를 디자인하는 것은 불가능했습니다. 몇 줄의 CSS를 직접 작성해야 했고, 총 11개의 새로운 규칙이 필요했습니다, 아카이브 페이지 템플릿(리스팅 페이지)에 5개, 아카이브 아이템 페이지 템플릿(리스팅 페이지 내 각 리스팅)에 6개입니다.

그렇긴 하지만, 저는 Avada 전문가가 아니며, 옵션이 너무 많기 때문에 제가 한 작업도 CSS를 훨씬 적게, 어쩌면 전혀 사용하지 않고도 할 수 있었을 것입니다.

그 부분은 Fusion Builder 고수들에게 맡기겠습니다. 저의 커스텀 CSS를 피할 수 있는 방법을 알고 계신다면, 아래 댓글로 알려주시면 감사하겠습니다. 튜토리얼을 업데이트하도록 하겠습니다.

1 필요한 커스텀 필드 생성

저는 AirBnB가 사용하는 커스텀 필드를 장소 > 설정을 통해 추가하는 것부터 시작했습니다. 디자인을 재현하고 시간을 절약하기 위해 꼭 필요한 것만 추가했지만, 모든 것을 구현하는 것도 가능합니다.

다음을 위한 네 개의 선택 항목이 필요했습니다:

그리고 다음과 같은 편의시설을 위한 다중 선택 항목 하나가 필요했습니다:

2 아카이브 페이지 템플릿 편집

몇 개의 더미 리스팅을 게시한 후, 새로운 아카이브 페이지 템플릿이 필요했습니다. 저는 해당 페이지를 Avada Listings 1이라고 이름 짓고 GeoDirectory 설정을 통해 새 아카이브 페이지 템플릿으로 지정했습니다.

그런 다음 페이지를 준비하고 전체 화면을 사용하도록 설정해야 했습니다. Avada 페이지가 화면 전체 너비를 사용하도록 하는 옵션이 있다는 것은 알고 있었지만, 그렇게 하면 사이트 전체에 영향을 미치기 때문에 CSS를 사용했습니다.

.geodir-archive #main .fusion-row {max-width:100%}
html:not(.avada-has-site-width-percent) .geodir-archive #main {padding:0} 
.geodir-archive #main  {padding:0}
.geodir-archive .post-content .fusion_builder_column_1_2.fusion-column-first > .fusion-column-wrapper {padding-left: 8% !important;}
.geodir-archive .avada-page-titlebar-wrapper {display:none}

위의 코드가 하는 역할은 간단합니다. 헤더 아래와 푸터 위 영역이 화면 전체 너비를 사용하도록 만들고, 일반 패딩을 제거하며, 리스팅 목록의 왼쪽에만 패딩을 추가합니다. 또한 비슷한 페이지에서 불필요한 Avada 타이틀 바를 숨깁니다. 페이지는 다음과 같이 표시됩니다:

이제 Fusion Builder로 페이지를 편집할 수 있습니다. 프론트엔드와 백엔드 모두 사용할 수 있지만, 프론트엔드의 미리보기가 100% 정확하지 않을 수 있어 백엔드 빌더를 사용했습니다.

두 개의 컬럼이 필요하며, 오른쪽 컬럼에는 GD > Map 요소를 추가하고, 왼쪽 컬럼에는 다음을 추가합니다:

조정이 필요한 유일한 옵션은 Map으로, 높이를 85vh로 설정해야 합니다. 스크롤 시 고정 맵 효과를 구현하기 위해 다음과 같은 플러그인을 사용했습니다: Sticky Menu (or Anything!) on Scroll Mark Senff 작성.

자체 커스텀 JS를 작성할 수도 있었지만, 이 플러그인은 가볍고 고정할 요소가 1개뿐이라면 완벽하게 작동합니다.

올바르게 설정하면 푸터가 나타날 때 지도도 함께 밀어 올립니다.

이 플러그인의 옵션으로 다음과 같이 설정했습니다:

Push-up Element 옵션은 고급 설정(Advanced Settings)에서 찾을 수 있습니다.

지금은 여기까지입니다.

이제 페이지는 다음과 같이 표시됩니다:

3 아카이브 항목 페이지 템플릿 편집

이제 각 리스팅의 디자인을 커스터마이즈해야 하며, 아카이브 항목 페이지 템플릿을 편집하여 이를 수행할 수 있습니다.

새로운 아카이브 항목 페이지 템플릿을 만들고 이름을 GD Archive Item-avada로 지정했습니다.

Fusion Builder 백엔드 편집기로 열고 다음 GD 요소들을 추가했습니다:

4 맞춤 CSS 추가하기

마지막으로, Airbnb 페이지처럼 보기 좋고 깔끔하게 만들기 위해 CSS가 조금 필요했습니다:

.geodir-post-title, .geodir-post-rating {clear: left;}
.geodir-field-amenities li::after,.geodir-field-how_many_guests::after,.geodir-field-how_many_rooms::after,.geodir-field-how_many_beds::after {content:" - ";}
.geodir-field-amenities ul {margin:0;padding:0}
.geodir-field-amenities li:last-child::after {content:"";}
.geodir-field-amenities li {list-style: none;float: left;}
.gd-badge-meta {display: block;margin-left: 0;clear: both;}

위의 CSS는 동일한 커스텀 필드가 있을 때만 작동하며, 다음과 같은 역할을 합니다:

이게 전부입니다. 결과는 여기에서 확인하세요:

Airbnb와 100% 동일하지는 않지만, 이걸 만드는 데 단 2시간밖에 걸리지 않았고, Avada 사용법도 거의 몰랐답니다.

GeoDirectory와 Fusion Builder로 어느 수준까지 커스터마이징이 가능한지 보여드리고 싶었습니다.

저희에게는 정말 인상적인 결과지만, 그렇지 않으시다면 어떤 점이 더 개선되었으면 하는지 알려주시겠어요?

댓글을 남겨 주시면 여러분의 의견을 꼭 듣고 싶습니다.

누군가 물어볼 것 같아서, 여기서 바로 답변드리겠습니다.

가격이 표시된 마커를 어떻게 만들었냐고요? 간단합니다. 다음과 같은 카테고리를 사용했습니다:

-아파트 (상위 카테고리)
–100 – 200 (하위)
–200 – 300 (하위)

각 가격대에 맞는 마커를 다음을 이용해 디자인했습니다: Photopea.com, 그리고 각 하위 카테고리에 해당 마커를 업로드했습니다.

리스팅을 추가할 때, 모든 지도에서 가격이 표시된 마커가 사용되도록 하위 카테고리를 기본 카테고리로 지정했습니다.

이 튜토리얼이 도움이 되셨으면 좋겠습니다.

관련 질문이 있으시면 아래 댓글로 남겨주세요!