Lỗi the_content thêm vào đâu trong elementor năm 2024

Chủ đề dành cho những bạn đang muốn tìm cách sửa lỗi bố cục trên Elementor. Tôi đã thống kê một số lỗi bố cục phổ biến và cách khắc phục vô cùng dễ thực hiện.

Khi sử dụng Elementor, đôi lúc bạn sẽ gặp sự cố về bố cục

Khi sử dụng Elementor, tôi nghĩ đôi lúc bạn sẽ phải đối mặt với một số sự cố không mong muốn. Chẳng hạn như vấn đề về bố cục. Nếu bạn đang gặp trường hợp này. Hãy tham khảo các cách sửa lỗi bố cục trên Elementor mà tôi đã liệt kê trong bài viết.

Có thể bạn quan tâm:

Hướng dẫn sửa lỗi không thể chỉnh sửa trên Elementor

Hướng dẫn xử lý một số lỗi thường gặp trên Elementor

Padding ở đầu và cuối trang Web

Lỗi này thường là do chủ đề của bạn đã thêm Padding vào. Thông thường, bạn sẽ có thể tìm thấy tùy chọn để xóa nó thông qua Customizer. Bạn chỉ cần đi tới Appearance, sau đó chọn Customize và tìm một tùy chọn kiểm soát điều này.

Tôi sẽ mô tả một ví dụ cụ thể để bạn dễ hình dung nhé. Bạn dùng một chủ đề cho phép bật hoặc tắt Top Bar. Nếu Top Bar được kích hoạt nhưng không có Widget nào được gán cho nó, Top Bar có thể xuất hiện dưới dạng một không gian trống. Để giải quyết vấn đề này, bạn có thể tắt Top Bar trống này.

Ngoài ra, Padding cũng có thể được áp dụng cho Top Bar. Vì vậy, ngay cả khi bạn đang sử dụng Top Bar cùng với các tiện ích. Bạn vẫn có thể tạo Padding phía trên và / hoặc bên dưới nó, dựa trên cài đặt như hình dưới.

Mỗi chủ đề có thể xử lý việc này theo cách khác nhau. Vì vậy hình ảnh trên chỉ là một ví dụ điển hình. Nhiều chủ đề có thể không có Top Bar. Tuy nhiên, chúng vẫn có thể có các tùy chọn Đầu trang hoặc Chân trang cho phép bạn kiểm soát phần Padding hoặc lề. Ngoài ra, chủ đề có thể đã chỉ định lề hoặc Padding trong CSS Stylesheet của nó. Tuy nhiên, nó không có tùy chọn trong Customizer để dễ dàng thay đổi điều này. Trong trường hợp này, bạn hãy kiểm tra tài liệu hoặc giải pháp hỗ trợ của Theme để được trợ giúp trong việc ghi đè CSS.

Thanh cuộn ngang trên thiết bị di động

Khi lướt Web di động, đôi lúc bạn sẽ gặp tình trạng xuất hiện thanh cuộn ngang trên thiết bị. Điều này có thể gây bất tiện khi xem nội dung.

Sự cố này là do một phần tử của bạn tràn lề. Lúc này, bạn cần nhanh chóng tìm xem phần tử nào đang gây ra sự cố. Khi bạn đã xác định phần nào bị tràn lề, bạn có thể chỉnh sửa Tab Layout của phần đó và thay đổi Overflow thành Hidden.

Tôi có một cách đơn giản hơn để bạn tìm phần bị tràn lề. Bạn chỉ cần lưu trang dưới dạng một Template, sau đó chỉnh sửa mẫu. Bạn xóa từng phần, từng phần một và kiểm tra trên thiết bị di động sau mỗi lần xóa. Khi vấn đề biến mất có nghĩa bạn đã tìm thấy phần có vấn đề rồi đấy.

Bộ nhớ đệm ngăn chặn Website trực tiếp hiển thị các thay đổi trong trình chỉnh sửa

Cách sửa lỗi bố cục trên Elementor tiếp theo tôi muốn hướng dẫn có liên quan đến vấn đề hiển thị các thay đổi trong trình chỉnh sửa. Cụ thể, những thay đổi bạn thấy trong trình chỉnh sửa không hiển thị trên trang Web trực tiếp.

Lỗi này thường là do sự cố bộ nhớ đệm. Khi các kiểu (Styles) của bạn không được áp dụng trực tuyến, hãy làm theo các bước tôi liệt kê bên dưới để xử lý các vấn đề về bộ nhớ Cache:

• Bạn đi tới Elementor, chọn Tools, Click Regenerate CSS, sau đó bạn nhấp vào nút Regenerate Files.
• Bạn cập nhật trang của mình. Bạn có thể cần thực hiện một thay đổi nhỏ để bật nút Cập nhật (Update).
• Tiếp đến, bạn xóa tất cả bộ nhớ Cache. Bạn lưu ý xóa cả bộ nhớ Cache của máy chủ nếu nó tồn tại, bất kỳ Caching Plugins nào của WordPress bạn đang sử dụng và bộ nhớ Cache của trình duyệt của riêng bạn. Bạn cũng có thể thử kiểm tra trong một trình duyệt khác hoặc trong một trình duyệt ẩn danh.

Một số Elements biến mất trên trang Web

Làm sao để sửa lỗi bố cục trên Elementor khiến cho một số Elements (phần tử) biến mất trên trang Web trực tiếp? Tôi sẽ hướng dẫn bạn ngay sau đây.

Nói chung, tình trạng một số phần tử biến mất là do xung đột với Plugin hoặc với một số tập lệnh được thêm vào qua chủ đề của bạn. Bạn có thể thực hiện các bước sau để khắc phục sự cố này:

• Đầu tiên, bạn hủy kích hoạt các Plugin của bạn (ngoài Elementor và Elementor Pro). Nếu nó giải quyết được vấn đề, hãy kích hoạt lại từng Plugin.
• Bạn chuyển sang chủ đề WordPress mặc định, chẳng hạn như Twenty Nineteen. Nếu hữu ích, điều đó có nghĩa là có một số tập lệnh được thêm vào qua chủ đề của bạn xung đột với các phần tử.
• Bạn cần đảm bảo rằng trên trang không có nội dung hỗn hợp. Ví dụ về nội dung hỗ hợp: Hình ảnh hoặc Icon được tải qua HTTP trong khi trang Web của bạn sử dụng giao thức HTTPS. Nội dung hỗn hợp có thể làm cho hình ảnh và Icon của bạn biến mất.

Tôi muốn lưu ý với bạn một trường hợp trong Safari. Nếu bạn không thấy các hiệu ứng chuột hoặc bạn đang gặp sự cố các phần tử biến mất. Thì điều này là do WordPress đang sử dụng phiên bản jQuery cũ. Trong một số trường hợp, việc xem các hiệu ứng Mouse Track qua Safari có thể gây ra lỗi jQuery khiến các phần tử biến mất, chẳng hạn như các mũi tên Carousel bị thiếu. Để giải quyết vấn đề, bạn hãy xóa Entrance Animations khỏi các Widgets có Motion Effects và / hoặc xóa Mouse Effects khỏi các khu vực đã kích hoạt đồng thời cả hiệu ứng cuộn và chuột.

Flickers / FOUC

Các sự cố tải có thể gây ra lỗi FOUC

Các sự cố tải có thể gây ra FOUC (Flash Of Unstyled Content). Có nhiều lý do gây nên lỗi này. Chẳng hạn như do cách Elementor nhúng các mẫu của nó. Khi một trang đang tải, Elementor không thể nhận ra mẫu nào đã được nhúng vào trang. Đây là lý do tại sao Elementor tải chúng ở chân trang.

Trong một số trường hợp, điều này có thể gây ra hiện tượng nhấp nháy (Flicker hoặc FOUC) khi tải trang. Bạn có thể giải quyết vấn đề này bằng cách sử dụng một trong các phương pháp tôi hướng dẫn sau:

• Bạn có thể xác định CSS Print Method là nội tuyến (Inline) thay vì sử dụng các tệp bên ngoài. Bạn có thể thực hiện điều này bằng cách đi tới Elementor, chọn Settings, Click Advanced=> CSS Print Method và nhấp Internal Embedding.
• Tùy chọn thứ hai tôi có muốn giới thiệu với bạn là tải các tệp CSS bằng một hành động trong File Functions.php của chủ đề con. Ví dụ:

add_action( 'wp_enqueue_scripts', function() {
  if ( ! class_exists( 'ElementorCoreFilesCSSPost' ) ) {
    return;
  }
  $template_id = 123456;
  $css_file = new ElementorCoreFilesCSSPost( $template_id );
  $css_file->enqueue();
}, 500 );

Thay vì $template_id = 123456, bạn hãy nhập ID Template của bạn và nó sẽ luôn tải trong tiêu đề của trang Web. Tuy nhiên, tôi muốn nhắc bạn là cách này chỉ có thể sử cho các trang cụ thể.

• Một số Plugin tối ưu hóa cũng có thể giải quyết vấn đề này.

Các giải pháp trên có liên quan nếu bạn nhúng một mẫu hoặc một tiện ích chung của Elementor vào đầu trang hoặc chân trang của bạn thông qua các tùy chọn chủ đề.

Nhưng tôi muốn nhấn mạnh rằng bạn có thể gặp phải FOUC khi sử dụng tính năng Stretch Section. Nguyên nhân là vì tùy chọn này hoạt động với mã JS, hiện tượng nhấp nháy có thể xảy ra khi tải tập lệnh. Hiện tượng FOUC cũng có thể xảy ra nếu bạn sử dụng ảnh lớn hoặc quá nặng.

Có thể bạn quan tâm:

Cloud Hosting WordPress – giải pháp tối ưu cho Website mã nguồn WordPress

Kết luận

Nhìn chung, Elementor là một trong những trình xây tạo trang WordPress phổ biến nhất hiện nay. Nó giúp bạn dễ dàng xây dựng trang Web của mình theo kiểu kéo và thả. Khi sử dụng bất kỳ Plugin, công cụ nào cũng không thể tránh khỏi các lỗi, vấn đề nhất định. Elementor cũng không ngoại lệ. Bạn có thể gặp một số vấn đề như lỗi bố cục trên Elementor. Tôi hy vọng bạn đã biết cách sửa lỗi bố cục trên Elementor thông qua bài viết này. Hãy đăng ký Blog của tôi để cập nhật những thông tin hữu ích, tin tức mới nhất nhé.