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

Создание простого одностраничного сайта помогает эффективно продавать товар и продвигать услуги. Расскажем, как это сделать.

Картинка с сайта: hipolink.net

Одностраничник (landing page) — это одиночная, длинная или короткая страница для продажи товаров, услуг, привлечению потенциальных клиентов. Такой сайт удобен большим и маленьким компаниям, а также фрилансерам.

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

Разработка лендинга на интернет-сервисах

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

Преимущества конструктора

Лучший сервис для создания сайта

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

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

Картинка с сайта: hipolink.net

Примеры других инструментов:

У всех перечисленных сервисов есть плюсы, но есть и минусы

Заказать сайт «под ключ»

Заказ разработки одностраничного сайта «под ключ» экономит время и усилия, но раздувает бюджет. Можно заказать готовый landing page в веб-студии или у фрилансера.

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

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

Оформление и структура

Какие блоки использовать?

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

Картинка с сайта: hipolink.net

Блок перехода по ссылке

Структура:

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

Тело веб-страницы

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

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

Рекомендации по контенту

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

Шаг 1. Выберите сервис для создания/шаблон.

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

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

Шаг 2. Продумайте структуру.

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

Подходит для большинства ресурсов: шапка, описание оффера (предложения), специальные предложения, раскрытие преимуществ предложения, отзывы, карта.

Шаг 3. Зарегистрируйте домен или субдомен.

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

Шаг 4. Проведите рекламную кампанию.

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

Шаг 5. Оптимизация под поведение трафика.

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

Продвижение

Рассмотрим способы улучшения результатов раскрутки. Для продвижения одностраничника на лидирующие позиции в поисковиках нужно:

Пошаговая инструкция: как создать одностраничный сайт самому

Хотите сделать одностраничный сайт своими руками, но не знаете с чего начать? Эта пошаговая инструкция поможет вам в этом!

Создание одностраничного сайта, или как его еще называют, сайта-одностраничника, может показаться сложной задачей. Но только на первый взгляд! 😉 Сегодня я поделюсь с вами пошаговой инструкцией, которая поможет вам создать сайт за короткое время.

Что такое одностраничный сайт и его особенности

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

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

Подготовка к созданию сайта

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

• Определите основные блоки сайта. Это могут быть блоки «О нас», «Услуги», «Контакты» и так далее.
• Подумайте о дизайне сайта. Какие цвета будут использоваться? Какой шрифт подойдет?
• Подберите необходимые изображения и иконки.

Создание сайта

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

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

Тестирование и публикация

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

Только после этого можно публиковать сайт.

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

👉 Подробнее о курсе можно узнать здесь.

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

Время на прочтение15 мин

Количество просмотров225K

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

Картинка с сайта: habr.com

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

Предварительные требования

Эта материал ориентирован на начинающих веб-разработчиков, владеющих основами HTML, CSS и jQuery.

Вот одностраничный веб-сайт, о создании которого средствами Bootstrap мы будем говорить.

Картинка с сайта: habr.com

Готовый проект, созданный средствами Bootstrap

Загрузка и установка Bootstrap

Загрузить и использовать Bootstrap можно несколькими способами. Для начала, можно воспользоваться npm. Тут понадобится такая команда:

npm install bootstrap

Bootstrap можно подключить к странице с использованием сети доставки контента. Для этого надо добавить следующую ссылку в тег <head>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Свежую версию Bootstrap можно загрузить отсюда и использовать локально.

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

Картинка с сайта: habr.com

Структура проекта

О возможностях Bootstrap 4

Первая стабильная версия Bootstrap 4 вышла в конце января сего года. Теперь Bootstrap включает в себя некоторые интересные возможности, которых не было в его предыдущей версии. А именно, если говорить об улучшениях и изменениях, можно отметить следующее:

• Bootstrap 4 переписан с использованием технологии flexbox, в то время как в Bootstrap 3 применялась технология float. Если вы не знакомы с flexbox — взгляните на этот материал.
• В Bootstrap 4, в CSS, применяются единицы измерения rem, в то время как раньше применялись единицы измерения px. Здесь можно узнать о том, чем они отличаются.
• Некоторые компоненты, такие, как панели (panels), были удалены. Тут можно найти подробности об изменениях внесённых в Bootstrap 4.

На самом деле, в Bootstrap 4 много нового в сравнении с Bootstrap 3, если вам это нужно — можете самостоятельно ознакомиться с этими новшествами. Мы же приступаем к работе над нашим учебным проектом.

Система сеток Bootstrap

Система сеток Bootstrap (Bootstrap Grid System) предназначена для создания макетов страниц. Она упрощает разработку отзывчивых веб-сайтов. В новой версии Bootstrap не изменились имена классов (надо отметить, что класса .xs больше не существует).

Сетка разделена на 12 колонок, эта структура, настроенная так, как нужно разработчику, является основой макета страницы.

Для того чтобы использовать Bootstrap-сетку, нужно добавить класс .row к главному элементу <div> страницы. При настройке размеров вложенных элементов используют следующие классы (вместо звёздочки в конце имени класса указывается число столбцов базовой 12-колоночной сетки, которое должен занимать конкретный элемент):

• col-lg-* — класс, используемый для страниц, предназначенных для устройств с большим экраном вроде ноутбуков;
• col-md-* — класс для страниц, рассчитанных на устройства с экраном среднего размера, таких, как планшеты;
• col-sm-* — класс для страниц, которые рассчитаны маленькие экраны, например, такие, как у смартфонов.

Навигационная панель

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

Картинка с сайта: habr.com

Навигационная панель

Итак, для того, чтобы на странице появилась навигационная панель, добавим в index.html тег <nav> с классом .navbar, внутри которого, с использованием других классов, вроде .navbar-brand, .navbar-toggler и .nav-item, создают некоторые специальные элементы и структуру системы навигации по сайту. Класс .fixed-top позволяет зафиксировать навигационную панель в верхней части страницы. Вот разметка навигационной панели:

<nav class="navbar navbar-expand-lg fixed-top ">
   <a class="navbar-brand" href="#">Home</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
     <ul class="navbar-nav mr-4">
       
       <li class="nav-item">
         <a class="nav-link" href="#">About</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " href="#">Portfolio</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " href="#">Team</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " href="#">Post</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " href="#">Contact</a>
       </li>
     </ul>
     
   </div>
</nav>

Теперь создадим файл main.css и подключим его к странице, поместив в тег <head> файла index.html следующее:

<link rel="stylesheet" type="text/css" href="css/main.css">

Это позволит настраивать стили элементов страницы, размещая в этом файле CSS-правила. Добавим в этот CSS-файл правила, задающие цветовое оформление навигационной панели:

.navbar{
 background:#F97300;
}
.nav-link , .navbar-brand{
 color: #f4f4f4;
 cursor: pointer;
}
.nav-link{
 margin-right: 1em !important;
}
.nav-link:hover{
 background: #f4f4f4;
 color: #f97300;
}
.navbar-collapse{
 justify-content: flex-end;
}
.navbar-toggler{
  background:#fff !important;
}

Новая сетка Bootstrap построена на основе flexbox, поэтому для выравнивания содержимого нужно пользоваться соответствующими свойствами. Например, для того, чтобы поместить меню навигационной панели справа, нужно использовать свойство justify-content и установить его значение во flex-end:

.navbar-collapse{
 justify-content: flex-end;
}

Для настройки цвета фона навигационной панели можно воспользоваться классами .bg-light (светлый фон), .bg-dark (тёмный фон) и .bg-primary (основной цвет фона). Мы используем следующие настройки:

.bg-dark{
background-color:#343a40!important
}
.bg-primary{
background-color:#343a40!important
}

Шапка страницы

Для описания шапки страницы применяется тег <header>:

<header class="header">
  
</header>

Подготовим макет для шапки страницы. Мы хотим, чтобы она занимала всю высоту окна, поэтому тут нам пригодятся возможности jQuery. Создадим файл main.js и подключим его к index.html перед закрывающим тегом <body>:

<script type="text/javascript" src='js/main.js'></script>

В файл main.js добавим следующее:

$(document).ready(function(){
 $('.header').height($(window).height());
})

Нелишним будет поместить в шапку страницы какую-нибудь приятную фоновую картинку. Сделаем это следующим образом:

/*header style*/
.header{
 background-image: url('../images/headerback.jpg');
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
}

Вот что у нас в итоге получилось.

Картинка с сайта: habr.com

Шапка страницы с фоновым изображением

Пока шапка сайта выглядит пустовато, поэтому добавим в неё элемент <div>, назначив ему класс .overlay, что приведёт к созданию блока, который расположен поверх фонового изображения шапки. Изменим тот участок файла index.html, где мы описывали шапку, следующим образом:

<header class="header">
  <div class="overlay"></div>
</header>

Затем, в main.css, добавим следующее:

.overlay{
 position: absolute;
 min-height: 100%;
 min-width: 100%;
 left: 0;
 top: 0;
 background: rgba(244, 244, 244, 0.79);
}

Теперь добавим в шапку описание проекта. Его мы поместим в новый элемент <div> с классом .containter. Это — вспомогательный класс фреймворка Bootstrap, предназначенный для размещения содержимого с учётом нужд отзывчивого макета. Вот как изменится разметка на данном шаге:

<header class="header">
  <div class="overlay"></div>
   <div class="container">
    
   </div>
  
</header>

Теперь добавим сюда ещё один элемент <div>, которому назначим класс .description:

<div class="description text-center">
   <h3><font color="#3AC1EF">▍
    Hello ,Welcome To My officail Website
    <p>
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <button class="btn btn-outline-secondary">See more</button>
   </font></h3>
  </div>

Этому тегу мы назначим ещё и класс .text-center, что позволит выровнять его содержимое по центру страницы. В конце описания сайта имеется кнопка. Поговорим о том, как её настроить.

Кнопки

В Bootstrap предусмотрено множество классов, предназначенных для кнопок. Посмотреть некоторые примеры оформления кнопок можно здесь. Мы, как видно в примере разметки из предыдущего раздела, добавили к элементу <button> классы .btn и .btn-outline-secondary.

Теперь настроим стили для класса .description:

.description{
    position: absolute;
    top: 30%;
    margin: auto;
    padding: 2em;
}
.description h1{
 color:#F97300 ;
}
.description p{
 color:#666;
 font-size: 20px;
 width: 50%;
 line-height: 1.5;
}
.description button{
 border:1px  solid #F97300;
 background:#F97300;
 color:#fff;
}

Вот как будет выглядеть шапка страницы после выполнения вышеописанных действий:

Картинка с сайта: habr.com

Шапка страницы, содержащая описание проекта

Раздел About

Для начала посмотрим на то, что мы хотим создать. Перед вами — раздел страницы со сведениями о веб-разработчике.

Картинка с сайта: habr.com

Раздел About

Здесь мы воспользуемся возможностями сетки Bootstrap для того, чтобы сформировать макет раздела, состоящий из двух частей. Приступим к работе, добавив к родительскому элементу раздела <div> класс .row:

<div class="row"></div>

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

Вот как выглядит разметка левой части этого раздела:

<div class="row"> 
 // левая часть
<div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/team-3.jpg" class="img-fluid">
    <span class="text-justify">S.Web Developer</span>
 </div>
</div>

А вот что получится после того, как сюда будет добавлено описание правой части макета:

<div class="row">
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/team-3.jpg" class="img-fluid">
    <span class="text-justify">S.Web Developer</span>
   </div>
   <div class="col-lg-8 col-md-8 col-sm-12 desc">
     
    <h3><font color="#3AC1EF">▍D.John</font></h3>
    <p>
       ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
   </div>
  </div>

Обратите внимание на настройку ширины столбцов с использованием вышеописанных классов col-lg-*, col-md-* и col-sm-*.

Вот стили для всего этого:

.about{
 margin: 4em 0;
 padding: 1em;
 position: relative;
}
.about h1{
 color:#F97300;
 margin: 2em;
}
.about img{
 height: 100%;
    width: 100%;
    border-radius: 50%
}
.about span{
 display: block;
 color: #888;
 position: absolute;
 left: 115px;
}
.about .desc{
 padding: 2em;
 border-left:4px solid #10828C;
}
.about .desc h3{
 color: #10828C;
}
.about .desc p{
 line-height:2;
 color:#888;
}

Раздел Portfolio

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

Картинка с сайта: habr.com

Раздел Portfolio

При формировании макета этого раздела применяются те же принципы работы с сеткой, которые мы рассматривали выше:

<!-- portfolio -->
<div class="portfolio">
     <h1 class="text-center">Portfolio</h1>
 <div class="container">
  <div class="row">
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/port13.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/port1.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/port6.png" class="img-fluid">
   </div>
<div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/port3.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/port11.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/electric.png" class="img-fluid">
   </div>
<div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/Classic.jpg" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/port1.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img align="center" src="images/portfolio/port8.png" class="img-fluid">
   </div>
  </div>
 </div>
</div>

Добавление класса .img-fluid к каждому из изображений делает их отзывчивыми.

Каждый элемент в нашей галерее, на средних и больших экранах, занимает 4 колонки (напомним — класс col-sm-12 используется для устройств с маленькими экранами, класс col-md-4 используется для средних экранов, col-lg-4 — для устройств с большими экранами). Как результат, на больших и средних экранах на один элемент придётся примерно 33.3% элемента-контейнера, на маленьких устройствах каждый элемент будет занимать весь экран (12 колонок).

Стилизуем галерею работ:

/*Portfolio*/
.portfolio{
 margin: 4em 0;
    position: relative; 
}
.portfolio h1{
 color:#F97300;
 margin: 2em; 
}
.portfolio img{
  height: 15rem;
  width: 100%;
  margin: 1em;
}

Раздел Blog и работа с карточками

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

Картинка с сайта: habr.com

Раздел Blog

Для создания этого раздела нам понадобятся так называемые карточки (cards в терминологии Bootstrap).

Для того чтобы создать карточку, нужно включить в макет элемент <div> и добавить к нему класс .card. Для настройки различных элементов карточки можно использовать следующие классы:

• .card-header: шапка
• .card-body: основное содержимое
• .card-title: заголовок
• .card-footer: подвал
• .card-image: изображение

HTML-разметка этого раздела будет выглядеть так:

<!-- Posts section -->
<div class="blog">
 <div class="container">
 <h1 class="text-center">Blog</h1>
  <div class="row">
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img align="center" src="images/posts/polit.jpg" class="img-fluid">
     </div>
     
     <div class="card-body">
     <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img align="center" src="images/posts/images.jpg" class="img-fluid">
     </div>
     
     <div class="card-body">
        <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img align="center" src="images/posts/imag2.jpg" class="img-fluid">
     </div>
     
     <div class="card-body">
     <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

Вот стили для карточек:

.blog{
 margin: 4em 0;
 position: relative; 
}
.blog h1{
 color:#F97300;
 margin: 2em; 
}
.blog .card{
 box-shadow: 0 0 20px #ccc;
}
.blog .card img{
 width: 100%;
 height: 12em;
}
.blog .card-title{
 color:#F97300;
  
}
.blog .card-body{
 padding: 1em;
}

Вот как будет выглядеть наш одностраничник после создания раздела Blog:

Картинка с сайта: habr.com

Страница после добавления раздела Blog

Раздел Team

В этом разделе будут размещены сведения о команде проекта.

Картинка с сайта: habr.com

Раздел Team

Для формирования этого раздела мы воспользуемся сеткой, поровну разделив имеющееся пространство между изображениями. Каждое изображение (на больших и средних экранах) будет занимать 3 колонки сетки, что составляет 25% общего пространства.

Вот HTML-разметка этого раздела:

<!-- Team section -->
<div class="team">
 <div class="container">
    <h1 class="text-center">Our Team</h1>
  <div class="row">
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img align="center" src="images/team-2.jpg" class="img-fluid" alt="team">
    <div class="des">
      Sara
     </div>
    <span class="text-muted">Manager</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img align="center" src="images/team-3.jpg" class="img-fluid" alt="team">
    <div class="des">
       Chris
     </div>
    <span class="text-muted">S.enginner</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img align="center" src="images/team-2.jpg" class="img-fluid" alt="team">
    <div class="des">
      Layla 
     </div>
    <span class="text-muted">Front End Developer</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img align="center" src="images/team-3.jpg" class="img-fluid" alt="team">
     <div class="des">
      J.Jirard
     </div>
    <span class="text-muted">Team Manger</span>
   </div>
  </div>
 </div>
</div>

А вот — стили:

.team{
 margin: 4em 0;
 position: relative;  
}
.team h1{
 color:#F97300;
 margin: 2em; 
}
.team .item{
 position: relative;
}
.team .des{
 background: #F97300;
 color: #fff;
 text-align: center;
 border-bottom-left-radius: 93%;
 transition:.3s ease-in-out;
}

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

Картинка с сайта: habr.com

Анимация при наведении указателя мыши на изображение

Для того чтобы достичь такого эффекта, добавим в main.css следующие стили:

.team .item:hover .des{
 height: 100%;
 background:#f973007d;
 position: absolute;
 width: 89%;
 padding: 5em;
 top: 0;
 border-bottom-left-radius: 0;
}

Форма обратной связи

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

Картинка с сайта: habr.com

Форма обратной связи

Как и в Bootstrap 3, в Bootstrap 4 используется класс .form-control для полей ввода, но теперь тут имеется кое-что новое. Например — вместо устаревшего класса .input-group-addon используется новый класс .input-group-prepend (для значков и меток). Подробности об этом можно найти в документации к Bootstrap 4. В нашем случае каждое поле ввода будет помещено в элемент <div>, которому назначен класс .form-group.

Добавим в файл index.html следующее:

<!-- Contact form -->
<div class="contact-form">
 <div class="container">
  <form>
   <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12">
      <h1>Get in Touch</h1> 
    </div>
    <div class="col-lg-8 col-md-8 col-sm-12 right">
       <div class="form-group">
         <input type="text" class="form-control form-control-lg" placeholder="Your Name" name="">
       </div>
       <div class="form-group">
         <input type="email" class="form-control form-control-lg" placeholder="YourEmail@email.com" name="email">
       </div>
       <div class="form-group">
         <textarea class="form-control form-control-lg">
          
         </textarea>
       </div>
       <input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
    </div>
   </div>
  </form>
 </div>
</div>

Вот стили для раздела с формой обратной связи, которые надо поместить в файл main.css:

.contact-form{
 margin: 6em 0;
 position: relative;  
}
.contact-form h1{
 padding:2em 1px;
 color: #F97300; 
}
.contact-form .right{
 max-width: 600px;
}
.contact-form .right .btn-secondary{
 background:  #F97300;
 color: #fff;
 border:0;
}
.contact-form .right .form-control::placeholder{
 color: #888;
 font-size: 16px;
}

Шрифты

Стандартные шрифты подходят далеко не всем. Мы, воспользовавшись возможностями Google Font API, применим в нашем проекте шрифт Raleway. Он будет смотреться здесь очень хорошо. Для импорта шрифта добавим в файл main.css следующую директиву:

@import url('https://fonts.googleapis.com/css?family=Raleway');

Затем зададим глобальные стили для различных HTML-тегов:

html,h1,h2,h3,h4,h5,h6,a{
 font-family: "Raleway";
}

Эффекты прокрутки

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

Картинка с сайта: habr.com

Прокрутка страницы при нажатии на ссылки в навигационной панели

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

$(".navbar a").click(function(){
  $("body,html").animate({
   scrollTop:$("#" + $(this).data('value')).offset().top
  },1000)
  
 })

После этого добавьте атрибут data-value к каждой из ссылок в навигационной панели и приведите разметку к следующему виду:

<li class="nav-item">
         <a class="nav-link" data-value="about" href="#">About</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="portfolio" href="#">Portfolio</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="blog" href="#">Blog</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="team" href="#">
         Team</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="contact" href="#">Contact</a>
       </li>

Для того чтобы всё это, наконец, заработало, осталось лишь добавить атрибут id к основному элементу <div> каждого из разделов страницы. При этом нужно проследить, чтобы его значение было идентично тому, которое задано в атрибуте data-value соответствующей ссылки. Например, вот соответствующий атрибут для раздела About:

<div class="about" id="about"></div>

На этом наш пример завершён. Вот код этого проекта на GitHub.

Итоги

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

Уважаемые читатели! Если сегодня состоялось ваше первое практическое знакомство с Bootstrap, скажите, планируете ли вы использовать этот фреймворк в своих проектах?

Картинка с сайта: habr.com

Одностраничник – это сайт, состоящий всего из одной страницы. К одностраничникам можно отнести: лендинги (они же продающие сайты), визитки, сайты-портфолио, а также мини-магазины. При создании таких сайтов меняется цель и набор элементов на странице, но количество страниц остаётся низменным – она будет оставаться одна.

Как создать одностраничный сайт:

Разница между лендингами и одностраничниками

Лендинг (он же «посадочная страница» или «продающий сайт») – это одностраничник, который выстраивается в виде качественной презентации определённого товара или услуги. Такие сайты умеют работать с возражениями и решать разные маркетинговые задачи: собирать лиды/заявки, оформлять подписку на рекламные рассылки, рекламировать новые продукты и т.п.

Одностраничник – это общее определение для всех сайтов, которые состоят из одной страницы. Да, чаще всего это лендинги. Но могут быть и другие типы сайтов, с другими целями:

• Визитки – позволяют рассказать о себе и предоставить потенциальным клиентам данные для связи.
• Портфолио – это сайты, на которых можно показать примеры своих работ, чтобы клиент не просто почитал о том, что вы умеете, а посмотрел, как именно вы делаете свою работу.
• Магазины – сайты, на которых можно полноценно продать товар (с оплатой и доставкой). Одностраничные магазины будут идеальны для торговли небольшим ассортиментом продукции или вообще одним товаром.

Стандартный (общий) пошаговый алгоритм создания одностраничного сайта

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

А теперь непосредственно сами шаги.

Шаг 1. Формулирование целей и задач лендинга

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

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

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

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

Шаг 2. Выбор платформы/конструктора

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

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

Идеальная платформа для бизнес-сайтов, в том числе для одностраничников – uKit.

• Безлимитные и полностью бесплатные уведомления о заявках из форм.
• Масса готовых шаблонов (300+).
• Удобное редактирование без погружения в код.
• Хостинг, трафик и страницы – без ограничений.
• Инструменты для автоматизации продвижения и рекламы.
• Набор готовых интеграций.

Максимум подробностей о конструкторе в нашем детальном обзоре uKit.

Шаг 3. Регистрация аккаунта

Всё, что вам нужно – указать свой email и придумать пароль. Но если у вас уже есть аккаунт в популярной соцсети, то можно воспользоваться им. Подойдут: Одноклассники, ВКонтакте, FB, Disqus, Яндекс или Google.

Шаг 4. Выбор шаблона

Шаблон – это готовый вариант оформления. В разных платформах применяются разные подходы. В uKit на выбор предоставляется более 300 вариантов шаблонов, распределённых по тематикам и функционалу.

Нужно только выбрать подходящий вам.

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

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

Если у вас есть страница во ВКонтакте, можно сделать свой сайт из неё. Для этого нужно воспользоваться инструментом uKit Alt.

Шаг 5. Регистрация и прикрепление домена

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

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

Для прикрепления своего домена в uKit нужно перейти в панель управления и рядом с техническим именем сайта нажать кнопку «Прикрепить домен».

Вам будет доступно два варианта:

1. Купить новый домен. Регистрация доменного имени будет осуществляться на ваши контактные данные (домен будет принадлежать вам). NS-записи заполняются и настраиваются автоматически.
2. Прикрепить имеющийся домен. Вы можете зарегистрировать домен у любого официального регистратора и перенаправить его на хостинг uKit.

Рассмотрим процесс прикрепления уже имеющегося домена (как наиболее сложный случай).

• В панели управления uKIt нужно начать процесс прикрепления домена. Для этого введите свой домен в специальном поле. Вписывать имя сайта нужно без протокола и всяких приставок. То есть не «https://www.мой-домен.ру/», а просто «мой-домен.ру»
• В панели регистратора домена нужно сменить NS-записи на следующие:
  • ns1.ukit.com
  • ns2.ukit.com
  • ns3.ukit.com
• Возвращаетесь в панель управления uKit и нажимаете кнопку «Я указал NS-серверы у регистратора».

Теперь нужно дождаться, когда обновится информация в DNS-системе. Процесс может занять от 1 до 2 дней. Готово.

Скоро сайт будет открываться при вводе вашего доменного имени.

В некоторых особо тяжёлых случаях может потребоваться перенос домена к новому регистратору. Мы подробно рассматривали этот процесс на примере переноса сайта с Wix на uKit.

Обратите внимание! Защищённая https-версия сайта настраивается в uKit автоматически. Бесплатные SSL/TLS-сертификаты выпускаются и привязываются к домену без участия пользователя.

Шаг 6. Наполнение сайта

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

Иконка (favicon)

Страницы, политика и правила

Сначала удалите лишние страницы в разделе «Страницы сайта» (многие шаблоны uKit поставляются с набором из нескольких страниц). Либо изначально подбирайте одностраничную тему.

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

Контакты

Самый важный элемент одностраничника для бизнеса – актуальные контакты владельца. Поэтому отредактируйте контакты. Это можно сделать разными способами, в зависимости от текущей структуры и наполнения шаблона:

• С помощью элементов «Текст» – достаточно перетянуть блок на страницу и записать свои контакты (телефон, email, адрес офиса).
• С помощью виджета «Контакты» – здесь можно описать несколько филиалов и отделений, присутствуют готовые поля и интеграции с онлайн-картами (Яндекс/Google), имеется три варианта отображения. Виджет позволяет редактировать контакты централизованно (для многостраничных сайтов) и управлять выводом тех или иных полей.

Блоки контента

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

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

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

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

Например, для одностраничной визитки может подойти такая схема расположения блоков:

• Шапка с меню (ссылки в меню будут якорными, то есть при нажатии будут смещать фокус на нужную секцию страницы). В меню логично разместить логотип компании, если он есть. Если нет, то вполне можно обойтись и без него.
• Hero-блок – стартовая секция, в которой формулируется основное коммерческое предложение (УТП). Профильные специалисты здесь могут показать себя и коротко описать свои услуги. Например: Дмитрий Петров, детский стоматолог, город Новый Уренгой. Прямо в Hero-блоке логично поставить кнопку перехода к форме заявки или к блоку с контактными данными.
• Описания услуг и продуктов. Любые блоки, которые могут раскрыть подробности о вас и о том, что вы предлагаете. В большинстве случаев помогут виджеты картинок и текста.
• Технические детали и цифры. Блок с информацией, которая может подтвердить ваш профессионализм: сертификаты, награды, достижения, количество сданных проектов и т.п.
• Карточка с контактами.

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

Редактирование контента в uKit максимально простое:

• Нужно кликнуть на выбранном элементе.
• Если это текст, то откроется меню редактирования текста.
• Если это изображение, то откроется меню управления картинками: замена/загрузка своих фото, подпись, действия при клике, редактор (для обрезки, вращения и наложения эффектов).
• У виджетов другого типа могут быть свои уникальные настройки. Речь о таких элементах, как карточки, слайдеры, галереи, таблицы, таймер, меню и пр.

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

Меню

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

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

Само меню может иметь несколько уровней вложенности.

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

Чтобы реализовать такое поведение, нужно:

• Сначала выбрать секцию на странице или конкретный виджет и назначить ему якорную ссылку. Наведите указатель на виджет и нажмите значок якоря. В появившемся поле напишите уникальное название блока латинскими символами без пробелов. Например, «moy-block11»
• Теперь нажмите на виджете с меню. В структуре меню создайте новый пункт или отредактируйте имеющийся. Введите название пункта и в параметрах ссылки выберите тип «якорь». В выпадающем списке выберите пункт с нужным якорем («moy-block11»).

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

Изменение дизайна

Ключевые параметры внешнего вида меняются в uKit централизованно:

• Анимации.
• Цветовая схема (можно создать свой набор, но не во всех тарифах).
• Фон.
• Шрифты.
• Версия для слабовидящих (активируется в один клик).

Шаблон можно изменить на другой без потери контента.

Блоки можно скрывать или показывать на разных типах устройств: ПК, планшеты, мобильные. Например, на планшетах можно активировать показ в 2 колонки.

Шаг 7. Подключение систем аналитики

Статистика и аналитика в uKit подключаются за счёт готовой интеграции с Яндекс.Метрика и Google Аналитика.

Всё, что вам нужно сделать – выдать разрешение uKit для доступа к вашим аккаунтам Google и Яндекс. Всё остальное конструктор сделает автоматически.

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

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

Шаг 8. Добавление в панели вебмастера

Добавление сайта в поисковики (для начала его индексирования) происходит по аналогии с сервисами аналитики:

• В панели управления uKit перейдите в раздел «Продвижение».
• Найдите пункт «Добавить в поисковики».
• Выберите нужный пункт (Google Search Console или Яндекс.Вебмастер).
• Выдайте разрешение на доступ.
• Всё остальное конструктор сделает автоматически.

В том же разделе настроек можно добавить данные о своём бизнесе на онлайн-карты – через Яндекс.Справочник.

Шаг 9. Настройка форм и уведомлений о заявках

Откройте конструктор uKit (войдите в режим редактирования) и найдите виджет «Обратная связь».

Перетащите виджет в нужное место страницы. В настройках виджета можно переопределить дизайн и выбрать тип расположения полей – вертикально (в столбик) или горизонтально (в одну строку).

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

Для простейшей формы будет достаточно активировать следующие поля:

• Номер телефона или email-адрес (поле нужно сделать обязательным к заполнению).
• Согласие на сбор персональных данных (тоже должно быть обязательным).
• Текстовое поле («Ваше сообщение»). Его можно не делать обязательным, так как если сообщение будет пустым, вы можете сами связаться с клиентом и уточнить у него, что он хотел.

В конструкторе форм uKit есть и другие типы полей: файл, капча, имя, тема, выпадающий список и т.п.

Мы не рекомендуем перегружать форму лишними элементами.

По умолчанию оповещение о заявке из формы отправляется на email владельца сайта. Но адрес можно сменить на любой другой. Плюс, можно настроить интеграцию с CRM-системами amoCRM и Board CRM. Тогда заявки будут передаваться в виде новых сделок.

Факт заполнения формы можно подсчитывать в системах статистики как целевое действие (поддерживается интеграция с сервисами Яндекс.Метрика и Аналитика Google).

Шаг 10. Запуск рекламной кампании

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

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

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

Запустить рекламную кампанию можно прямо из панели управления uKit. Для этого есть сразу два встроенных решения:

• PromoPult (позволяет запускать автоматическое продвижение сайта и настраивать контекстную рекламу).
• Умная реклама на базе сервиса Яндекс.Бизнес (тут вообще полный автопилот и добавление профиля вашей компании на карты Яндекса).

Их настройка максимально упрощена. Например, PromoPult сам подберёт тематические поисковые запросы, по которым вам стоит покупать рекламу. Вам нужно только определить бюджет и запустить показ объявлений. При желании все параметры и запросы можно настроить вручную – если позволяют знания и опыт.

Уточнения по типам сайтов

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

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

Для презентации своих услуг и товаров у uKit есть следующие виджеты:

• Карточка – позволяет компактно размещать картинку (или иконку), название, описание, цену и кнопку для заказа. Карточки можно располагать как в одной строке, так и в столбцах, чтобы сформировать эффектные сетки из виджетов.
• Таблица и Таблица Pro – это виджеты адаптивных таблиц, в которых можно настроить любое количество столбцов и строк, параметры выравнивания и оформления. Pro-таблицы позволяют настроить больше деталей.
• Прайс – это готовый вариант таблицы со встроенными кнопками, полями для цен и описаний. Товары или услуги можно располагать не только горизонтально, но и вертикально.
• Файл – обеспечивает красивую ссылку на файл с прайсами и торговыми предложениями. Рядом с кнопкой на скачивание можно показать описание, размер файла и иконку. Конструктор может вести статистику кликов и скачиваний.

Размещение товара и настройка онлайн-оплаты

Мало просто показать свои товары лицом и собрать заявки клиентов. Идеальная ситуация, когда вы можете продать товар: принять за него оплату и взять в обработку.

У uKit есть встроенный модуль интернет-магазина. Устроен он максимально просто:

• Вам нужно активировать соответствующий тариф (для доступа к функционалу продаж).
• Далее на страницу сайта нужно перетянуть виджет «Товар магазина».
• Автоматически добавится виджет корзины и в карточке появится дефолтный товар.
• Теперь нужно изменить описание товара на своё (загрузить изображение, поменять название, описание, цену, добавить и настроить опции, если есть) и активировать сбор статистики (если нужно).
• В настройках магазина нужно определить валюту, единицы измерения ваших товаров, стоимость доставки, поля в форме заказа, адреса для отправки уведомлений и подключить системы оплаты (Юkassa, Сбербанк, Wallet One, оплата наличными).

Теперь, если клиент нажмёт на кнопку «Купить» рядом с товаром, то либо наполнит корзину, либо сразу попадёт на страницу оформления заказа (это поведение определяется в настройках модуля магазина).

Заявка отправляется владельцу на email и попадает во встроенную CRM-систему (раздел панели управления «Заказы»).

Вставка картинок и организация портфолио

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

Специально для размещения большого числа изображений предоставляются виджеты «Галерея» и «Слайдер».

Первый располагает картинки по сетке или в виде коллажа с разными вариантами оформления. А второй – позволяет настроить описания и кнопки. Естественно, в слайдере есть автоматическая смена картинок с настраиваемыми эффектами переходов.

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

Виджеты онлайн-чата с консультантами

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

Из коробки у uKit имеется интеграция с Jivo и LiveChat.

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

Далее нужно авторизоваться в аккаунте выбранного сервиса и всё, виджет готов к работе.

Для интеграции с другими виджетами потребуется вставка HTML-кода (нужен максимальный тариф и понимание что и куда вставлять).

Кнопка заказа обратного звонка

У uKit полностью бесплатные и безлимитные SMS-уведомления о заказах обратного звонка.

Виджет добавляется по аналогии с чатом онлайн-консультантов – просто перетаскивается на страницу и настраивается.

Для приёма заявок нужно привязать свой номер мобильного телефона.

В настройках виджета можно поменять цвет и эффект привлечения внимания – дрожание, волны, болтание. Данные параллельно могут передаваться в системы статистики и в CRM-системы.

Всплывающие окна

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

Настраиваются всплывающие окна в разделе со списком страниц (внутри визуального конструктора).

Процесс можно разделить на три шага:

1. Настройка самой формы (нужно определить набор полей, какие из них обязательны к заполнению, а какие нет).
2. Настройка действий (куда и какие уведомления отправлять, нужно ли обмениваться данными с CRM и системами статистики).
3. Настройка логики появления (при клике на кнопке, по таймеру, при прокрутке страницы и при попытке ухода со страницы).

Пример активации всплывающего окна при нажатии на кнопку:

• Предполагается, что вы уже настроили набор полей и опции отправки уведомлений о заявке.
• Теперь на страницу нужно добавить ссылку или кнопку.
• В режиме редактирования страницы кликните на нужной кнопке.
• Выберите пункт с иконкой ссылки.
• В меню «Куда ведёт ссылка» выберите пункт «Всплывающее окно».
• Откроются все доступные варианты всплывающих окон.
• Назначьте то окно, которое хотите показать клиенту.
• Готово.

Настройка SEO-параметров

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

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

Тем не менее, стоит правильно заполнить мета-теги страницы: тайтл и дескрипшн. А также добавить изображение записи (мета-тег «Image»).

Теперь, когда вы или кто-то ещё будет делиться ссылкой на сайт, пользователи будут видеть расширенное описание и превью-картинку.

Создание одностраничника под ключ

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

Но не всегда есть время и желание разбираться с очередным инструментом.

В этом случае команде uKit есть что предложить – можно заказать разработку сайта под ключ.

За предоставление услуг отвечает собственная веб-студия Divly. Создание одностраничного сайта (визитки или лендинга) обойдётся здесь от 6900 руб.

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

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

Для всего есть фиксированный прайс. Цены более чем приемлемые.

Выводы и рекомендации

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

Идеальным для новичков и для представителей бизнеса будет конструктор uKit. Здесь сайты получаются не только красивыми, но и функциональными. Опыт разработки не требуется.

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