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

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

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

Условиями использованиями конструктора являются

Первоначально заходя на страницу с общей информацией о конструкторе и, при переходе по кнопке «Создать сайт», открывается деморежим. Чтобы перейти в постоянный конструктор, нужно зайти в панель управления хостинга. (Адрес в строке должен прописываться с host). Ссылка для перехода на эту панель, пароль и логин приходит вместе с письмом при активации хостинга.

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

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

Войдите в панель управления хостинга. Слева находится меню с командами. Выбираете пункт WWW и далее — строку «Конструктор сайтов» либо «WWW-домены»

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

В окне конструктора сайтов представлено более 200 различных дизайнерских шаблонов. Поскольку создаем лендинг, то выберем соответствующий пункт, где есть 11 шаблонов.

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

При наведении на шаблон появляются три кнопки — «Просмотр», «Руководство» и «Выбрать». Если нажать на кнопку с лупой «Просмотр», то откроется новая вкладка с выбранным сайтом.

Кнопка «Руководство» запускает презентацию, показывающую все этапы создания сайта, основной инструментарий редактирования.

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

Условно окно конструктора ProHoster можно разделить на несколько частей:

1. Панель или строка меню с основными командами

2. Основной инструментарий;

3. Строка меню, с элементами (экранами, блоками) меню лендинга. Это меню отображается на сайте;
4. Блок меню с различными командами, под «Структурой страницы» — здесь располагается основная информация по активным элементам, которые расположены на странице. При их активации (просто щелкните по нужному элементу), в структуре отображается список команд, которые можно применить к этому элементу;
5. А также сам шаблон с его основными элементами.

Для того чтобы полностью удалить созданный дизайн сайта воспользуйтесь кнопкой-полем «Новый/Сброс шаблона». Здесь есть три команды:

Чтобы просмотреть как выглядит сайт — воспользуйтесь кнопкой «Просмотр». Она находится сверху, на первой строке. Чтобы увидеть, как будет отображаться сайт на других устройствах (планшет, телефон), кликните по нужной пиктограмме.

Чтобы переделать расположение элементов, отредактировать их отображение на других устройствах (помимо компьютера), в конструкторе, во второй строке, кликните по соответствующей пиктограмме.

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

Выделенный для примера элемент можно:

Создавая свой лендинг удобно использовать его прототип. Благодаря этому посадочная страница будет создаваться по некоторому плану, определенной структуре.

Лендинг — обычно состоит из нескольких частей. Информацию этих блоков (частей) стараются разместить, так, чтобы она размещалась на одном экране.

В нашем лендинге будет несколько экранов:

Также возможно добавление страниц с обоснованием стоимости курса, отзывами, и прочим.

Подведем структуру лендинга под описанную выше.

Для начала переименуем пункты меню посадочной страницы. Для этого кликните по первой кнопке (полю) стоящем рядом с логотипом ProHoster. Из открывшегося списка выбираем «Редактировать». Откроется окно «Редактировать пункты меню» Чтобы добавить новый пункт меню, нажмите на кнопку «Новый элемент». Впишите его название и нажмите «Применить».

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

Чтобы на самой странице появился соответствующий блок, экран нажмите на кнопку с зеленым плюсом и сначала выберите инструмент «Границы».

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

Далее, в меню слева, под «Структурой страницы» выбираете пункт меню «Улучшенный» и вводите название якоря. Якорь, это отметка для внутренней ссылки, того места куда будет осуществлен переход.

Затем выберем инструмент «Блоки». Либо те элементы, которые нужно добавить на новом экране страницы.

Снова перейдите в окно «Редактировать пункты меню» и поставьте новые данные (выберите новый якорь для нового блока, экрана).

Вызвать окно «Редактировать пункты меню» можно с помощью контекстного меню. Нажмите правой кнопкой мыши по строке с меню на посадочной странице.

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

Теперь остается поменять по своему усмотрению основные элементы в шаблоне на свои данные.

На главной будут две кнопки «Записаться на курс» и «Подробнее». Значок «&» удалим. А фон кнопок заменим на другие изображения. Соответственно, будем изменять кнопки «Кофе» и «Donats».

Щелкаем по изменяемому элементу, выбираем фон в левом столбце с меню под «Структурой страницы». Далее, выбираем элемент с надписью «Изображение». Нажав на ручку (или щелкнув по центру кнопки) выбираем новое фото.

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

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

Изменим цвет текста на кнопках. Выбрав соответствующие кнопки и в блоке «Button» слева. Очертания текста можно изменить по шрифту, цвету, размеру, начертанию.

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

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

Аналогичным образом заполняются данные по остальным страницам.

Когда сайт не полностью готов, то сохраните его в черновике. Подведите курсор мыши к кнопке «Опубликовать» и выберите соответствующий пункт. Если сайт готов к публикации, то кликайте по этой зеленой кнопке.

Во время создания и редактирования сайта также рекомендуем создавать резервную копию. Создание и восстановление из резервной копии возможно при активации соответствующего пункта меню кнопки «Опубликовать». Резервная копия — это страховка от утери данных и ошибок. К тому же резервная копия может содержать альтернативный (запасной) шаблон и дизайн сайта.

Конструктор сайтов на ProHoster обладает интуитивно понятным дизайном. Создание сайта упрощается также тем, что изначально пользователь использует готовые шаблоны. Кроме того, есть довольно подробное справочное руководство, в котором создание шаблонов расписано буквально по шагам. Поэтому, найдя оптимальный вариант и подстроив его под себя, можно создать удобный и красивый сайт буквально за 10-15 минут.