Css tùy chỉnh phần tử không hoạt động

Elementor là tùy chọn chính cho người dùng WordPress đặt trọng tâm vào thiết kế. Nó cho phép bạn tạo một trang web đẹp theo cách trực quan mà không cần xử lý CSS hoặc HTML. Khi làm việc với Elementor, bạn có thể gặp một số lỗi như bảng widget không hoạt động hoặc trình chỉnh sửa không tải được. Chúng tôi đã tóm tắt các lỗi Elementor phổ biến nhất và hiển thị cho bạn danh sách trong bài viết này. Mỗi lỗi cũng được thêm giải pháp cách khắc phục

Lỗi phần tử phổ biến

1. Bảng điều khiển Widget không tải

Elementor đi kèm với một bảng điều khiển trung tâm nằm ở phía bên trái của trình chỉnh sửa. Bạn có thể sử dụng bảng điều khiển để thêm tiện ích, đặt các cài đặt cơ bản (e. g. , thiết lập bố cục trang), thực hiện các tùy chỉnh cho tiện ích con, v.v. Vào một số thời điểm nhất định, bạn có thể không thêm được tiện ích con mới vì không thể tải tiện ích con. Lỗi này thường xảy ra khi bạn kích hoạt quá nhiều add-on Elementor. Một nguyên nhân lỗi khác có thể xảy ra là thông số kỹ thuật lưu trữ của bạn không đáp ứng các yêu cầu tối thiểu của Elementor

Cách khắc phục lỗi

Có ít nhất hai cách để khắc phục loại lỗi trên. Trước tiên, bạn có thể tạm thời hủy kích hoạt các plugin WordPress đã cài đặt (ngoại trừ Elementor) để tìm plugin nào gây ra lỗi. Đặc biệt, bạn có thể hủy kích hoạt các tiện ích bổ sung Elementor đang hoạt động. Thứ hai, bạn có thể chuyển sang chủ đề khác. Tạm thời chuyển sang một chủ đề mặc định của WordPress (e. g. , Twenty Seventeen) sẽ rất tuyệt. Bạn có thể đọc bài viết trước của chúng tôi để tìm hiểu thêm về cách khắc phục loại lỗi này

2. Biểu mẫu chưa được gửi

Elementor Pro đi kèm với một tiện ích — tiện ích Biểu mẫu — để cho phép bạn tạo biểu mẫu. Bạn có thể sử dụng tiện ích Biểu mẫu để tạo bất kỳ loại biểu mẫu nào, kể cả biểu mẫu liên hệ. Lỗi thường gặp khi tạo form liên hệ trong Elementor là dữ liệu form không được gửi đi. Lỗi thường xảy ra khi bạn đặt hành động biểu mẫu thành email

Cách khắc phục lỗi

Cũng giống như các plugin xây dựng biểu mẫu khác, Elementor cũng sử dụng chức năng wp_mail làm dịch vụ gửi thư. Bản thân chức năng wp_mail phụ thuộc vào send_mail thuộc về PHP để hoạt động. Vấn đề là, không phải tất cả các nhà cung cấp dịch vụ lưu trữ đều kích hoạt chức năng này. Vì vậy, bạn cần yêu cầu nhà cung cấp dịch vụ lưu trữ của mình bật chức năng send_mail để chức năng wp_mail hoạt động. Ngoài ra, bạn có thể sử dụng dịch vụ SMTP tùy chỉnh trên trang web WordPress của mình. Bạn có thể đọc bài viết trước của chúng tôi để tìm hiểu thêm về cách khắc phục lỗi không gửi được biểu mẫu trong Elementor

3. Độ dài đoạn trích không hoạt động

Tiện ích Bài đăng của Elementor cho phép bạn hiển thị các bài đăng blog trên trang WordPress của mình trên bất kỳ trang nào. Nó đi kèm với một số tùy chọn cài đặt, bao gồm cả độ dài đoạn trích. Trong một số trường hợp, độ dài của đoạn trích không xuất hiện như bạn đã đặt khi xem trước hoặc xuất bản trang. Lỗi thường xảy ra khi bạn sử dụng Elementor trên các chủ đề WordPress có tùy chọn cài đặt tích hợp để đặt độ dài đoạn trích

Cách khắc phục lỗi

Thay vì đặt độ dài đoạn trích qua bảng cài đặt Elementor, bạn có thể đặt độ dài đoạn trích thông qua tùy biến chủ đề (Giao diện -> Tùy chỉnh). Bạn có thể đọc bài viết trước của chúng tôi để tìm hiểu thêm

4. Trình chỉnh sửa không tải được

Loại lỗi này tương tự như lỗi số một ở trên, nhưng nghiêm trọng hơn một chút. Tất cả những gì bạn thấy là một trình tải trước trên một trang màu xám. Có một số nguyên nhân gây ra lỗi. Một trong số đó là không đủ tài nguyên máy chủ do tải quá nhiều

Cách khắc phục lỗi

Có một số lựa chọn thay thế bạn có thể thử sửa lỗi

  • Tắt plugin

Một trong những nguyên nhân của loại lỗi này là xung đột giữa Elementor và một plugin khác. Do đó, bạn có thể hủy kích hoạt các plugin — tất nhiên là ngoại trừ Elementor — để tìm ra plugin nào gây ra xung đột

  • Tắt trình tải trước chủ đề

Một số chủ đề WordPress đi kèm với trình tải trước mặc định. Nếu bạn sử dụng một chủ đề có trình tải trước mặc định, bạn có thể phải tắt nó để trình chỉnh sửa Elementor mở

  • Vô hiệu hóa tiện ích mở rộng trình duyệt

Đôi khi, loại lỗi là do tiện ích mở rộng được cài đặt trên trình duyệt web của bạn. Để tìm ra nó, bạn có thể sử dụng một trình duyệt web khác. Nếu trình chỉnh sửa Elementor mở bình thường trên một trình duyệt khác, bạn có thể tắt các tiện ích mở rộng trên trình duyệt chính của mình để tìm ra lỗi nào gây ra lỗi

  • Đảm bảo các phiên bản Elementor tương thích

Nếu bạn sử dụng cả Elementor Free và Elementor Pro (đọc. Elementor Free vs Elementor Pro), đảm bảo chúng tương thích. Nếu bạn sử dụng cái cũ hơn cái kia, điều này có thể gây ra sự không tương thích. Khi cập nhật Elementor Free, hãy đảm bảo bạn cũng cập nhật phiên bản Elementor Pro khi khả dụng — và ngược lại

5. 500 Lỗi máy chủ nội bộ

Một lỗi phổ biến khác mà bạn có thể gặp phải khi làm việc với Elementor là 500 lỗi máy chủ nội bộ. Khi bạn gặp phải lỗi này, lỗi nằm ở phía máy chủ của bạn thay vì Elementor. Có một số nguyên nhân gây ra loại lỗi này. Nó có thể là giới hạn bộ nhớ PHP, quyền truy cập tệp sai, bị hỏng. htaccess, bộ đệm của trình duyệt, cơ sở dữ liệu bị hỏng, v.v.

Cách khắc phục lỗi

Như đã đề cập ở trên, có nhiều tình huống gây ra lỗi máy chủ nội bộ 500. Như vậy, bạn có thể sửa lỗi theo nguyên nhân lỗi. Nếu nguyên nhân là do giới hạn bộ nhớ PHP, bạn có thể yêu cầu nhà cung cấp dịch vụ lưu trữ tăng giới hạn bộ nhớ PHP. Bạn có thể tham khảo trang này để tìm hiểu thêm về lỗi 500 máy chủ nội bộ trong WordPress

6. Các thay đổi không được áp dụng trên Trang trực tiếp

Elementor có trình chỉnh sửa trực quan đi kèm với trình chỉnh sửa trực tiếp. Có nghĩa là những gì bạn nhìn thấy trên trình chỉnh sửa sẽ giống hệt như trên trang trực tiếp. Tuy nhiên, có một tình huống trong đó các kiểu bạn đã áp dụng trên trình chỉnh sửa không được áp dụng trên trang trực tiếp. Lỗi này thường do vấn đề về bộ nhớ đệm gây ra

Cách khắc phục lỗi

  • Xóa bộ nhớ đệm

Bạn đã tìm ra nguyên nhân lỗi - bộ nhớ đệm. Vì vậy, bạn có thể khắc phục lỗi bằng cách xóa cache trên trình duyệt web. Nếu bạn có một plugin bộ nhớ đệm trên trang web WordPress của mình, bạn cũng có thể tạm thời tắt nó

  • Tạo lại CSS

Nếu phương pháp trên không hiệu quả, bạn có thể tạo lại CSS. Để làm như vậy, hãy truy cập Elementor -> Công cụ trên bảng điều khiển WordPress của bạn. Nhấp vào nút Tạo lại tệp & dữ liệu

Css tùy chỉnh phần tử không hoạt động
Css tùy chỉnh phần tử không hoạt động

Bạn cũng có thể kết hợp 2 phương pháp trên

7. Nút Xuất bản/Cập nhật Không Hoạt động

Sau khi chỉnh sửa xong một trang bằng Elementor, bạn có thể nhấp vào nút Xuất bản/Cập nhật ở phía dưới cùng của bảng cài đặt để xuất bản/cập nhật trang của mình. Nếu nút không hoạt động thì sao?

Có 2 nguyên nhân chính khiến nút xuất bản/cập nhật không hoạt động trong Elementor. Đầu tiên, nó có thể là giới hạn bộ nhớ. Thứ hai, nó có thể là vấn đề bảo mật

Cách khắc phục lỗi

  • Tăng giới hạn bộ nhớ PHP

Để làm cho Elementor hoạt động bình thường trên trang web WordPress của bạn, máy chủ của bạn cần có giới hạn bộ nhớ PHP ít nhất là 128 MB, nên dùng 256 MB hoặc cao hơn. Nếu nhà cung cấp dịch vụ lưu trữ của bạn chỉ cung cấp giới hạn bộ nhớ PHP 128 MB, bạn có thể yêu cầu tăng giới hạn này

  • Cài đặt SSL trên trang web của bạn

Ngày nay, hầu hết các trang web đã sử dụng SSL (HTTPS). Trong trường hợp bạn chưa sử dụng, bạn có thể cài đặt nó trên trang web WordPress của mình. Hầu hết các nhà cung cấp dịch vụ lưu trữ cung cấp SSL như một tính năng mặc định. Nếu nhà cung cấp dịch vụ lưu trữ của bạn sử dụng cPanel, bạn có thể cài đặt SSL qua cPanel

8. CSS tùy chỉnh không hoạt động

Tính năng CSS tùy chỉnh do Elementor Pro cung cấp cho phép bạn đạt được một số kiểu nhất định mà Elementor không cung cấp theo mặc định. Thông thường, sau khi bạn thêm mã CSS tùy chỉnh, thay đổi sẽ được áp dụng cho trang đang hoạt động sau khi bạn xuất bản/cập nhật trang. Nếu không, có thể có vấn đề về bộ nhớ đệm trên trang web của bạn

Cách khắc phục lỗi

Tương tự như lỗi số 6 ở trên, bạn có thể xóa cache để khắc phục loại lỗi này. Bạn có thể xóa bộ nhớ cache của cả trình duyệt web và trang web của mình. Trước khi làm như vậy, bạn có thể tạo lại CSS như được hiển thị ở số sáu ở trên

9. Màu văn bản không thay đổi

Trong Elementor, có hai tiện ích để thêm các thành phần văn bản vào một trang — tiện ích Trình soạn thảo văn bản và tiện ích Tiêu đề. Khi làm việc với các tiện ích này (và các tiện ích khác có các tùy chọn để tùy chỉnh văn bản), bạn có thể đặt màu văn bản. Trong một số trường hợp, màu văn bản không hoạt động trên trang trực tiếp

Cách khắc phục lỗi

Nếu bạn đã đặt màu văn bản nhưng nó không được áp dụng trên trang trực tiếp, rất có thể có xung đột giữa Elementor và chủ đề bạn sử dụng. Một số chủ đề WordPress đi kèm với các tùy chọn cài đặt nâng cao để kiểm soát màu sắc của các thành phần trang web của bạn, bao gồm cả văn bản. Để khắc phục xung đột, bạn có thể đặt lại cài đặt màu của chủ đề để kiểu Elementor có hiệu lực. Bạn có thể làm như vậy từ tùy biến chủ đề (Giao diện -> Tùy chỉnh) hoặc bảng cài đặt của chủ đề nếu có

10. Xung đột trình tạo chủ đề

Nếu bạn sử dụng Elementor Pro, bạn có thể tùy chỉnh mọi phần của trang web WordPress của mình một cách trực quan nhờ tính năng trình tạo chủ đề. Từ đầu trang, chân trang, trang lưu trữ, bài đăng đơn, trang đơn, trang 404, trang kết quả tìm kiếm, v.v. Một số tiện ích bổ sung của Elementor (e. g. , JetThemeCore) cũng có tính năng tương tự. Nếu bạn đã tạo một mẫu tùy chỉnh nhất định bằng trình tạo chủ đề Elementor (e. g. , mẫu tiêu đề tùy chỉnh) và cài đặt JetThemeCore, rất có thể mẫu tùy chỉnh của bạn sẽ không hoạt động

Cách khắc phục lỗi

Nếu bạn sử dụng JetThemeCore, bạn có thể cài đặt JetThemeCore Compatibility Kit. Nó là một plugin WordPress được phát triển bởi Crocoblock để khắc phục sự cố không tương thích giữa trình tạo chủ đề Elementor và JetThemeCore

11. Các trường tùy chỉnh không hiển thị trong khu vực canvas

Khả năng thêm các trường tùy chỉnh là một tính năng khác được cung cấp bởi Elementor Pro. Bạn có thể sử dụng tính năng này để tạo một trang web động phức tạp. Bản thân Elementor hỗ trợ các plugin trường tùy chỉnh phổ biến như ACF, Pods, Meta Box, Toolset, cho đến JetEngine. Khi cố gắng thêm trường tùy chỉnh trong Elementor, bạn có thể gặp sự cố trong đó dữ liệu trường tùy chỉnh không xuất hiện trên vùng canvas của trình chỉnh sửa Elementor

Cách khắc phục lỗi

Một điều bạn cần biết đầu tiên. Các trường tùy chỉnh chỉ có thể được thêm vào một mẫu tùy chỉnh (e. g. , mẫu bài đăng đơn tùy chỉnh). Bạn không thể thêm trường tùy chỉnh vào trang thông thường

Nếu bạn đã thêm trường tùy chỉnh vào mẫu tùy chỉnh nhưng trường tùy chỉnh được liên kết không xuất hiện, bạn có thể thay đổi cài đặt xem trước. Nhấp vào biểu tượng bánh răng ở góc dưới bên trái và mở khối Cài đặt xem trước. Chọn loại nội dung được liên kết với mẫu tùy chỉnh mà bạn đang làm việc và chọn một nội dung hiện có. Nhấp vào nút ÁP DỤNG & XEM TRƯỚC

Css tùy chỉnh phần tử không hoạt động
Css tùy chỉnh phần tử không hoạt động

Bạn có thể đọc bài viết trước của chúng tôi để tìm hiểu thêm về cách khắc phục loại lỗi này

Điểm mấu chốt

Bạn đã biết nó. That Elementor là plugin xây dựng trang phổ biến nhất cho WordPress. Có một số lỗi phổ biến mà người dùng Elementor gặp phải như chúng tôi đã đề cập ở trên. Trước khi bạn cài đặt Elementor trên trang web WordPress của mình, bạn có thể đảm bảo rằng thông số kỹ thuật của dịch vụ lưu trữ đáp ứng các yêu cầu tối thiểu mà Elementor yêu cầu để giảm thiểu lỗi khi làm việc với Elementor. Dưới đây là các yêu cầu hệ thống của Elementor

  • phiên bản WordPress. 5. 2 hoặc cao hơn
  • Phiên bản PHP. 7 hoặc cao hơn
  • Phiên bản MySQL. 5. 6 hoặc cao hơn
  • Giới hạn bộ nhớ PHP. 128 MB hoặc cao hơn

Mặc dù Elementor hỗ trợ các tiện ích bổ sung để mở rộng chức năng của nó, nhưng tốt hơn hết bạn chỉ nên cài đặt tiện ích bổ sung khi thực sự cần. Điều này cũng có thể giảm thiểu khả năng xảy ra lỗi vì mỗi tiện ích bổ sung bạn cài đặt sẽ tiêu tốn tài nguyên máy chủ. Một điều khác cần chú ý. Đảm bảo cài đặt một plugin trình tạo trang trên trang web WordPress của bạn vì cài đặt hai hoặc nhiều plugin trình tạo trang có thể gây ra xung đột

Tại sao CSS của tôi không hoạt động?

Đảm bảo thẻ liên kết ở đúng vị trí . Kiểu bên ngoài CÓ THỂ được đặt bên trong thẻ

Tại sao các thay đổi CSS không được phản ánh trong trình duyệt?

Nếu bạn đang thêm/sửa đổi CSS hoặc JavaScript nội tuyến và không thấy các thay đổi được phản ánh trong nguồn HTML, có khả năng trang đang được lưu vào bộ đệm. The solution may be to purge the WordPress object cache, which stores our page caching (Batcache) renders.

Tại sao Elementor không lưu các thay đổi của tôi?

Xóa tất cả bộ đệm . bộ đệm của trình duyệt của bạn, bộ đệm của các plugin khác, bộ đệm của máy chủ (nếu có thể). Nếu sự cố vẫn tiếp diễn, hãy hủy kích hoạt tất cả các plugin ngoài Elementor. Nếu điều này hữu ích, hãy kích hoạt lại từng cái một để tìm ra thủ phạm.

Bạn có thể thêm CSS tùy chỉnh với Elementor miễn phí không?

Các phương pháp thêm CSS tùy chỉnh vào Elementor (miễn phí). Sử dụng Tiện ích HTML (tốt nhất cho CSS sử dụng một lần) Sử dụng Trình tùy chỉnh WordPress . Sử dụng Plugin CSS . Xếp hàng các tệp CSS của riêng bạn (nâng cao)