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

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

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

Итак, переходим в панель управления хостингом, раздел WWW-домены. Выбираем доменное имя и нажимаем кнопку "Конструктор сайтов".

Как открыть конструктор сайта в панели ISPmanager

При первом входе в конструктор сайтов перед Вами будут представлены шаблоны. Шаблон — это прототип Вашего будущего сайта. Они распределены по тематике: развлечения, бизнес, услуги и т.д.

Шаблоны сайтов в конструкторе

Наводим курсор мышки на понравившийся шаблон. На нем появятся три кнопки:

  • "Выбрать" — для установки шаблона
  • "Просмотр" — для ознакомления с шаблоном
  • "Руководство" — справки по шаблону.

Нажимаем кнопку "Выбрать".

Выбор шаблона сайта в конструкторе

Теперь можно приступать к редактированию шаблона и наполнению сайта Вашим контентом. Рассмотрим подробно верхнее и нижнее меню конструктора.

1. Верхнее меню

2. Нижнее меню

Верхнее меню

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

Как только сайт будет готов к публикации, в верхнем меню конструктора сайта нажимаем кнопку "Опубликовать".

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

После публикации сайт сразу же станет доступным. Но если DNS-сервера были недавно обновлены, то сайт появится в сети в течении 24 часов, после смены DNS-серверов.

Как сохранить черновик и сделать резервную копию в конструкторе?

Чтобы сохранить черновик сайта, в верхнем меню конструктора нажимаем кнопку "Опубликовать" — "Сохранить черновик".

Как сохранить черновик в конструкторе

Чтобы создать резервную копию сайта, в верхнем меню конструктора нажимаем кнопку "Опубликовать" — "Резервная копия/Восстановить".

Как сделать резервную копию в конструкторе

В открывшейся вкладке нажимаем кнопку "Скачать резервную копию". После нажатия резервная копия сохранится на Вашем компьютере.

Как сохранить скачать резервную копию в конструкторе

Также можно восстановить сайт загрузив резервную копию и нажав кнопку "Восстановить". Это пригодиться например, если Вы создаете сайт на тестовом домене и хотите перенести сайт на основной.

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

Как в конструкторе сделать предпросмотр сайта?

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

Как в конструкторе сделать предпросмотр сайта

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

Как выйти из полноэкранного режима

Для выхода из режима предпросмотра нажмите кнопку "Закрыть".

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

Для того чтобы отменить изменение, в верхнем меню конструктора нажмите кнопку "Отменить". Если требуется вернуть изменение, нажимаем кнопку "Вернуть".

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

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

Для того чтобы изменить шаблон сайта, в верхнем меню конструктора нажимаем кнопку "Новый/Сброс" — "Изменить шаблон". Далее выбираем шаблон и нажимаем кнопку "Выбрать".

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

Выбор шаблона сайта в конструкторе

Для импорта дизайна сайта, в верхнем меню нажимаем кнопку "Новый/Сброс" — "Импорт". В открывшейся вкладке указываем URL сайта, дизайн которого Вы хотели бы импортировать. Нажимаем кнопку "Да, импортировать страницу".

Как импортировать дизайн сайта в конструкторе

 

Согласие на импорт дизайна сайта в конструкторе

Как редактировать компоновку сайта в конструкторе?

В верхнем меню выбираем нужную компоновку нажимаем на нее и жмем кнопку "Включить". Границы для редактирования выделяются пунктирной линией. Не рекомендуется выбирать автокомпоновку. Компоновку лучше редактировать вручную.

Как редактировать компоновку сайта в конструкторе

Как добавлять и удалять страницы в конструкторе?

В верхнем меню конструктора выбираем кнопку "Главная" — "Редактировать". Откроется окно, где Вы сможете добавлять, настраивать и удалять страницы.

Как добавлять и удалять страницы в конструкторе

Тонкие настройки в конструкторе

В верхнем меню конструктора есть кнопка шестеренки. Нажав на нее Вам откроются разделы настроек:

  • SEO — где, можно прописать название, описание и ключевые слова, и подключить аналитику Google
  • Фон — где, можно настроить саму страницу, шапку, подвал, поля их размеры, фон, цвет
  • Стили — где, можно настроить свой стиль шрифта (размер, цвет, жирность, шрифт и т.д.)
  • Favicon — где, можно установить индивидуальную иконку Вашего сайта
  • Настройки — где, можно настроить редирект, прописать метатеги, скрипты, включить robot.txt, cookie
  • Лендинг — где, можно настроить страницу лендинг, которая делает из всех станиц сайта одну большую
  • Разметка — где, можно настроить разметку, которая позволяет настроить привязку элементов конструктора к сетке, направляющим и другим элементам, а также отобразить вспомогательные элементы вроде линейки и координатной сетки
  • Весь экран — для включения/отключения полноэкранного режима конструктора сайта.

Разделы настроек в конструкторе

Нижнее меню

Как добавить текст на сайт в конструкторе?

В нижнем меню конструктора нажимаем кнопку "Текст". Выбираем нужный текст, размещаем текст где Вам удобно. Нажимаем два раза на текст. Отроется панель для редактирования текста.

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

Как добавить картинки и видео на сайт в конструкторе?

Для того чтобы разместить картинку на сайте, в нижнем меню конструктора нажимаем кнопку "Фото".

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

Выбираем стиль блока. Выбираем картинку из галереи или загружаем ее из локального компьютера, нажав на кнопку "Загрузить фотографию". Также здесь можно выбрать готовую иконку в разделе "Иконки Font Awesome" и разместить ее на сайте.

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

После размещения картинки Вы можете нажать на нее правой кнопкой мыши, чтобы редактировать.

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

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

Добавление галереи на сайт в конструкторе

Чтобы наполнить галерею своими фотографиями, нажимаем на нее ПКМ и загружаем свои изображения. Также здесь можно изменить тип галереи, фон и размер.

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

Для того чтобы разместить видео на сайте, в нижнем меню конструктора нажимаем кнопку "Медиа". Нажимаем свойства и указываем ссылку на адрес Вашего видео, также можно указать таймкод с которого будет начинаться видео. Обращаем внимание, что видео должно быть взято с одного из поддерживаемых видеохостингов, например платформа Youtube.

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

Как добавить карту на сайт в конструкторе?

Для того чтобы разместить карту на сайте, в нижнем меню конструктора нажимаем кнопку "Карты".

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

Здесь выбираем тип карты. Нажимаем ПКМ на карту, выбираем раздел "Свойства".  Здесь можно указать ключ API, если он у Вас имеется, ввести адрес и выбрать зум.

Добавление карты на сайт в конструкторе

Как добавить фигуру на сайт в конструкторе?

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

Как добавить фигуру на сайт в конструкторе

Откроется окно, где можно выбрать фигуру. Чтобы изменить свойства фигуры нажимаем на нее ПКМ и выбираем раздел "Свойства". Здесь можно изменить рамку, закругленность углов, цвет фона или вставить изображение. Также в фигуру можно добавить текст, кнопки, изображения.

Добавление фигуры на сайт в конструкторе

Как добавить кнопку на сайт в конструкторе?

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

Как добавить кнопку на сайт в конструкторе

Откроется окно, где можно выбрать вид кнопки.

Добавление кнопки на сайт в конструкторе

Выбираем и размещаем кнопку в нужном месте. Нажимаем на нее ПКМ и выбираем раздел "Свойства". Здесь редактируем текст, который будет отображаться на кнопке. Далее выбираем ссылку, куда будет вести данная кнопка. Также здесь можно менять закругленность углов, стиль и фон.

Как добавить на сайт форму обратной связи в конструкторе?

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

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

Выбираем понравившийся стиль формы.

Добавление формы обратной связи на сайт в конструкторе

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

Как добавить меню на сайт в конструкторе?

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

Как добавить меню на сайт в конструкторе

Откроется окно, где можно выбрать вид меню. После размещения, нажимаем ПКМ и добавляем новые пункты меню, также можно менять свойства, в разделе "Свойства".

Добавление меню на сайт в конструкторе

Как в конструкторе поставить кнопки для переключения языков сайта?

Перед тем, как перевести страницу на необходимые языки, требуется добавить кнопки для переключения между языками. Для этого в нижнем меню конструктора нажимаем кнопку "Языки" и выбираем, как будут выглядеть кнопки.

Как в конструкторе поставить кнопки для переключения языков сайта

Установка переключателей языков на сайт в конструкторе

После размещения кнопок нажимаем ПКМ и выбираем раздел "Свойства". Здесь можно добавлять и изменять языки. Чтобы перевести сайт нужно будет создать дубль каждой страницы на определенном языке.

Как добавить различные блоки на сайт в конструкторе?

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

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

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

Выбираем категорию:

  • О нас
  • Контакты
  • Медиа
  • Товары
  • Команды
  • Нижний колонтитул
  • Отзывы
  • Услуги
  • Соц. элементы
  • Добро пожаловать
  • Блог, также для добавления элемента блога существует отдельная одноименная кнопка в нижнем меню конструктора.

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

  • Ценообразование.

После размещения выбранного блока на сайте, нажимаем ПКМ, раздел "Свойства" для редактирования блока. Также нажав ПКМ Вы можете добавлять новый пост.

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

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

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

Для редактирования нажимаем ПКМ, раздел "Свойства". Здесь также можно добавлять и удалять товары.

Как на сайте сделать кнопку со ссылкой на социальные сети в конструкторе?

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

Как на сайте сделать кнопку со ссылкой на социальные сети в конструкторе

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

Добавление социальной сети на сайт в конструкторе

Для редактирования нажимаем ПКМ, переходим в раздел "Свойства".

Дополнительные инструменты в конструкторе сайтов

С помощью блока "Улучшенный" Вы можете добавить календарь, таблицу, рекламу от AdSense, рекламный баннер, HTML код, таймер с обратным отсчетом и т.д.

Как добавить дополнительные элементы на сайт в конструкторе

Элементы в разделе "Улучшенный" в конструкторе

После публикации сайта через конструктор Вы можете проверить его работу. Для этого перейдите в панели управления Хостинга (https://zoidberg.handyhost.ru:1500/ispmgr).

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

WWW-домены в старой панели ISP

Далее перейдите в раздел «WWW» — «WWW-домены», выберите домен, в верхнем меню панели управления хостингом нажмите на кнопку «Перейти».

WWW-домены в новой панели ISP

Если Вы используете новый интерфейс для работы, переходите аналогично в раздел «WWW» — «WWW-домены», выберите домен, в верхней панели нажмите на кнопку «Перейти».

Сайт созданный на конструкторе

Нажав на кнопку «Перейти» будет отображён Ваш сайт. Теперь его могут увидеть другие пользователи в интернете.

Мы рассмотрели все основные функции конструктора сайта. Теперь Вы сможете без труда создать свой сайт на конструкторе. Надеемся. что наша статья была для Вас полезной!

Принимаем
Все способы