Elementor – Hướng dẫn tùy chỉnh giao diện Mobile, tablet

Cách điều chỉnh cài đặt cho thiết bị di động, máy tính bảng và máy tính để bàn

Nhiều tính năng có thể chỉnh sửa có cài đặt Di động , Máy tính bảng và Máy tính để bàn . Sử dụng phổ biến nhất bao gồm: Kích thước văn bản, Ký quỹ và Đệm của các yếu tố, v.v.

  1. Tìm biểu tượng Viewport Hình ảnh thuộc sở hữu của trang web qnet88.combên cạnh thành phần riêng lẻ mà bạn muốn kiểm soát.
  2. Nhấp vào Hình ảnh thuộc sở hữu của trang web qnet88.combiểu tượng thiết bị bạn cần, để chỉnh sửa cài đặt của thiết bị.

Ngay cả hình ảnh nền có thể được kiểm soát độc lập trên mỗi thiết bị.

Hình ảnh thuộc sở hữu của trang web qnet88.com

Hình ảnh phản hồi

Hình nền trong Elementor tự động phản hồi thiết bị, nhưng bạn cũng có quyền kiểm soát nhiều tùy chọn hơn cho mỗi thiết bị.

Hình ảnh thuộc sở hữu của trang web qnet88.com

Kiểm soát hình ảnh và đường viền nền đáp ứng

  1. Hình nền : Bạn có thể chọn một hình nền khác nhau cho mỗi thiết bị nếu cần, cho dù đó là phiên bản phù hợp với kích thước của cùng một hình ảnh hay một hình ảnh hoàn toàn khác nhau.
  2. Tùy chọn hiển thị hình ảnh nền : Bạn có thể chọn một vị trí hình ảnh, tệp đính kèm, lặp lại và kích thước khác nhau cho mỗi thiết bị. Bằng cách này, bạn có nhiều quyền kiểm soát hơn khu vực nào của hình ảnh được hiển thị trên các kích thước thiết bị khác nhau.

Tầm nhìn

Bạn có thể chọn Hiện  /  ẩn một phần theo quy định của thiết bị.

  1. Chuyển đến Cài đặt phần > Nâng cao
  2. Theo Responsive  > Tầm nhìn 
  3. Đặt tùy chọn hiển thị của bạn, chọn từ Ẩn trên Máy tính để bàn , Ẩn trên Máy tính bảng hoặc Ẩn trên Di động .

Mẹo: Trong khi Bảng điều khiển tiện ích mở, các chế độ Xem trước phản hồi sẽ tiếp tục hiển thị các phần bạn đã ẩn, làm cho nó xuất hiện như thể chúng sẽ không bị ẩn trên trang web trực tiếp. Tuy nhiên, tất cả những gì bạn cần làm là nhấp vào mũi tên Hình ảnh thuộc sở hữu của trang web qnet88.comđể ẩn Bảng Widgets và bản xem trước phản hồi sẽ ngay lập tức phản ánh thực tế rằng phần của bạn bị ẩn. Xem cách hiển thị và ẩn Bảng Widgets ảnh hưởng đến Bản xem trước phản hồi của phần bị ẩn trên thiết bị di động.

Hình ảnh thuộc sở hữu của trang web qnet88.com

Thay đổi điểm dừng di động và máy tính bảng

Bạn có thể đặt giá trị điểm dừng trên thiết bị di động và máy tính bảng.

  1. Chuyển đến  Elementor  >  Cài đặt  >  Tab Kiểu và đặt giá trị điểm dừng cho thiết bị di động và máy tính bảng
  2. Lưu các thay đổi của bạn
  3. Chuyển đến Elementor > Công cụ >  Tab chung >  Tạo lại CSS,  nhấp vào  Tạo lại tệp

Đặt hàng cột

Tính năng này đảo ngược thứ tự của các cột.

Để sử dụng Thứ tự cột, hãy đi tới Cài đặt phần > Nâng cao > Phản hồi > Cột ngược và đặt thành  .

Xem trước thiết bị

Chuyển giữa các giao diện Desktop , Mobile hoặc Tablet bằng cách nhấp vào các biểu tượng tương ứng ở cuối bảng điều khiển.

Hình ảnh thuộc sở hữu của trang web qnet88.com


Cứu giúp! Tôi đã thay đổi một cái gì đó trong khi xem trước trên thiết bị di động và nó cũng thay đổi trên máy tính để bàn! Tại sao?

  • Bạn không thể xóa một yếu tố (tiện ích, cột hoặc phần) trong khi xem trước một chế độ (ví dụ như điện thoại di động) và hy vọng nó chỉ bị xóa khỏi loại thiết bị đó. Xóa các yếu tố sẽ xóa chúng trên tất cả các thiết bị. Tuy nhiên, bạn có thể sử dụng tính năng Hiển thị Phản hồi của phần tử bằng cách đi tới tab Nâng cao> Phản hồi của phần tử  và bật bất kỳ tùy chọn hiển thị nào của phần tử ( Ẩn trên Máy tính để bàn, Ẩn trên Máy tính bảng hoặc Ẩn trên Di động ). Mặc dù phần tử sẽ không bị xóa trên các thiết bị đó, nhưng phần tử sẽ bị ẩn.
  • Bạn không thể di chuyển các yếu tố xung quanh trong khi xem trước một chế độ và hy vọng chúng chỉ được di chuyển cho loại thiết bị đó. Di chuyển các yếu tố xung quanh trong bất kỳ chế độ xem trước nào sẽ di chuyển chúng trên tất cả các thiết bị. Một ngoại lệ cho điều này là tính năng Mục> Nâng cao> Phản hồi> Cột ngược , giúp di chuyển các cột đến vị trí đảo ngược của chúng.
  • Nếu một thành phần không có Biểu tượng Viewport Hình ảnh thuộc sở hữu của trang web qnet88.com bên cạnh, việc thay đổi thành phần đó trong một chế độ xem trước sẽ thay đổi nó trên tất cả các thiết bị.

7 thoughts on “Elementor – Hướng dẫn tùy chỉnh giao diện Mobile, tablet

  1. Khánh says:

    Hi bác ! Tình hình là em thấy cái Elementor này có vấn đề về thiết kế Responsive thì phải. Kiểu em thiết kế cho Mobile nhìn thì rất ổn (E đã setup cho destop và Tablet hiển thị cân xứng rồi). Nhưng nó gặp vấn đề kiểu không có Form thiết kế cho Phablet (dạng mấy máy to kiểu S10 Plus) ấy bác.
    Nhìn giao diện Mobile = Mi6 (5.15 inch) ổn (Form thiết kế chuẩn của Elementor).
    Đến lúc xem lại = S10 5G thì ôi thôi giao diện nó lại hiển thị 1 kiểu khác. Mà trong Elementor lại không có Form để chỉnh cho Phablet. E thấy mỗi (Destop, Tablet, Phone nhỏ).
    Mong cao nhân Admin có thể cứu em vụ này với. Thank admin nhiều ạ !!!

    • Bố cu Hoàng says:

      chuẩn rồi bạn ơi, nó sẽ có lỗi như vậy, flatsome cũng bị thế và nhiều web báo chí cũng vẫn bị thế do việc mỗi nhà sx đều để kích thước và tỉ lệ khung hình thay đổi oái oăm dạng 18:9 hay 20:9 chẳng hạn thì bó tay rồi. Mình khuyên bạn nên để nó hiển thị dạng tĩnh và mobile thì mỗi hàng 1 ảnh riêng sp thì 2 sp 1 hàng. Như vậy nó sẽ auto fit thôi. Chứ không có phương án nào tốt hơn cả bạn ạ

      • Khánh says:

        Vâng bác. Để e thử. Căn bản e đang thử làm mấy trang web du lịch mà thấy nó hiển thị không được tối ưu.E cài nhiều cái Custom Breakpoint for Elementor để setup thêm kích cỡ Mobile để thiết kế mà chẳng có cái nào ổn với hoạt động được cả :(. Cái này có khi mấy bác giỏi Css, Html thì tự sửa, tự thêm được. Còn cho tay ngang thì hơi khó bác nhỉ.

        Thấy mua Theme về rồi sửa lại ổn hơn. Mỗi tội không tối ưu được điểm Page Speed Insight. Làm web đúng khoai thật đấy !

  2. Duyên says:

    Bác cho mình hỏi có cách nào để điểu chỉnh bỏ thanh cuộn ngang trên giao diện điện thoại không ạ? bữa trước mình làm được rồi tự nhiên nay lại quên mất, tìm mãi không ra bài viết nào hướng dẫn. Mình xin cảm ơn trước ạ!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Hotline: 0974.0707.83(Zalo/Viber)