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

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

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

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

Разработка сайтов — это одно из ключевых звеньев бизнеса в интернете XXI века. Советы из статьи «Как самому сделать сайт с нуля бесплатно: пошаговая инструкция для чайников» пригодятся и предпринимателю, и узкопрофильному специалисту.

«Если вас нет в интернете — вас нет в бизнесе», сказал как-то Билл Гейтс, основатель Microsoft. И был прав. Без сайта сегодня о вас или вашей компании никто не узнает. А если и узнает, то к вам будет меньше доверия: «Как? У них ещё нет сайта? Вот отстали от жизни! Лучше поискать кого-то посовременнее».

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

Что такое сайт и зачем он вообще нужен

Вот кто из вас не пользуется интернетом в XXI веке? Ну правда? Я полагаю, что никто. 0%. И буду прав. Вы же читаете эту статью, верно? А моя статья — это часть интернета.

Конечно же ещё существуют на свете люди, которые не знают, что такое сайт, интернет, компьютер. Но их немного. Живут они в джунглях Амазонки (высоко в горах Тибета или Монголии) и никак на мировой человеческий прогресс не влияют.

XXI век — это век информации. Невозможно идти в ногу с цивилизованным миром и не пользоваться информационными технологиями. В частности, интернетом.

Что такое сайт? Сайт — (англ. site) это частичка мировой Сети. Нематериальный ресурс, который состоит из одной или множества веб-страниц и содержит информацию на какую-то общую тему: текст, графику, видео, аудио.

Сайт может принадлежать как отдельному человеку, так и компании — юридическому лицу.

Для чего нужны сайты?

Главных причин, по которым люди создают сайты, всего две:

  • Ради заработка (коммерческий сайт)
  • Ради хобби (некоммерческий сайт)

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

Какие бывают сайты

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

  • Лендинг
  • Сайт-визитка или корпоративный сайт
  • Информационный сайт
  • Социальная сеть
  • Интернет-магазин
  • Онлайн-сервис

Рассмотрим каждый тип более подробно.

Лендинг или одностраничный сайт

лендинг пейдж пример

Лендинг (англ. landing) — это сайт, который состоит из одной страницы. Ещё его называют посадочной страницей, лендосайтом.

Лендинги появились не на заре появления интернета, как многие могли бы подумать, а гораздо позже. В Россию они проникли из США в 2012 году. Что-то около того. Я помню то время, когда интернет просто кишмя кишел «недосайтами», как их тогда называли. Продавали на них всякие ягоды годжи, кресты торетто, говорящих хомяков. А вы помните?

Одностраничный сайт — это сайт, на котором вся информация уложена последовательно, в блоки. Их ещё называют экраны.

Ссылки в меню ведут на определённую часть страницы. Это отличает лендинги от классических многостраничных сайтов.

Главная задача лендинга — рассказать посетителю о компании, услуге или товаре.

Несмотря на то, что бум одностраничников прошёл ещё в 2013—2014 годах, сегодня их по-прежнему успешно используют. Изменился только подход к веб-дизайну и наполнению лендингов информацией, они стали меньше «кричать» и несут больше пользы для посетителя.

Кто может использовать лендинги:

  • Компании
  • Частные специалисты

Основная цель одностраничного сайта — получить контакт пользователя. Превратить читателя в лида. Для этого в конце страницы (часто и в начале, и посередине) устанавливают кнопки или формы, где посетитель может оставить свой контакт или отправить заявку.

В 2013 году, когда одностраничники ещё были в диковинку, они давали неплохую конверсию в продажу недорогих товаров. Бизнес с Китаем тогда стал развиваться семимильными шагами. Начинающие бизнесмены закупали партию дешёвого китайского товара, делали наценку в 500−1000%, быстро собирали лендинг и запускали продажи через сайт.

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

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

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

Одностраничники мало подходят для SEO-продвижения. В лучшем случае, вы продвинете его только по 1−2 ключевым словам. Для привлечения посетителей на лендинги больше подойдут другие каналы трафика: контекстная реклама, рассылки по базам электронных адресов или в соцсетях.

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

Сайт-визитка или корпоративный сайт

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

На корпоративном сайте обычно имеются такие страницы:

  • О компании
  • Цены
  • Контакты
  • Информация о товарах/услугах

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

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

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

Информационный сайт

Кроме коммерческих сайтов компаний в интернет есть множество ресурсов, которые ничего не продают, а просто предоставляют интересную информацию для чтения:

  • Блоги
  • Медийные новостные порталы
  • Интернет-журналы

Такие сайты называют информационными. Они тоже вполне могут зарабатывать. Только делают они это опосредованно: путём продажи рекламных мест, публикации платных статей, сбором контактов в продающую рассылку.

Главная задача информационных сайтов — закрыть потребность человека в чтении и получении новой информации, дать ответ на вопрос, помочь разобраться в проблеме.

Контент на инфосайте должен постоянно обновляться, чтобы быть интересным для читателей.

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

Социальная сеть, форум

вконтакте социальная сеть скриншот

Социальными сетями, полагаю, вы тоже пользуетесь. Все ведь слышали про Вконтакте, Facebook, Instagram, Одноклассники, Мой мир?

Так вот, социальная сеть — это тоже сайт со множеством страниц. Её предназначение — дать возможность пользователям общаться друг с другом.

Большинство социальных сетей позволяют зарегистрировать личную страницу абсолютно бесплатно.

Что можно делать в социальных сетях:

  • Общаться с родственниками, друзьями, коллегами
  • Просматривать и закачивать фотографии и видеозаписи
  • Вести блог на своей странице
  • Комментировать записи
  • Обмениваться файлами
  • Создавать группы по интересам, хобби и т. д.

Изначально соцсети использовались для личного общения по интересам.

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

Я помню время, когда Вконтакте не было ни рекламы, ни коммерции. А вы помните? :)

Форум — это тоже своего рода социальная сеть, площадка для общения в интернете, только более упрощенная. Форумы возникли на заре появления интернета и до сих пор востребованы.

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

Особенно много там людей «за 40». Они начинали общаться в интернете на форумах ещё в 1990-е и предпочитают их социальным сетям.

Интернет-магазин

Интернет-магазин — это торговая площадка в интернете, сайт, на котором реализованы механизмы дистанционного выбора товаров или услуг и оформления заказов.

  • Классический интернет-магазин состоит из:
  • Каталога или товарной матрицы
  • Карточек товаров
  • Корзины
  • «Шапки» и «подвала» с контактами

И может включать дополнительно:

  • Возможность зарегистрировать личный кабинет
  • Новости и акции
  • Подключенные платёжные системы
  • Информацию о торговой компании
  • Блог и т. д.

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

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

Покупать в интернет-магазине очень удобно: зашёл на сайт, нашёл нужный товар, оформил заказ. И всё. Никуда не нужно ехать, тратить время. Товар привезут вам домой.

Я сам часто оформляю заказы дистанционно. Вообще, мне кажется, что XXI век — это будет век доставки, интернета, мобильных приложений.

Чтобы создать сайт интернет-магазина, понадобятся специальные знания. Нужно владеть веб-дизайном, уметь программировать и работать с административной панелью сайта.

Онлайн-сервис

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

Онлайн-сервис — это сайт, который предоставляет услуги, обычно за вознаграждение.

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

Вот некоторые виды сервисов:

  • Конструктор сайтов (примеры: Tilda, Ukit, Wix)
  • Конструктор логотипов
  • Фоторедактор
  • Биржа фриланса
  • Интернет-банк
  • Онлайн-бухгалтерия
  • Различные узконишевые разработки

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

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

Онлайн-сервисы — это доходные сайты, на которых разработчики зарабатывают неплохие деньги.

Создать и развивать такой сервис обойдётся в миллионы рублей. Это огромные бюджеты.

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

Есть такая фриланс-биржа — WorkZilla. Так вот, разрабатывать её начинали всего два человека (основателя зовут Пётр Щекочихин). Делали это на голом энтузиазме. В 2015 году в команде биржи работало уже 14 человек. Сегодня команда WorkZilla выросла в разы и постоянно в поиске новых сотрудников.

Кто участвует в создании сайтов

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

Давайте возьмём среднестатическую веб-студию. Кто будет участвовать в разработке сайта и каковы функции этих специалистов?

Как минимум их будет трое:

  • Руководитель проекта
  • Проектировщик интерфейсов
  • Веб-дизайнер
  • Программист

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

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

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

Программист должен уметь разбираться в хитросплетениях языков программирования, html, php, тегов, скриптов. Он укладывает дизайн в машинный код, как бы переводит сайт на язык, понятный компьютеру. Существуют front-end и back-end разработчики. Первые пишут инструкции для частей сайта, которые взаимодействуют с браузером. Вторые — для частей сайта, которые работают на сервере.

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

Многие сайты установлены на популярных CMS: WordPress, Joomla, Drupal, ModX и т. д. Мой сайт работает на Wordpress.

Установить сайт на Wordpress и работать в этой CMS несложно. Я научился за пару дней, просмотрев несколько видеоуроков и прочитав пару статей. WordPress мне лично импонирует тем, что она имеет простой и понятный интерфейс.

В других админках разобраться неподготовленному человеку сложнее. А вот чтобы написать «самописный» сайт, уже потребуются глубокие знания языков программирования html и php.

О чём нужно поразмыслить ещё до начала работы над сайтом

разработка сайтов что ей предшествует

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

Чтобы сайт работал, понадобятся домен и хостинг. Для чего именно нужен домен, можете почитать здесь, а про хостинг — здесь.

Домен и хостинг нужно оплачивать регулярно, но затраты тут небольшие. Для моего блога мне пока вполне достаточно тарифа за хостинг в 2550 рублей/год и за домен — 200 рублей/год в зоне *.ru.

Итак, вы собрались завести свой сайт. Первый вопрос, на который стоит ответить: «Для кого будет сайт?» Подумайте, кто будет на него заходить, читать? Какая информация будет на размещена на сайте?

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

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

Примерные разделы ТЗ:

  • Список терминов и определений
  • Описание задачи
  • Список требований (дизайн, CMS, структура, front-end, back-end, контент, юзабилити и т. д.)
  • График работ
  • Возможность внесения дополнений в техзадание

Часто объём техзадания составляет десятки и даже сотни страниц формата А4. Впечатляет, не так ли?

Скачать пример технического задания на разработку сайта.

Целевая аудитория

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

Подумайте о целевой аудитории. Какой контент вы хотите ей дать? Посмотрите конкурентов. Чем вы будете лучше их?

Сайт может решать следующие задачи:

  • Генерировать поток заявок или заказов (интернет-магазин)
  • Работать на повышение узнаваемости бренда (корпоративный сайт)
  • Быть энциклопедией
  • Закрывать потребность в чтении и новой информации (медийный портал)
  • Предоставлять посетителям возможность воспользоваться онлайн-сервисом
  • Формировать вашу экспертность (авторский блог)

После того как главные задачи сайта чётко определены, начинается процесс разработки технического задания, а затем и проектирования сайта, создания его прототипа.

Сделать на конструкторе самому или заказать в веб-студии — «To be or not to be»

Речь идёт о личном блоге или сайте-визитке? Тогда вам вполне по силам будет за несколько дней разобраться самому в конструкторе либо в бесплатной CMS и запустить сайт без чьей-либо помощи.

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

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

Около 20% сайтов создаются в России «на коленке», без подробного технического задания. И ещё столько же — вообще без договора!

Среди программистов даже появилась шуточная поговорка: «Без грамотного ТЗ — результат ХЗ».

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

Грамотно продумать все мелочи смогут только профессионалы, которые на рынке много лет.

Будет ли SEO?

сео продвижение сайта зачем нужно

SEO — это способ продвижения сайтов в поисковых системах при помощи контента.

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

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

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

Одностраничные сайты мало подходят для полноценного продвижения. По 1−2 запросам вы ещё сможете выйти в топ выдачи, но не более того. Для интернет-магазинов и корпоративных сайтов семантическое ядро может включать тысячи запросов, а значит, понадобятся тысячи страниц.

Резюмирую: полноценно продвигать в поисковых системах можно только многостраничные сайты.

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

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

В этом разделе я покажу на конкретном примере сборку сайта из 3 экранов на одном из самых популярных конструкторов сайтов — uKit.com.

uKit подойдёт для создания одностраничных, корпоративных сайтов, небольших интернет-магазинов.

Почему uKit? Я активно пользуюсь им с 2017 года и вот какой список преимуществ составил:

Интерфейс прост в освоении для новичков

  • Профессионалы уже подумали о дизайне вашего будущего сайта
  • Не нужно знать языки программирования
  • Адаптивный дизайн страниц
  • Бесплатная версия включает большую часть функционала
  • Интеграция со сторонними сервисами
  • Возможность доработать код сайта
  • Небольшая стоимость платной версии, гибкая тарифная политика

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

Создаём прототип сайта

прототип сайта как создать

С чего начинается разработка любого сайта, спросите вы? Конечно же с идеи! А за идеей следует прототип.

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

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

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

Правильная структура — залог успеха!

Прототип — это и есть структура будущего сайта. Она может включать:

  • Схемы
  • Текст
  • Изображения

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

Примеры онлайн-сервисов и программ для быстрого прототипирования сайтов:

  • Balsamiq
  • Mockflow
  • Moqups
  • Axure
  • Hotgloo

Можете потестировать их на досуге. Я работал с Moqups, например.

Я обычно делаю прототип по статической модели. Прописываю его в Word, текстом. Мне редко требуется придумать новый лендинг, поэтому я не заморачиваюсь со специальными сервисами прототипирования. Чтобы подготовить прототип одностраничного сайта среднего объёма, тщательно продумать все детали, написать тексты, я трачу примерно часа 3−4.

Как составить прототип?

Откройте новый документ в Word, настройте альбомный вид страницы. Представьте, что каждая новая страница — это экран будущего сайта.

Итак, мы условились, что у нас будут 3 экрана. Приступим к прототипированию!

Первый экран

Соберём лендинг под услугу сертификации.

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

Можно добавить в «шапку» нашего лендинга кнопку «Заказать звонок».

Если вы продаёте товары или оказываете услуги физическим лицам (модель B2C), не лишним будет поместить на главный экран лендинга изображение с товаром или эмоцией человека, который уже удовлетворил потребность. Фотография должна быть отличного качества и не мешать восприятию текста.

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

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

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

Второй экран

Здесь мы разместим блок с описанием преимуществ нашего товара или услуги. Распишем текстом 3 главных преимущества и усилим изображениями. Поставим спокойный нейтральный фон на задний план.

Третий экран

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

Ваш первый прототип готов!

На самом деле мы рассмотрели упрощённый пример.

Одностраничные сайты могут содержать 10−15 экранов и даже больше. Прототипирование в таком случае займёт несколько часов.

Подбираем и обрабатываем изображения

Чтобы начать собирать сайт на конструкторе, давайте найдём подходящие изображения в интернете. Можете искать в Яндекс. Картинках, на бесплатных и платных фотостоках. Задача — найти фотографии хорошего качества, которые отражали бы суть нашей услуги.

На наш лендинг нужны 4 фотографии: одна на главный экран и по одной для каждого из преимуществ на втором экране.

После скачивания фотографий изменим их названия на что-то близкое по нашей теме: сертификация продукции, сертификат соответствия, декларация соответствия и т. д.

Материалы для сборки сайта полностью готовы.

Регистрируемся на uKit

Идём на сайт конструктора сайтов uKit.com и заводим там новый аккаунт. Чтобы начать регистрацию, на главной странице сайтов нажмите на кнопку «Создать сайт».

как создать сайт на конструкторе сайтов пошаговая инструкция 01

Система предложит вам несколько вариантов регистрации: через социальные сети или при помощи e-mail. Я регистрировался через свой электронный ящик.

Укажите ваш e-mail, придумайте и введите пароль. Нажмите «Зарегистрироваться».

как создать сайт на конструкторе сайтов пошаговая инструкция 02

Подтверждать e-mail не нужно. После короткой процедуры регистрации аккаунта сервис сразу же предложит вам выбрать шаблон нового сайта.

как создать сайт на конструкторе сайтов пошаговая инструкция 03

Собираем сайт

Чтобы начать работу над лендингом, нужно выбрать шаблон. В арсенале uKit множество красивых адаптивных шаблонов.

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

Найдите в меню слева пункт «Юриспруденция» и перейдите по ссылке. Наведите курсор на плитку с изображением сайта «Автоюрист» и нажмите «Выбрать этот шаблон».

как создать сайт на конструкторе сайтов пошаговая инструкция 04

Придумайте название домена третьего уровня. Назовём наш сайт sertifikaty.

как создать сайт на конструкторе сайтов пошаговая инструкция 05

Мы попали непосредственно в рабочее поле конструктора сайтов. Интерфейс у uKit простой, интуитивно понятный. Слева находится вертикальное меню: страницы сайта, конструктор, дизайн, адаптивная версия сайта. Мы находимся в разделе «Конструктор».

Здесь нам доступен инструментарий для сборки лендинга.

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

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

Удалим из меню в «шапке» лишние ссылки. Вместо последней ссылки впишем номер телефона.

как создать сайт на конструкторе сайтов пошаговая инструкция 11

Теперь заменим фон главного экрана на фото, которое заранее подготовили.

Любой шаблон сайта в uKit построен из блоков. Каждый блок имеет настройки. Они высвечиваются синей плашкой над активным блоком и помечены словом «Блок». Наведите курсор на иконку капли в этой плашке и кликните по ней, чтобы попасть в настройки.

как создать сайт на конструкторе сайтов пошаговая инструкция 06

В левой части меню откроются настройки фона. Нажмите на плитку с картинкой.

как создать сайт на конструкторе сайтов пошаговая инструкция 07

Загрузите изображение с компьютера.

как создать сайт на конструкторе сайтов пошаговая инструкция 08

Попробуйте поиграться с настройками фона: сделать его темнее или, наоборот, светлее. Здесь всё просто.

как создать сайт на конструкторе сайтов пошаговая инструкция 09

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

Для преимуществ подойдёт блок шаблона с названием «Мы предоставляем услуги». Поменяем текст на «Преимущества».

Карточки с ценами можно отредактировать. В шаблоне их 4. Удалим лишнюю карточку и пробел. После удаления остальные карточки автоматически растянутся по ширине. Уберём кнопки с ценами и описания. Делается это также через левое меню.

как создать сайт на конструкторе сайтов пошаговая инструкция 12

Добавим названия наших преимуществ. Изображения карточек меняются точно так же, как и фоны блоков.

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

как создать сайт на конструкторе сайтов пошаговая инструкция 13

Если вы что-то удалили случайно, всегда можно отменить ошибочную операцию: в левом меню увидите стрелочки «Отменить» и «Повторить».

Остался последний экран — Контакты. Тут можно поменять адрес.

как создать сайт на конструкторе сайтов пошаговая инструкция 14

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

как создать сайт на конструкторе сайтов пошаговая инструкция 15

Всё! Ваш первый сайт запущен. Очень просто, согласны?

Настраиваем дизайн

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

как создать сайт на конструкторе сайтов пошаговая инструкция 16

Здесь же, в настройках дизайна сайта, можно поменять шрифты. Также доступны 4 варианта.

как создать сайт на конструкторе сайтов пошаговая инструкция 17

Какие ещё есть полезные настройки?

«Шапка» и «подвал» сайта, кнопка «Наверх» включаются и отключаются по клику. Можно включить анимацию и версию сайта для слабовидящих. И даже поменять шаблон!

Не забудьте после всех изменений ещё раз опубликовать сайт.

Привязываем свой домен

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

https://название_домена.ukit.me

Не очень красивое название сайта, не так ли?

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

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

Как прикрепить?

Сначала нужно перейти на платный тариф. Перейдите в меню с тарифными планами и выберите Премиум. На первом этапе его будет вполне достаточно.

как создать сайт на конструкторе сайтов пошаговая инструкция 19

Заполните данные вашей банковской карты и нажмите «Оплатить». Средства будут списаны автоматически.

как создать сайт на конструкторе сайтов пошаговая инструкция 20

Перейдите в ваш аккаунт. Из конструктора сюда перейти можно, нажав в меню слева сверху надпись uKit.

Перейдите по ссылке «Прикрепить домен» и ещё раз во вновь открывшемся окне.

как создать сайт на конструкторе сайтов пошаговая инструкция 18

Введите ваше доменное имя и подтвердите, что именно вы владелец домена.

как создать сайт на конструкторе сайтов пошаговая инструкция 21

Укажите в аккаунте вашего хостера необходимые NS-записи (3 шт.) и подтвердите, что указали NS-записи у регистратора.

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

Понравилась статья «Как самому сделать сайт с нуля бесплатно: пошаговая инструкция для чайников»? Оставьте ваш комментарий и поделитесь статьёй с друзьями.

Ещё больше интересных статей здесь: https://seostayer.ru/

До новых встреч!

Хотите начать работать удалённо, покончить с финансовым рабством, уделять больше времени родным и друзьям, жить где угодно и путешествовать с семьёй 3−4 раза в год? Подпишитесь на мою рассылку Вконтакте и скачайте мою книгу «Востребованная удалённая профессия XXI столетия: контент-менеджер сайтов на Wordpress»!

Публикую очередной кроссворд! Попробуйте разгадать. :) Правила здесь.

Вам может быть интересно:

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

Adblock
detector