Как сделать мобильную версию сайта на wordpress | ДОМ НАШЕЙ МЕЧТЫ

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

Как сделать мобильную версию сайта на wordpress


Агент по туризму и страхованию. Главный редактор сайта.

Делаем ваш сайт доступнее! Сегодня вы узнаете о том, как сделать мобильную версию сайта на wordpress для пользователей, которые заходят в Интернет с мобильных устройств. Для этого мы используем сервис dudamobile.

Как сделать мобильную версию сайта на wordpress

Напомню, что на прошлом занятии мы с вами сделали поиск по сайту и улучшили его с помощью плагина. Заходим на сайт http://my.dudamobile.com. Можете зарегистрироваться или авторизоваться через Фэйсбук. В поле вводим адрес своего сайта (URL)и жмем на синюю кнопку Make my site mobile!

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress

В открывшемся окне вы увидите свой сайт в мобильном телефоне.

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-2

Без вашего участия автоматически запускаются настройки: Дизайн (Design), Редактировать страницы (Edit Pages)и Опубликовать свой сайт (Go live). Начнем с Дизайна.

Дизайн - как сделать мобильную версию сайта на wordpress

1. Макет (Layout). Выбираете тип навигации: список, матрица, расширяющийся, нижний, верхний; затем стиль.

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-3

2. Стиль (Style). Здесь настраиваете цветовую палитру, выбираете фоновое изображение, настраиваете стиль шрифтов. В основе предложенных вариантов цветовой палитры всегда лежат основные цвета вашего сайта, либо гармоничные с ними цвета – более 10 вариантов. Фоновое изображение можно загрузить со своего сайта, стороннего ресурса или выбрать из предложенных. Смело экспериментируйте, потому что удалить будет просто.

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-4

3. Заголовок (Header). Автоматически подгружается эмблема сайта. Ее можно заменить другим изображением или текстом. Изображение ровняется по правому, левому краю или центру; регулируется его размер.

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-5

На изображении доска объявлений Лучшие вакансии студентам и выпускникам, ее  мобильная версия. Здесь  установлены:

  • Макет: список прозрачный с иконками (customize).
  • Стиль: Без фонового изображения. Стиль шрифтов – базовые настройки.
  • Заголовок: 50% от загруженного, выровнен по центру, цвет фона изменен.
Редактирование страниц - как сделать мобильную версию сайта на wordpress

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

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-6

Публикация - как сделать мобильную версию сайта на wordpress

Перед публикацией мобильной версии сайта вам предлагается тарифный план: бесплатно или за $9 в месяц. Бесплатная версия включает:  загрузку 10 страниц, просмотр 500 страниц пользователями;  платная: неограниченное число страниц и просмотр, круглосуточную техническую поддержку со стороны dudamobile, вызов мобильной карты, доменное имя – ваше впереди которого будет буква m. На первом этапе работы сайта эти дополнительные функции не нужны, поэтому выбираете бесплатный тарифный план и нажимаете синюю кнопку.

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-7

Открывается окно, которое предлагает вам настроить переадресацию сайта. На первом шаге скачиваете плагин, загружаете его на сайт. На 2-ом шаге – активируете. После активации нажмите синюю кнопку «Yes» Да. Ваша мобильная версия готова!

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-9

Теперь вы знаете, как сделать мобильную версию сайта и ваш сайт получит дополнительный трафик. (На миниатюре в начале статьи вы видите мобильную версию доски объявлений "Лучшие вакансии студентам и выпускникам".

Руководство для первокурсника: как сделать мобильную версию сайта на wordpress

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

(0 голосов, в среднем: 0 из 5)
Метки записи: