Хотите предварительно просмотреть мобильную версию своего сайта WordPress? Предварительный просмотр мобильного дизайна поможет вам увидеть, как ваш сайт выглядит на мобильных устройствах.
Хотя вы можете посмотреть на свой живой сайт на своем телефоне, это не поможет на этапе разработки.
Даже когда ваш сайт активен, часто проще просматривать мобильную версию на настольном компьютере, поэтому вы можете быстро вносить изменения и видеть их эффект.
В этой статье мы покажем вам два простых способа предварительного просмотра мобильного макета вашего сайта WordPress без переключения на другие устройства.
Почему вы должны предварительно просмотреть свой мобильный дизайн
Более 50% посетителей вашего сайта будут использовать свои мобильные телефоны для доступа к вашему сайту. Около 3% будут использовать планшет.
Это означает, что важно иметь сайт, который хорошо выглядит на мобильных устройствах.
На самом деле, мобильные технологии настолько важны, что Google теперь использует индекс «сначала для мобильных устройств» для алгоритма ранжирования своего сайта.
Даже если вы используете адаптивную тему WordPress, вам все равно нужно проверить, как ваш сайт выглядит на мобильных устройствах. Возможно, вы даже захотите создать разные версии ключевых целевых страниц, оптимизированные для нужд пользователей мобильных устройств (подробнее об этом позже).
В этой статье мы рассмотрим два разных метода, чтобы проверить, как ваш сайт выглядит на мобильных устройствах с помощью настольных браузеров.
Важно отметить, что предварительный просмотр большинства мобильных устройств не будет полностью идеальным, поскольку существует очень много разных размеров и браузеров мобильных экранов. Ваш финальный тест всегда должен смотреть на ваш сайт на реальном мобильном устройстве.
Видеоурок
Подписаться на WPBeginner
Если вам не нравится видео или вам нужны дополнительные инструкции, читайте дальше.
1. Использование WordPress Theme Customizer
Вы можете использовать настройщик тем WordPress для предварительного просмотра мобильной версии вашего сайта WordPress.
Просто войдите в свою панель управления WordPress и перейдите на Внешний вид »Настройка экран.
Это откроет настройщик темы WordPress. В зависимости от используемой темы, вы можете увидеть несколько разные опции в меню слева здесь:
В нижней части экрана нажмите на значок мобильного телефона. Затем вы увидите предварительный просмотр того, как ваш сайт выглядит на мобильных устройствах.
Примечание: Синие символы редактирования присутствуют только в предварительном просмотре. Вы не увидите их на своем сайте.
Этот метод предварительного просмотра мобильной версии особенно полезен, когда вы еще не закончили создание блога или находитесь в режиме обслуживания.
Вы можете внести изменения и проверить, как они выглядят, прежде чем вводить их в эксплуатацию.
2. Использование режима устройства Google Chrome DevTools
В браузере Google Chrome есть набор инструментов для разработчиков, которые позволяют выполнять несколько проверок на любом веб-сайте, включая предварительный просмотр внешнего вида вашего веб-сайта на мобильных устройствах.
Просто откройте браузер Google Chrome на рабочем столе и перейдите на страницу, которую хотите увидеть.
Это может быть предварительный просмотр страницы на вашем сайте, или это может быть даже сайт вашего конкурента.
Затем вам нужно щелкнуть правой кнопкой мыши на странице и выбрать «Осмотреть».
Новая панель откроется с правой стороны, вот так:
В представлении разработчика вы можете увидеть исходный код HTML для вашего сайта.
Затем нажмите кнопку «Переключить панель инструментов устройства», чтобы переключиться на мобильный вид.
Вы заметите, что предварительный просмотр вашего сайта будет уменьшен до размера экрана мобильного устройства.
Вы также заметите, что внешний вид вашего сайта меняется на мобильный вид. В приведенном выше примере меню свернулось, и значок поиска был перемещен влево, а не вправо от меню.
Когда вы наводите указатель мыши на мобильный вид вашего сайта, он превращается в круг, например:
Этот круг можно перемещать с помощью мыши, чтобы имитировать сенсорный экран мобильного устройства.
Вы также можете удерживать нажатой клавишу «Shift», затем щелкать и перемещать мышь, чтобы имитировать сжимание экрана мобильного устройства для увеличения или уменьшения масштаба.
Над мобильным просмотром вашего сайта вы увидите несколько дополнительных опций.
Это позволяет вам сделать несколько дополнительных вещей. Вы можете проверить, как ваш сайт будет выглядеть на разных типах смартфонов. Вы также можете имитировать производительность вашего сайта на быстрых или медленных соединениях 3G. Вы даже можете повернуть экран мобильного телефона с помощью значка поворота.
Как создать контент для мобильных устройств на WordPress
Важно, чтобы ваш сайт был адаптивным по дизайну, чтобы ваши мобильные посетители могли легко перемещаться по вашему сайту.
Но просто наличие адаптивного сайта может не зайти достаточно далеко. Пользователи мобильных устройств часто ищут разные вещи, чем пользователи настольных компьютеров.
Многие плагины и темы премиум-класса позволяют создавать элементы, которые по-разному отображаются на рабочем столе и мобильных устройствах. Вы также можете использовать плагин для создания страниц, например, Beaver Builder, для редактирования целевых страниц в мобильном представлении.
Вы должны определенно создавать контент для мобильных устройств для своих форм потенциальных клиентов. На мобильных устройствах они должны запрашивать минимальную информацию, в идеале только адрес электронной почты. Они также должны хорошо выглядеть и легко закрываться.
OptinMonster – отличный способ создания всплывающих окон для мобильных устройств и форм генерации лидов. Это самый мощный всплывающий плагин WordPress и инструмент генерации лидов на рынке.
У них есть определенные правила отображения таргетинга на устройства, которые позволяют показывать разные кампании пользователям мобильных устройств и настольных компьютеров. Вы даже можете комбинировать его с функцией геотаргетинга OptinMonster и другими дополнительными функциями настройки для лучшей конверсии.
Мы надеемся, что эта статья помогла вам узнать, как просмотреть мобильный дизайн вашего сайта. Вы также можете проверить нашу статью о лучших плагинах, чтобы превратить сайт WordPress в мобильное приложение.
Prima: Взгляните на наш выбор лучших услуг бизнес-телефонии, чтобы вы могли добавить кнопку для звонков для мобильных пользователей.
Если вам понравилась эта статья, подпишитесь на наш канал YouTube, чтобы посмотреть обучающие видеоролики WordPress. Вы также можете найти нас на Twitter и Facebook,
