Button Module – Beaver Builder

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

Button cho phép bạn tạo các NÚT.

Button Module bao gồm các mục là General, StyleAdvanced.

bb-button-module1-min

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.