Cách sử dụng tiện ích mã rút gọn

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 mã rút gọn là gì ?

Tiện ích Mã rút gọn (Shortcode) trong Elementor là một công cụ cực kỳ hữu ích và linh hoạt. Nó cho phép bạn nhúng nội dung hoặc chức năng từ các plugin, theme hoặc WordPress cốt lõi vào trang của mình mà không cần viết code phức tạp. Mã rút gọn (shortcode) thường trông giống như  [contact-form-7 id=”123″ title=”Contact form 1″].

I. Nội dung (Content)

Đây là nơi bạn dán mã rút gọn của mình.

1. Mã rút gọn (Shortcode):

• Đây là phần chính của tiện ích. Bạn chỉ cần dán mã rút gọn mà bạn đã lấy từ một plugin, theme hoặc tài liệu WordPress vào ô này.
• Elementor sẽ tự động diễn giải và hiển thị nội dung/chức năng mà mã rút gọn đó đại diện.
• Ví dụ trong hình bạn cung cấp. Mã này có thể được sử dụng để nhúng một thư viện ảnh cụ thể từ WordPress.

II. Kiểu hiển thị (Style)

Tiện ích Mã rút gọn không có tùy chọn kiểu hiển thị trực tiếp trong tab này, vì bản thân nó chỉ là một “khung” để chứa nội dung từ mã rút gọn. Mọi tùy chỉnh về kiểu hiển thị của nội dung được tạo bởi mã rút gọn (ví dụ: kiểu của thư viện ảnh, biểu mẫu liên hệ) thường sẽ được điều khiển bởi CSS của plugin/theme cung cấp mã rút gọn đó, hoặc thông qua CSS tùy chỉnh của bạn.

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 Mã rút gọn (và do đó, nội dung mà nó hiển thị).

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích Mã rút gọn 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, giữa đường viền của hộp tiện ích và nội dung mà mã rút gọn tạo ra.
• Width (Chiều rộng): Bạn có thể đặt chiều rộng của toàn bộ tiện ích Mã rút gọn.
• 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.

2. 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. Điều này đặc biệt hữu ích khi bạn muốn tùy chỉnh kiểu của nội dung mã rút gọn bằng CSS của riêng mình.

3. 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 tiện ích Mã rút gọn 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.

4. 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 Mã rút gọn.

5. Đườ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.

6. 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.

7. 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 tiện ích Mã rút gọn trên các loại thiết bị khác nhau nếu cần.

8. 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.

9. 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 tiện ích Mã rút gọn một cách nâng cao. Điều này rất mạnh mẽ để điều khiển giao diện của nội dung mà mã rút gọn tạo ra nếu plugin/theme không cung cấp đủ tùy chọn.