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

Một trang web đáp ứng di động là một phần quan trọng của bất kỳ doanh nghiệp trực tuyến.

Google đã sử dụng tốc độ tải trang di động như một yếu tố chính quyết định thứ hạng tìm kiếm của bất kỳ trang web nào. Điều này chủ yếu là do 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 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à xếp hạng tốt hơn trong công cụ tìm kiếm của 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 đáp với 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 điện thoại di động của bạn
• Điều chỉnh phần đệm hoặc lề cho thiết bị di động
• Tạo mỗi 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 giao diệ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 di động để người xem có thể xem nội dung của bạn mà không cần nỗ lực.

Hầu hết chúng ta mua một chủ đề tuyên bố là cũng đáp ứng di động; tuy nhiên, mọi thứ có thể gây nản lòng khi thiết kế chủ đề của bạn bị hỏng hoàn toàn trên màn hình 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ác công cụ bố cục đáp của trình tạo trang Elementor Với sự trợ giúp của các công cụ đáp ứng 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 của 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 Điện thoại di động.

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

1. Kiểm tra xem có bất kỳ Tiêu đề nào trông quá lớn trên màn hình di động không.
2. Kiểm tra phần đệm của nội dung hoặc không gian trên các mặt của nội dung
3. Kiểm tra căn chỉnh cột trang, làm thế nào để nó trông hoàn hảo; chính giữa, phải hoặc trái
4. Kiểm tra thứ tự cột, nếu chúng xuất hiện theo đúng thứ tự hoặc bạn cần thay đổi nó.

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 như 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 điện thoại di động của bạn

Đôi khi chúng tôi muốn một tiêu đề táo bạo và nổi bật trên trang web máy tính để bàn của chúng tôi và nó trông hoàn toàn ổn 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à trông không phù hợp.

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 các tiêu đề di động trông tuyệt vời trên màn hình di động và phù hợp với màn hình theo cách tốt hơn. Trong trang demo này, tôi đã tạo một Heading trông tuyệt vời trên trang web dành cho máy tính để bàn, trong khi trên màn hình di động, nó 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ể vào phần typography nơi tôi có thể điều chỉnh kích thước tiêu đề trông đẹp trên máy tính để bàn và cả trên màn hình di động. Tôi có thể kiểm soát cả hai 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 Di động, nó không phù hợp với

Để đ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 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, không nên sử dụng các giá trị trong Pixels 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 phần đệm là 70px phải và trái, trông rất đẹp trên trang web của máy tính để bàn; tuy nhiên chế độ xem trên thiết bị di động cho cài đặt này là một mớ hỗn độn.

Chúng ta có thể điều chỉnh padding thành 17 px ở mỗi bên thì nó 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 bên trong hộp.

Tạo mỗi 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ị

Khi bạn tạo cột theo chiều ngang, thứ mà các nhà thiết kế thích nhất, thì bạn có thể nhân đôi các phần và tiết kiệm thời gian. Tạo một phần tại một thời điểm và sau đó sử dụng lại nếu nó diễn ra 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 ảnh nền trông đẹp trên màn hình máy tính để bàn, nhưng khả năng là hình ảnh sẽ không trông lớn hơn trên màn hình 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 di động. Để chọn chế độ xem trên thiết bị di động khác, 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ờ, cho dù bạn chọn hình ảnh nào, nó sẽ chỉ xuất hiện trên giao diện di động.

Thay đổi mức độ hiển thị của bất kỳ phần nào trên giao diệ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 đó trên Di động. Đó là lý do tại sao 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.

Chuyển đến> 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 trực quan 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 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 đến; 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 giao diện 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 Di động như trên máy tính để bàn, do đó 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ế trên đó.

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

Tất cả các phần của 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 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 ở tất cả các kích thước màn hình. Nó cho phép bạn điều chỉnh từng phần theo lựa chọn chế độ xem. Giữ một trang web thân thiện với thiết bị di động là điều không thể tránh khỏi vì thuật toán của Google xem xét xếp hạng các trang web thân thiện với thiết bị di động nhất. Các trang web đáp ứng không chỉ cần thiết để đạt được SEO tốt hơn mà bạn còn cần phải 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 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à có tất cả các câu trả lời của bạn về cách tạo một trang web phản hồi bằng Elementor.