Bạn có thể làm gì với Beaver Builder?

Cập nhật: 18/06/2019

Đây là bài viết giới thiệu chung về plugin Beaver Builder, Theme Beaver Builder và một chút về plugin Beaver Themer.

Plugin & Theme & Beaver Themer

Hình ảnh bên dưới là đại diện chung cho các phần trên một website WordPress.

Phần màu tối (Header, Sidebar, Footer) đó chính là Theme quy định.

Phần màu cam (Content Area) là phần mà bạn có thể chỉnh sửa bằng BB Plugin.

file-y7dfynQTZ5

Plugin Beaver Builder cho phép:

  • Beaver Builder cho phép chỉnh sửa nội dung của Content Area. Nói đơn giản hơn chính là nội dung của bài viết, trang, sản phẩm (không bao gồm Tiêu đề). Mặc dù mặc định Beaver chỉ được bật cho Trang, bạn có thể bật nó cho cả Bài viết, Sản phẩm…(Cài đặt > Beaver Builder > Post Type).
  • Theme WordPress kiểm soát các thành phần như header, footer, sidebar. Với một bài viết, nó còn kiểm soát cả Tên bài, Tác giả, Ảnh đại diện, Chuyên mục và nhiều thứ khác. Tùy từng Theme cụ thể, mà bạn có thể ẩn bất kỳ thành phần nào trong đó, ở một bài viết, trang cụ thể.
  • Beaver Themer cho phép bạn tạo mới các thành phần bên ngoài Content Area, bao gồm Header, Footer, Sidebar,…và có thể thiết lập điều kiện chỉ áp dụng cho một số bài/trang được chọn. Nhớ Beaver Themer là một plugin mở rộng của Beaver, và bạn cần mua riêng.

Các phần tiếp theo đây sẽ nói chi tiết hơn một chút về Beaver Builder.

Beaver Builder Plugin

Beaver Builder cho phép bạn sửa từ bên ngoài giao diện website, và xem cách chúng hiển thị ngay khi sửa luôn. Bạn có thể bắt đầu bằng cách chọn 1 Template, hoặc là tạo từ đầu, và thêm các module, cột, hàng…để được như ví dụ dưới.

file-D1nOx2WM2l

Template Layout, Prebuilt Rows hoặc trang trắng

Khi bạn mới tạo một trang WordPress, bạn sẽ thấy nút sau.

file-NzOftx4aF3

Hoặc nó sẽ hiển thị như sau, nếu bạn sử dụng WordPress 4.x, hoặc đang tắt trình soạn thảo mới của WordPress.

file-yTL1Ay2dpT

Ở trang chỉnh sửa với Beaver, bạn sẽ thấy một thanh nằm phía trên. Bấm vào dấu cộng (+) ở góc phải phía trên, để bắt đầu làm việc với Beaver.

Bấm vào Templates > Chọn bất kỳ một template có sẵn của Beaver và bắt đầu chỉnh sửa

file-6TsCmWTyoK

Hoặc thêm vào một hàng đã được tạo sẵn (prebuilt rows) (Rows > Group > Prebuilt Rows), chỉ cần kéo nó ra ngoài và chỉnh sửa.

file-VeyXdWn8oz

Bạn cũng có thể bắt đầu từ số 0 bằng cách bấm vào Modules > Kéo các module ở khung chọn vào bên trái.

file-ZaNIpMkN0l

Bấm vào Tools > Help. Đã có một video hướng dẫn ở đó.

Layout cơ bản

Khi bạn kéo một module ra ngoài, các hàng và cột sẽ được tạo tự động. Khi layout trở nên phức tạp hơn, với các cột nằm trong cột, việc kéo và sắp xếp các hàng/cột trước, sau đó mới kéo module sẽ dễ dàng hơn nhiều.

Ví dụ đây là một hàng (Row) với 3 lớp cột (1 cột, 3 cột, 2 cột)

file-QGoyIHRuu2

Trong ảnh phía trên, 3 lớp cột ở trong một Hàng (Row), nhưng bạn cũng có thể kéo chúng vào 3 Hàng riêng biệt.

file-2dyrq7wdN3

Responsive

Responsive là co dãn website trên nhiều thiết bị khác nhau: máy tính, máy tính bảng, điện thoại…

Beaver Builder cho phép bạn chỉnh sửa website trên cả máy tính, máy tính bảng và điện thoại.

Lưu Layout Beaver Builder để sử dụng chỗ khác

Bạn có thể lưu Template, Hàng (Row), Cột (Column), Module và sử dụng chúng ở các vị trí khác trên web.

Đặc biệt bạn cũng có thể lựa chúng trở thành Global Module/Row/Column, và chỉ cần sửa ở một nơi, tất cả các vị trí khác có sử dụng thành phần đó sẽ tự động thay đổi theo.

Nếu bạn sử dụng Beaver Builder phiên bản Agency, bạn còn có thể đổi tên plugin Beaver Builder. Với các phiên bản khác, bạn có thể thiết lập chỉ cho phép chỉnh sửa Template cho những quyền tài khoản nào (Quản trị, Biên tập, Tác giả,…)

Layout Beaver Builder cho Bài viết

Mặc định, Beaver Builder chỉ được bật cho Trang. Nếu bạn muốn chỉnh sửa Bài viết, Sản phẩm, Custom Post Type với Beaver, bạn chỉ cần vào Cài đặt > Beaver Builder > Kiểu bài > Đánh dấu vào các ô > Lưu.

Bạn không thể sửa được trang Blog, Archive. Bạn cần sử dụng plugin Beaver Themer để sửa chúng.

Beaver Builder Theme

Beaver Builder Theme có rất nhiều tùy chọn để bạn chỉnh sửa phần bên ngoài Content Area, cho các máy tính, máy tính bảng và điện thoại. Toàn bộ cài đặt có thể tìm thấy ở Giao diện > Tùy biến.

Beaver Builder Theme gồm các tùy chọn cơ bản sau:

  • Preset: bao gồm các style được thiết kế sẵn về màu sắc, typography…., chỉ cần lựa chọn, và trang web sẽ được cập nhật.
  • Layout và Style của Header (tobar, header, menu), Footer (Widget, Footer bar) và Sidebar
  • Layout và Tùy chọn cho trang Blog Archive, Single Post và WooCommerce
  • Style mặc định cho Beaver Builder như màu nổi bật, heading, văn bản, font và nút
  • Tùy chọn chèn code vào Head và Body của website

Header, Footer, Sidebar trong Beaver Builder Theme

Header chứa hai thành phần

  • Topbar: Phía trên đầu website, bao gồm một hoặc hai cột
  • Header: Logo, Menu với một số tùy chọn layout có sẵn

Footer chứa hai thành phần

  • Footer: tương tự Topbar, nhưng là ở dưới cùng website, có thể là một hoặc hai cột
  • Widget: đặt các widget, phía trên Footer

Bạn có thể xem hình để có cái nhìn về vị trí của chúng

file-fBI2O5oZiz

Sidebar là không bắt buộc. Nhưng nếu bật Sidebar, nó sẽ xuất hiện trong mọi Bài viết, Trang, trang Archive.

Mặc định chỉ có 1 Sidebar. Và nó sẽ sử dụng chung cho các Bài viết và Trang. Nếu bạn cần Sidebar khác biệt cho cả hai. Bạn sẽ cần code hoặc plugin để xử lí.

Cài đặt mặc định của Beaver Builder Theme cho Beaver Builder

Beaver Builder Theme đã có một số thiết lập sẵn khi làm việc với Beaver Builder Plugin.

Điều đó giúp bạn tiết kiệm thời gian đáng kể khi xây dựng website.

Những thiết lập đó là

  • Màu nhấn Màu sắc mặc định cho các Nút và Liên kết
  • Heading: Kiểu font (font family), cỡ chữ và các thuộc tính font khác cho Heading
  • Text: tượng tự Heading
  • Nền: cài đặt màu nền hoặc ảnh nền cho Content Area
  • Lightbox: Kiểm soát hành vi của ảnh, khi bấm vào một hình ảnh bất kỳ
  • Shortcode Năm: Shortcode tự động chèn năm

Tác giả & Hình ảnh: Beaver Builder Team

Lược dịch bởi: THEMEVI