SEO

Các Vấn Đề Thường Gặp Về Bố Cục Trên Elementor

Các Vấn Đề Thường Gặp Về Bố Cục Trên Elementor

Bạn sẽ gặp các vấn đề về bố cục trên Elementor khi sử dụng Elementtor mà đôi khi không biết vì sao nó lại xuất hiện những lỗi như thế, hãy theo dõi bài viết dưới đây cùng Greenapps để nhận được câu trả lời nhé.

Các Vấn Đề Thường Gặp Về Bố Cục Trên Elementor

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

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.

Các Vấn Đề Thường Gặp Về Bố Cục Trên Elementor

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.

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

Khi lướt Web trên 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.

Các Vấn Đề Thường Gặp Về Bố Cục Trên Elementor

Để đơn giản hơn, 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.

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

Tiếp đến là vấn đề hiển thị các thay đổi trong trình chỉnh sửa. Cụ thể là 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.
Các Vấn Đề Thường Gặp Về Bố Cục Trên Elementor

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

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.

Lưu ý với 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.

5. Flickers / 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 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ụ

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ử dụng 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.

LỜI KẾT

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. Hy vọng với bài viết trên có thể giúp ích cho bạn.

Hãy theo dõi Facebook Greenapps để xem thêm được nhiều bài viết hơn nhé!

Để lại bình luận

Your email address will not be published. Required fields are marked *