Конструкторы сайтов

документация по использованию

Начало

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


Требования

Установить конструкторы можно на хостинг или на компьютер.
Для конструкторов в принципе подходит любой хостинг с PHP. Требования у них небольшие:

  • PHP 5.2+;
  • Веб-сервер Apache (серверы Windows, вероятно тоже будут работать);
  • Поддержка PHP Mail;
  • Включение JavaScript в веб-браузере.

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

  • Панель управления сервером Open Server

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

  • Текстовый HTML редактор, например Notepad++
  • FTP клиент для загрузки файлов на хостинг, например Filezilla

Установка

Установка конструкторов на хостинг очень простая - нужно с помощью FTP клиента закачать папки конструкторов в папку любого домена или поддомена на Вашем хостинге и всё. Установить их можно даже в папку действующего сайта, они не помешают его работе. Папки конструкторов могут иметь любое название. Каждый конструктор открывается по адресу: ваш_сайт.ру/название_папки_конструктора/

Если Вы хотите установить их не на хостинге, а на своем компьютере, то для работы конструкторов на компьютере необходим предварительно установленный локальный сервер:
1) Запустите скачанную программу "Open Server" и распакуйте ее куда Вам удобно.
2) Зайдите в распакованную папку и запустите файл "Open Server x64" или "Open Server x86" (в зависимости от разрядности Вашей операционной системы).
3) После старта программы вы увидите красный флажок в трее Windows (область возле системных часов). Если при запуске программа предложит что-то еще установить, то установите.
4) Чтобы включить непосредственно сам веб-сервер нажмите на флажок, далее выберите пункт меню [Меню → Запустить].
5) Чтобы проверить работоспособность сервера наберите в адресной строке Вашего браузера адрес http://localhost/ и Вы увидите страницу приветствия сервера.
6) Потом скопируйте папки с конструкторами, в папку "domains", которая находится в папке локального сервера - "OSPanel".
7) После этого наберите в адресной строке Вашего браузера адрес http://builder1/, где "builder1" - название папки одного из конструкторов. Конструктор откроется в браузере и можно им пользоваться. Другие конструкторы открываются аналогично.

Конструктор

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

Конструкторы не имеют CMS, поэтому в них нельзя редактировать готовые сайты, однако у многих из них есть функция сохранения и обратной загрузки проектов в конструктор ("Экспорт/Импорт Проекта"), чтобы можно было в любое время вернуться к их редактированию.


Возможности конструкторов

Перемещение блоков

Вы можете перетаскивать нужные Вам блоки в рабочую область, составляя из них шаблон Вашего сайта. После чего положение блоков можно изменить, перетаскивая их вверх или вниз. У каждого блока есть меню (Код, Сброс и Удалить), которое позволяет соответственно редактировать HTML код, сбросить внесенные изменения или удалить блок. Блоки можно удалить и все сразу на текущей странице, для этого надо просто нажать на кнопку "Очистить".

Редактирование контента

В конструкторе можно редактировать текстовое содержимое внутри каждого элемента (просто установив "Режим" на "Контент"). У конструкторов имеется текстовый редактор, позволяющий вносить различные изменения в текст.

Редактирование стиля/деталей

Конструктор также позволяет выполнять базовое редактирование CSS. Используя встроенный редактор, можно настраивать любые атрибуты CSS.

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

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

Редактирование изображений

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

Редактирование видео

Чтобы иметь возможность редактировать видео, перейдите в режим "Детали" и щелкните на видео, которое Вы хотите отредактировать. Слева откроется вкладка, где можно ввести идентификатор видео Youtube или идентификатор видео Vimeo или ссылку на видео файл.

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

Также можно изменить фоновое видео (в тех конструкторах, где это предусмотрено). Для этого откройте встроенный HTML редактор и поменяйте ссылку на видео файл, а также можно поменять изображение, которое отображается в мобильных устройствах вместо видео.

Клонирование элементов

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


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

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

Экспорт сайта

После того, как Вы закончите работу над сайтом, Вы можете его экспортировать на компьютер, щелкнув на кнопку "Экспорт". При этом все элементы, страницы, таблицы стилей, файлы Javascript, изображения и т.д. объединяются в ZIP-архив, который и будет загружен на Ваш компьютер.

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


SEO настройки

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


Экспорт и Импорт Проекта

У некоторых конструкторов, кроме стандартной функции экспорта готового сайта, есть также возможность сохранения проделанной работы в виде проекта, который Вы можете в любой момент экспортировать на компьютер в виде отдельного файла, и импортировать его обратно в конструктор для дальнейшего редактирования. Чтобы экспортировать или импортировать проект нажмите на соответствующую кнопку "Экспорт/Импорт Проекта", которая расположена чаще всего в нижней части левой боковой панели или в верхнем меню конструктора.

После процесса импорта все текущие страницы будут удалены! Поэтому если Вам нужно их сохранить, то сделайте копию своей работы, экспортировав ее в виде проекта.

Добавление страниц

Конструктор позволяет создавать сразу несколько страниц сайта. Чтобы добавить новую страницу, просто нажмите на кнопку с надписью "Добавить", расположенную внизу боковой панели слева. Вы также можете изменить названия страниц (используйте имена без расширения .html, они автоматически добавляются во время экспорта). Чтобы удалить страницу нажмите на соответствующий значок, расположенный рядом с названием страницы.


Почтовые формы

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

Конструктор builder1 (AnyPurpose)

После экспорта готового сайта на компьютер, разархивируйте его, откройте с помощью HTML редактора файл mail.php, который расположен в папке mail и замените в нем адрес почты на свой.

Конструктор builder2 (Factor)

Данный конструктор использует для почтовых форм несколько файлов - обработчиков (contact1.php, contact2.php и т.д.) в зависимости от выбранной в конструкторе контактной формы. Вы можете после экспорта сайта открыть Вашу страницу в HTML редакторе и посмотреть какой обработчик указан в форме и заменить в нем адрес почты или Вы можете заменить адрес почты сразу во всех файлах - обработчиках.

Конструктор builder3 (Flatpack)

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

Конструктор builder4 (Frontal)

Данный конструктор также использует несколько файлов - обработчиков (contact-form.php, contact-form1.php и т.д.), которые расположены в папке php. После экспорта сайта откройте Вашу страницу в HTML редакторе, посмотрите какой обработчик указан в форме и замените в нем адрес почты на свой или Вы можете заменить адрес почты сразу во всех файлах - обработчиках.

Конструктор builder5 (Getleads)

В зависимости от выбранной в конструкторе формы будет использован соответствующий файл - обработчик (contact.php, subscribe.php и т.д.), которые расположены в папке php. Настройка аналогична - после экспорта сайта откройте Вашу страницу в HTML редакторе, посмотрите какой обработчик указан в форме и замените в нем адрес почты на свой или Вы можете заменить адрес почты сразу во всех файлах - обработчиках.

Конструктор builder6 (LeadGen)

Свой адрес почты можно указать в конструкторе при экспорте готового сайта. Сначала выберите тип формы (если Вы не используете стороннего провайдера, то выберите Custom Email). После этого достаточно заполнить поле получателя и заголовок писем, например, "Письмо с Вашего сайта".

Конструктор builder7 (Lune)

В зависимости от выбранной в конструкторе формы будет использован соответствующий файл - обработчик (contact.php, car-contact.php и т.д.), которые расположены в папке php. После экспорта сайта откройте Вашу страницу в HTML редакторе, посмотрите какой обработчик указан в форме и замените в нем адрес почты на свой или Вы можете заменить адрес почты сразу во всех файлах - обработчиках.

Конструктор builder8 (PowerNode)

В зависимости от выбранной в конструкторе формы будет использован соответствующий файл - обработчик (contact.php, callback.php и т.д.), которые расположены в папке php. После экспорта сайта откройте Вашу страницу в HTML редакторе, посмотрите какой обработчик указан в форме и замените в нем адрес почты на свой или Вы можете заменить адрес почты сразу во всех файлах - обработчиках.

Конструктор builder9 (Select)

В зависимости от выбранной в конструкторе формы будет использован соответствующий файл - обработчик (contact.php, booking.php и т.д.), которые расположены в папке scripts. После экспорта сайта откройте Вашу страницу в HTML редакторе, посмотрите какой обработчик указан в форме и замените в нем адрес почты на свой.

Конструктор builder10 (Startuper)

В зависимости от выбранной в конструкторе формы будет использован соответствующий файл - обработчик (mailer.php, mailer2.php и т.д.), которые расположены в папке mail. После экспорта сайта откройте Вашу страницу в HTML редакторе, посмотрите какой обработчик указан в форме и замените в нем адрес почты на свой или Вы можете заменить адрес почты сразу во всех файлах - обработчиках.

Настройка reCAPTCHA в формах

В некоторых конструкторах имеется возможность использования защиты от спама с помощью reCAPTCHA. Чтобы ее подключить надо просто вставить в соответствующее поле или в файл-обработчик секретный АPI ключ, который Вы можете получить вот здесь: https://www.google.com/recaptcha/admin. Перейдите на указанную страницу и следуйте предлагаемым там инструкциям для получения Вашего ключа.


Ограничение доступа

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

По умолчанию пароль для входа в конструкторы с системой ограничения доступа: passadmin, в целях безопасности обязательно измените его. Для этого с помощью любого HTML редактора замените пароль в 4 строке файла index.php. А также Вы можете с легкостью изменить изображение, которое отображается на странице авторизации, заменив соответствующий файл в папке images.

Ответы на частые вопросы

1) Данные конструкторы именно инструменты для создания сайтов, а не cms для них и они никаким образом не будут связаны с созданными в них сайтами.

2) Принцип работы - в конструкторах Вы создаете сайт, потом экспортируете его в архиве на компьютер, а потом уже закидываете сайт на хостинг.

3) Все конструкторы создают адаптивные сайты для всех устройств, с любым разрешением экрана.

4) У созданных сайтов нет админки - это обычные статичные html сайты. Для их последующего редактирования можно установить, например, бесплатный редактор Textolite.
Кроме того, у некоторых конструкторов есть возможность сохранить сайт еще и в виде проекта и потом в любое время продолжить его редактирование, загрузив проект в конструктор. Об этом написано выше, в соответствующем разделе.

5) Нет никаких ограничений по времени использования конструкторов или по количеству созданных в них сайтов.

6) Конструкторы полностью автономные, и они не требуют ни активации, ни обновления.

7) В конструкторах есть почтовые формы и их можно легко настроить, чтобы письма приходили Вам на почту. Но следует помнить, что есть 2 вида форм - обратной связи и подписки. Формы подписки обычно "заточены" под сервисы рассылок и для них настройка не предусмотрена - если они вдруг Вам понадобятся, то настраиваете их самостоятельно. А для форм обратной связи в инструкции написано, где нужно указать свой адрес почты, чтобы принимать письма с формы.
P.S. Некоторые формы подписки можно настроить и на прием писем на свою почту (зависит от конкретного конструктора).