Мобильная версия корпоративного сайта на основе шаблона

Иван Алексеев 10 Июля, 2012 771

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

На платформе шаблона из категории Бизнес под номером 39628, мы пошагово покажем, как создать мобильную версию сайта, например, для веб-студии.

Мобильная версия корпоративного сайта на основе шаблона
Шаг 1: Регистрация демо-версии шаблона
 

На каждой странице с шаблоном в нашем магазине есть зеленая кнопка «Бесплатно на 30 дней». Она позволяет зарегистрировать демо-версию шаблона.

Мобильная версия корпоративного сайта на основе шаблона
Форма регистрации крайне проста, вам нужно указать минимум информации о себе: имя, телефон и адрес электронной почты. Причем обязательно поле только одно – адрес электронной почты.

Мобильная версия корпоративного сайта на основе шаблона
Шаг 2: Панель управления MotoCMS
 

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

Мобильная версия корпоративного сайта на основе шаблона
Шаг 3: Изменение языка
 

Теперь необходимо изменить язык на русский, в верхней панеле вы найдете настройки: Настройки>Дополнительный настройки>Язык интерфейса>Русский:

Мобильная версия корпоративного сайта на основе шаблона
Мобильная версия сайта будет автоматически открываться при заходе на сайт с мобильного устройства, если вы поставите галочку в настройках: Настройки>Настойки веб-сайта>Перенаправлять мобильные устройства на альтернативную версию сайта.

Мобильная версия корпоративного сайта на основе шаблона
Мы значительно изменили дизайн предоставленного шаблона и его структуру. До и после:

Мобильная версия корпоративного сайта на основе шаблона
Шаг 4: Мобильный редактор
 

Для начала откроем мобильный редактор. Чтобы его открыть, необходимо найти в верхней части Панели управления MotoCMS кнопку «Редактор мобильной версии». Нажав на нее, вы увидите на экране мобильную админку:

Мобильная версия корпоративного сайта на основе шаблона
Шаг 5: Редактирование главной страницы
 

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

Мобильная версия корпоративного сайта на основе шаблона
Дважды кликнув по полоске меню, вы откроете его настройки. Тут можно удалить существующие стандартные пункты меню с целью создать новые или переименовать их в нужные вам:

Мобильная версия корпоративного сайта на основе шаблона
Теперь удалим весь ненужный контент и добавим картинку, как пример работ фирмы, на главную страницу. Для этого нажмите на вкладку Image слева, откроется медиатека. В медиатеку можно добавить свои изображения:

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

Мобильная версия корпоративного сайта на основе шаблона
Изменим цвет шапки сайта, а то она выглядит слишком скучной. Сделаем градиент (плавный переход) от светло-серого до черного цвета в шапке:

Мобильная версия корпоративного сайта на основе шаблона
Добавим текстовый блок с помощью вкладки Text слева. Цвет и шрифт текста можно менять:

Мобильная версия корпоративного сайта на основе шаблона
Вот как это будет смотреться на сайте:

Мобильная версия корпоративного сайта на основе шаблона
Зеленый цвет названий меню не подходит к общей концепции, изменим его на голубой:

Мобильная версия корпоративного сайта на основе шаблона
Теперь логотип, заголовки, пункты меню и картинка смотрятся гармонично:

Мобильная версия корпоративного сайта на основе шаблона
Шаг 6: Создание новой страницы
 

Необходимо создать новую страницу «Услуги». Пункт меню уже есть, а страницы пока нет. В верхней панели админки найдите кнопку «Создать»:

Мобильная версия корпоративного сайта на основе шаблона
Страница пуста. Наполним ее контентом, его можно разместить в удобном текстовом блоке с прокруткой (Rich Content Block):

Мобильная версия корпоративного сайта на основе шаблона
Два раза кликнув по Rich Content Block, вы откроете его настройки. Создайте там текст и вставьте картинку, как мы делали ранее:

Мобильная версия корпоративного сайта на основе шаблона
Сохраните все и вернитесь назад в админку:

Мобильная версия корпоративного сайта на основе шаблона
Также изменим цвет полосы прокрутки на голубой, так как по умолчанию она зеленая:

Мобильная версия корпоративного сайта на основе шаблона
Не забудьте прикрепить созданную страницу «Услуги» к соответствующему пункту меню:

Мобильная версия корпоративного сайта на основе шаблона
Сохраняем и нажимаем предпросмотр:

Мобильная версия корпоративного сайта на основе шаблона
Шаг 7: Создание фото галереи
 

Далее создадим еще одну новую страницу под названием «Портфолио». На ней мы разместим фото гафлерею:

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

Мобильная версия корпоративного сайта на основе шаблона
Загрузим в галерею фотографии из медиатеки (в медиатеку, в свою очередь, вы можете загрузить изображения с компьютера):

Мобильная версия корпоративного сайта на основе шаблона
Измените порядок показа фотографий, к примеру 3 фото в один ряд:

Мобильная версия корпоративного сайта на основе шаблона
Сохраните и нажмите предпросмотр:

Мобильная версия корпоративного сайта на основе шаблона
При клике мышью на изображение, открывается его полноразмерный вариант:

Мобильная версия корпоративного сайта на основе шаблона
Снова создаем новую страницу, она будет называться «О нас»:

Мобильная версия корпоративного сайта на основе шаблона
Шаг 8: Добавление видео
 

Добавим туда текстовый блок и видео с YouTube, используя кнопку слева:

Мобильная версия корпоративного сайта на основе шаблона
Сохраняемся и нажимаем предпросмотр.

Мобильная версия корпоративного сайта на основе шаблона
Шаг 9: Создание контакт-формы
 

Создаем страницу с формой обратной связи. Добавим на нее карту Google Maps, чтобы показать месторасположение нашей компании:

Мобильная версия корпоративного сайта на основе шаблона
Добавляем также виджет Contact Form:

Мобильная версия корпоративного сайта на основе шаблона
Кликнув два раза по виджету, его можно полностью отредактировать: добавить или удалить поля, переименовать их, задать функции:

Мобильная версия корпоративного сайта на основе шаблона
Вы можете переименовать кнопки под формой и изменить их дизайн:

Мобильная версия корпоративного сайта на основе шаблона
Теперь кликните два раза по виджету Google Maps, чтобы найти свое месторасположение на карте:

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

Мобильная версия корпоративного сайта на основе шаблона
В принципе это все. В несколько простых шагов, мы полностью отредактировали шаблон мобильной версии. Вот результат «до» и «после»:

Мобильная версия корпоративного сайта на основе шаблона
Вот как выглядит альтернативная версия сайта на мобильном телефоне:

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

Следуйте за нами: @MotoCMS_ru

Автор: Иван Алексеев
В компании MotoCMS Иван работает со дня ее основания. Признается, что успел создать не один сайт на MotoCMS ради досконального изучения админки и изложения всех хитростей работы с ней в блоге. Иван невероятно позитивен, предан своему делу, отзывчив. С удовольствием поболтает с вами о новых фичах, тулзах, пингах и других непонятных определениях на страницах блога.
  • http://vog-art.com Владимир

    Спасибо большое за такую возможность, с каждым обновлением moto CMS радуюсь как ребенок! Пожалуйста, не переставайте нас удивлять так же и дальше!!!
    Кстати, на последней фотографии в этой новости экран отражения iPhone отображает немного не ту картинку :)

    • Иван

      Спасибо, Владимир! Мы как дети радуемся таким отзывам, как ваш) Будем стараться удивлять вас и дальше! А с картинкой вроде бы все хорошо, что не так?

  • Юрий

    Но ведь flash на safari по умолчанию не загружается? А хотелось бы. Что делать то?

    • Иван

      Добрый день, Юрий. Я не совсем понимаю о чем вы говорите. Если вы имеете ввиду ПК, то вам просто необходимо установить flash плеер и все будет корректно отображаться в браузере Safari. Если вы имеете ввиду мобильные устройства, то чтобы сайт отображался, вы можете создать мобильную версию, используя встроенный мобильный редактор, о котором написано в данной статье.