Как сделать лендинг самому без знаний кода. Пошаговая инструкция

как сделать лендинг самому пошаговая инструкция

Привет всем. Из этого материала вы узнаете, как сделать лендинг самому и конечно же, получите пошаговую инструкцию, с помощью которой вы сможете создать одностраничник. Далее, речь пойдет о Builder Gum.

В чем плюсы этого билдера (конструктора). При создании сайта вам не нужны знания html или php, раз это конструктор, значит берем и строим. В результате получаем отличный сайт с адаптацией под мобильные устройства. Также вы можете конструировать сайты на заказ.

Что имеет конструктор Gum

— 210 уникальных секций, которые можно изменять под свои нужды

— навигация DropDown

— неограниченные цвета

— интеграция Mailchimp

— настройка форм

— 1000 иконок

— настройка карты Google

— 7 стилей карт Google

— предварительный просмотр на разных устройствах

— резервное копирование проекта

— 7 типов меню

— Темные и светлые темы

—  50 шрифтов Google

— сохранить / загрузить проект

— функциональность Drag & Drop

— видео фона

— настройки SEO

— модальные всплывающие окна

и это еще не все.

 

Если использовать для создания лендинга онлайн-конструкторы, то вам придется платить ежемесячно, а в нашем случае покупаем один раз и пользуемся пожизненно.

Стоимость билдера всего $18, это даже меньше оплаты облачного конструктора за месяц и по функционалу не уступает.

Обо всех прелестях Gum вы узнаете из пошаговой инструкции.

 

Где и как купить Builder Gum

 

На просторах интернет имеется площадка Evantomarker, где можно купить все, музыку, изображения, программы, плагины, скрипты и другое. Идем на сайт и покупаем билдер Gum.
покупка gum

Чтобы не покупать кота в мешке, его можно посмотреть и потрогать. Сделать это можно на странице

http://multifour.com/projects/gum/builder/

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

Для покупки регистрируйтесь и оплачивайте, после оплаты вы сможете скачать Gum. Оплату можно произвести с карты или через платежную систему Pay Pal. Если нет карты или не хотите её привязывать, закидывайте деньги в Pay Pal и оплачивайте. Для перевода денег я использовал один из обменников, который мне подошел. Как выбрать обменник читайте здесь.

Будут вопросы обращайтесь в личку ВКонтакте

 

Установка билдера на хостинг

 

Билдер Gum работает непосредственно на хостинге. Можно воспользоваться одним из трех вариантов.

1. Установка билдера под существующий сайт или блог
2. Установка на отдельный домен и хостинг
3. Установка билдера на локальном сервере (на компьютере)

 

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

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

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

1. Распаковываете скачанный билдер и увидите 4 папки, для установки потребуется папка с названием “PageBuilder-4.6.4”.

что в папке2. В корневом каталоге сайта создаете папку с любым названием, например “gum”.

3. С помощью FTTP клиента закачивайте папку PageBuilder-4.6.4 в папку gum.

4. В браузере в адресной строке указываете путь-ссылку до билдера.

 

У вас должно получиться что то типа этого http://sait.ru/gum/PageBuilder-4.6.4/

5. Билдер загрузится и можно приступать к созданию лендинга.

 

Структура конструктора Gum

 

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

 

структура

  • секции для конструирования структуры сайта от шапки до подвала
  • раздел для работы с цветами и темами сайта
  • раздел шрифтов и их изменение
  • возможность добавления дополнительных страниц.

 

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

 

Создание сайта по шагам

 

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

Меню сайта

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

шапка
При наведении на секцию появляется меню с названием секции и панелью для редактирования.
меню секции
Но нам, к примеру, нужно изменить название раздела FAQ на КОНТАКТЫ. Для этого клик в левом меню по букве Т (текст) и клик по изменяемому слову. Затем переписываем его.
замена текста
Готово, получили то что нужно.
итог

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

Шапка сайта

  1. Следующим шагом добавим секцию “шапка”, действия те же что и при выборе “меню” и заменим текст, Напишем “Тест Лендинг”.

добавление секции

Что получили в результате.
добавление секции
Таким образом можно добавлять бесконечное количество секций изменяя текст, изображения, иконки, фон. Возможностей огромное количество.

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

Стили CSS

  1. Теперь добавим форму обратной связи и с помощью CSS, что-нибудь изменим.

добавил форму
Для изменения переходим в режим редактирования, для этого клик по меню слева, затем наводим на форму и выбирает “Настройки”. Откроется окно, где можно и внедрять стили CSS.

Добавим немного кода между скобками.
добавление кода
Что получили
изменения

Форма для связи

  1. Форму обратной связи можно настраивать изменяя количество заполняемых полей. Вероятно, в этом случае придется воспользоваться переводчиком, если незнакомы некоторые слова.

 

меню формы

 

поля
 

Затем нужно настроить отправку данных на вашу почту. Простое заполнение Mail PHP, через SMTP сервер и далее интеграция с различными системами почтовых отправок.

 

 

 

настройка отправки

 

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

  1. Теперь посмотрим, как выглядит лендинг на мобильных устройствах. Если какие-то элементы отображаются некорректно, изменяйте их и проверяйте на всех устройствах.

 

вид на мобильном

Резервные копии

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

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

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

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

 

Скачать сайт

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

скачать сайт

Сайт в интернете

  1. Размещение готового сайта на хостинге аналогично размещению билдера Gum. На этом я останавливаться не буду. Этой информации достаточно в интернете.

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

 



Комментарии 1

Добавить комментарий

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

* Нажимая на кнопку "Отправить комментарий" Вы соглашаетесь с политикой конфиденциальности.