Как просмотреть мобильную версию сайтов WordPress с рабочего стола

Вы хотите предварительно просмотреть мобильную версию вашего сайта WordPress? Предварительный просмотр макета мобильного устройства поможет вам увидеть, как ваш сайт выглядит на мобильных устройствах. Хотя вы, конечно, можете посмотреть<br> сайт на своем телефоне. Но даже когда ваш сайт находится в режиме реального времени, часто бывает проще

просматривать мобильную версию на настольном компьютере, так что вы можете быстро вносить изменения и видеть их эффект. В этой статье мы покажем вам два простых способа легко просмотреть мобильный макет вашего сайта WordPress, не переключаясь на разные устройства. <br>

Зачем необходимо Предварительно смотреть Свой Мобильный Макет сайта

Более 50% посетителей вашего сайта будут использовать свои мобильные телефоны для доступа к вашему сайту. Около 3% будут использовать планшет. Это означает, что наличие сайта, который отлично смотрится на мобильном телефоне, очень важно.

На самом деле, мобильный телефон настолько важен, что Google теперь использует индекс “mobile-first” для своего алгоритма ранжирования веб-сайтов. Даже если вы используете адаптивную тему WordPress, вам все равно нужно проверить, как ваш сайт выглядит на мобильном устройстве.

Возможно, вы даже захотите создать различные версии ключевых целевых страниц, оптимизированные для нужд мобильных пользователей (Подробнее об этом позже). В этой статье мы рассмотрим два различных метода тестирования того, как ваш сайт выглядит на мобильных устройствах с помощью настольных браузеров.

Важно иметь в виду, что большинство мобильных превью не будет полностью идеальным, потому что существует так много различных размеров мобильных экранов и браузеров. Ваш последний тест всегда должен заключаться в том, чтобы посмотреть на ваш сайт на реальном мобильном устройстве.

1. Использование настройщика тем WordPress

Вы можете использовать настройщик тем WordPress для предварительного просмотра мобильной версии вашего сайта WordPress.

Просто войдите в свою панель управления WordPress и перейдите в раздел Внешний вид » настройка экрана.

Это откроет настройщик тем WordPress. В зависимости от того, какую тему вы используете, вы можете увидеть здесь разные настройки:

В нижней части экрана щелкните значок мобильного устройства. Затем вы увидите предварительный просмотр того, как ваш сайт выглядит на мобильных устройствах.

Примечание: синие символы редактирования присутствуют только в предварительном просмотре. Вы не увидите их на своем сайте. Этот метод предварительного просмотра мобильной версии особенно полезен, когда вы еще не закончили создавать свой блог или когда он находится в режиме разработки. Вы можете внести изменения и проверить, как они выглядят, прежде чем публиковать ваш сайт.

2. Используйте Google Chrome для проверки видимости сайта на мобильных гаджетах

Браузер Google Chrome имеет набор инструментов разработчика, которые позволяют выполнять различные проверки на любом веб-сайте, в том числе просматривать предварительный просмотр того, как ваш сайт выглядит на мобильных устройствах. Просто откройте браузер Google Chrome и перейдите на страницу, которую вы хотите проверить. Это может быть предварительный просмотр страницы на вашем сайте и не только. Далее вам нужно щелкнуть правой кнопкой мыши на странице и выбрать пункт «Просмотреть код«.

Новая панель откроется с правой стороны, вот так:

В представлении разработчика вы сможете увидеть исходный код HTML вашего сайта. Затем нажмите кнопку «переключить панель инструментов устройства», чтобы перейти к мобильному виду отображения вашего сайта.

Ваш сайт уменьшится до размера мобильного экрана. Вы также заметите, что внешний вид вашего сайта меняется на мобильный вид. В приведенном выше примере меню свернулось, и значок поиска переместился влево, а не вправо от меню. Когда вы наведете курсор мыши на мобильный вид вашего сайта, он превратится в круг,

Этот круг можно перемещать с помощью мыши, чтобы имитировать сенсорный экран на мобильном устройстве. Вы также можете удерживать нажатой клавишу «Shift», чтобы имитировать увеличение или уменьшение масштаба страницы. Над мобильным отображением вашего сайта вы увидите несколько дополнительных опций.

Это позволит вам сделать несколько дополнительных вещей. Вы можете проверить, как ваш сайт будет выглядеть на разных типах смартфонов. Вы также можете имитировать производительность вашего сайта на быстрых или медленных 3G-соединениях. Вы даже можете повернуть экран мобильного телефона с помощью значка поворота.

Как создать мобильный контент в WordPress

Как создать мобильный контент в WordPress Очень важно, чтобы ваш сайт имел адаптивный дизайн, чтобы ваши мобильные посетители могли легко перемещаться по вашему сайту.

Но просто иметь отзывчивый адаптивный сайт этого мало. Пользователи мобильных устройств часто ищут совсем другие вещи, чем пользователи настольных компьютеров.

Многие премиальные темы и плагины позволяют создавать элементы, которые по-разному отображаются на рабочем столе и мобильном устройстве.

Вы также можете использовать плагин Page builder, такой как Beaver Builder, для редактирования целевых страниц в мобильном отображении сайта. Вы обязательно должны создать специфичный для мобильных устройств контент для своих форм.

На мобильных устройствах они должны запрашивать минимальную информацию, в идеале просто адрес электронной почты. Они не только должны хорошо выглядеть но и быть быть легкими.

Поделиться

Leave A Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *