Những thao tác cơ bản mà bạn thường xuyên gặp khi sử dụng plugin Beaver Builder để thiết kế website bằng cách kéo thả.
Mình sẽ gọi Beaver Builder là BB nhé!
1. Kích hoạt bản quyền Beaver Builder
Bấm vào Cài đặt > Beaver Builder
Bấm tiếp vào Giấy phép > Điền mã kích hoạt > Lưu khóa giấy phép
Điền mã kích hoạt bạn sẽ nhận được cập nhật đầy đủ và hỗ trợ từ Beaver Builder Team.
2. Tìm mã kích hoạt Beaver Builder ở đâu?
Truy cập vào trang đăng nhập Beaver Builder và điền tên tài khoản (hoặc email) và mật khẩu.
Sau đó vào trang này. Bạn sẽ thấy mã kích hoạt.
3. Bật Beaver Builder cho Bài viết/Custom Post Type
Mặc định Beaver Builder chỉ được bật cho Trang. Nếu bạn muốn bật cho Bài viết hoặc Custom Post Type, thì truy cập vào.
Bấm vào Kiểu bài > Đánh dấu vào Bài viết > Lưu thay đổi
4. Xóa Cache Beaver
Beaver Builder đã tích hợp sẵn công cụ xóa cache. Công cụ giúp bạn xóa Cache của rất nhiều plugin như Autoptimize, Breeze, WP Super Cache, W3 Total Cache, LiteSpeed Cache,…
5. Tìm hướng dẫn sử dụng Beaver Builder
Bạn có thể tìm thấy hướng dẫn sử dụng Beaver Builder tại Kb.WPBeaverbuilder.com – Ở đây có hầu hết hướng dẫn cơ bản và nâng cao về Beaver Builder. Mình thường xuyên vào đây tìm kiếm đầu tiên, khi gặp vấn đề!
Tiếp theo nếu bạn có câu hỏi, bạn có thể gửi Ticket cho Beaver Builder Team, nếu bạn đã mua plugin từ họ. Bạn truy cập vào trang này và đăng nhập để gửi Ticket nhá!
Bạn cũng có thể gửi câu hỏi vào rất nhiều nhóm trên Facebook, mà có “Beaver Users” hoạt động, ví dụ:
- Beaver Builders (14 000 thành viên)
- Beaver Builder Advanced
- PowerPack Beaver Builder Addon
- Beaver Builder Beginners
- Beaver Builder Cloudways Users Group
- Beaver Builder for Churchs
- Beaver Builder Việt Nam
Một kênh mình rất thích là Slack, bạn có thể tìm kiếm câu trả lời rất nhanh ở đây. Nếu bạn gửi câu hỏi vào buổi tối (giờ Việt Nam), bạn gần như có thể nhận được câu trả lời chỉ sau 5-10 phút.
Ở đây có rát nhiều thành viên tích cực và online suốt ở đây, ví dụ: @nomad411, @pross, @avanti, #bannerpenguin. Họ có thể trợ giúp bạn từ vấn đề cơ bản tới code. Tham gia ở đây!
6. Phân biệt Row, Column, Module, Template, Layout
Module là các khối chức năng (~40 khối): Văn bản, Nút bấm, Audio, HTML, Ảnh, Bản đồ, Slider bài viết, Form liên hệ, Form đăng ký,… Bạn có thể tìm thấy chúng ở Cài đặt > Beaver Builder > Module.
Hoặc bấm dấu cộng (+) góc phải phía trên.
Column là các cột trong một hàng…Bạn có thể tìm thấy chúng bằng cách bấm vào dấu cộng (+) ở góc phải phía trên khi mở Beaver Builder.
Row là các hàng, chứa cột. Nếu chỉ có một cột thì Row = Column luôn. Row được sử dụng khi bạn cần tạo ra các khối nội dung tách biệt trên web, ví dụ: Khối dịch vụ, Khối cảm nhận khách hàng, Khối Slider ảnh,….Mỗi khối bạn có thể sử dụng màu nền, ảnh nền….các định dạng hiển thị khác nhau.
Template là mẫu giao diện để bạn sử dụng cho bài viết, trang….Trong Template có thể chứa một hoặc nhiều Row. Bạn có thể tạo Template ở Beaver Builder > Template
Layout là template sử dụng cho Header, Footer, Bài viết, Trang, Sản phẩm, Danh mục….Ví dụ nếu bạn sử dụng Layout A cho Bài viết, thì tất cả bài viết sẽ có chung giao diện với nhau!
Để tạo Layout, bạn cần cài đặt thêm plugin Beaver Themer, và tạo ở Beaver Builder > Themer Layout.
Khi bạn làm việc với Beaver Builder, bạn sẽ hiểu rõ hơn về những điều trên, lý thuyết nó hơi mơ hồ xíu.
7. Lưu Hàng, Cột, Module
Khi bạn muốn tái sử dụng lại Module, Cột, Hàng để chèn vào vị trí khác, bạn có thể sử dụng tính năng lưu.
Beaver Builder cho phép 2 kiểu lưu.
- Lưu bình thường
- Lưu Global: Khi lưu và sử dụng module/cột/hàng tại nhiều vị trí trên web, sau này chỉ cần sửa một module, cột, hàng thì tất cả các module, cột, hàng giống nhau cũng bị thay đổi.
Save (Lưu) là Lưu bình thường. Save As (Lưu thành…) là lưu Global.
8. Sửa Responsive
Beaver Builder cho phép sửa giao diện trên cả 3 thiết bị là Máy tính, Máy tính bảng và Điện thoại, bạn chỉ cần bấm vào Sửa Responsive thôi!
Bấm vào mũi tên > Sửa Responsive
Bấm vào đó thì BB sẽ chuyển bạn về giao diện trên máy tính bảng để bắt đầu sửa.
Khi nào sửa xong thì bấm Thoát rồi lưu lại nhá.
9. Đăng giao diện
Bạn có thể bấm vào nút Xong (góc phải bên trên web) > Bấm Đăng
Hoặc bạn cũng có thể bấm vào mũi tên (bên trái phía trên) > Đăng Layout
10. Lưu nhưng không đăng giao diện
Nếu bạn chưa muốn đăng, mà chỉ lưu để sau này sửa tiếp, bạn có thể bấm vào Xong > Lưu bản nháp
Và lần sau bạn chỉ cần mở lại bài viết/trang/giao diện đó và sửa tiếp thôi!
11. Lỡ tắt Beaver Builder nhưng chưa kịp lưu?
Tương tự bài viết, BB cũng lưu giao diện thành nhiều bản. NHƯNG KHÁC với Bài viết, với mỗi lần bấm Xong > Đăng, thì giao diện sẽ được lưu thành một bản thảo, để bạn có thể xem xét sau này, CHỨ KHÔNG lưu tự động trong khi sửa như bài viết.
Và bạn sẽ thấy danh sách các bản lưu. Bấm vào bản lưu gần nhất, và hi vọng sẽ khôi phục được càng nhiều dữ liệu càng tốt.
12. Chèn mã CSS/JavaScript
Bạn có thể chèn mã CSS/JavaScript cho bài viết, trang, giao diện đang sửa, và CSS/JavaScript chỉ chạy ở trang đó.
Bạn cũng có thể chèn Facebook Livechat hoặc Google Analytics, Livechat ở đây. Mình cũng thi thoảng chèn kiểu này đấy!
Bấm vào mũi tên > Layout CSS/JavaScript (hoặc Mã CSS/JavaScript) > Điền CSS hoặc JavaScript tương ứng > Lưu
13. Danh sách phím tắt
BB có rất nhiều phím tắt để bạn thực hiện nhanh công việc, bấm vào Keyboard Shortcuts (Phím tắt) như hình để mở danh sách các phím tắt nhá.
14. Xem trước giao diện
Bấm vào mũi tên > Xem trước Layout > Bạn có thể bấm từng biểu tượng, giao diện trang đang sửa sẽ hiển thị tương ứng trên từng thiết bị > Bấm Tiếp tục sửa nếu bạn muốn thoát phần Xem trước.
15. Cài đặt giao diện
Những cài đặt này áp dụng cho cả trang web luôn nhé! Bạn có thể sửa Breakpoints, Cỡ chữ, khoảng cách mặc định, chèn CSS, JavaScript, chiều cao, chiều rộng tối đa….và rất nhiều thiết lập khác.
16. Sửa Breakpoint
Truy cập vào Cài đặt chung > Kéo xuống phần Breakpoint
Breakpoint thiết bị cỡ trung bình: Từ 992px trở xuống, BB sẽ chuyển website về giao diện của thiết bị cỡ trung bình (thường là máy tính bảng, iPAD, iPAD Pro…)
Breakpoint thiết bị cỡ nhỏ: Từ 768px trở xuống, BB sẽ chuyển website về giao diện của thiết bị cỡ nhỏ (thường là điện thoại như iPhone, Samsung,….)
Mình thường sử dụng Breakpoint lần lượt là 991px và 767px, bởi vì trình duyệt Chrome cũng sử dụng hai số đó, nên dễ kiểm tra CSS hơn!
17. Nhân đôi giao diện
Bấm vào mũi tên > Nhân đôi Layout
18. Xem hướng dẫn nhanh
BB có một phần hướng dẫn nhanh, nó sẽ tự động hiển thị các chuyển động lên màn hình, để bạn biết các thao tác cơ bản nhất. Rất hay.
Bấm vào mũi tên > Trợ giúp > Hướng dẫn nhanh
19. Tìm giao diện mẫu
BB có làm sẵn một số giao diện mẫu cho Page Template và Row. Bạn có thể truy cập tại
Với template thì là Template > Landing Page/Content Pages
Với Row sẽ là Hàng > Cột > Prebuilt Rows
Ngoài ra, bạn có thể cài đặt thêm plugin PowerPack for Beaver Builder và Ultimate Addons for Beaver Builder. Đây là hai plugin mở rộng tính năng cho BB, với rất rất nhiều giao diện mẫu.
Nếu bạn cần giao diện mẫu cho cả website, hãy nâng cấp lên GeneratePress Theme trả phí (khoảng 15 template), hoặc Astra Pro (khoảng >80 template cho BB).
20. Thêm nhiều Module cho BB
Hãy cài đặt thêm plugin PowerPack for Beaver Builder và Ultimate Addons for Beaver Builder. Hai plugin này có thêm gần 100 Module, rất mạnh, giúp bạn làm website mà không cần thao tác với CSS luôn!
21. Bật Font Awesome 5
Mặc định BB đã cài đặt sẵn Font Awesome 5, khi bạn sử dụng Module Icon, Icon Group hoặc Callout, và chọn icon trong thư viện Font Awesome, chúng sẽ hiển thị.
Tuy nhiên, nếu bạn sao chép mã Font Awesome, ví dụ…. và dán vào đâu đó. Chúng sẽ không hiển thị, và bạn cần chèn đoạn mã sau vào Giao diện > Sửa > functions.php
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'font-awesome-5' );
} );
22. Theme làm việc tốt với BB?
Bạn có thể sử dụng GeneratePress, Astra và OceanWP. Đây là 3 theme miễn phí được cộng đồng và cả Beaver Builder khuyên dùng.
Mình sử dụng GeneratePress (phiên bản miễn phí) cho tất cả dự án, và sử dụng theme này cho tất cả bài viết về Beaver Builder!
Ảnh đại diện: Amazon Rainforest/Pixabay