Khắc phục lỗi Elementor Preview không hoạt động: Hướng dẫn chi tiết từ A-Z

Lỗi Elementor Preview không hoạt động là một trong những vấn đề phổ biến nhất mà người dùng WordPress gặp phải khi sử dụng trình xây dựng trang hàng đầu này. Khi nhấn nút Preview, thay vì thấy giao diện trực quan, bạn chỉ thấy màn hình trắng, vòng xoay tải vô tận, hoặc thông báo lỗi JavaScript. Điều này làm gián đoạn quy trình thiết kế và gây mất thời gian quý báu. Bài viết này tổng hợp tất cả nguyên nhân và giải pháp đã được kiểm chứng để giúp bạn đưa Elementor Preview trở lại hoạt động ổn định.

Nguyên nhân khiến Elementor Preview không hoạt động

Elementor Preview sử dụng AJAX và JavaScript để tải trước giao diện trang trong khi bạn chỉnh sửa. Khi một trong các thành phần này bị gián đoạn, chế độ xem trước sẽ hỏng. Các nguyên nhân thường gặp bao gồm:

• Xung đột plugin – Plugin bảo mật, cache, tối ưu hóa hoặc các trình tạo trang khác can thiệp vào quy trình của Elementor.
• Giới hạn bộ nhớ PHP (Memory Limit) – Hosting không đủ tài nguyên để xử lý bản xem trước.
• Lỗi JavaScript / CSS – File script bị hỏng do cập nhật không đúng cách hoặc xung đột theme.
• Vấn đề về Cache – Cache trình duyệt hoặc plugin cache lưu phiên bản cũ, gây lỗi hiển thị.
• Lỗi do trình duyệt – Cookie, extension hoặc chế độ ẩn danh gây ảnh hưởng.
• Phiên bản PHP không tương thích – Elementor yêu cầu PHP 7.4 trở lên.
• Lỗi do SSL / HTTPS – Mixed content hoặc chứng chỉ SSL không đúng.

Hướng dẫn khắc phục lỗi Elementor Preview không hoạt động



1. Kiểm tra xung đột plugin

Xung đột plugin là nguyên nhân hàng đầu. Cách nhanh nhất là tạm thời vô hiệu hóa tất cả plugin ngoại trừ Elementor và Elementor Pro, sau đó kiểm tra lại Preview.

1. Vào Plugins → Installed Plugins.
2. Chọn tất cả plugin (bỏ chọn Elementor và Elementor Pro).
3. Chọn hành động “Deactivate” và áp dụng.
4. Thử mở lại trình chỉnh sửa Elementor và nhấn Preview.

Nếu Preview hoạt động, kích hoạt lại từng plugin một và kiểm tra sau mỗi lần để xác định plugin gây lỗi. Các plugin thường xung đột bao gồm: WP Rocket, W3 Total Cache, Autoptimize, Wordfence, Sucuri, Yoast SEO (trong một số trường hợp), Jetpack.

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

Elementor yêu cầu tối thiểu 128MB bộ nhớ cho PHP, nhưng khuyến nghị là 256MB hoặc cao hơn. Để kiểm tra giới hạn hiện tại, vào Elementor → System Info. Nếu thấp hơn 128MB, hãy tăng lên bằng một trong các cách sau:

• Chỉnh sửa file wp-config.php: thêm dòng define('WP_MEMORY_LIMIT', '256M'); ngay trước dòng / That's all, stop editing! /.
• Chỉnh sửa file .htaccess (nếu được hosting hỗ trợ): thêm php_value memory_limit 256M.
• Liên hệ nhà cung cấp hosting để tăng giới hạn qua cPanel hoặc yêu cầu hỗ trợ.

3. Xóa cache và kiểm tra chế độ ẩn danh

Cache trình duyệt thường lưu phiên bản cũ của file JavaScript/CSS, gây lỗi hiển thị Preview. Hãy thực hiện:

• Xóa cache trình duyệt (Chrome: Settings → Privacy and security → Clear browsing data).
• Thử mở trang chỉnh sửa trong cửa sổ ẩn danh (Incognito).
• Nếu dùng plugin cache (WP Rocket, W3 Total Cache, LiteSpeed Cache), xóa toàn bộ cache từ trang quản trị.
• Vô hiệu hóa tạm thời plugin cache trong khi làm việc với Elementor.

4. Kiểm tra và sửa lỗi JavaScript

Lỗi JavaScript thường xuất hiện khi có theme hoặc plugin chèn script lỗi thời. Mở Developer Tools của trình duyệt (F12), vào tab Console và kiểm tra thông báo lỗi. Các lỗi thường thấy:

• Uncaught TypeError – thường do xung đột jQuery.
• Cannot read property 'xxx' of null – plugin tải script sai thứ tự.

Giải pháp:

• Đảm bảo theme và plugin được cập nhật lên phiên bản mới nhất.
• Tạm thời chuyển sang theme WordPress mặc định (Twenty Twenty-Four) để xác định theme có lỗi không.
• Nếu lỗi từ plugin, hãy liên hệ nhà phát triển hoặc tìm giải pháp thay thế.

5. Regenerate CSS và xóa Elementor Data

Elementor lưu trữ CSS tĩnh để tăng tốc. Khi file CSS bị hỏng, Preview không hiển thị đúng. Cách khắc phục:

1. Vào Elementor → Tools → Regenerate CSS.
2. Chọn “Regenerate Files & Data”.
3. Vào Elementor → Tools → Version Control và thử thay đổi chế độ CSS Method (từ “Internal Embed” sang “External File” hoặc ngược lại).
4. Lưu thay đổi và thử lại Preview.

6. Kiểm tra phiên bản PHP và cấu hình server

Elementor yêu cầu PHP 7.4 trở lên. Sử dụng plugin “Health Check & Troubleshooting” hoặc vào Tools → Site Health để kiểm tra. Nếu PHP dưới 7.4, hãy nâng cấp qua cPanel hoặc yêu cầu hosting hỗ trợ. Ngoài ra, kiểm tra các giá trị sau trong php.ini:

Thông số	Giá trị đề xuất
max_execution_time	300
max_input_vars	3000
post_max_size	64M
upload_max_filesize	64M

7. Vô hiệu hóa tạm thời CDN hoặc tường lửa

CDN có thể cache phiên bản cũ của trang, trong khi tường lửa (như Cloudflare, Wordfence) có thể chặn các yêu cầu AJAX của Elementor. Tạm thời tạp dịch vụ CDN và tường lửa, kiểm tra Preview. Nếu hoạt động, thêm ngoại lệ cho các URL chứa /wp-json/elementor/ hoặc /wp-admin/admin-ajax.php.

8. Sửa lỗi Mixed Content khi dùng SSL

Nếu website dùng HTTPS nhưng theme hoặc plugin gọi tài nguyên HTTP, trình duyệt sẽ chặn và gây lỗi Preview. Kiểm tra Console xem có cảnh báo mixed content không. Sử dụng plugin “Really Simple SSL” hoặc “SSL Insecure Content Fixer” để tự động sửa.

So sánh các phương pháp khắc phục nhanh và chuyên sâu



Phương pháp	Thời gian thực hiện	Hiệu quả cao nhất khi	Rủi ro
Xóa browser cache & dùng incognito	1 phút	Lỗi do cache trình duyệt	Không có
Tắt tất cả plugin (trừ Elementor)	5 phút	Xung đột plugin	Gián đoạn tạm thời chức năng site
Tăng PHP Memory Limit	10 phút	Giới hạn bộ nhớ thấp	Có thể ảnh hưởng nếu set quá cao so với server
Regenerate CSS & data	2 phút	File CSS hỏng	Không có
Chuyển theme mặc định	3 phút	Lỗi do theme	Mất giao diện tạm thời

Những sai lầm thường gặp khi tự sửa lỗi Elementor Preview không hoạt động


• Chỉnh sửa file core mà không backup – việc thay đổi trực tiếp file wp-config.php hoặc .htaccess có thể làm hỏng site nếu sai cú pháp.
• Vô hiệu hóa tất cả plugin cùng lúc mà không ghi nhớ – khó xác định plugin gây lỗi, nên kích hoạt từng cái một.
• Không cập nhật Elementor lên phiên bản mới – các bản vá thường sửa lỗi preview.
• Bỏ qua bước kiểm tra console – Console chứa thông tin lỗi chính xác mà không cần đoán mò.
• Dùng hosting quá rẻ – shared hosting giá rẻ thường không đáp ứng được yêu cầu tài nguyên cho Elementor.

Các câu hỏi thường gặp về lỗi Elementor Preview không hoạt động

Lỗi Elementor Preview chỉ xảy ra với một trang cụ thể?

Có thể do trang đó chứa widget hoặc shortcode từ plugin không tương thích. Hãy thử tạo trang mới với nội dung tối giản, nếu Preview hoạt động thì nguyên nhân nằm ở nội dung cũ.

Tôi có cần cài lại Elementor không?

Chỉ cài lại khi đã thử tất cả cách trên và vẫn không khắc phục được. Trước khi cài lại, hãy backup dữ liệu (Elementor → Tools → Export) và xóa hoàn toàn plugin qua FTP, sau đó cài mới.

Lỗi white screen khi preview là do đâu?

Thường do PHP memory limit quá thấp hoặc lỗi fatal error từ plugin. Kiểm tra file debug.log trong thư mục /wp-content/ để biết chính xác.

Elementor Preview không hoạt động trên điện thoại?

Có thể do responsive mode không tải đúng CSS. Dùng chế độ responsive trong Elementor, xóa cache và kiểm tra lại.

Có plugin nào hỗ trợ sửa lỗi preview không?

Plugin “Health Check & Troubleshooting” giúp cô lập lỗi mà không ảnh hưởng đến người dùng. Ngoài ra, “Elementor Debug” (do Elementor phát hành) cung cấp thông tin gỡ lỗi chi tiết.

Kết luận

Lỗi Elementor Preview không hoạt động thường xuất phát từ xung đột plugin, giới hạn bộ nhớ PHP, cache, hoặc lỗi JavaScript. Bằng cách áp dụng tuần tự các giải pháp trong bài viết này – từ đơn giản như xóa cache, chạy incognito, đến nâng cấp PHP và tăng memory limit – bạn có thể khắc phục triệt để vấn đề. Luôn backup website trước khi thực hiện bất kỳ thay đổi nào. Nếu đã thử tất cả mà vẫn thất bại, hãy kiểm tra log lỗi server hoặc nhờ đến sự hỗ trợ từ nhà cung cấp hosting hoặc đội ngũ hỗ trợ Elementor. Một website được tối ưu tốt sẽ giúp Elementor vận hành mượt mà, mang lại trải nghiệm thiết kế trơn tru.