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

С выходом новой версии 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