Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

Cách chỉnh sửa phiên bản di động của trang web WordPress và tại sao nó lại quan trọng

Tại sao phiên bản di động của trang web của bạn rất quan trọng cho thành công của bạn?

Hãy bắt đầu với thực tế là hơn 50% lưu lượng truy cập web trên toàn cầu đến từ điện thoại di động. Điều này thực sự có nghĩa là hơn một nửa khách hàng của bạn đang kiểm tra trang web của bạn từ điện thoại di động của họ. Bắt đầu từ năm 2018, khi Google bắt đầu lập chỉ mục các trang web đầu tiên trên thiết bị di động, thiết kế web đáp ứng thậm chí còn trở nên quan trọng hơn và tập trung vào trải nghiệm di động của một trang web một cách hợp lý trở thành ưu tiên cho bất kỳ ai coi trọng việc kinh doanh của họ. Một lợi thế quan trọng khác của các trang web thân thiện với thiết bị di động là chúng đơn giản và trực quan. Họ cung cấp trải nghiệm người dùng suôn sẻ, giúp khách hàng tiềm năng liên hệ với bạn dễ dàng hơn. Thêm vào đó, họ tải nhanh chóng và làm cho chia sẻ nội dung dễ dàng và tự nhiên. Một cách để suy nghĩ về một trang web phản hồi là xem nó như một cách miễn phí để xếp hạng tốt hơn trên các công cụ tìm kiếm. Tại sao bạn lại bỏ lỡ cơ hội đó? Bạn càng xếp hạng tốt hơn, bạn càng nhận được kết quả tìm kiếm hữu cơ, có nghĩa là nhiều khách hàng tiềm năng và chuyển đổi nhiều hơn.more than 50% of web traffic globally comes from mobile phones. This literally means that more than half of your customers are checking out your site from their mobiles. Starting from 2018, when Google initiated mobile-first indexing of sites, responsive web design has only become even more important, and focus on the mobile experience of a website logically became a priority for anyone who takes their business seriously. Another important advantage of mobile-friendly websites is that they are simple and intuitive. They offer a smooth user experience, making it easier for potential customers to contact you. Plus, they load quickly and make sharing content easy and natural. One way to think about a responsive site is to see it as a free way to rank better on search engines. Why would you miss that opportunity? The better you rank, the more organic search results you get, which means more leads and more conversions.

Cách xem trước phiên bản di động của trang web của bạn

Một chủ đề WordPress đáp ứng đảm bảo rất nhiều lợi thế như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 điện thoại thông minh trong thời gian thực. Có rất nhiều biến thể có thể về kích thước màn hình và trình duyệt để không có bản xem trước di động nào có thể cung cấp cho bạn một bản xem trước hoàn hảo và chính xác 100%. Bạn nên luôn luôn dựa vào trải nghiệm thực tế mà bạn có được từ việc nhìn vào trang web của mình trên một điện thoại thông minh hoặc thiết bị di động thực tế. Điều này có thể truyền cảm hứng cho bạn để tối ưu hóa các trang đích chính của bạn và tạo các phiên bản khác nhau được tối ưu hóa cho trải nghiệm di động.check how your site looks on smartphones in real time. There are a lot of possible variations in screen sizes and browsers so none of the mobile previews can provide you with a perfect and 100% accurate preview. You should always rely on the real experience that you get from looking at your site on an actual smartphone or mobile device. This could inspire you to optimize your key landing pages and create different versions optimized for the mobile experience.

Vì vậy, hãy để xem cách bạn có thể xem trước nếu bạn có một trang web thân thiện với thiết bị di động WordPress theo hai cách khác nhau.

Sử dụng tùy chỉnh chủ đề WordPress

Cách đầu tiên và đơn giản nhất để xem bản xem trước phiên bản di động là sử dụng tùy chỉnh chủ đề WP. Thủ tục rất đơn giả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.Log in to your WordPress dashboard and go to Appearance > Customize.

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

Sau khi bạn nhấp vào tùy chỉnh chủ đề WordPress và mở nó, bạn sẽ thấy tất cả các tùy chọn trong menu bên trái. Có thể có một số biến thể trong các tùy chọn được cung cấp tùy thuộc vào chủ đề mà bạn sử dụng.you will see all the options in the left-hand menu. There might be some variations in the options that are offered depending on the theme you’re using.

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

Lưu ý biểu tượng di động ở dưới cùng của màn hình. Nhấp vào nó và bạn sẽ thấy bản xem trước về cách trang web của bạn trên thiết bị di động.. Click on it and you will see a preview of how your site looks on mobile devices.

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

Nếu các biểu tượng chỉnh sửa màu xanh làm bạn bối rối - đừng lo lắng. Chúng chỉ có thể nhìn thấy trong trình xem trước và không bao giờ trên trang web trực tiếp của bạn.

Mẹo: Nếu bạn chưa ra mắt blog của mình hoặc nếu nó nằm trong chế độ bảo trì, phương pháp xem trước này rất tiện dụng vì nó cho phép bạn thực hiện các thay đổi và kiểm tra cách chúng nhìn trước khi bạn trực tiếp với trang web của mình.this method of previewing is very handy as it allows you to make changes and check how they look before you go live with your site.

Sử dụng chế độ thiết bị công cụ nhà phát triển Google Chrome

Nếu bạn không cảm thấy thoải mái khi sử dụng tùy chỉnh chủ đề WP vì bất kỳ lý do gì, bạn luôn có thể kiểm tra xem bạn có WordPress Mobile thân thiện với trình duyệt Google Chrome không. Nó cũng là một thủ tục rất đơn giản và dễ dàng bao gồm một vài bước.you can always check if you have WordPress mobile friendly with Google Chrome Browser. It is also a very simple and easy procedure that consists of a couple of steps.

Chỉ cần mở trình duyệt Google Chrome của bạn như bạn thường làm và truy cập trang bạn muốn kiểm tra. Sau đó, nhấp chuột phải vào trang và chọn Kiểm tra.right-click on the page and choose Inspect.

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

Lưu ý rằng cách này bạn có thể xem bản xem trước của bất kỳ trang nào trên bất kỳ trang web nào, không chỉ của bạn. Nó thậm chí có thể là trang web của đối thủ cạnh tranh của bạn.you can see a preview of any page on any site, not just yours. It could even be your competitor’s website.

Về phía bên phải của bạn, một khung mới sẽ mở ra và nó sẽ trông như thế này:

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

Chế độ xem của nhà phát triển cho phép bạn xem trang web của bạn mã nguồn HTML. Bây giờ, nhấp vào nút thanh công cụ chuyển đổi để xem vào chế độ xem di động.
Now, click the Toggle Device Toolbar button to see to the mobile view.

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

Bạn sẽ nhận thấy một vài thay đổi trong bản xem trước di động: Trang web của bạn bị thu hẹp để phù hợp với kích thước màn hình di động và các thay đổi khác có thể diễn ra. Nhìn và chú ý sự khác biệt một cách cẩn thận và lưu ý những gì bạn nên thay đổi.

Kiểm tra những gì xảy ra khi bạn thử chạy con trỏ chuột qua chế độ xem di động - nó trở thành một vòng tròn.

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

Điểm của vòng tròn là bắt chước màn hình cảm ứng trên thiết bị di động.

Mẹo: Nếu bạn muốn xem màn hình di động của bạn phóng to vào và ra, hãy giữ phím Shift và nhấp và di chuyển chuột.see how your mobile screen zooms in and out, hold down the Shift key and click and move your mouse.

Ưu điểm của việc sử dụng phương pháp này để xem trước trang web di động của bạn là nó cho phép bạn xem trang trông như thế nào trên các loại điện thoại thông minh khác nhau. Những tùy chọn bổ sung này nằm trên chế độ xem di động của trang web của bạn. Bất kể bạn đã mở loại xem trước nào khi nhấp vào thanh công cụ Toggle Device, ở đây bạn có thể thay đổi kích thước màn hình của thiết bị.

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

Mẹo: Sử dụng biểu tượng xoay ở góc trên bên phải để xoay màn hình di động. Bạn cũng có thể kiểm tra các yếu tố trên trang bằng cách nhấp vào nhấp chuột phải và chọn tùy chọn kiểm tra.inspect elements on the page by clicking on the right-click and selecting the Inspect option.

Why is Page Builder Important for RWD

RWD is something you have to think about carefully from the very beginning of creating your website. There are a lot of things to analyze when you have to make your site equally attractive, navigable, and effective on different screen sizes. WordPress page builders have a deciding role in this process, they provide you with cornerstones of your site’s design, therefore you need to inform yourself well before you make the choice. So, by investing some time into research about page builders, you’ll actually save a lot of time that you can spend on creating your website.

Based on our experience, WPBakery and Elementor are excellent choices, as they can satisfy a wide range of different needs.

If you’re on a budget, Elementor is your best bet. It is a simple-to-use, beginner-friendly plugin that has a very generous free version with a solid set of elements. It also integrates well with other leading WP plugins and services like MailChimp, WooCommerce, HubSpot, Yoast SEO, etc. If you can afford a premium plugin, WPBakery Page Builder will never disappoint you. It comes with an incredibly large collection of elements, a plethora of blocks, and options. It’s also easy-to-use and allows for a lot of creativity.

Although page builders are essential for RWD, the theme you plan to use is also important since it can offer some amazing features. As you may know, theme authors develop specific widgets and elements that can be adjusted separately from page builders. Many of these elements allow you to set responsiveness following your needs. For this reason, you should choose the theme developed by well-known, trustworthy authors. This is especially important if you want to use a free WordPress theme. To save your time and nerves, we tested tons of free themes. So, if you want to use a responsive, feature-rich, and reliable free theme, we recommend you try the Qi theme.

How to Edit Mobile Version of Your Site in Elementor

It is safe to say that Elementor is by far the best page builder when it comes to editing mobile version of your website. It may happen that you missed to notice this small icon, called the Viewport Icon, in the settings:

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

This icon indicates that any value that has it next to it can be edited separately for the desktop and for the mobile site version. Let’s take the Column Width settings for example – you can adjust the value for desktop, mobile and tablet. The value you enter for each device will be valid only for that selected device. Notice that the HTML tag does not have the icon next to it, which means it has the same value for every device.

In case you want to change the value for the mobile device, all that is needed is to choose the mobile layout option and enter the desired values (these values will be implemented only on mobile devices). On the right side of the screen, you have the live preview of all the changes that you make, so that you can see how the new values will look like on the device immediately.

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

To return to the desktop view you need to switch to the desktop layout option. You can do that, as we have mentioned above or by using this small icon in the bottom menu on the page:

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

One more important thing to mention related to responsiveness is that the columns and rows can be turned off for individual devices, i.e. we can say that they will not be visible (or will be visible) on some screen sizes.

To access this option follow the path:

  • Right click on the row/column
  • Select Edit Section
  • Click the Advanced tab
  • Select the Responsive dropdown

This option is very important in case we have a section that we know only makes sense to be displayed on the desktop, so we will cancel it on other devices. And to compensate for the lack of it, we can make one section that will be seen on all other devices except the desktop.

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

When it comes to columns, we can also find the Reverse column option (Tablet / Mobile). It is best to explain this through an example. Let’s say we have a section like this on the desktop where content is split into two columns with images followed by a brief text:

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

Naturally, on mobile devices the content will be rearranged as in the image below, following the original order from the desktop:

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

The reverse column option allows us to switch the order of a certain section for mobile devices or tablet layouts. When we do it for the first section on smaller devices the result is more effectively displayed content:

Hướng dẫn can i edit my wordpress site on my phone? - tôi có thể chỉnh sửa trang wordpress của mình trên điện thoại không?

How to Edit Mobile Version of Your Site with Plugins

Sooner or later you’ll be tempted to use a variety of plugins that make it easy for you to add a sidebar, a CTA, a widget, or a similar element to your site. This is the moment when many forget that a sidebar or any other element that works perfectly on a desktop screen, might not be so great on mobile. So, before you jump to take advantage of these handy tools, check if they are responsive too. The truth is, many of them are and can actually help you improve UX. But to know that for sure, read the reviews or find a demo before installing any. As long as the plugin behaves well on mobile, you can be sure your website is on the road to success. Let’s also not forget that your options vary a lot depending on the theme you’re using. A premium theme certainly guarantees a lot more possibilities.

Thực đơn là trụ cột của trải nghiệm người dùng. Nó là người đầu tiên hoặc một trong những điều đầu tiên mà bất cứ ai nhấp vào khi họ truy cập trang web của bạn. Nó ảnh hưởng đến việc khách truy cập sẽ tìm thấy những gì họ đến, anh ta sẽ ở lại bao lâu và nhiều khía cạnh khác của UX. Điều quan trọng là phải có một thực đơn đẹp, có cấu trúc tốt, làm cho điều hướng mượt mà, nhưng nó không đơn giản như nó có vẻ. Bạn có thể có một menu tuyệt vời hoạt động hoàn hảo trên máy tính để bàn nhưng nặng cho điện thoại di động. Một giải pháp trong trường hợp này là điều chỉnh phiên bản máy tính để bàn của bạn thành kích thước màn hình di động. Nhưng điều gì sẽ xảy ra nếu điều đó ngụ ý mất quá nhiều thông tin hữu ích? Trong trường hợp đó, bạn có thể tạo một menu khác, chỉ tùy chỉnh cho kích thước màn hình di động. Nhiều chủ đề WP đi kèm với tùy chọn để làm điều này. Nếu chủ đề của bạn không phải là một trong số đó, đừng lo lắng, có rất nhiều plugin tuyệt vời cho các menu đáp ứng. Khuyến nghị của chúng tôi là plugin menu đáp ứng bao gồm hơn 150 tùy chọn để tùy chỉnh và yêu cầu kiến ​​thức mã hóa bằng không. Nó cho phép bạn thêm hình ảnh động, hình ảnh nền, đặt vị trí của các nút menu và nhiều hơn nữa. Nó cực kỳ dễ sử dụng vì vậy nó đặc biệt tiện dụng cho người mới bắt đầu.It affects how fast the visitor will find what they came for, how long he will stay, and many other aspects of UX. It is important to have a beautiful, well-structured menu that makes navigation smooth, but it is not as simple as it seems. You may have a great menu that works perfectly on a desktop but is to heavy for a mobile. One solution in this case is to adjust your desktop version to mobile screen size too. But what if that implies losing too much useful information? In that case, you can create a different menu, customized for mobile screen size only. Many WP themes come with the option to do this. If your theme isn’t one of those, don’t worry, there are a lot of great plugins for responsive menus. Our recommendation is the Responsive Menu plugin that includes 150+ options for customization and requires zero coding knowledge. It allows you to add animations, background images, set the position of menu buttons, and a lot more. It is incredibly easy to use so it is especially handy for total beginners.

Hình ảnh và phòng trưng bày

Một hình ảnh nói lên hàng ngàn ngôn ngữ, vì vậy hãy chắc chắn rằng bạn trông thật tuyệt vời trên bất kỳ kích thước màn hình nào. Chúng tôi sống trong một nền văn hóa rất trực quan, và bất cứ điều gì mà bạn thích, những bức ảnh tuyệt vời là điều bắt buộc. Nhưng, cho dù bạn có hình ảnh tuyệt vời như thế nào, nếu chúng tải chậm, hoặc được trình bày gọn gàng, bạn có nguy cơ mất một tỷ lệ đáng kể đối tượng của bạn. Vì vậy, để đảm bảo tránh kịch bản đó, chúng tôi khuyên dùng plugin Lite của Bộ sưu tập Envira sẽ giúp bạn tạo ra các phòng trưng bày mạnh mẽ giống như một chuyên gia. Một số lợi thế của nó là nó được tối ưu hóa cao cho hiệu suất web và máy chủ, đây là tin tuyệt vời cho SEO của bạn.make sure yours look just as stunning on any screen size. We live in a very visually oriented culture, and whatever the niche you’re in, great photos are a must. But, no matter how great images you have, if they load slowly, or aren’t neatly presented, you’re at risk of losing a significant percentage of your audience. So, to make sure to avoid that scenario, we recommend the Envira Gallery Lite plugin that will help you create powerful galleries just like a pro. Some of its advantages are that it is highly optimized for web and server performance which is great news for your SEO.

Các nút chia sẻ xã hội

Khi bạn có một thực đơn tuyệt vời, đáp ứng và phòng trưng bày tuyệt đẹp, điều tiếp theo cần chăm sóc là các nút chia sẻ xã hội. Kích thước của chúng nên được tùy chỉnh cho thiết bị. Một nút lớn trên một màn hình nhỏ làm cho khách truy cập xảy ra, và điều đó khá khó chịu. Mặt khác, các nút nhỏ trên màn hình lớn không dễ nhận ra. Một plugin có thể giúp bạn có các nút tùy chỉnh là plugin chia sẻ xã hội hỗn hợp. Dễ sử dụng, hoàn toàn miễn phí và thân thiện với người mới bắt đầu, nó làm cho việc chia sẻ một cách dễ dàng cho cả bạn và khách truy cập trang web của bạn.social sharing buttons. Their size should be customized to the device. A big button on a small screen makes the visitor occidentally click, and that is quite irritating. On the other hand, small buttons on a big screen are not so easy to recognize. A plugin that can help you have customized buttons is the Sassy Social Share plugin. Easy to use, totally free, and beginner-friendly, it makes sharing a breeze both for you and your site’s visitors.

Các trang web di động

Trong các tình huống khi bạn cần làm cho trang web của mình phản hồi nhanh chóng, không có giải pháp nào tốt hơn mà là một plugin như Wptouch. Plugin này được tạo theo cách mà nó tự động thêm một chủ đề di động đơn giản và thanh lịch cho trang web WP của bạn. Thực tế là Google được Google khuyến nghị nói rất nhiều về hiệu quả của nó. Vì vậy, ngay cả khi bạn không có phiên bản di động của trang web của mình, một plugin như thế này có thể ngay lập tức cho phép phiên bản thân thiện với thiết bị di động của trang web của bạn, để bạn không mất thứ hạng. Nó cũng cho phép bạn tùy chỉnh nhiều khía cạnh của sự xuất hiện của trang web.WPtouch. This plugin is made in such a way that it automatically adds a simple and elegant mobile theme to your WP site. The fact that it is recommended by Google says a lot about its effectiveness. So even if you don’t have a mobile version of your site, a plugin like this can instantly enable a mobile-friendly version of your website, so that you don’t lose your rankings. It also allows you to customize many aspects of the site’s appearance.

Tốc độ tải trang cũng là một khía cạnh rất quan trọng trong trải nghiệm người dùng, đặc biệt là trên các thiết bị di động. Nếu bạn phải đối mặt với một số thách thức trong lĩnh vực này, hãy xem xét sử dụng plugin trang di động được tăng tốc vì đây là một trong những cách nhanh nhất và đơn giản nhất để cải thiện tốc độ tải trang web của bạn.Accelerated Mobile Pages plugin as it is one of the fastest and simplest ways to improve your site’s loading speed.

Tránh thêm cửa sổ bật lên trên thiết bị di động

Cửa sổ bật lên hiếm khi thú vị, nhưng chúng đặc biệt khó chịu trong điện thoại di động. Họ bao gồm một phần lớn của màn hình và yêu cầu từ khách truy cập phải loại bỏ chúng trước khi truy cập nội dung của trang. Do đó, tốt nhất là tránh chúng hoàn toàn trong phiên bản di động của trang web của bạn. Làm thế nào bạn sẽ tránh chúng, chủ yếu phụ thuộc vào nhà cung cấp dịch vụ của bạn, nhưng phần lớn trong số họ có một tùy chọn để vô hiệu hóa các cửa sổ bật lên xâm nhập trên điện thoại di động. Ngoài ra, hãy nhớ rằng Google xử phạt các trang web có cửa sổ bật lên rất xâm nhập.it is best to avoid them completely in the mobile version of your site. How you are going to avoid them, mostly depends on your service provider, but the majority of them have an option to disable intrusive popups on mobiles. Also have in mind that Google penalizes sites that have very intrusive popups.

Tóm lại là

Vì số lượng người sử dụng điện thoại thông minh để truy cập internet đang tăng lên liên tục, nên rất hợp lý khi mong đợi nhiều giải pháp và tùy chọn hơn cho các phiên bản di động của các trang web. Các nhà thiết kế đang làm việc chăm chỉ để giải quyết rất nhiều mẫu sử dụng, vẫn còn những điều cơ bản của RWD là như nhau-đảm bảo chọn một chủ đề WP thân thiện với thiết bị di động và một người xây dựng trang có tất cả các tùy chọn bạn cần.mobile-friendly WP theme and a page builder that has all the options that you need.

Vì vậy, trang web của bạn phản hồi như thế nào? Bạn có phải thực hiện nhiều thay đổi để làm cho nó thân thiện với thiết bị di động hơn? Chia sẻ câu trả lời của bạn với chúng tôi và vui lòng hỏi thêm thông tin trong phần bình luận.