วิธีดูเวอร์ชันมือถือของไซต์ WordPress จากเดสก์ท็อป

คุณต้องการดูตัวอย่างรุ่นมือถือของไซต์ WordPress ของคุณหรือไม่ การดูตัวอย่างเลย์เอาต์มือถือจะช่วยให้คุณเห็นว่าเว็บไซต์ของคุณดูบนอุปกรณ์พกพาอย่างไร.


แม้ว่าคุณจะสามารถดูไซต์สดของคุณบนโทรศัพท์ของคุณได้อย่างแน่นอน แต่สิ่งนี้ไม่ได้ช่วยในช่วงการพัฒนา.

แม้ในขณะที่ไซต์ของคุณใช้งานอยู่ก็มักจะดูรุ่นมือถือบนคอมพิวเตอร์เดสก์ท็อปได้ง่ายขึ้นดังนั้นคุณจึงสามารถทำการเปลี่ยนแปลงและดูผลของมันได้อย่างรวดเร็ว.

ในบทความนี้เราจะแสดงสองวิธีง่ายๆในการดูตัวอย่างเลย์เอาต์มือถือของไซต์ WordPress ของคุณโดยไม่ต้องเปลี่ยนไปใช้อุปกรณ์ต่าง ๆ.

ดูตัวอย่างเค้าโครงมือถือของเว็บไซต์ของคุณ

ทำไมคุณควรดูตัวอย่างเลย์เอาต์มือถือของคุณ

ผู้เข้าชมเว็บไซต์ของคุณมากกว่า 50% จะใช้โทรศัพท์มือถือเพื่อเข้าถึงเว็บไซต์ของคุณ ประมาณ 3% จะใช้แท็บเล็ต.

ซึ่งหมายความว่าการมีเว็บไซต์ที่ดูดีบนมือถือเป็นสิ่งจำเป็น.

ในความเป็นจริงอุปกรณ์พกพามีความสำคัญอย่างยิ่งที่ Google ใช้ดัชนี“ มือถือเป็นอันดับแรก” สำหรับอัลกอริทึมการจัดอันดับเว็บไซต์.

แม้ว่าคุณจะใช้ธีม WordPress ที่ตอบสนองคุณยังคงต้องตรวจสอบว่าไซต์ของคุณมีลักษณะเป็นอย่างไรบนมือถือ คุณอาจต้องการสร้างหน้า Landing Page ที่แตกต่างกันซึ่งเหมาะสำหรับความต้องการของผู้ใช้มือถือ (เพิ่มเติมในภายหลัง).

ในบทความนี้เราจะกล่าวถึงวิธีการทดสอบสองวิธีที่แตกต่างกันในการทดสอบว่าเว็บไซต์ของคุณมีลักษณะเป็นอุปกรณ์เคลื่อนที่โดยใช้เบราว์เซอร์เดสก์ท็อป.

โปรดทราบว่าการดูตัวอย่างมือถือส่วนใหญ่จะไม่สมบูรณ์แบบเพราะมีขนาดหน้าจอมือถือและเบราว์เซอร์ที่แตกต่างกันมากมาย การทดสอบครั้งสุดท้ายของคุณควรดูที่เว็บไซต์ของคุณบนอุปกรณ์มือถือจริง.

วิดีโอสอน

สมัครสมาชิก WPBeginner

หากคุณไม่ชอบวิดีโอหรือต้องการคำแนะนำเพิ่มเติมให้อ่านต่อ.

1. การใช้ Theme Customizer ของ WordPress

คุณสามารถใช้เครื่องมือปรับแต่งธีม WordPress เพื่อดูตัวอย่างเวอร์ชันมือถือของไซต์ WordPress ของคุณ.

เพียงเข้าสู่แดชบอร์ด WordPress ของคุณและไปที่ หน้าตา»ปรับแต่ง จอภาพ.

แผงควบคุม WordPress แสดงตำแหน่งที่จะหาลักษณะที่ปรากฏ - ปรับแต่ง

สิ่งนี้จะเปิดตัวปรับแต่งธีมของ WordPress คุณอาจเห็นตัวเลือกที่แตกต่างกันเล็กน้อยในเมนูด้านซ้ายทั้งนี้ขึ้นอยู่กับว่าคุณใช้ธีมอะไร

WordPress ปรับแต่งธีม (มุมมองเดสก์ทอป)

ที่ด้านล่างของหน้าจอคลิกที่ไอคอนมือถือ จากนั้นคุณจะเห็นตัวอย่างว่าไซต์ของคุณดูอย่างไรบนอุปกรณ์มือถือ.

เปลี่ยนเป็นมุมมองอุปกรณ์พกพาในเครื่องมือปรับแต่งธีม

บันทึก: สัญลักษณ์การแก้ไขสีน้ำเงินมีอยู่ในโปรแกรมดูภาพตัวอย่างเท่านั้น คุณจะไม่เห็นสิ่งเหล่านี้ในเว็บไซต์สดของคุณ.

วิธีการดูตัวอย่างเวอร์ชันมือถือนี้มีประโยชน์อย่างยิ่งเมื่อคุณยังสร้างบล็อกไม่เสร็จหรือเมื่ออยู่ในโหมดบำรุงรักษา.

คุณสามารถทำการเปลี่ยนแปลงและตรวจสอบว่ามีลักษณะอย่างไรก่อนที่จะทำให้พวกเขาอยู่.

2. การใช้โหมดอุปกรณ์ DevTools ของ Google Chrome

เบราว์เซอร์ Google Chrome มีชุดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่ให้คุณเรียกใช้การตรวจสอบต่าง ๆ บนเว็บไซต์ใด ๆ รวมถึงการดูตัวอย่างของลักษณะเว็บไซต์ของคุณบนอุปกรณ์มือถือ.

เพียงเปิดเบราว์เซอร์ Google Chrome บนเดสก์ท็อปของคุณและไปที่หน้าที่คุณต้องการตรวจสอบ.

นี่อาจเป็นตัวอย่างของหน้าเว็บในไซต์ของคุณหรืออาจเป็นเว็บไซต์คู่แข่งของคุณก็ได้.

ถัดไปคุณต้องคลิกขวาที่หน้าและเลือก “ตรวจสอบ”.

การเลือกตัวเลือกตรวจสอบใน Chrome

บานหน้าต่างใหม่จะเปิดขึ้นทางด้านขวามือดังนี้:

มุมมองเดสก์ท็อปเริ่มต้นเมื่อตรวจสอบไซต์ของคุณใน Chrome

ในมุมมองนักพัฒนาคุณจะสามารถดูซอร์สโค้ด HTML ของเว็บไซต์ของคุณ.

จากนั้นคลิกปุ่ม “สลับแถบเครื่องมืออุปกรณ์” เพื่อเปลี่ยนเป็นมุมมองอุปกรณ์เคลื่อนที่.

ตรวจสอบมุมมองมือถือของไซต์ของคุณใน Chrome

คุณจะสังเกตเห็นตัวอย่างของเว็บไซต์ของคุณจะย่อขนาดเป็นหน้าจอมือถือ.

คุณจะสังเกตเห็นการเปลี่ยนแปลงลักษณะที่ปรากฏของเว็บไซต์เป็นมุมมองมือถือ ในตัวอย่างด้านบนเมนูได้ยุบลงและไอคอนค้นหาย้ายไปทางซ้ายแทนทางด้านขวาของเมนู.

เมื่อคุณเรียกใช้เคอร์เซอร์ของเมาส์บนมุมมองอุปกรณ์เคลื่อนที่ของไซต์ของคุณมันจะกลายเป็นวงกลมดังนี้:

เคอร์เซอร์เมาส์วงกลมในมุมมองตรวจสอบของ Chrome

วงกลมนี้สามารถเคลื่อนย้ายได้ด้วยเมาส์เพื่อเลียนแบบหน้าจอสัมผัสบนอุปกรณ์มือถือ.

นอกจากนี้คุณยังสามารถกดปุ่ม “Shift” ค้างไว้จากนั้นคลิกและเลื่อนเมาส์เพื่อจำลองการบีบหน้าจอมือถือเพื่อซูมเข้าหรือออก.

เหนือมุมมองอุปกรณ์เคลื่อนที่ของไซต์คุณจะเห็นตัวเลือกเพิ่มเติมบางอย่าง.

ตัวเลือกมือถือเพิ่มเติมสำหรับการตรวจสอบไซต์ของคุณใน Chrome

สิ่งเหล่านี้ช่วยให้คุณทำสิ่งต่าง ๆ ได้หลายอย่าง คุณสามารถตรวจสอบว่าไซต์ของคุณจะดูสมาร์ทโฟนประเภทต่างๆอย่างไร นอกจากนี้คุณยังสามารถจำลองประสิทธิภาพเว็บไซต์ของคุณผ่านการเชื่อมต่อ 3G ที่รวดเร็วหรือช้า คุณสามารถหมุนหน้าจอมือถือโดยใช้ไอคอนหมุนได้.

วิธีการสร้างเนื้อหาเฉพาะมือถือใน WordPress

สิ่งสำคัญคือเว็บไซต์ของคุณมีการออกแบบที่ตอบสนองดังนั้นผู้เข้าชมบนมือถือของคุณจึงสามารถสำรวจเว็บไซต์ของคุณได้อย่างง่ายดาย.

แต่การมีไซต์ที่ตอบสนองเพียงอย่างเดียวอาจไม่เพียงพอ ผู้ใช้บนอุปกรณ์มือถือมักมองหาสิ่งที่แตกต่างจากผู้ใช้เดสก์ท็อป.

ธีมและปลั๊กอินพรีเมียมมากมายให้คุณสร้างองค์ประกอบที่แสดงแตกต่างบนเดสก์ท็อปกับอุปกรณ์เคลื่อนที่ คุณยังสามารถใช้ปลั๊กอินตัวสร้างหน้าอย่าง Beaver Builder เพื่อแก้ไขหน้าที่เชื่อมโยงไปถึงในมุมมองอุปกรณ์เคลื่อนที่.

คุณควรสร้างเนื้อหาเฉพาะมือถือสำหรับรูปแบบการสร้างโอกาสในการขายของคุณ สำหรับอุปกรณ์พกพาสิ่งเหล่านี้ควรสอบถามข้อมูลน้อยที่สุดโดยควรเป็นที่อยู่อีเมล พวกเขาควรดูดีและง่ายต่อการปิด.

วิธีที่ยอดเยี่ยมในการสร้างป๊อปอัปและรูปแบบเฉพาะสำหรับอุปกรณ์พกพาก็คือการใช้ OptinMonster มันเป็นปลั๊กอินป๊อปอัพ WordPress ที่ทรงพลังที่สุดและเครื่องมือสร้างโอกาสในตลาด.

มีกฎการแสดงผลเฉพาะอุปกรณ์ที่กำหนดเป้าหมายการแสดงผลซึ่งจะช่วยให้คุณแสดงแคมเปญที่แตกต่างกันไปยังผู้ใช้มือถือและผู้ใช้เดสก์ท็อป คุณสามารถรวมเข้ากับคุณลักษณะการกำหนดเป้าหมายทางภูมิศาสตร์ของ OptinMonster และคุณลักษณะการตั้งค่าส่วนบุคคลขั้นสูงอื่น ๆ เพื่อรับการแปลงที่ดีที่สุด.

เราหวังว่าบทความนี้จะช่วยให้คุณเรียนรู้วิธีดูตัวอย่างเลย์เอาต์มือถือของไซต์ของคุณ คุณอาจต้องการดูบทความของเราเกี่ยวกับปลั๊กอินที่ดีที่สุดในการแปลงไซต์ WordPress เป็นแอพมือถือ.

โบนัส: ลองดูบริการโทรศัพท์ธุรกิจที่ดีที่สุดของเราเพื่อให้คุณสามารถเพิ่มปุ่มคลิกเพื่อโทรสำหรับผู้ใช้มือถือ.

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