Button cho phép bạn tạo các NÚT.
Button Module bao gồm các mục là General, Style và Advanced.
A. General
Text
Bạn có thể điền một từ hoặc cụm từ vào đây.
Icon
Kể từ phiên bản Beaver Builder 2.2 trở đi, bạn có thể sử dụng hơn 1000 icon từ các thư viện:
- Font Awesome 5 Solid
- Font Awesome 5 Regular
- Font Awesome 5 Brands
- Foundation Icons
- WordPress Dashicons
Icon Position
Và bạn có thể thiết lập vị trí của icon
- Before Text (phía trước text)
- After Text (phía sau text)
Icon Visibility
Chỉ hiển thị icon khi
- Alway Visible (Luôn luôn hiển thị)
- Fade In on Hover (Hiển thị khi di chuột vào nút)
Click Action
Hành động xảy ra khi bấm vào nút. Hai lựa chọn là:
Link: bấm vào nút sẽ mở ra một liên kết khác.
Lightbox: bấm vào nút sẽ mở ra 1 popup
Link
Chỉ xuất hiện khi chọn Click Action là Link.
Bạn có thể điền liên kết vào ô. Hoặc bấm Select để chọn một bài Trang có sẵn trên web.
New Window: mở liên kết trong một tab mới không? Nếu không đánh dấu, khi bấm vào nút, liên kết sẽ mở ngay trong tab hiện tại
No Follow: thêm thuộc tính no follow không. Với liên kết ở trong web thì thường không đánh dấu. Và chỉ đánh dấu nếu dẫn liên kết của website bên ngoài.
Lightbox Content
Chỉ xuất hiện khi Click Action là Lightbox.
Beaver Builder cho phép chèn 2 thứ vào Popup là Video hoặc HTML.
Với video, bạn chỉ cần dán đường dẫn video là được.
Với HTML, bạn có thể chèn một đoạn HTML hoặc một đoạn văn bất kỳ
Đặc biệt: Bạn có thể chọn Shortcode của Saved Row hoặc Saved Module vào HTML!! Chẳng hạn bạn tạo 1 Form liên hệ (hoặc Form Subscribe) > Lấy Shortcode > Điền vào mục HTML.
Khi bấm vào nút, nó sẽ bật ra Popup Form này!
B. Style
Width
Chiều rộng của nút. Gồm
- Auto: mặc định, sẽ ăn theo chiều rộng của Text
- Fullwidth: chiều rộng tối đa của Column hoặc Row chứa Button đó.
- Custom: Tự thiết lập chiều rộng
Custom Width
Khi Width là Custom, bạn có thể tự gõ chiều rộng cho Nút. Chấp nhận 3 đơn vị là: px, vw và %.
Hãy thử để biết mỗi đơn vị ý nghĩa cho điều gì nhé!
Align
Căn lề nút. Nút sẽ xuất hiện bên trái, giữa hoặc bên phải.
Đặc biệt bạn có thể bấm vào icon Máy tính để điều chỉnh căn lề trên Máy tính bảng (Tablet) và Điện thoại (Mobile).
Padding
Khoảng cách giữa Text và Viền của nút.
- Top: Text và viền trên
- Right: Text và viền phải
- Bottom: Text và viền dưới
- Left: Text và viền trái
Đặc biệt bạn có thể bấm vào icon Máy tính để điều chỉnh khoảng cách trên Máy tính bảng (Tablet) và Điện thoại (Mobile).
Hoặc bấm vào biểu tượng liên kết để thay đổi đồng loạt 4 giá trị. Tức là chỉ cần nhập vào 1 giá trị Top, 3 giá trị khác sẽ thay đổi giống nhau.
Text
Text Color: Màu sắc của Text
Text Hover Color: Màu sắc của Text khi di chuột
Nếu không điền gì, Text sẽ lấy theo màu sắc được thiết lập ở Row Setting hoặc Column Setting. Trường hợp bạn chưa thiết lập gì ở Row hoặc Column, thì nó sẽ lấy theo mặc định của Theme.
Typography
Cho phép điều chỉnh Kiểu Font, Cỡ chữ, Độ đậm nhạt, Độ cao chữ, Căn lề…và nhiều thứ khác.
Font
Family: hàng trăm kiểu font mặc định từ Google Fonts.
Weight: độ đậm nhạt cho font
Size: cỡ chữ, px, em, rem hoặc vw
Line Height: chiều cao của chữ, px hoặc em
Align: Căn lề chữ, trái, giữa hoặc phải
Style & Spacing
Spacing: khoảng cách giữa các kí tự, tính bằng px
Transform: Normal (bình thường), Tt (in hoa kí tự đầu của các từ), TT (in hoa toàn bộ text), tt (in thường toàn bộ text)
Decoration: none (không có gì), Underline (gạch chân phía dưới), Overline (gạch chân trên đầu), Line Through (gạch chân giữa từ)
Text Shadow
Text Shadow là đổ bóng cho từ.
Ô đầu tiên là chọn màu sắc và độ mờ. Chấp nhận mã màu dạng #ffffff, hoặc rgba hoặc rgb. Lưu ý không gõ được kiểu #fff (3 kí tự).
Text Shadow có cú pháp là: text-shadow: h-shadow v-shadow blur-radius color. Như vậy:
X (h-shadow): Vị trí bóng theo chiều ngang, chấp nhận cả số dương, âm và số 0 (bắt buộc)
Y (v-shadow): Vị trí bóng theo chiều dọc, chấp nhận số dương, âm và số 0 (bắt buộc)
Blur (bán kính mờ): Độ mờ. Giá trị càng cao thì nó càng mờ. Mặc định là 0, giá trị này không bắt buộc.
Background
Thiết lập màu nền của nút.
Background Color: màu nền của nút
Background Hover Color: màu nền của nút khi được di chuột
Nếu không điền gì, Background sẽ lấy theo màu sắc mặc định của Theme.
Nếu muốn tạo màu trong suốt, hãy kéo con cuôn chuột ở thanh bên phải xuống dưới đáy.
Background Style
Flat: kiểu nền mặc định
Gradietn: nền gradient
Background Animation
Thêm hiệu ứng chuyển tiếp màu sắc khi di chuột vào Button. Mặc định nếu Disabled thì màu sắc sẽ chuyển ngay lập tức. Nếu Enabled, bạn sẽ thấy màu sắc di chuyển từ từ khi di chuột.
Border
Tạo viền cho Nút. Điều chỉnh được cho cả Máy tính, máy tính bảng và Điện thoại.
General
Style
Điều chỉnh kiểu viền của nút
Default: mặc định của Theme
None: Không viền
Solid: đường thẳng
Dashed: nét đứt
Dotted: dấu chấm
Double: 2 đường viền sát nhau
Color
Màu sắc của viền. Chấp nhận mã màu #ffffff hoặc RGB hoặc RGBA.
Width
Chiều cao của viền. Top (trên), Right (phải), Bottom (dưới), Left (Trái).
Nếu tất cả thông tin trên được thiết lập, mà chiều cao là 0 thì Viền sẽ không có.
Radius & Shadow
Radius là bo tròn cho các góc.
Box Shadow là đổ bóng cho Button
Box Shadow có cú pháp là: h-offset v-offset blur spread color. Như vậy:
X (h-offset): Offset chiều ngang. Nếu là số DƯƠNG thì đặt bóng bên PHẢI nút. Nếu là số ÂM thì đặt bóng bên TRÁI nút. Số càng cao thì càng dịch chuyển nhiều qua trái hoặc phải (Bắt buộc)
Y (v-offset): Offset chiều dọc. Nếu là số DƯƠNG thì đặt bóng bên DƯỚI nút. Nếu là số ÂM thì đặt bóng bên TRÊN nút. Số càng cao thì càng dịch chuyển nhiều lên TRÊN hoặc DƯỚI (Bắt buộc)
Blur: Độ mờ. Số càng cao thì bóng càng mờ (Không bắt buộc)
Spread: Độ rộng. DƯƠNG thì bóng càng rộng. ÂM thì bóng càng HẸP
Border Hover Color
Màu của viền khi di chuột
C. Advanced
Spacing
Margins
Khoảng cách giữa Nút và các thành phần khác. Điều chỉnh được cho Máy tính, Máy tính bảng và Điện thoại.
Tính bằng PX hoặc %.
Visibility
Thiết lập điều kiện hiển thị cơ bản cho Nút. Bạn có thể thiết lập dựa trên Breakpoint (kích cỡ màn hình) hoặc Display (đăng nhập – đăng xuất).
Ngoài ra nếu bạn sử dụng Beaver Themer, có thể thiết lập được hàng trăm điều kiện khác.
Breakpoint
Có nghĩa là hiển thị Nút trên những thiết bị nào.
Always: tất cả mọi thiết bị
Large Devices Only: cỡ màn hình lớn
Large & Medium Devices Only: cỡ màn hình trung bình
Medium Devices Only: cỡ màn hình trung bình
Medium & Small Devices Only: cỡ màn hình trung bình và nhỏ
Small Devices Only: cỡ màn hình nhỏ
Mình thường mặc định Large là cho Máy tính. Medium là cho máy tính bảng. Và Small là điện thoại
Display
Always: luôn luôn hiển thị
Never: luôn luôn ẩn
Logged Out User: chỉ hiển thị cho người dùng CHƯA đăng nhập
Logged In User: chỉ hiển thị cho người dùng ĐÃ ĐĂNG NHẬP
User Capatability
Hiển thị Nút cho các vai trò người dùng nhất định.
Xem thêm toàn bộ các vai trò ở đây
Animation
Tạo hiệu ứng chuyển động cho nút.
None: không có hiệu ứng gì
38 hiệu ứng khác. Rất khó mô tả. Nên bạn hãy thử từng hiệu ứng nhé!
Delay
Duration: Thời gian thực hiện hiệu ứng chuyển động
HTML Element
Container Element
Cho phép đổi HTML Element đang bọc Nút thành: <div>, <section>, <article>, <aside>, <header>, <footer>. Với Nút, hãy chọn <div> là hợp lý.
ID & Class
Cho phép điền ID và Class của CSS để tiến hành CSS cho Nút.
ID: không cần điền kí hiệu #
Class: không cần điền dấu chấm
Save & Save As
Save cho phép lưu lại Nút, để chèn vào vị trí khác trên web một cách nhanh chóng
Save As cho phép lưu nút thành Saved Button Module, và chèn vào vị trí khác trên web. Khác biệt duy nhất với Save là. Tất cả mọi Nút đều sửa ở một chỗ, thay đổi nó thì tất cả Nút sẽ đồng loạt đổi theo.