Hướng Dẫn Sử Dụng Một Số Thao Tác Cơ Bản Với Beaver Builder

Là một trong những Page Builder đang được sử dụng khá phổ biến. Hôm nay tôi sẽ hướng dẫn sử dụng Beaver Builder chi tiết. Cùng khám phá ngay sau đây nhé!

WP Beaver Builder cho phép bạn tạo một trang Web WordPress chuyên nghiệp trong vài phút. Đây là trình tạo trang được nhiều người dùng sử dụng hiện nay, trong đó có tôi. Sau thời gian dài trải nghiệm, tôi xin chia sẻ hướng dẫn sử dụng Beaver Builder để bạn có thể tận dụng nền tảng này hiệu quả hơn.

Có thể bạn quan tâm:

Tìm hiểu chi tiết những Module chính của Beaver Builder

Những Page Builder đáng dùng nhất thời điểm hiện tại

Khởi chạy trình chỉnh sửa Beaver Builder

Tôi sẽ hướng dẫn bạn khởi chạy trình chỉnh sửa Beaver Builder từ cả trình chỉnh sửa khối (Block Editor), trình chỉnh sửa cổ điển (Classic Editor) của WordPress, và cả từ các vị trí khác trong bảng quản trị hoặc thanh quản trị WordPress.

Khởi chạy từ trang chỉnh sửa WordPress (WordPress Editing Page)

• Đối với trình chỉnh sửa khối: Khi tạo một trang hoặc mở một trang hiện có trong trình chỉnh sửa khối của WordPress, bạn sẽ thấy hai lựa chọn. Đó là Khởi chạy Beaver Builder (Launch Beaver Builder) hoặc Sử dụng Trình chỉnh sửa tiêu chuẩn (Use Standard Editor).

• Trong Classic Editor UI: Bạn tạo một trang mới và nhấp vào Tab Beaver Builder hoặc mở một trang hiện có để chỉnh sửa trong WordPress. Sau đó, bạn nhấp vào Launch Beaver Builder trên Tab Beaver Builder.

Khởi chạy từ danh sách Tất cả các trang (All Pages List)

Với tôi thì cách khởi chạy này là đơn giản nhất và bất kỳ ai cũng có thể thực hiện dễ dàng. Bạn chỉ cần di chuyển chuột đến Pages => All Pages List. Sau đó, bạn nhấp vào liên kết Beaver Builder là hoàn thành.

Hướng dẫn khởi chạy Beaver Builder từ thanh quản trị WordPress

Nếu bạn đang xem một trang và đã đăng nhập, thanh quản trị (Admin Bar) sẽ xuất hiện trên màn hình. Bạn có thể nhấp vào liên kết Beaver Builder để chỉnh sửa trang.

Khi Beaver Builder Layout đã được tích hợp vào trang, liên kết Beaver Builder sẽ hiển thị màu xanh lục. Còn nếu Beaver Builder chưa được khởi chạy, nút này sẽ có màu xám nhạt.

Giao diện người dùng (UI)

Tiếp đến, tôi sẽ hướng dẫn sử dụng Beaver Builder với giao diện người dùng (UI). Khi mở một trang để chỉnh sửa trong Beaver Builder, bạn sẽ thấy giao diện như hình dưới đây.

Tôi sẽ giải thích chi tiết hơn nhé. Các số sau tương ứng với ảnh chụp màn hình ở trên.

Các vị trí từ 1-6

• Số 1 là thanh tiêu đề, hiển thị những gì bạn đang chỉnh sửa và tiêu đề của nó.
• Số 2 là mũi tên để mở rộng menu Công cụ.
• Vị trí thứ 3 là biểu tượng thông báo. Bạn nhấp vào đây để mở thông báo về tin tức từ Beaver Builder.
• Số 4 là trạng thái chỉnh sửa: Khu vực này sẽ trống khi bạn chưa thực hiện chỉnh sửa nào. Khi có thay đổi, nó sẽ hiển thị là Đã chỉnh sửa (Edited).
• Khu vực được đánh dấu số 5 là Icon để hiển thị / ẩn Content Panel: Bạn chỉ cần nhấp vào + để mở rộng và x để đóng.
• Ở vị trí số 6 là nút hoàn tất: Bạn nhấp vào nút này để xác nhận hoàn thành bài viết, để mở lựa chọn Hủy, Lưu bản nháp, hoặc Xuất bản,…

Các vị trí từ 7-13

• Vị trí số 7 là Drag Icon: Bạn nhấn và giữ chuột trái vào biểu tượng này để kéo bảng nội dung (Content Panel) vào bất kỳ đâu trên màn hình.
• Khu vực số 8 là lựa chọn nhóm trong Tab: Mỗi tab (# 9-12) được tổ chức thành các nhóm. Bạn nhấp vào Group Box để điều hướng đến các nhóm khác trên Tab đó.
• Vị trí số 9 là biểu tượng tìm kiếm (chỉ với Tab Module): Bạn nhấp để mở rộng hộp tìm kiếm và bắt đầu nhập bất kỳ phần nào của tên Module.
• Số 10 là Tab Module: Có ba nhóm nhỏ là Module tiêu chuẩn (được tích hợp sẵn), các tiện ích WordPress có thể được sử dụng như Module, các Module đã lưu.
• Khu vực số 11 là Tab Row.
• Số 12 là Templates Tab hiển thị các mẫu bố cục dựng sẵn. Bạn chỉ cần nhấp vào bất kỳ mẫu nào để chèn nó vào Layout của bạn.
• Vị trí số 13 là Tab đã lưu: Hiển thị tất cả các mục đã lưu của bạn được nhóm thành hàng, cột và Module.

Khu vực số 14

Khu vực này là Menu công cụ. Tôi sẽ hướng dẫn chi tiết hơn cách sử dụng Menu công cụ trong nội dung bên dưới.

Như đã nói ở trên, tôi sẽ hướng dẫn sử dụng Beaver Builder với Menu công cụ cho bạn. Bạn mở Menu công cụ bằng cách nhấp vào mũi tên trên thanh tiêu đề trang ở góc trên bên trái của màn hình chỉnh sửa.

Ở bên phải của mỗi mục Menu là biểu tượng phím tắt để truy cập vào nó. Các ký hiệu sẽ dựa trên hệ điều hành máy tính của bạn. Menu này có các lựa chọn như tôi liệt kê bên dưới.

Publish Layout

Bạn có thể xuất bản bố cục mà không cần đóng trình chỉnh sửa Beaver Builder.

Lưu mẫu (Save Template)

Với lựa chọn này, bạn có thể lưu bố cục trên trang hiện tại dưới dạng Template.

Duplicate Layout

Phần này cho phép sao chép toàn bộ trang và tất cả siêu dữ liệu từ Back End, bao gồm cả dữ liệu Yoast SEO. Ngoài ra, bạn còn có thể tạo và mở một trang hoặc bài đăng mới có “Copy” trong tiêu đề.

Preview Layout (Xem trước bố cục)

Tại đây, bạn có thể mở màn hình xem trước nội dung trang dưới dạng thiết bị nhỏ, vừa hoặc lớn. Bạn nấp vào Tiếp tục chỉnh sửa để quay lại màn hình chỉnh sửa Beaver Builder.

Responsive Editing

Bạn có thể chỉnh sửa bố cục trực tiếp trong chế độ xem thiết bị vừa hoặc nhỏ. Nếu muốn quay lại chỉnh sửa màn hình lớn, bạn nhấp vào Thoát.

Layout CSS và JavaScript

Một cách nhanh chóng để thêm CSS và JavaScript là bạn chỉ cần Apply cho trang đang được chỉnh sửa. Bạn có thể chỉ định ID hoặc lớp tùy chỉnh trên Tab Nâng cao của bất kỳ hàng, cột hoặc Module nào. Sau đó, bạn sử dụng nó trong quy tắc CSS của bạn.

Global Settings

Hầu hết các cài đặt Beaver Builder Editor có thể bị ghi đè trên các trang riêng lẻ. Ngoài ra còn có một Tab CSS và JavaScript để nhập CSS và JavaScript sẽ áp dụng cho bố cục nội dung trên toàn bộ trang Web của bạn. Nếu bạn thêm bất kỳ CSS hoặc JavaScript tùy chỉnh nào vào mục Menu này, một chấm màu xanh lá cây hiển thị.

Thay đổi độ sáng giao diện người dùng

Tùy chọn này là một công tắc thay đổi giao diện người dùng từ sáng (mặc định) sang tối và ngược lại.

WordPress Admin

Việc chọn tùy chọn này sẽ mở ra một Submenu với các phím tắt để truy cập các điểm phổ biến trong WordPress Admin bằng cách mở một Tab trình duyệt mới.Chúng bao gồm Edit Page (chỉnh sửa trang), Dashboard, Manage Templates và Customize Theme.

Trợ giúp

Bạn có thể phát Video giới thiệu hoặc nhấp vào liên kết đến Beaver Builder Knowledge Base hoặc Beaver Builder Support. 

Phím tắt

Bạn có thể xem danh sách các phím tắt dễ dàng. Tuy nhiên tôi muốn lưu ý rằng các phím tắt được hiển thị bằng chữ hoa, nhưng các phím tắt thực tế là chữ thường nhé.

Hiển thị hoặc ẩn tiêu đề trang WordPress

Khi tôi sử dụng Theme Beaver Builder, tiêu đề mà tôi gán cho trang trong WordPress sẽ ẩn trên các trang có bố cục Beaver Builder theo mặc định. Để hiển thị tiêu đề tôi phải điều chỉnh thủ công. Tôi sẽ hướng dẫn sử dụng Beaver Builder để bạn hiển thị hoặc ẩn tiêu đề trang WordPress đơn giản.

• Đầu tiên, bạn nhấp vào thanh tiêu đề ở góc trên bên trái để hiển thị Menu công cụ. Sau đó, bạn chọn Global Settings hoặc sử dụng phím tắt ⌘ + U (Mac) hoặc Ctrl + U (Windows).
• Trên Tab Chung, bạn điều hướng đến phần Tiêu đề trang mặc định (Default Page Heading).
• Để hiển thị tiêu đề trang WordPress, bạn hãy đặt Show thành Yes. Để ẩn tiêu đề trang mặc định, hãy đặt Show thành No.
• Tiếp đến, bạn nhấp vào Lưu.
• Nếu bạn không thấy sự thay đổi nào, hãy thử xuất bản, lưu hoặc tải lại trang trong trình duyệt nhé.

Căn chỉnh theo chiều ngang

Tiếp theo là hướng dẫn sử dụng Beaver Builder để căn chỉnh theo chiều ngang mà tôi cho là khá quan trọng. Bởi khi soạn thảo văn bản, bạn cần căn chỉnh để nó hiển thị đẹp mắt hơn đối với người dùng.

Bạn có thể căn chỉnh văn bản, hình ảnh theo chiều ngang bằng cách nhấp vào các biểu tượng căn trái, giữa hoặc phải. Đối với văn bản, cài đặt căn chỉnh theo chiều ngang thường nằm trong phần Typography=> Font trên Tab Style. Đối với các phần tử khác, chẳng hạn như Module ảnh, cài đặt sẽ xuất hiện trong trường Align trên Tab Style.

Trong hầu hết các trường hợp, giao diện căn chỉnh IU mới cũng có biểu tượng đáp ứng, tương thích cho các thiết bị khác nhau để bạn có thể đặt căn chỉnh theo kích thước thiết bị.

Chỉnh sửa nội tuyến

Để chỉnh sửa nội tuyến, bạn hãy di chuyển con trỏ vào Module bạn muốn chỉnh sửa và nhấp vào. Thanh công cụ sẽ thay đổi thành các biểu tượng chỉnh sửa khác nhau tùy thuộc vào loại Module bạn đang chỉnh sửa. Đối với Module mới, hãy kéo nó vào bố cục của bạn như bình thường, sau đó nhấp vào bên trong Module trống trong bố cục.

Bất kỳ Module nào có chứa trường văn bản hoặc vùng soạn thảo văn bản đều có thể được chỉnh sửa nội tuyến. Tôi sẽ liệt kê một số ví dụ dưới đây nhé.

• Module Button: Bạn có thể chỉnh sửa văn bản trong nút.
• Module chú thích (Callout): Bạn có thể chỉnh sửa tiêu đề, vùng văn bản và văn bản Call To Action nếu bạn đã chọn Text thay vì một nút.
• Module đếm số: Bạn có thể chỉnh sửa cả văn bản và số nội tuyến.

Hướng dẫn sử dụng Beaver Builder để hoàn tác và làm lại

Trình chỉnh sửa Beaver Builder theo dõi các thay đổi chỉnh sửa trong Beaver Builder trong lịch sử, được ghi lại ở mức độ chi tiết sau:

• Đối tượng: Hàng, cột, Module, các mẫu bố cục và các hàng dựng sẵn, các hàng, cột hoặc Module đã lưu.
• Các hành động: Thêm, biên tập, xóa bỏ, di chuyển, tạo bản sao.

Bạn có thể hoàn tác và làm lại bằng cách vào lịch sử trong Menu công cụ hoặc bằng cách sử dụng phím tắt.

• Truy cập lịch sử để hoàn tác và làm lại:
  • Đầu tiên, bạn nhấp vào lịch sử trong Menu công cụ.
  • Bạn nhấp vào bất kỳ mục nào được liệt kê trong lịch sử và hoàn nguyên về bố cục tại thời điểm trước đó. Bạn có thể tiếp tục nhấp vào lịch sử tại các điểm khác nhau để hoàn tác hoặc khôi phục bố cục.
  • Khi bạn hoàn tất, hãy nhấp vào Xong, sau đó nhấp vào Xuất bản, Lưu dưới dạng bản nháp hoặc Hủy.

• Sử dụng phím tắt: Bạn có thể sử dụng phím tắt để lùi hoặc tiến qua các mục được liệt kê trong Công cụ=> Lịch sử . Các tổ hợp phím tùy thuộc vào hệ điều hành của bạn, như sau hoặc trong trình chỉnh sửa Beaver Builder, bạn có thể tìm thấy chúng tại Công cụ=> Phím tắt.

Sao chép và dán Module hoặc kiểu Module

Hướng dẫn sử dụng Beaver Builder để sao chép và dán Module/kiểu Module cũng khá đơn giản. Bạn có thể thực hiện ngay sau khi đọc nội dung tôi đã chọn lọc sau. 

Bạn có thể xuất/sao chép bất kỳ cài đặt hoặc kiểu dáng của Module nào vào khay nhớ tạm. Sau đó, bạn có thể dễ dàng dán chúng vào một Module khác trong cùng một bố cục hoặc bất kỳ bố cục Beaver Builder nào khác trên Internet. Chức năng này nằm trong phần Xuất / Nhập của Tab Nâng cao của mọi Module.

Để xuất cài đặt hoặc kiểu của Module, bạn mở một Module để chỉnh sửa. Trên Tab Nâng cao trong phần Xuất / Nhập, bạn bấm Sao chép Cài đặt hoặc Sao chép Kiểu để sao chép chúng vào khay nhớ tạm.

Để dán / nhập vào Module khác, bạn tạo hoặc mở Module đích để chỉnh sửa. Tuy nhiên, tôi muốn nhắc bạn rằng Module này phải cùng loại với Module bạn đã sao chép. Tiếp đến, trên Tab Nâng cao trong phần Xuất / Nhập, bạn hãy dán nội dung khay nhớ tạm vào trường Nhập. Cuối cùng, bạn nhấp vào Nhập (Import). 

Sao chép bố cục Beaver Builder của bạn sang một trang khác

Bạn có thể sao chép bất kỳ bố cục Beaver Builder nào sang một trang mới có cùng bố cục và siêu dữ liệu. Nhưng tôi muốn cảnh báo với bạn là không nên sử dụng các Plugin trùng lặp để sao chép các trang có bố cục Beaver Builder.

Sau khi bạn đã sao chép bố cục, một trang mới sẽ tự động được tạo và mở ra để chỉnh sửa. Trang mới có tiêu đề và Slug ban đầu sau đây (bạn có thể sửa đổi):

• Title: Copy Of <Original Page Title>.
• Slug: <Original-Slug-Title>-Copy.

Hành động này sao chép toàn bộ trang và tất cả siêu dữ liệu từ Back End, bao gồm cả dữ liệu Yoast SEO.

Để sao chép bố cục Beaver Builder, bạn mở trang mình muốn nhân bản trong Beaver Builder. Sau đó, bạn nhấp vào mũi tên ở phía trên bên trái của Top Bar để mở Menu công cụ. Bạn tiếp tục bấm vào Duplicate Layout và một trang mới sẽ mở ra trong trình chỉnh sửa WordPress. Kế đến, bạn đổi tên tiêu đề trang và Slug trên trang mới rồi nhấp vào Xuất bản. Nếu bạn không nhấp vào Xuất bản và rời khỏi trang thì nó sẽ được lưu dưới dạng bản nháp. Cuối cùng, bạn nhấp vào Khởi chạy Beaver Builder để bắt đầu chỉnh sửa nội dung và bố cục trên trang mới.

Hướng dẫn sử dụng Beaver Builder để xóa một Module hoặc cột

Bạn có thể xóa một Module và rời khỏi cột hoặc bạn có thể xóa một cột dễ dàng. Tuy nhiên, thao tác này cũng xóa nội dung của cột. Tôi có một Tip muốn chia sẻ với bạn là việc xóa cột, cột con có thể phức tạp và không thể hoàn tác. Để an toàn, bạn nên lưu công việc trước khi xóa để có thể hoàn nguyên nếu có lỗi xảy ra. Bạn cũng nên xóa các Module trước rồi đến các cột trống sau để an toàn hơn.

Xóa một Module và để lại cột

Nếu bạn xóa một Module khỏi cột có nhiều hơn một Module, các Module khác sẽ vẫn còn trong cột. Nếu bạn xóa một Module duy nhất trong cột thì sẽ còn lại một cột trống.

• Bạn di chuột qua Module để hiển thị các tùy chọn.
• Tiếp theo, bạn nhấp vào X để xóa Module hoặc nhấp vào biểu tượng bánh Hamburger, sau đó nhấp vào Xóa.
• Cuối cùng, hãy xác minh rằng bạn muốn xóa Module.

Xóa một cột trống

• Đầu tiên, bạn di chuột qua cột để hiển thị các tùy chọn.
• Bạn Click vào X để xóa cột hoặc nhấp vào biểu tượng bánh Hamburger và nhấp vào Xóa .
• Tiếp theo, bạn cần xác minh rằng bạn muốn xóa cột.

Xóa một cột hoặc cột con và nội dung của nó

Khi bạn xóa một cột hoặc cột con, nội dung của cột cũng sẽ bị xóa. Tôi muốn chia sẻ với bạn một bí quyết nhỏ đối với nội dung này. Bạn nên di chuột qua tùy chọn Delete Column trước khi nhấp vào nó. Phạm vi của những gì sẽ bị xóa sẽ được tô màu xanh lam. Hoặc để an toàn hơn, bạn hãy xóa các Module riêng lẻ thay vì các cột bằng cách sử dụng lệnh Xóa trong tùy chọn Module. Sau đó, bạn có thể xóa bất kỳ cột trống nào.

Tiếp theo, tôi sẽ hướng dẫn bạn cách xóa cột chính hoặc cột con và nội dung của nó:

• Bạn di chuột qua một trong các Module để hiển thị các tùy chọn.
• Sau đó, bạn Click vào Chỉnh sửa cột và di chuột qua Xóa cột. Nếu bạn thấy biểu tượng bánh Hamburger, hãy nhấp vào biểu tượng đó và di chuột qua cột Chỉnh sửa và cột Xóa. Khu vực cần xóa sẽ được tô màu xanh lam.
• Cuối cùng, bạn nhấp vào Xóa cột để xóa khu vực được tô màu xanh lam.

Lưu, xuất bản, hủy

Trong đề mục này, tôi sẽ hướng dẫn sử dụng Beaver Builder để lưu, xuất bản và hủy khi bạn làm việc trên trang.

Tự động lưu trong khi bạn làm việc

Các thay đổi trong trình chỉnh sửa Beaver Builder được tự động lưu ngay cả trước khi bạn lưu hoặc xuất bản toàn bộ trang. Nếu trình chỉnh sửa bị treo trước khi tác phẩm của bạn được lưu hoặc xuất bản, bạn thường có thể tải lại trang an toàn trong trình duyệt của mình. Ngoài ra, bạn có thể chỉnh sửa cài đặt cho hàng, cột và Module rồi mở bất kỳ hàng, cột hoặc Module nào khác để chỉnh sửa mà không cần nhấp Lưu .

Khi bạn chỉnh sửa Layout của mình, bạn sẽ thấy trình tự Lưu – Đã lưu – Đã chỉnh sửa xuất hiện ở góc trên bên phải của màn hình.

Thao tác sau khi bạn chỉnh sửa xong

Khi bạn chỉnh sửa xong một trang trong Beaver Builder, hãy nhấp Xong (Done) ở góc trên bên phải. Sau đó, bạn chọn một trong các tùy chọn xuất bản, lưu bản nháp, loại bỏ, hoặc hủy.

Xuất bản (Publish)

Đây là tùy chọn để các thay đổi chính thức hiển thị trực tiếp trên trang. Lúc này, mọi người có thể thấy các thay đổi của bạn. Tôi tiếp tục có một Tip muốn chia sẻ với các bạn. Để xuất bản Layout của bạn mà không cần đóng trình chỉnh sửa, hãy sử dụng Publish Layout trong Menu công cụ.

Lưu bản nháp (Save Draft)

Bạn có thể lưu trang dạng Save Draft và thoát khỏi trình chỉnh sửa Beaver Builder. Lúc này, những thay đổi được thực hiện trong phiên chỉnh sửa đó sẽ không hiển thị trừ khi bạn mở và chỉnh sửa trong Beaver Builder.

Loại bỏ (Discard)

Với tùy chọn này, bạn sẽ hủy bỏ tất cả các thay đổi được thực hiện hoặc lưu kể từ lần cuối cùng trang được xuất bản. Điều này bao gồm tất cả công việc đã lưu nhưng chưa được xuất bản từ các phiên trước.

Hủy (Cancel)

Thao tác này sẽ đưa bạn trở lại trang chỉnh sửa.

Kết luận

Nhìn chung, tôi đánh giá Beaver Builder là một trình tạo trang tuyệt vời với giao diện hấp dẫn, dễ sử dụng. Sau khi cài đặt Beaver Builder, chúng ta có thể thêm các tiện ích mở rộng để hoàn thiện hơn cho trang Web WordPress của mình.

Có thể bạn quan tâm:

Hosting WordPress – giải pháp tối ưu nhất dành cho các Website nền tảng WordPress

Nội dung trên chỉ là hướng dẫn sử dụng Beaver Builder cho các thao tác cơ bản. Theo dõi Blog của tôi để xem bài viết về các tính năng chuyên sâu hơn trong thời gian tới nhé. Nếu bạn vẫn còn thắc mắc về Plugin Beaver Builder, hãy cho tôi biết trong phần bình luận!