Làm cho trang web Elementor của bạn phản hồi thân thiện hơn với thiết bị di động

Trang web đáp ứng trên thiết bị di động là một phần quan trọng của bất kỳ hoạt động kinh doanh trực tuyến nào.

Google đã sử dụng tốc độ tải trang trên thiết bị di động làm yếu tố chính quyết định thứ hạng tìm kiếm của bất kỳ trang web nào. Lý do chủ yếu là vì hơn một nửa lưu lượng truy cập web toàn cầu đến từ lưu lượng truy cập trên thiết bị di động.

Do đó, một trang web đáp ứng trên thiết bị di động là điều không thể tránh khỏi đối với cả tình trạng trang web của bạn và thứ hạng tốt hơn trong công cụ tìm kiếm Google. Trong bài viết này, chúng tôi sẽ tập trung vào cách chúng tôi có thể tạo một trang web phản hồi trên thiết bị di động bằng trình tạo trang Elementor.

• Thiết kế trang web đáp ứng của Elementor là gì
• Cách điều chỉnh cài đặt Di động, Máy tính để bàn và Tab
• Điều chỉnh Tiêu đề trong màn hình di động của bạn
• Điều chỉnh phần đệm hoặc lề cho thiết bị di động
• Tạo từng cột theo chiều ngang và nó sẽ điều chỉnh tuyệt vời trên tất cả các thiết bị
• Thay đổi hình nền theo chế độ xem trên thiết bị di động/máy tính để bàn
• Thay đổi mức độ hiển thị của bất kỳ phần nào trên chế độ xem trên máy tính để bàn/thiết bị di động
• Thay đổi thứ tự cột
• Tạo một phần thay thế
• Điều chỉnh độ rộng cột
• Phần kết luận

Thiết kế trang web đáp ứng của Elementor là gì

Bố cục đáp ứng hoạt động sáng tạo bằng cách tự động chia tỷ lệ tất cả nội dung theo từng kích thước màn hình. Nó tự động thay đổi kích thước hình ảnh và nội dung trên màn hình thiết bị di động để người xem có thể xem nội dung của bạn mà không cần bất kỳ nỗ lực nào.

Hầu hết chúng ta đều mua một chủ đề được cho là có khả năng đáp ứng trên thiết bị di động; tuy nhiên, mọi thứ có thể khiến bạn khó chịu khi thiết kế chủ đề của bạn bị hỏng hoàn toàn trên màn hình thiết bị di động.

Để khắc phục những tình huống như vậy, chúng tôi đã đưa ra giải pháp đáp ứng trên thiết bị di động, nơi bạn có thể xây dựng thiết kế trang web của mình từ đầu bằng cách sử dụng của trình tạo trang Elementor . Với sự trợ giúp của các công cụ phản hồi dành cho thiết bị di động này, bạn có thể điều chỉnh bất kỳ góc nào trong bố cục trang web của mình, đặc biệt là kiểu chữ, phần đệm, lề và căn chỉnh trên thiết bị di động. Ngoài ra, bạn sẽ có thể thay đổi cài đặt cột và thứ tự trên Thiết bị di động.

Giờ đây, bạn có thể chỉnh sửa cài đặt trên thiết bị di động của trang bằng cách chuyển sang chế độ xem trên thiết bị di động và chọn các tùy chọn sau để điều chỉnh theo bố cục trên thiết bị di động.

1. Kiểm tra xem có Dòng tiêu đề nào trông quá lớn trên màn hình thiết bị di động hay không.
2. Kiểm tra phần đệm của nội dung hoặc khoảng trống ở các cạnh của nội dung
3. Kiểm tra căn chỉnh cột trang xem nó trông hoàn hảo như thế nào; ở giữa, phải hoặc trái
4. Kiểm tra thứ tự các cột xem chúng có xuất hiện đúng thứ tự hay không hoặc bạn cần thay đổi.

Bây giờ, hãy tìm hiểu sâu hơn và tìm hiểu mọi thứ sẽ diễn ra như thế nào với trình tạo Trang Elementor.

Cách điều chỉnh cài đặt Di động, Máy tính để bàn và Tab

Hầu hết tất cả các tính năng có thể chỉnh sửa đều có tùy chọn điều chỉnh cài đặt Di động, Máy tính để bàn và Tab. nếu bạn nhấp vào chế độ phản hồi ở cuối menu

Điều chỉnh Tiêu đề trong màn hình di động của bạn

Đôi khi, chúng tôi muốn có một tiêu đề đậm và nổi bật trên trang web dành cho máy tính để bàn của mình và nó trông hoàn toàn đẹp mắt trên màn hình máy tính để bàn, nhưng khi bạn bật chế độ xem Di động, tiêu đề đó sẽ chiếm toàn bộ màn hình và có vẻ không vừa vặn.

Bạn có thể điều chỉnh kích thước văn bản của bất kỳ thành phần văn bản nào trên tab và Di động. Bạn cũng có thể đặt các kích thước văn bản khác nhau cho tiêu đề trên thiết bị di động trông đẹp mắt trên màn hình thiết bị di động và vừa vặn với màn hình hơn. Trong trang demo này, tôi đã tạo Tiêu đề trông đẹp mắt trên trang web dành cho máy tính để bàn, trong khi trên màn hình thiết bị di động, tiêu đề này chiếm toàn bộ màn hình.

Nếu tôi nhấp vào tùy chọn chỉnh sửa của cột tiêu đề, tôi có thể đi tới phần kiểu chữ nơi tôi có thể điều chỉnh kích thước tiêu đề trông đẹp mắt trên máy tính để bàn cũng như trên màn hình thiết bị di động. Tôi có thể kiểm soát cả hai một cách riêng biệt. Đối với chế độ xem trang web trên máy tính để bàn của tôi, kích thước tiêu đề là 49px, nhưng trên chế độ xem trên Thiết bị di động, nó không vừa

Để điều chỉnh lại, tôi sẽ nhấp vào chế độ phản hồi trên thiết bị di động > kiểu > kiểu chữ > điều chỉnh kích thước px thành 30 để dễ dàng vừa với màn hình thiết bị di động.

Điều chỉnh phần đệm hoặc lề cho thiết bị di động

Khi điều chỉnh phần đệm, bạn không nên sử dụng các giá trị trong Pixel thay vì đặt giá trị theo EM hoặc phần trăm vì nó sẽ giữ kích thước tương ứng với kích thước màn hình tổng thể.

Bạn có thể thấy rằng chúng tôi đã sử dụng khoảng đệm 70px ở bên phải và bên trái, trông rất đẹp trên trang web dành cho máy tính để bàn; tuy nhiên chế độ xem trên thiết bị di động đối với cài đặt này hoàn toàn là một mớ hỗn độn.

Chúng ta có thể điều chỉnh lại phần đệm thành 17 px mỗi bên thì nó sẽ hoàn toàn ổn.

Ngoài ra, bạn có thể đặt cài đặt toàn bộ cột thành 750 px, nơi nội dung của bạn sẽ được hiển thị trong một hộp mà không cần điều chỉnh màn hình trên cả chế độ xem trên máy tính để bàn hoặc thiết bị di động; nó sẽ tự động điều chỉnh nội dung trong hộp.

Tạo từng cột theo chiều ngang và nó sẽ điều chỉnh tuyệt vời trên tất cả các thiết bị

Sau khi bạn tạo cột theo chiều ngang, điều mà các nhà thiết kế thích nhất, bạn có thể sao chép các phần và tiết kiệm thời gian. Tạo từng phần một và sau đó sử dụng lại nếu nó hoạt động tốt để tiết kiệm thời gian.

Thay đổi hình nền theo chế độ xem trên thiết bị di động/máy tính để bàn

Một số hình nền trông đẹp trên màn hình máy tính để bàn nhưng có khả năng là hình ảnh sẽ không đẹp hơn trên màn hình thiết bị di động. Vì vậy, hãy suy nghĩ sáng tạo và chọn một hình ảnh khác trên màn hình điện thoại di động. Để chọn chế độ xem trên thiết bị di động khác, hãy nhấp vào phần > tab kiểu > nhấp vào biểu tượng thiết bị và chọn chế độ xem trên thiết bị di động. Bây giờ, bất kỳ hình ảnh nào bạn chọn, nó sẽ chỉ xuất hiện trên chế độ xem trên thiết bị di động.

Thay đổi mức độ hiển thị của bất kỳ phần nào trên chế độ xem trên máy tính để bàn/thiết bị di động

Bạn cũng có thể kiểm soát mức độ hiển thị của bất kỳ phần hoặc cột nào theo thiết bị.

Đôi khi, chúng tôi hiển thị nội dung hoặc hình ảnh của mình trong hai hoặc ba phần hoặc các cột khác nhau nhưng chúng tôi không muốn hiển thị nội dung hoặc hình ảnh đó trên Thiết bị di động. Đó là lý do Elementor có thể ẩn phần mà bạn không muốn hiển thị trên chế độ xem trên thiết bị di động.

Đi tới > cài đặt phần > nâng cao >đáp ứng Ở đó bạn sẽ thấy các khả năng hoặc tùy chọn hình ảnh khác nhau; bạn có thể ẩn phần trên máy tính để bàn, ẩn trên tab hoặc ẩn trên Thiết bị di động tùy theo sở thích của bạn.

Thay đổi thứ tự cột

Bạn cũng có thể thay đổi thứ tự cột từ phần cài đặt. Đi tới; phần cài đặt> Nâng cao >Đáp ứng > Đảo ngược cột và nhấp vào có.

Tạo một phần thay thế

Tạo các phần thay thế trên chế độ xem trên thiết bị di động và máy tính để bàn. Đôi khi, phần thanh trượt trông không hữu ích trên Mobile như trên máy tính để bàn nên bạn có thể sử dụng bất kỳ phần nào khác thay vì sử dụng phần thanh trượt. Bạn có thể thực hiện việc này bằng cách Chuyển đến tab Nâng cao > bật/tắt khả năng hiển thị của phần bạn không muốn hiển thị và thêm hình ảnh thay thế vào đó.

Điều chỉnh độ rộng cột

Tất cả các phần cột có chiều rộng 100% khi bạn xem chúng trên chế độ xem trên thiết bị di động. Tuy nhiên, chiều rộng có thể được thay đổi theo chiều rộng cột trên Thiết bị di động. Nếu bạn có hai cột, bạn có thể đặt độ rộng tối đa của mỗi phần là 50%.

Phần kết luận

Elementor đi kèm với tất cả các tính năng mạnh mẽ để kiểm soát bố cục cột đáp ứng của tất cả các kích thước màn hình. Nó cho phép bạn điều chỉnh lại từng phần theo lựa chọn chế độ xem. Việc giữ một trang web thân thiện với thiết bị di động là điều tất yếu vì thuật toán của Google coi việc xếp hạng các trang web thân thiện với thiết bị di động là điều quan trọng nhất. Các trang web đáp ứng không chỉ cần thiết để SEO tốt hơn mà bạn còn cần nhận được nhiều lưu lượng truy cập hơn vì hơn 80% lưu lượng truy cập đến từ lượt xem trên thiết bị di động.

Giờ đây, trình tạo trang Elementor đi kèm với các tính năng độc quyền cho phép người dùng tạo một trang web thân thiện với thiết bị di động mà không cần nỗ lực nhiều. Hy vọng rằng bạn thấy bài viết của tôi hữu ích và nhận được tất cả câu trả lời về cách tạo một trang web phản hồi bằng Elementor.