Cách thêm CSS tùy chỉnh vào Elementor miễn phí

Gần đây, một trong những độc giả của chúng tôi không có phiên bản Pro của Elementor đã thách thức chúng tôi về cách anh ấy có thể thêm CSS tùy chỉnh vào trang web của mình.

Vì vấn đề phức tạp hơn một chút, chúng tôi nghĩ rằng một số người dùng có thể gặp phải vấn đề này. Vì vậy, chúng tôi quyết định cung cấp một bài viết chi tiết về cách đến đó.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách dễ dàng thêm CSS tùy chỉnh vào trang hoặc trang web Elementor.

Ba cách để thêm CSS tùy chỉnh vào trang hoặc trang web Elementor như sau:

Thêm mã CSS thông qua phần tử HTML.
Qua plugin Mã đoạn mã.
Sử dụng Công cụ tùy chỉnh chủ đề của Elementor

Phương pháp 1: Thêm mã CSS từ phần tử HTML của Elementor

Sử dụng phương pháp này nếu bạn chỉ muốn thêm CSS vào một trang duy nhất.

Bước 1: Kéo và thả phần tử HTML của Elementor

Bạn có thể đặt phần tử HTML này ở bất kỳ đâu trên trang và nó sẽ hoạt động tốt.

add-custom-CSS-to-Elementor-free »BlogPasCher

Bước 2: Nhấp vào biểu tượng Chỉnh sửa HTML

add-custom-CSS-to-Elementor-free-1 »BlogPasCher

Bấm vào biểu tượng Chỉnh sửa html ở bên phải phần tử HTML của Elementor. Nhấp vào nó sẽ xuất hiện hộp công cụ chỉnh sửa HTML ở bên trái màn hình.

Bước 3: Thêm mã CSS của bạn

add-custom-CSS-to-Elementor-free-2 »BlogPasCher

Bấm vào tab Nội dung và mở danh sách thả xuống Mã HTML.
Đặt mã CSS của bạn trong đèn hiệu.

Phương pháp 2: CSS tùy chỉnh cho Elementor thông qua plugin Code Snippets

Lợi ích của việc sử dụng plugin Đoạn mã:

Nếu bạn muốn thay đổi hoặc cập nhật chủ đề WordPress của mình, CSS sẽ luôn được áp dụng.
Đây là cách thuận tiện và hiệu quả nhất để thêm mã CSS vì bạn có thể bật hoặc tắt mã CSS giống như các plugin.

Bước 1: Mở menu tiện ích mở rộng trên trang tổng quan của bạn

add-custom-CSS-to-Elementor-free-3 »BlogPasCher

Bước 2: Thêm một plugin mới

add-custom-CSS-to-Elementor-free-4 »BlogPasCher

Bấm vào nút Thêm On »Để truy cập trang để thêm các plugin mới.

add-custom-CSS-to-Elementor-free-5 »BlogPasCher

Tìm kiếm plugin " Mã Đoạn ".
Cài đặt nó bằng cách nhấp vào nút cài đặt bây giờ một khi kết quả nghiên cứu là khả quan.

Bước 3: Kích hoạt plugin

Bấm vào nút hoạt động »Sau khi cài đặt xong để kích hoạt plugin Đoạn mã.

Bước 4: Mở trang plugin và thêm đoạn mã

add-custom-CSS-to-Elementor-free-7 »BlogPasCher

Mở menu Chất chiết xuất từ bảng điều khiển của bạn
Nhấp vào nút Nouveau để thêm một đoạn mã mới

Bước 5: Tạo một đoạn mã và kích hoạt nó

add-custom-CSS-to-Elementor-free-8-1 »BlogPasCher

Đặt tên cho đoạn mã của bạn.
Bên trong thẻ, hãy viết mã của bạn. Mã này có sẵn dưới đây để sao chép.
Bấm vào nút Lưu Thay đổi Để lưu đoạn mã.
Sau khi lưu CSS, hãy nhấp vào " hoạt động Để kích hoạt mã CSS.

Sao chép mã

add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );

Phương pháp 3: Sử dụng Công cụ tùy chỉnh chủ đề Elementor

Lưu ý: Hãy cẩn thận trước khi sử dụng phương pháp này vì nếu bạn thay đổi chủ đề, bạn sẽ mất CSS tùy chỉnh này.

Bước 1: Mở công cụ tùy chỉnh chủ đề

Truy cập trang web của bạn và nhấp vào tùy chọn tùy chỉnh trên thanh điều hướng trên cùng. Thao tác này sẽ mở ra một cửa sổ tùy chỉnh chủ đề.