Как создать сайт с помощью конструктора сайтов Mobirise пошаговый пример

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

Напомню, что это серия статей о создании сайта в конструкторе Mobirise с нуля до работающего сайта в сети с настроенной формой подписки.

Начало:

• Как сделать сайт в конструкторе сайтов Mobirise инструкция →
Конструктор сайтов Mobirise на русском языке скачать бесплатно →
Как установить тему или шаблон для конструктора Mobirise →

Создание сайта буду показывать на примере конструктора Mobirise 4, т.к. эта версия русскоязычная. Сейчас на официальном сайте разработчиков можно скачать 5-ю версию, которая переведена лишь частично. Впрочем, всё это я описывала в статьях выше. Там же вы можете найти ссылки на скачивание двух версий: 5 и 4.

Как создать сайт в конструкторе Mobirise

Приступим к созданию самого сайта. Заходим в программу Mobirise 4.

  • Открываем Меню → Сайты → Создать новый:
как создать сайт с помощью конструктора сайтов Mobirise
  • Выбираем и устанавливаем шаблон Mobirise 4:
как создать сайт с помощью конструктора сайтов Mobirise

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

  • Открываем красный кружок с «+», чтобы увидеть готовые блоки:
как добавить нужные блоки на сайт Mobirise
  • И формируем «скелет» будущего сайта. Выбираем нужный блок, зажимаем левой кнопкой мыши и перетаскиваем в поле слева:
как добавить нужные блоки на сайт Mobirise

Не бойтесь перетаскивать разные блоки. Не нужные можно потом удалить. Так же блоки можно менять местами, перетаскивая их вверх, вниз или удалять.

  • Каждый блок настраивается отдельно. Настройки блока под шестерёнкой:
как редактировать блоки на сайте Mobirise

Вот что у меня получилось:

Как создать сайт с помощью конструктора сайтов Mobirise
Как создать сайт с помощью конструктора сайтов Mobirise

Я выбрала блоки:

  • Меню
  • Интро – главный экран
  • Преимущества
  • Отзывы
  • Поделиться в соц.сетях (но, блок потом убрала, т.к. кнопки СС есть в подвале)
  • Подвал

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

Редактируем блоки в конструкторе Mobirise

Каждый блок имеет ряд настоек. У каждого разные.

Можно менять размер отступов блока сверху и снизу, добавлять или убирать заголовки, подзаголовки, текст. Менять размер картинки, а также её местоположение (справа или слева). Менять или убирать фон (цвет, картинка), прозрачность, цвета элементов:

как отредактировать блоки в конструкторе сайтов Mobirise

Итак, приступим к редактированию блоков. Помимо настроек и стилей самого сайта, каждый отдельный блок имеет свои настройки, в т.ч и кнопки.

Меняем основные цвета сайта

  • Определяемся со стилем и цветовой гаммой, в которой хотите создать свой сайт. Для этого ищите примеры работ, созданные дизайнерами, которые вам понравились.

Для примера возьму такие цвета, которые нашла на сайте behance.net

как изменить цвет в конструкторе сайтов Mobirise
  • Заходим в настройки стилей сайта и меняем цвета на нужные:
как изменить цвет в конструкторе сайтов Mobirise

Меняем шрифты на сайте Mobirise

  • Меняем шрифты, если нужно:
как изменить шрифты в конструкторе сайтов Mobirise
  • Убираем лишние элементы, или наоборот – добавляем. Всё можно найти в настройках каждого отдельного блока.

Редактируем кнопки

  • Редактируем кнопки – добавить, удалить, поменять цвета и ссылки, добавить иконку – всё в настройках самих кнопок:
как редактировать кнопки в конструкторе сайтов Mobirise

Вставляем иконки

  • Можно менять иконки, менять цвет иконки, вставлять ссылку в саму иконку, если надо:
как изменить иконку в конструкторе сайтов Mobirise

Добавить и изменить медиа — картинки, видео

  • У медиа (картинка, видео) можно менять размер и местоположение, т.е. слева или справа:
как вставить свою картинку в конструкторе сайтов Mobirise

Меняем цвет шрифта

  • Меняем текст на нужный, меняем размер шрифта, выравнивание, цвет:
как поменять цвет шрифта в Mobirise

Если вам нужен какой-то свой цвет, то Вы можете изменить его в настройках цветовой гаммы.

Воспользуйтесь либо палитрой с ползунком, либо программой подбора цвета с монитора Pixie.


Если что-то пошло не так, сделайте отмену действий:

отменить изменения в Mobirise

Не бойтесь не туда нажать… в данном случае это не критично. Вы всего лишь учитесь, и вы уже молодец!

Так идём блок за блоком.

  • Меняем иконки, их размер, цвет, текст… Меняем всё что нужно поменять и что можно в рамках возможности конструктора:
Иконки в Mobirise

Добавляем слайдер на сайт Mobirise

  •  Добавляем отзывы в слайдер.
  • Меняем отступы, если нужно. Это есть в каждом блоке. Автоматическое или ручное прокручивание. Фоновое изображение, если надо + меняем его прозрачность:
как сделать слайдер в Mobirise

Настраиваем подвал сайта в Mobirise

  •  Доходим до подвала (футера) сайта и также меняем цвета, тексты и ссылки.

Устанавливаем логотип, вносим нужную информацию и ссылки. Добавляем соц. сети.

Знак копирайта можно убрать или оставить:

Подвал футер сайта в Mobirise

Добавляем и редактируем кнопки социальных сетей

  • Иконки соц. сетей и их настройки меняются в настройках самих иконок:
иконки социальных сетей в конструкторе Mobirise
  • Чтобы выбрать нужную соц. сеть надо развернуть соответствующее меню:
иконки социальных сетей в конструкторе Mobirise

Просмотр готового сайта

  •  Наш сайт почти готов. Проверяем на орфографические ошибки. Смотрим, как он будет выглядеть в сети интернет:
как посмотреть сайт в конструкторе Mobirise

И на разных устройствах:

как выглядит адаптивный сайт Mobirise на разных устройствах
  • Если что-то не устраивает – меняем картинки, размеры, шрифты… Доводим до совершенства)))

Пример готового сайта созданного в Mobirise

Вот такой сайт у меня получился https://1122333.ru/test/:

Как создать сайт с помощью конструктора сайтов инструкция

Меняем название сайта

  •  Сейчас нужно поменять название сайта и название страницы на нужное.

Идём в настройки самого сайта → Сайты → Настройки:

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

Меняем название страницы

  •  Ещё нужно поменять название страницы сайта.

Идём в настройки сайта → Страницы → Настройки страницы. Здесь меняем название страницы, добавляем описание страницы, смотрим как будет ваша страница выглядеть в поиске на мобильных и компьютерах.

URL страницы не меняем:

как изменить название страницы в Mobirise

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

  • Если вы сделаете несколько страниц, то каждой странице присвойте своё название. Именно оно будет отображаться вверху:
как изменить название страницы в Mobirise

Как сделать 3-х страничный сайт – смотрите в «Готовом комплекте для сайта 1.0», скачать который можно вместе с новыми материалами по созданию сайта в конструкторе.

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

Готовый комплект для создания сайта 2.0

Готовый комплект для сайта 2.0

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


  • На этом этап создания сайта в конструкторе – завершён.

Здесь разобрали как создать сайт с помощью конструктора сайтов Mobirise 4. Сейчас нужно выгрузить наш сайт на хостинг, и вставить форму подписки в кнопку «Скачать подарок». Переходите к следующему шагу →

Text.ru - 100.00%

Понравилась статья? Поделитесь с друзьями!

Оставить комментарий

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

Меню

Мы используем файлы cookie для анализа событий на нашем сайте. Продолжая просмотр сайта, вы принимаете условия использования