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 Divider – đường phân cách
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 đường phân cách là gì ?
Bạn hỏi về tiện ích Đường phân cách (Divider) trong Elementor. Tiện ích này cho phép bạn chèn một đường kẻ ngang để phân tách các khối nội dung trên trang web, giúp bố cục rõ ràng và dễ đọc hơn.
Bước 1. Chỉnh sửa nội dung
Đây là nơi bạn thiết lập loại đường kẻ và kích thước cơ bản của nó.
1. Kiểu hiển thị (Style):
- Đây là tùy chọn để chọn kiểu đường kẻ. Nhấp vào hộp chọn, bạn sẽ thấy các lựa chọn phổ biến:
- Nét liền (Solid): Một đường kẻ liền mạch. (Đây là kiểu đang được chọn trong hình bạn gửi).
- Nét đứt (Dashed): Đường kẻ gồm các đoạn đứt rời.
- Chấm chấm (Dotted): Đường kẻ gồm các dấu chấm.
- Đôi (Double): Hai đường kẻ song song.
- Groove, Ridge, Inset, Outset: Các kiểu đường kẻ có hiệu ứng 3D nhẹ.
2. Chiều rộng (Width):
- Thanh trượt này cho phép bạn điều chỉnh chiều dài của đường phân cách theo tỷ lệ phần trăm (%).
- Kéo thanh trượt để đường kẻ dài hơn hoặc ngắn hơn. Ví dụ, nếu bạn muốn đường kẻ chỉ bằng một nửa chiều rộng của cột, hãy đặt là 50%.
- Bạn cũng có thể nhấp vào biểu tượng bên cạnh (%) để chuyển sang đơn vị pixel (PX) hoặc EM (nhưng % thường dễ kiểm soát hơn cho chiều rộng).
3. Căn chỉnh (Alignment):
- Nếu chiều rộng của đường phân cách nhỏ hơn 100%, bạn có thể căn chỉnh nó.
- Các tùy chọn:
- Trái (Left): Căn đường kẻ sang bên trái.
- Giữa (Center): Căn đường kẻ vào giữa. (Đây là căn chỉnh mặc định và thường dùng nhất).
- Phải (Right): Căn đường kẻ sang bên phải.
4. Thêm thành phần (Add Element):
- Đây là một tính năng thú vị của tiện ích Đường phân cách. Bạn có thể thêm một biểu tượng (Icon) hoặc văn bản (Text) vào giữa đường kẻ.
- Biểu tượng (Icon):
- Nhấp vào biểu tượng hình ngôi sao (Icon Library). Chọn một biểu tượng phù hợp từ thư viện (ví dụ: một ngôi sao, trái tim, mũi tên).
- Sau khi chọn, bạn sẽ thấy biểu tượng đó nằm ngay giữa đường kẻ.
- Văn bản (Text):
- Chọn tùy chọn này, một ô văn bản sẽ xuất hiện để bạn nhập chữ vào (ví dụ: “Hoặc”, “Tiếp theo”).
- Khi bạn thêm biểu tượng hoặc văn bản, đường kẻ sẽ tự động chia ra hai bên để nhường chỗ cho thành phần đó.
Bước 2. Chỉnh sửa kiểu hiển thị
Đây là nơi bạn tùy chỉnh màu sắc, độ dày, và khoảng cách của đường phân cách.
1. Màu sắc (Color):
- Nhấp vào ô màu để chọn màu cho đường kẻ của bạn. Bạn có thể chọn từ bảng màu, nhập mã màu HEX, RGB,…
2. Trọng lượng (Weight):
- Kéo thanh trượt để điều chỉnh độ dày của đường kẻ. Giá trị càng lớn, đường kẻ càng đậm.
3. Khoảng trống (Gap):
- Kéo thanh trượt để điều chỉnh khoảng cách thẳng đứng giữa đường phân cách và các nội dung ở phía trên hoặc phía dưới nó. Điều này giúp kiểm soát khoảng trống và bố cục tổng thể.
4. Icon (Nếu bạn đã thêm biểu tượng ở phần Nội dung):
- Màu sắc (Color): Chọn màu cho biểu tượng.
- Kích thước (Size): Điều chỉnh kích thước của biểu tượng.
- Khoảng cách (Spacing): Điều chỉnh khoảng cách giữa biểu tượng và đường kẻ hai bên.
5. Text (Nếu bạn đã thêm văn bản ở phần Nội dung):
- Màu sắc (Color): Chọn màu cho văn bản.
- Typography (Phông chữ): Nhấp vào biểu tượng bút chì để mở các tùy chọn phông chữ (kiểu, kích thước, độ đậm, v.v.) cho văn bản đó.
Bước 3. Chỉnh sửa 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 tiện ích Đường phân cách.
- Bố cục (Layout):
- Căn chỉnh (Alignment): (Thường chỉ áp dụng cho toàn bộ tiện ích nếu nó có độ rộng cụ thể).
- Chiều rộng (Width): Bạn có thể đặt chiều rộng của tiện ích 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à tiện ích có thể đạt được.
- Lề và Khoảng đệm (Margin & Padding):
- Lề (Margin): Khoảng cách bên ngoài tiện ích 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): Khoảng cách bên trong tiện ích, giữa đường viền của tiện ích và nội dung của nó.
- 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):
- Hiệu ứng khi vào (Entrance Animation): Chọn hiệu ứng xuất hiện cho đường phân cách khi trang được tải.
- 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 tiện ích.
- Nền (Background):
- Bạn có thể thêm màu nền hoặc hình nền cho vùng chứa tiện ích (chứ không phải cho riêng đường kẻ).
- Đườ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 đường phân cách trên các loại thiết bị khác nhau nếu không cần thiết.
- 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 đường phân cách một cách nâng cao.
