Kinh nghiệm làm web bất động sản với Beaver Builder

Cập nhật: 22/10/2019

Bài viết này sẽ chia sẻ một số kinh nghiệm để giúp bạn tạo website bất động sản như mẫu này, chỉ với WordPress và CSS.

Bài viết chỉ chia sẻ một số điều chủ chốt, với cách sử dụng plugin như nào, CSS như nào thì bạn nên biết/tự tìm hiểu thêm/hoặc bình luận ở cuối bài để được giải đáp.

Công cụ

Những công cụ mình đã sử dụng để tạo được website bất động sản như mẫu đầu bài.

1. GeneratePress Theme (Free)

GeneratePress là theme miễn phí, được rất nhiều web sử dụng, và nó cũng được khuyên dùng bởi Beaver Builder Team.

2. Beaver Builder & Beaver Themer ($$)

Hai công cụ chủ chốt để tạo nên toàn bộ giao diện website như

  • Header
  • Footer
  • Layout bài viết, chuyên mục, trang dự án,…
  • Layout trang kết quả tìm kiếm
  • ….

3. CPT UI (Free)

Công cụ miễn phí để tạo thêm kiểu bài: Bất động sản, cho phép bạn đăng các dự án bất động sản.

4. Advanced Custom Field ($$)

Công cụ tạo ra các trường thông tin bổ sung cho dự án như: Diện tích mặt bằng, Số tầng, Phòng ngủ, Giá,…

Bạn có thể sử dụng phiên bản miễn phí hoặc trả phí. Ở đây mình sử dụng bản trả phí $25.

5. Ajax Search Pro ($$)

Công cụ tạo ra tìm kiếm và bộ lọc tìm kiếm cho website. Rất mạnh và tài liệu hướng dẫn rất chi tiết.

Bạn cần sử dụng phiên bản trả phí $36. Phiên bản miễn phí mình chưa sử dụng, nên không biết nó có đáp ứng được nhu cầu không.

6. Caldera Forms (Free)

Công cụ miễn phí tạo ra form gửi yêu cầu mua/bán ở phía bên phải web

Một số kinh nghiệm

1. Tạo Sticky Menu

Như web mẫu, khi cuộn chuột, menu sẽ đính lên đầu web.

Để tạo hiệu ứng này bạn cần xem lại cách tạo Header.

Header bao gồm: Top bar (thanh xám trên cùng) – Logo & Ảnh – Menu.

Bạn chỉ cần cho Header là Menu. và Part là Logo & Ảnh và thanh màu xám.

Và nhớ chọn Yes ở mục Sticky của Header.

Part có vị trí là Before Header (tức là phía trên Header)

2. Tạo thanh tìm kiếm ở Menu

Bạn có thể sử dụng module Search Widget trong Beaver Builder để tạo. Tuy nhiên ở đây mình sử dụng plugin Ajax Search Pro, để đồng bộ với bộ lọc bên dưới menu luôn.

Đầu tiên bạn vào Ajax Search Pro > Đặt tên > Bấm Add để tạo thanh tìm kiếm

Tiếp bấm vào General Options > Sources > Kéo kiểu bài từ bên trái qua phải.

  • Nếu bạn muốn thanh tìm kiếm chỉ tìm ở bài viết, thì kéo Bài viết qua
  • Nếu bạn muốn thanh tìm kiếm chỉ tìm ở trang, thì kéo Trang qua
  • ….

Ở đây mình kéo phần Bất động sản, là nó sẽ tìm tất cả bài bất động sản thôi, không hiển thị bài viết, trang…

Kéo xuống dưới, công cụ cho phép tìm kiếm ở tiêu đề, hoặc nội dung, hoặc tóm tắt….ở đây mình chỉ chọn tìm ở tiêu đề thôi nên chọn là Search in Title

Tiếp bấm vào Logic & Behavior > Chọn Off ở Trigger live search when changing a facet on settings 

và phần dưới, là cho phép thiết lập hiển thị kết quả ở trang hiện tại, trang kết quả tìm kiếm hoặc trang tùy chỉnh.
Ở tùy chọn dưới “Override the…” cho phép bạn hiển thị kết quả tìm kiếm bằng giao diện tạo bởi Beaver Builder.
Tiếp vào Frontend Search Settings > General > Tắt tùy chọn ở 
  • Show search settings switch on the frontend?: tức là tắt cái icon thiết lập bên phải icon tìm kiếm
  • Set the search settings to visible by default?: tức là tắt phần thiết lập (nếu bật thì nó sẽ hiện thêm 1 đống tùy chọn, rất xấu)

Để đổi dòng chữ “Search…” bạn truy cập vào Layout Options > Search box layout > Search box placeholder text

và bấm vào Theme & Styling để tùy chỉnh màu sắc, viền, icon…của thanh tìm kiếm

Để lưu lại tất cả biết lập, bấm Save all tabs. Để xem trước, trước khi lưu, bấm vào Show

3. Tạo bộ lọc tìm kiếm

Tạo bộ lọc tương tự với tạo thanh tìm kiếm, chỉ là chúng ta sẽ ẩn đi mục gõ tìm kiếm, và tạo thêm các dropdown.

Cách làm tương tự, để ẩn đi thanh tìm kiếm thì bạn vào Layout Options > Search box layout > Hide the search box completely, display settings only?

Để thêm nút Tìm kiếm, bạn vào Frontend Search Settings > Search Button

  • Display a search button within the settings drop-down?
  • Action when pressing the button – Redirect to: Results page – location: Use same tab
  • Button text

và bạn có thể tùy chỉnh màu sắc, font chữ….nữa..

Để thêm được icon vào trước text Tìm kiếm, bạn sử dụng Font Awesome 5 cú pháp :after hoặc before nhá.

Tiếp theo đến phần quan trọng nhất là hiển thị chuyên mục vào bộ lọc.

Bấm vào Frontend Search Settings > Categories & Taxonomy Terms > Đánh dấu vào Display the category/terms selectors?

Tại Select the taxonomy, hãy chọn danh mục bạn muốn đưa vào bộ lọc > Plugin sẽ hiển thị tất cả danh mục, danh mục con ở ô bên trái > Kéo các mục từ bên trái qua phải.

 

để tạo được như ảnh dưới này, thì bạn bấm vào Change display mode

Điền thông tin (nhớ kéo chuột tới mục tương ứng để điển cho đúng nhá, muốn sửa mục bất động sản thì kéo tới bất động sản,…)

  • Box header: không điền gì hết
  • Display as: Drop-down, Choose one/Any option
  • Display the “Choose one/Any option: đánh dấu
  • Text: điền dòng chữ bạn muốn

Sau đó Save Tabs để lưu lại thôi.

Và bước cuối là tạo giao diện trang kết quả tìm kiếm. Bấm vào Beaver Builder > Themer Layout > Add New > Chọn kiểu Layout là Archive

LocationSearch Results (kết quả tìm kiếm).

Và chỉnh sửa thôi. Nhớ là nếu bạn sử dụng Post Module thì phải chọn Content (Nội dung) là Main Query (Query chính) nhá.

4. Tạo Form yêu cầu mua – bán

Bạn sử dụng Caldera Forms để tạo Form. Lưu ý một số điều sau:

Với phần mô tả phía trên form, sử dụng HTML Field.

Với phần danh mục (kết nối tự động với danh mục trong WordPress), sử dụng Dropdown Select Field

Để kết nối field với danh mục, đánh dấu vào Auto Populate > Chọn Taxonomy (tại Source) > và chọn Danh mục cụ thể (tại Taxonomy).

5. Tạo khối dự án

Web có nhiều khối dự án khác nhau. Nhưng tất cả đều chỉ sử dụng Post Module (Module bài viết) với Custom Layout.

Ví dụ như khối này

Các mục như DTMB, Hướng, Giá là mình sử dụng Advanced Custom Field để tạo.

Sử dụng Post Module để tạo giao diện

  • Layout: Cột (Column)
  • Post Layout: Custom
  • Cột (bên dưới mục Cân bằng chiều cao): gõ 1 số bất kỳ để chia cột

 

và mục Nội dung (Content)

  • Nguồn: Query tùy chỉnh
  • Kiểu bài: BĐS

Và phần Custom Layout thì mình sử dụng HTML + ACF Field

Sau đó sử dụng CSS để tiến hành định dạng cho cả khối Post Module.

Đó là một số kinh nghiệm. Nếu bạn gặp vấn đề khi tạo web bất động sản với Beaver Builder, hoặc băn khoăn phần nào trong bài viết này.

Hãy bình luận ở dưới để được giải đáp nhé!

Đặt câu hỏi nào!!!

avatar
  Nhận thông báo  
Thông báo về