Cách xem phiên bản di động của các trang web WordPress từ máy tính để bàn

Bạn có muốn xem trước phiên bản di động của trang web WordPress của mình không? Xem trước bố cục trên thiết bị di động giúp bạn thấy trang web của mình trông như thế nào trên thiết bị di động.


Mặc dù bạn chắc chắn có thể xem trang web trực tiếp của mình trên điện thoại, nhưng điều này không giúp ích gì trong giai đoạn phát triển.

Ngay cả khi trang web của bạn đang hoạt động, nó vẫn dễ dàng xem phiên bản di động trên máy tính để bàn, do đó bạn có thể nhanh chóng thực hiện các thay đổi và xem hiệu ứng của chúng.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn hai cách đơn giản để dễ dàng xem trước bố cục di động của trang web WordPress của bạn mà không cần chuyển sang các thiết bị khác.

Tại sao bạn nên xem trước bố cục di động của mình

Hơn 50% khách truy cập trang web của bạn sẽ sử dụng điện thoại di động của họ để truy cập trang web của bạn. Khoảng 3% sẽ sử dụng máy tính bảng.

Điều này có nghĩa là có một trang web trông tuyệt vời trên thiết bị di động là điều cần thiết.

Trên thực tế, thiết bị di động rất quan trọng đến nỗi Google hiện đang sử dụng một chỉ số đầu tiên trên điện thoại di động của YouTube cho thuật toán xếp hạng trang web của họ.

Ngay cả khi bạn sử dụng một chủ đề WordPress đáp ứng, bạn vẫn cần kiểm tra xem trang web của bạn trông như thế nào trên thiết bị di động. Bạn thậm chí có thể muốn tạo các phiên bản khác nhau của các trang đích chính được tối ưu hóa cho người dùng di động Nhu cầu của người dùng (nhiều hơn về điều này sau).

Trong bài viết này, chúng tôi sẽ đề cập đến hai phương pháp kiểm tra khác nhau về cách trang web của bạn trông trên thiết bị di động bằng trình duyệt máy tính để bàn.

Điều quan trọng cần lưu ý là hầu hết các bản xem trước trên thiết bị di động sẽ không hoàn hảo vì có rất nhiều kích thước và trình duyệt màn hình di động khác nhau. Thử nghiệm cuối cùng của bạn phải luôn là nhìn vào trang web của bạn trên một thiết bị di động thực tế.

Video hướng dẫn

Đăng ký WPBeginner

Nếu bạn không thích video hoặc cần thêm hướng dẫn, hãy tiếp tục đọc.

1. Sử dụng tùy biến chủ đề WordPress WordPress

Bạn có thể sử dụng tùy biến chủ đề WordPress để xem trước phiên bản di động của trang web WordPress của bạn.

Chỉ cần đăng nhập vào bảng điều khiển WordPress của bạn và đi đến Ngoại hình »Tùy chỉnh màn.

Bảng điều khiển WordPress hiển thị nơi tìm Giao diện - Tùy chỉnh

Điều này sẽ mở ra tùy biến chủ đề WordPress. Tùy thuộc vào chủ đề bạn sử dụng, bạn có thể thấy các tùy chọn hơi khác nhau trong menu bên trái ở đây:

Tùy biến chủ đề WordPress (chế độ xem trên máy tính để bàn)

Ở dưới cùng của màn hình, nhấp vào biểu tượng di động. Sau đó, bạn sẽ thấy một bản xem trước về cách trang web của bạn trông trên thiết bị di động.

Chuyển sang chế độ xem trên thiết bị di động trong tùy biến chủ đề

Ghi chú: Các biểu tượng chỉnh sửa màu xanh chỉ có trong trình xem trước. Bạn đã giành chiến thắng nhìn thấy những điều này trên trang web trực tiếp của bạn.

Phương pháp xem trước phiên bản di động này đặc biệt hữu ích khi bạn chưa hoàn thành việc tạo blog của mình hoặc khi nó ở chế độ bảo trì.

Bạn có thể thay đổi và kiểm tra xem chúng trông như thế nào trước khi bạn đặt chúng sống.

2. Sử dụng Chế độ thiết bị DevTools của Google Chrome

Trình duyệt Google Chrome có một bộ công cụ dành cho nhà phát triển cho phép bạn chạy các kiểm tra khác nhau trên bất kỳ trang web nào, bao gồm xem bản xem trước trang web của bạn trông như thế nào trên thiết bị di động.

Chỉ cần mở trình duyệt Google Chrome trên máy tính để bàn của bạn và truy cập trang bạn muốn kiểm tra.

Đây có thể là bản xem trước của một trang trên trang web của bạn hoặc thậm chí có thể là trang web của đối thủ cạnh tranh của bạn.

Tiếp theo, bạn cần nhấp chuột phải vào trang và chọn ‘Kiểm tra đường truyền.

Chọn tùy chọn Kiểm tra trong Chrome

Một khung mới sẽ mở ra ở phía bên tay phải, như thế này:

Chế độ xem máy tính để bàn mặc định khi kiểm tra trang web của bạn trong Chrome

Trong chế độ xem của nhà phát triển, bạn sẽ có thể thấy mã nguồn HTML của trang web của bạn.

Tiếp theo, nhấp vào nút ‘Chuyển đổi nút Thanh công cụ thiết bị để thay đổi chế độ xem trên thiết bị di động.

Kiểm tra chế độ xem trên thiết bị di động của bạn trong Chrome

Bạn sẽ nhận thấy bản xem trước của trang web của bạn sẽ thu nhỏ về kích thước màn hình di động.

Bạn cũng sẽ nhận thấy trang web của bạn thay đổi ngoại hình sang chế độ xem trên thiết bị di động. Trong ví dụ trên, menu đã bị thu gọn và biểu tượng Tìm kiếm đã di chuyển sang bên trái thay vì bên phải của menu.

Khi bạn chạy con trỏ chuột trên giao diện di động của trang web, nó sẽ trở thành một vòng tròn, như thế này:

Con trỏ chuột tròn trong chế độ xem Kiểm tra của Chrome

Vòng tròn này có thể được di chuyển bằng chuột để bắt chước màn hình cảm ứng trên thiết bị di động.

Bạn cũng có thể giữ phím ‘Shift, sau đó nhấp và di chuyển chuột để mô phỏng độ chụm của màn hình di động để phóng to hoặc thu nhỏ.

Phía trên giao diện di động của trang web của bạn, bạn sẽ thấy một số tùy chọn bổ sung.

Tùy chọn di động bổ sung để kiểm tra trang web của bạn trong Chrome

Những điều này cho phép bạn làm một số điều thêm. Bạn có thể kiểm tra xem trang web của bạn trông như thế nào trên các loại điện thoại thông minh khác nhau. Bạn cũng có thể mô phỏng hiệu suất của trang web của bạn trên các kết nối 3G nhanh hay chậm. Bạn thậm chí có thể xoay màn hình di động bằng biểu tượng xoay.

Cách tạo nội dung cụ thể cho thiết bị di động trong WordPress

Điều quan trọng là trang web của bạn có thiết kế đáp ứng, vì vậy khách truy cập di động của bạn có thể dễ dàng điều hướng trang web của bạn.

Nhưng chỉ đơn giản là có một trang web đáp ứng có thể không đi đủ xa. Người dùng trên thiết bị di động thường tìm kiếm những thứ khác với người dùng Máy tính để bàn.

Nhiều chủ đề và plugin cao cấp cho phép bạn tạo các yếu tố hiển thị khác nhau trên máy tính để bàn so với thiết bị di động. Bạn cũng có thể sử dụng plugin xây dựng trang như Beaver Builder để chỉnh sửa trang đích của mình trong chế độ xem trên thiết bị di động.

Bạn chắc chắn nên tạo nội dung dành riêng cho thiết bị di động cho các biểu mẫu tạo khách hàng tiềm năng của mình. Trên thiết bị di động, chúng nên yêu cầu thông tin tối thiểu, lý tưởng chỉ là một địa chỉ email. Họ cũng nên nhìn tốt và dễ gần.

Một cách tuyệt vời để tạo các quảng cáo cụ thể trên thiết bị di động và hình thức tạo khách hàng tiềm năng là với OptinMonster. Nó là plugin bật lên WordPress mạnh mẽ nhất và công cụ tạo khách hàng tiềm năng trên thị trường.

Họ có các quy tắc hiển thị nhắm mục tiêu thiết bị cụ thể cho phép bạn hiển thị các chiến dịch khác nhau cho người dùng di động so với người dùng máy tính để bàn. Bạn thậm chí có thể kết hợp điều đó với tính năng nhắm mục tiêu theo địa lý của OptinMonster và các tính năng cá nhân hóa nâng cao khác để có được chuyển đổi tốt nhất.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách xem trước bố cục di động của trang web của bạn. Bạn cũng có thể muốn xem bài viết của chúng tôi về các plugin tốt nhất để chuyển đổi một trang web WordPress thành một ứng dụng di động.

Tặng kem: kiểm tra lựa chọn của chúng tôi về các dịch vụ điện thoại kinh doanh tốt nhất, để bạn có thể thêm nút bấm để gọi cho người dùng di động.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me