Использование констуктора сайтов
Mobirise

© Игорь Григорьевич Пеймер, декабрь 2024 г.

Mobirise это классическая программа, которую нужно устанавливать на компьютер.
Поддерживаются операционные системы Windows, MacOS и Linux (пока только Debian и основанные на ней системы — Deepin, Ubuntu, Mint и т.п.). Сайты и страницы, можно скачать на свой компьютер или загрузить на любой внешний хостинг.

Работа со страницами ведётся в блочном интерфейсе — вы просто собираете сайт из готовых секций, настраиваете их внешний вид, встраиваете в блоки дополнительные элементы: иконки, кнопки, формы и т.д.
Часть параметров выносится централизованно: основные цвета, управление шрифтами, включение кнопки «Наверх», подчёркивание ссылок и включение/отключение анимаций и т.д.

В настройках конкретного сайта можно задать:

• название сайта и его фавиконку;
• привязку к домену или к хостингу (имеется в виду выгрузка по FTP-протоколу или публикация на хостинге Mobirise);
• оптимизацию изображений (если вы загрузили на сайт слишком тяжёлые картинки, программа их сожмёт);
• карту сайта sitemap.xml и файл robots.txt;
• привязку кодов аналитики (можно установить централизованно);

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

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

Из "коробки" программа умеет:

• подключаться к любому серверу по FTP или SFTP-соединению;

• выгружать данные на сервис GitHub Pages (бесплатный хостинг для HTML-сайтов) и на собственный хостинг (бесплатный поддомен вида mobirisesite.com, возможна привязка своего домена)

• экспортировать сайт в HTML-формате со всеми связанными ресурсами.

Класификация доменов

• Первый уровень — это домены, привязанные к территории (рф, ru, ua) или тематике (org, biz, info).
• Второй уровень — в пределах одной зоны домен второго уровня уникальный, его не может использовать другой сайт.
• Третий уровень — ресурс внутри домена второго уровня.

Обычно третий уровень применяется при создании веб-ресурса или размещения отдельных сайтов внутри большого портала.

Если cайт сразу выгружается на сервер без экспортирования, то в настройках можно задать опцию обновления только изменённых файлов — уменьшается время выгрузки и снижается объём передаваемых данных.

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

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

Панель администратора спрятана под кнопкой с тремя полосками и включает 5 разделов:

• Страницы — создание/дублирование и SEO-настройка страниц.
• Сайты — создание нового сайта, его экспортирование и другие настройки.
• Учетная запись — сброс пароля и выход.
• Расширения и темы — получение готовых шаблонов (тематических дизайнов) и установка плагинов (такие модули расширяют функционал конструктора).
• Помощь — посещение форума и отправка писем в службу поддержки.

Блоки с контентом добавляются на страницы с помощью кнопки «+», расположенной в правом нижнем углу. После нажатия на неё появляется сайдбар со списком доступных элементов интерфейса. Их количество зависит от того, какой шаблон используется — стандартный или платный. Для добавления блока достаточно захватить его курсором мышки и перетащить на рабочее пространство.

Каждый элемент интерфейса имеет собственные настройки.
Они доступны после нажатия на кнопку в виде шестерёнки возле блока. Набор настроек зависит от типа элемента и контента.

Для добавления дополнительных инструментов и приложений Mobirise предлагает использовать расширения. В списке можно найти систему аналитики от Google, виджеты соцсетей и другие полезные плагины.
Большинство расширений платные.

Плагины и темы не обязательно покупать.

1. в официальном каталоге есть бесплатные варианты (их мало, но они есть)
2. существуют расширения и шаблоны от сторонних авторов

Расширения можно загрузить в конструктор через специальное меню («Расширения» –> пункт меню «Импорт»). Наиболее яркие примеры функциональных плагинов от сторонних разработчиков — DeltaPi softwares (в наборе есть альтернативный редактор кода, mail-формы, блок с изображениями «было-стало» и т.д.) и Witsec (редактор кода, блоки модальных окон, наборы иконок и т.д.). И это не единственные разработчики, которые делают расширения для Mobirise.

Работа с исходным HTML/CSS/JavaScript-кодом.

После экспортирования сайта или после выгрузки его на хостинг получаются простые HTML-файлы.
Код имеет наглядную структуру, лаконичен и хорошо читается.

Ленивая загрузка изображений (Lazy Load).

Необходима для ускорения процесса загрузки страниц. Реализуется плагином Lazy Load. Расширение умеет оптимизировать CSS-файлы и правила подгрузки стилей. На время загрузки изображений можно активировать показ спиннера.
Все настройки выполняются без каких-либо специальных знаний.

Конструктор прогрессивных web-приложений.

Тоже реализуется отдельным приложением — PWA Builder.
После пересохранения сайта с включённой опцией PWA его можно будет добавлять на рабочий стол в любой операционной системе (Windows, Android, MacOS) и запускать как самостоятельное приложение.

Конструктор форм.

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

Конструктор всплывающих уведомлений.

В Popup Builder можно создать всплывающее окно и логику его поведения: появление при скролле страницы, вызов по ссылке, срабатывание по времени, при уходе со страницы и т.д.

Загрузка своих шрифтов.

Вам не придётся ковыряться в исходном коде или прибегать к сторонним услугам. В базовой версии программы есть всё необходимое: поддерживается работа с бесплатными шрифтами Google Fonts и загрузка своих файлов (форматы .eot, .ttf, .woff, .woff2).

История версий.

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

Система комментирования.

На Mobirise можно делать многостраничные блоги.
Системы комментирования материалов реализуются за счёт встраивания внешних сервисов, таких как Disqus.

Дизайн

Шаблоны в Mobirise определяют внешний вид сайта и его функциональные возможности.
В библиотеке имется около двух сотен шаблонов (включая специальные для мобильных устройств), и количество постоянно растёт.
Набор блоков в каждом шаблоне отвечает определённой тематике: спорт, магазин, образование, ресторан и т.д.

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

Сайт создается из блоков, которые можно располагать в произвольном порядке, сохраняя вертикальную верстку.
В базовом наборе предоставляется только минимальный набор блоков.
Доступ к расширенному набору (более 4000 позиций) можно получить либо вместе с расширениями BlockPack for M4 (предназначено для тем/шаблонов с приставкой M4) и BlockPack for M3 (аналогичный пакет, но для тем M3), либо в составе полного пакета тем и дополнений Mobirise KIT, либо с конкретной темой.

Блоки в визуальном редакторе разделены по тематикам:

• заголовки
• списки
• галереи
• прайс-листы
• формы
• меню
• ...

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

Поисковая оптимизация (SEO)

• Заголовок (мета-тег Title) — показывается на вкладке в браузере и в поисковой выдаче.
• Описание (мета-тег Description) — текст для поисковой выдачи и сниппета при публикации ссылки в соцсетях.
• URL страницы — адрес, по которому она будет доступна для пользователей.

Все страницы и блоки автоматически адаптируются под экраны мобильных устройств.

Добавление сайта

• Мышкой нажать на три полоски.
• Выбрать пункт меню "Сайт"
• «Создать новый сайт»
• Задать имя сайта
• Выбрать тему оформления сайта ("Mobirise5")

Установка редактора

• Перейти по ссылке (в новом окне)
• Скачать приложение («Download»)
• Пункт меню "Расширения"
• "Импорт"
• Выбрать скачанный файл (обычно в папке "Загрузки")

Настройки блока

Снова открыть сайт.

Кликнуть на «шестеренку»

• Full Screen — блок на всю страницу.
• Full Width — полная ширина.
• Width — ширина текста.
• Align — расположение текста.
• Show/Hide — отвечает за элементы, которые будут отображаться или нет: заголовок, подзаголовок, текст и кнопки.
• Background — фоновое изображение, цвет или видео;
• Parallax — эффект параллакса.
• Overlay — отвечает за прозрачную маску, которая накладывается для затемнения яркой картинки или коррекции цвета.

Тематические блоки

• Article — текстовая информация, распределенная в красивые абзацы; отлично подойдет для кратких описаний;
• People — работники, клиенты, партнеры;
• News — используются для отображения актуальной информации, но легко адаптируется под небольшие портфолио и визуальные описания;
• Numbers — красивые графики прогресса.
• ....

Структуру сайта можно собирать прямо по заголовкам:
начинать с меню и заканчивать подвалом («Footers»).
Добавляются блоки максимально просто:
зажав левую кнопку мыши, нужно перетащить элемент в нужную часть сайта.
Найдя наиболее красивые блоки, буквально за 10-15 минут можно собрать красивый макет будущего одностраничника.

1. Не злоупотребляйте Headers.
2. Между большими блоками вставляйте маленькие.
3. Добавляйте оптимизированные изображения.
4. Используйте гиф-анимации и блоки с бэкграунд-видео.
5. Не делайте «портянку».
6. Не забывайте о меню.
7. Держите плюс-минус одну цветовую палитру.

Постпродакшен

Чтобы отредактировать кнопку необходимо кликнуть по ней и открывшемся меню изменить настройки.

Первая иконка — ссылка.

После редактирования кнопок, следует заняться текстом.

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

Общие настройки сайта

• Common — базовые настройки, такие как наименование, логотип и FTP.
• Optimization — автоматические сжатие изображений.
• SEO & Analytics — описание сайта, добавление robots.txt и sitemap.xml.
• Cookies Alert — новые пользователи будут получать уведомление о том, что ваш сайт работает с куки-файлами.
• GDPR — регламент по защите данных.