Gửi ticket
Khuyến mại
Kiến thức
Quản lý dịch vụ
Cách sử dụng tiện ích cảnh báo
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 cảnh báo là gì ?
Tiện ích Cảnh báo (Alert) trong Elementor cho phép bạn tạo các thông báo nổi bật trên trang web, có thể dùng để hiển thị thông báo lỗi, thông báo thành công, cảnh báo quan trọng hoặc thông tin chung. Nó giúp thu hút sự chú ý của người dùng đến một thông điệp cụ thể.
3. Các bước sử dụng tiện ích cảnh báo
I. Nội dung (Content)
Đây là nơi bạn thiết lập loại cảnh báo, tiêu đề, nội dung và biểu tượng.
- Kiểu (Type):
- Chọn loại cảnh báo bạn muốn hiển thị. Mỗi loại thường có một màu sắc mặc định và biểu tượng gợi ý cho ý nghĩa của thông báo:
- Thông tin (Info): Thường là màu xanh lam, dùng cho các thông tin chung.
- Thành công (Success): Thường là màu xanh lá cây, dùng cho các thông báo thành công.
- Cảnh báo (Warning): Thường là màu vàng, dùng cho các cảnh báo nhẹ.
- Lỗi (Danger): Thường là màu đỏ, dùng cho các thông báo lỗi nghiêm trọng.
- Trong hình bạn cung cấp, tùy chọn đang là “Thông tin”.
- Tiêu đề (Title):
- Nhập tiêu đề chính cho thông báo cảnh báo của bạn. Đây là phần chữ đậm nổi bật ở đầu hộp.
- Trong hình bạn cung cấp, tiêu đề đang là “Đây là một cảnh báo”.
- Nội dung (Description):
- Nhập nội dung chi tiết của thông báo cảnh báo. Đây là phần văn bản nhỏ hơn bên dưới tiêu đề.
- Trong hình bạn cung cấp, nội dung đang là “Đó là mô tả. Bấm vào nút sửa để thay đổi đoạn văn này.”
- Biểu tượng loại bỏ (Dismiss Icon):
- Gạt nút sang phải để hiển thị biểu tượng “X” (hoặc biểu tượng khác) ở góc trên bên phải của hộp cảnh báo. Khi người dùng nhấp vào biểu tượng này, hộp cảnh báo sẽ biến mất.
- Trong hình bạn cung cấp, tùy chọn này đang bật.
- Biểu tượng (Icon):
- Gạt nút sang phải để hiển thị biểu tượng bên cạnh tiêu đề cảnh báo.
- Nhấp vào biểu tượng mặc định (thường là dấu hoa thị hoặc dấu chấm than) để mở Thư viện biểu tượng. Chọn một biểu tượng phù hợp với thông báo của bạn.
- Trong hình bạn cung cấp, tùy chọn này đang bật và biểu tượng là một dấu hoa thị.
II. Kiểu hiển thị (Style)
Đây là nơi bạn tùy chỉnh màu sắc, phông chữ và các thuộc tính khác của hộp cảnh báo.
A. Cảnh báo (Alert)
- Background Color (Màu nền): Chọn màu nền cho toàn bộ hộp cảnh báo. (Nếu bạn chọn loại cảnh báo, Elementor sẽ tự động áp dụng một màu nền mặc định, nhưng bạn có thể ghi đè nó ở đây).
- Border Radius (Bán kính bo tròn): Bo tròn các góc của hộp cảnh báo.
- Padding (Khoảng đệm): Điều chỉnh khoảng cách bên trong giữa đường viền của hộp cảnh báo và nội dung bên trong.
B. Tiêu đề (Title)
- Color (Màu sắc): Chọn màu chữ cho tiêu đề cảnh báo.
- Typography (Phông chữ): Nhấp vào biểu tượng bút chì để tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho tiêu đề.
C. Nội dung (Description)
- Color (Màu sắc): Chọn màu chữ cho nội dung mô tả.
- Typography (Phông chữ): Nhấp vào biểu tượng bút chì để tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho nội dung mô tả.
D. Biểu tượng loại bỏ (Dismiss Icon) (Nếu bạn đã bật “Biểu tượng loại bỏ” ở phần Nội dung)
- Color (Màu sắc): Chọn màu cho biểu tượng “X” hoặc biểu tượng loại bỏ khác.
E. Icon (Biểu tượng) (Nếu bạn đã bật “Biểu tượng” ở phần Nội dung)
- Color (Màu sắc): Chọn màu cho biểu tượng bên cạnh tiêu đề.
- Size (Kích thước): Điều chỉnh kích thước của biểu tượng.
- Spacing (Khoảng cách): Điều chỉnh khoảng cách giữa biểu tượng và văn bản tiêu đề.
III. Nâng cao (Advanced)
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 toàn bộ tiện ích Cảnh báo.
- Bố cục (Layout):
- Margin (Lề): Khoảng cách bên ngoài tiện ích Cảnh báo với các phần tử khác xung quanh.
- Padding (Khoảng đệm): Khoảng cách bên trong tiện ích.
- Width (Chiều rộng): Bạn có thể đặt chiều rộng của toàn bộ tiện ích Cảnh báo.
- Position (Vị trí): Mặc định, Relative, Absolute, Fixed (các tùy chọn định vị nâng cao).
- Z-index: Xác định thứ tự xếp lớp của tiện ích nếu nó chồng lên các phần tử khác.
- CSS ID & CSS Classes:
- Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến tiện ích bằng mã CSS riêng.
- Hiệu ứng chuyển động (Motion Effects):
- Entrance Animation (Hoạt ảnh khi vào): Chọn hiệu ứng xuất hiện cho hộp cảnh báo khi trang được tải.
- Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho toàn bộ tiện ích khi di chuột qua.
- Scrolling Effects (Hiệu ứng cuộn): Tạo các hiệu ứng khi người dùng cuộn trang.
- Mouse Effects (Hiệu ứng chuột): Tạo các hiệu ứng khi di chuột qua tiện ích.
- Nền (Background):
- Bạn có thể thêm màu nền, hình nền hoặc gradient cho toàn bộ vùng chứa tiện ích Cảnh báo.
- Đườ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 tiện ích.
- 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 tiện ích.
- 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 hộp cảnh báo trên các loại thiết bị khác nhau nếu cần.
- 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ẻ tiện ích.
- 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 hộp cảnh báo một cách nâng cao.
