Cách sử dụng tiện ích Button – Nút bấm 

1. Các tiện ích Widgets trong Elementor

Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.

Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:

• Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
• Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
• Advanced (Nâng cao): Các tùy chọn nâng cao như:
  • Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
  • Z-index: Thứ tự hiển thị của các lớp phần tử.
  • CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
  • Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
  • Background: Màu nền, hình ảnh nền, gradient.
  • Border: Đường viền.
  • Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
  • Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
  • Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.

2. Tiện ích nút bấm là gì ?

Tiện ích Nút bấm (Button) trong Elementor là một khối chức năng cho phép bạn tạo các nút có thể bấm vào được trên trang web của mình, thường dùng để điều hướng người dùng hoặc thực hiện một hành động nào đó.

Chúng ta sẽ đi qua cách sử dụng tiện ích Nút bấm tương tự như tiện ích Video, bao gồm các phần: Nội dung, Kiểu hiển thị, và Nâng cao.

Bây giờ, hãy xem các tùy chọn chỉnh sửa ở bảng điều khiển bên trái:

3. Các bước sử dụng tiện ích nút bấm

Bước 1. Chỉnh sửa nội dung

Đây là nơi bạn thiết lập văn bản, liên kết và biểu tượng cho nút của mình.

1. Kiểu (Type):

• Đây là tùy chọn cho phép bạn chọn kiểu dáng “mặc định” của nút, thường là một thiết lập sẵn về màu sắc và viền.
• Bạn có thể nhấp vào hộp chọn để xem các tùy chọn như: Mặc định, Info, Success, Warning, Danger. Mỗi kiểu sẽ có một màu sắc hoặc phong cách khác nhau được định nghĩa bởi theme hoặc Elementor.

2. Văn bản (Text):

• Ô này dùng để nhập văn bản sẽ hiển thị trên nút của bạn.
• Trong hình này, tôi đổi thành “HVN Group”. Bạn có thể thay đổi thành “Tìm hiểu thêm”, “Liên hệ ngay”, “Mua hàng”, v.v.

3. Liên kết (Link):

• Đây là phần quan trọng nhất của nút bấm. Bạn cần dán đường link (URL) mà bạn muốn người dùng được chuyển hướng đến khi họ nhấp vào nút.
• Ví dụ:
  • Nếu muốn liên kết đến trang Liên hệ của bạn, hãy dán link https://websitecuaban.com/lien-he.
  • Nếu muốn liên kết đến một sản phẩm, hãy dán link sản phẩm đó.
  • Bạn cũng có thể nhấp vào biểu tượng hình bánh răng nhỏ bên cạnh ô link để mở các tùy chọn nâng cao hơn như “Mở trong tab mới”, “Thêm rel=nofollow” (cho SEO).

4. Biểu tượng (Icon):

Bạn có thể thêm một biểu tượng vào nút của mình để làm nó nổi bật và dễ hiểu hơn.

• Vị trí biểu tượng (Icon Position): Sau khi chọn biểu tượng, bạn có thể chọn hiển thị nó Trước (Before) hoặc Sau (After) văn bản của nút.
• Khoảng cách biểu tượng (Icon Spacing): Kéo thanh trượt để điều chỉnh khoảng cách giữa biểu tượng và văn bản.

Nhấp vào nút “Thư viện biểu tượng” (thường là một biểu tượng hình ngôi sao hoặc dấu cộng). Một cửa sổ sẽ bật lên với hàng ngàn biểu tượng để bạn lựa chọn (Font Awesome).

5. ID của Nút (Button ID):

• Đây là một tùy chọn nâng cao, cho phép bạn gán một ID duy nhất cho nút. Thường được sử dụng để:
  • Thêm CSS tùy chỉnh.
  • Kết nối với mã JavaScript (ví dụ: cho các sự kiện theo dõi, phân tích).
  • Tạo liên kết neo (Anchor link) để cuộn đến một phần cụ thể trên trang.
• Nếu bạn là người mới, bạn có thể bỏ qua phần này.

Bước 2. Chỉnh sửa kiểu hiển thị

Đây là nơi bạn tùy chỉnh giao diện của nút, bao gồm màu sắc, phông chữ, kích thước,…

Vị trí là mục bạn có thể tùy chỉnh vị trí nút bấm mà bạn muốn

1. Typography (Phông chữ):

• Nhấp vào biểu tượng bút chì ở bên trái mục kiểu chữ để mở các tùy chọn phông chữ. Bạn có thể thay đổi font chữ tại biểu tượng ngay bên cạnh biểu tượng bút chì:
  • Family (Họ phông chữ): Chọn kiểu phông chữ (ví dụ: Open Sans, Roboto).
  • Size (Kích thước): Kích thước chữ trên nút.
  • Weight (Độ đậm): Độ đậm của chữ (normal, bold, extra bold).
  • Transform (Chuyển đổi): Chữ hoa, chữ thường, chữ hoa đầu câu.
  • Style (Kiểu chữ): Nghiêng, bình thường.
  • Decoration (Trang trí): Gạch chân, gạch ngang.
  • Line-Height (Chiều cao dòng) & Letter Spacing (Khoảng cách chữ): Để điều chỉnh khoảng cách giữa các dòng và các ký tự.

2. Text Shadow (Bóng chữ):

Tạo hiệu ứng bóng đổ cho văn bản hiển thị trên nút bấm.

3. Text Color (Màu văn bản):

Chọn màu cho chữ hiển thị trên nút của bạn (HVN Group)

4. Background Type (Loại nền):

• Bạn có thể chọn loại nền cho nút:
  • Classic (Cổ điển): Một màu nền hoặc một hình ảnh nền.
  • Gradient (Màu chuyển tiếp): Tạo hiệu ứng màu chuyển từ màu này sang màu khác.
• Color (Màu sắc): Chọn màu nền cho nút.

5. Border Type (Loại đường viền):

• Bạn có thể thêm đường viền cho nút:
  • None (Không): Không có đường viền.
  • Solid (Đặc): Đường viền liền nét.
  • Double, Dotted, Dashed, Groove, Ridge, Inset, Outset: Các kiểu đường viền khác.
• Width (Độ dày): Độ dày của đường viền.
• Color (Màu sắc): Màu của đường viền.

6. Border Radius (Bán kính bo tròn):

• Giúp bạn bo tròn các góc của nút. Giá trị càng lớn, các góc càng tròn.
• Ví dụ: Nhập 50px để tạo nút hình bầu dục hoặc tròn (nếu nút là hình vuông).

7. Box Shadow (Bóng đổ):

Tạo hiệu ứng bóng đổ cho toàn bộ nút bấm.

8. Padding (Khoảng đệm):

• Khoảng cách bên trong của nút, giữa văn bản/biểu tượng và đường viền của nút. Điều chỉnh để nút trông cân đối và có không gian.

9. Hover (Khi di chuột qua):

• Đây là một tính năng rất hay! Bạn có thể thiết lập các thay đổi về màu sắc, hiệu ứng cho nút khi người dùng di chuột qua nó.
• Các tùy chọn tương tự như ở trạng thái bình thường (màu chữ, màu nền, đường viền, bóng đổ, hiệu ứng chuyển động).

Bước 3: Chỉnh sửa nâng cao

Tab này cung cấp các tùy chọn nâng cao hơn để kiểm soát bố cục, hiệu ứng và khả năng đáp ứng của nút.

1. Bố cục (Layout):

• Căn chỉnh (Alignment): Căn chỉnh nút sang trái, phải hoặc giữa cột chứa nó.
• Chiều rộng (Width): Bạn có thể đặt chiều rộng của nút theo phần trăm (%) hoặc pixel (PX).
• Chiều rộng tối đa (Max Width): Đặt chiều rộng tối đa mà nút có thể đạt được.

2. Lề và Khoảng đệm (Margin & Padding):

• Lề (Margin): Khoảng cách bên ngoài nút với các phần tử khác xung quanh. Bạn có thể điều chỉnh lề trên, dưới, trái, phải.
• Khoảng đệm (Padding): (Đã giải thích ở phần Kiểu hiển thị, nhưng cũng xuất hiện ở đây nếu bạn muốn tinh chỉnh thêm cho toàn bộ tiện ích).

3. Z-index:

• Xác định thứ tự xếp lớp của nút nếu nó chồng lên các phần tử khác.

4. CSS ID & CSS Classes:

• Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến nút bằng mã CSS riêng (thường dành cho người dùng có kiến thức về CSS).

5. Hiệu ứng chuyển động (Motion Effects):

• Hiệu ứng khi vào (Entrance Animation): / Hover Animation (Hoạt ảnh di chuột qua): Chọn hiệu ứng xuất hiện cho nút khi trang được tải hoặc khi di chuột qua.
• Hiệu ứng cuộn (Scrolling Effects): Tạo các hiệu ứng khi người dùng cuộn trang.
• Hiệu ứng chuột (Mouse Effects): Tạo các hiệu ứng khi di chuột qua nút.

6. Nền (Background):

Bạn có thể thêm màu nền hoặc hình nền cho vùng chứa nút (khác với nền của chính nút).

7. Đường viền (Border):

Tùy chỉnh kiểu đường viền, độ dày, màu sắc và bán kính bo tròn cho toàn bộ vùng chứa nút.

8. Mặt nạ (Mask):

Áp dụng một hình dạng mặt nạ để tạo hiệu ứng đặc biệt cho nút.

9. Khả năng đáp ứng (Responsive):

• Ẩn trên máy tính để bàn (Hide On Desktop), Ẩn trên máy tính bảng (Hide On Tablet), Ẩn trên thiết bị di động (Hide On Mobile): Cho phép bạn ẩn nút trên các loại thiết bị khác nhau nếu cần.

10. Thuộc tính (Attributes):

• Cho phép bạn thêm các thuộc tính HTML tùy chỉnh cho thẻ nút.

11. CSS tùy chỉnh (Custom CSS) (chỉ có trong Elementor Pro):

• Cho phép bạn viết mã CSS trực tiếp để tùy chỉnh giao diện và hành vi của nút một cách nâng cao.