Как собрать
сайт из шаблона
в конструкторе
сайтов

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

Первое, что тебе нужно понять — ты сможешь создать сайт в конструкторе сайтов буквально за пару вечеров. Знания программирования и дизайна не пригодятся, за тебя уже всё продумали в специальном сервисе — конструкторе сайтов mottor.

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

Шаг 1 — Регистрируемся в конструкторе сайтов

Переходим вот по этой ссылке и в открывшемся сайте жмём большую жёлтую кнопку «Попробовать бесплатно».

Видишь большую жёлтую кнопку? Жми!

Далее откроется окно, в котором нужно будет ввести email и пароль — запомни и сохрани это сочетание, теперь это логин и пароль от твоего аккаунта в mottor. На аккаунте будут храниться все запущенные сайты, заявки, черновики сайтов.

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

Если ты привяжешь к аккаунту номер телефона, твой аккаунт попросту невозможно будет взломать. Это банковский уровень защиты, он называется «Двухфакторная аутентификация» — при входе в аккаунт на твой номер будет отправлен код подтверждения. Даже если кто-то узнает твой email или пароль — мошенники не смогут войти в аккаунт и навредить твоим сайтам.

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

Шаг 2 — Выбираем шаблон сайта

После ввода номера телефона вы увидите вот такое окно:

Здесь можно найти шаблон практически под любую задачу и тематику

Шаблон сайта это говый дизайн страницы, который создавали профессиональные веб-дизайнеры. По сути вы получаете студийный уровень дизайна — в готовом шаблоне вам остаётся лишь заменить текст и некоторые картинки.

В конструкторе сайтов есть mottor более 150 готовых дизайнов сайта. Как правильно выбрать шаблон сайта, который будет подходить по тематике и решать задачу бизнеса?

Самый простой способ найти нужный шаблон —
воспользоваться строкой поиска.

Если у тебя доставка еды — напиши в строке поиска «Еда»
Если ты торгуешь товарами — напиши «Магазин»
Если твоя компания занимается ремонтом — напиши «Ремонт»

Если хочешь идти — иди,
Если хочешь забыть — забудь

Результаты поиска по слову «Ремонт» — нашлось 20 готовых сайтов по этой тематике

Также под строкой поиска на экране выбора шаблонов есть рубрикатор. С его помощью удобно сортировать шаблоны. Выберем вкладку «Интернет-магазин» — система покажет только шаблоны интернет-магазинов. Теперь из них можно выбирать тот, что больше подходит по твоей тематике.

Предпросмотр шаблона сайта

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

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

Что если я не нашел шаблон по своей тематике?

Мы понимаем, что сколько шаблонов ни сделай — всё равно остаётся куча нестандартных ниш, которыми занимаются сотни и тысячи предпринимателей. Например, доставка готовых подарочных наборов носок к 23 февраля или экипировка для подводной охоты.

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

Шаг 3 — Редактируем шаблон сайта

После того, как ты выберешь шаблон, страница обновится и ты попадёшь в редактор сайта.

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

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

Как работать с редактором сайтов

Как отредактировать текст

Как заменить картинку на свою

Как отредактировать форму заявки

Когда ты поймёшь как устроен редактор, рекомендуем сразу же попрактиковаться. Напиши свой текст на первом экране, попробуй скопировать секцию и в ней замени картинку.

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

Шаг 4 — Что ещё нужно знать

Далее расскажем о чём ещё нужно знать, чтобы тебе было проще закончить сборку сайта из готового шаблона.

Не забывай про призывы к действию

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

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

В другой крутой статье мы рассказываем как создать цепляющий первый экран сайта. Там много и с примерами про то, как правильно оформить ваш оффер и призыв
к действию. Статья бесценная, читай обязательно.

В другой крутой статье мы рассказываем как создать цепляющий первый экран сайта. Там много и с примерами про то, как правильно оформить ваш оффер и призыв к действию. Статья бесценная, читай обязательно.

Свободная и блочная секции — в чём разница и как использовать?

В конструкторе сайтов mottor есть два вида секций — блочная и свободная. Давай разберёмся в чём разница между ними.

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

В свободной секции контент можно располагать на экране где угодно. Но с бОльшей свободой приходит и бОльшая ответственность — в свободной секции ты уже сам должен будешь аккуратно расставить элементы относительно друг друга.

Если ты уверен в своих силах, а блочная структура мешает воплотить твою задумку на сайте — просто сконвертируй выбранную секцию в свободную. Чтобы сделать это, в нужной секции наведи мышь на иконку с тремя точками и в выпавшем меню выбери «Сделать свободной секцией».

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

Здесь ты можешь узнать больше про свободную секцию:

обзор возможностей: https://lpmotor.ru/updates/free-section
видеоинструкция: https://www.youtube.com/watch?v=Gu7rU1bhssE&feature=emb_logo

Новичкам мы всё же рекомендуем создать сайт на блочной секции — это проще и ты не совершишь ненужных ошибок по неопытности.

Мобильная версия сайта

Не забудь настроить мобильную версию вашего сайта. Это сделать просто необходимо — ведь 60% всего интернет-трафика приходится на мобильные телефоны. Если твой сайт не будет оптимизирован под смартфоны, ты попросту потеряешь заявки и потенциальных клиентов.

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

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

В мобильной версии редактора работает та же логика — контент можно перетаскивать, а при нажатии на текст или картинку появляется меню редактирования.

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

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

Рекомендуем посмотреть вебинар, посвященный мобильной версии сайта.

Покажем как собирать мобильную версию страницы и на какие моменты стоит обратить внимание

Шаг 5 — Дополнительные материалы

Рекомендуем посмотреть и почитать:

Вебинар
«Сайт на прокачку»

Вебинар «Сайт на прокачку»

разбираем ошибки на пользовательских сайтах

Статья «Конкурентный анализ»

рассказываем как отстроиться он конкурентов и сформировать ценностное предложение

Статья «Как сделать первый экран сайта»

вы узнаете как сделать первый экран, который зацепит посетителей и повысит конверсию

В следующей статье мы разберём какие настройки нужно задать сайту до запуска. А пока...

У вас ещё нет сайта
или интернет-магазина?

Сделайте сайт за один вечер в конструкторе сайтов mottor. Для этого не нужны знания программирования и дизайна.

Есть вопрос по созданию сайта или нужно
найти исполнителя?

Есть вопрос по созданию сайта или нужно найти исполнителя?

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

конструктор сайтов
mottor — это бесплатный конструктор сайтов и лендингов. Создайте сайт, лендинг или интернет-магазин без знаний программирования и дизайна. Весь функционал mottor доступен сразу, поэтому вы можете создать лендинг бесплатно и воспользоваться встроенными функциями mottor: А/Б-тестами, CRM-системой, десятками интеграций со сторонними сервисами.
Документы:
Полезные ссылки:
Функциональность:
О компании:
При поддержке Фонда
Развития Интернет Инициатив
*Настоящая информация о тарифах не является офертой, публичной офертой и предоставляется исключительно в информационно-ознакомительных целях.
Бесплатный звонок по России
{{amount}}
Товар добавлен в корзину