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

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

 

Что внутри

 

Выберите шаблон

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

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

Страница с шаблонами будущего сайта

В этом шаблоне уже есть элементы. Мы будем делать сайт с нуля, поэтому удалите всё, что уже есть на странице. Для этого кликните правой кнопкой мышки по элементу и выберите из списка пункт «Удалить»:

Список действий, которые можно совершить с элементом

В верхней части экрана будет меню навигации по сайту. Его не удаляйте — оно ещё пригодится:

Элемент с меню

Когда удалите всё, кроме меню с навигацией, можно начинать собирать сайт.

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

Меню, в котором можно сохранить сайт

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

 

Сформулируйте заголовок

Заголовок — первое, что увидит человек, когда зайдёт на сайт. Сообщите в нём название или род деятельности вашей компании. Как вариант, можно выразить основную идею бизнеса. Используйте для этого элемент «Текст»:

Элемент «Текст» в панели управления конструктором

Шрифт, цвет и размер текста можете изменить с помощью инструкции по дизайну.

 

Добавьте кнопку

Если хотите, чтобы посетитель сделал какое-то действие сразу — купил, позвонил, подписался, — используйте элемент «Кнопка»:

Элемент «Кнопка» в панели управления конструктором

Чтобы отредактировать внешний вид кнопки и текст на ней, кликните по ней правой кнопкой мышки и выберите «Свойства»:

Свойства элемента «Кнопка»

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

Заголовок с кнопкой на сайте

 

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

Иллюстрации добавят сайту убедительности. Установите картинку как фон сайта, используя элемент «Фигура»:

Элемент «Фигура» в панели управления конструктором

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

Свойства элемента «Фигура». Раздел с добавлением своей иллюстрации

Потом снимите галочки в разделе «Повторять», чтобы картинка не дублировалась. А в разделе «Размер» выберите «Заполнять»:

Свойства элемента «Фигура». Настройка отображения иллюстрации

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

Свойства элемента «Фигура». Рамка и фон иллюстрации

Переключите на вкладку «Свойства» и поставьте галочку в пункте «На полную ширину экрана», чтобы фон растянулся на всю ширину сайта:

Свойства элемента «Фигура». Расположение иллюстрации

Чтобы иллюстрация не закрывала текст, щелкните на картинке правой кнопкой мыши и выберите «Порядок» — «На задний план»:

Выпадающий список с быстрыми действиями для элемента «Фигура»

 

Опишите преимущества вашего бизнеса

С помощью новых элементов «Текст» тезисно расскажите о вашем бизнесе: что предлагаете клиентам и что умеете делать:

Подзаголовки с преимуществами бизнеса на главном баннере сайта

 

Создайте меню в шапке сайта

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

Щелкните на пустом элементе меню правой кнопкой мыши и выберите «Редактировать меню»:

Выпадающий список с опциям редактирования меню

Пока что в меню только один пункт — «Главная». Поскольку мы делаем одностраничник, назовите этот пункт по-другому, например, «О нас».

Затем добавьте ещё несколько пунктов для основных смысловых блоков на странице:

Добавление нового элемента в меню

Для примера добавьте пункты «Услуги», «Отзывы», «Контакты» и «Форма заказа». Их можно будет удалить или переделать в любой момент.

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

Параметры отображения элементов в меню

Теперь перетащите меню сайта из угла в середину страницы:

Перемещение меню из угла в центр страницы

 

Расскажите подробнее о ваших услугах

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

Элементы «Текст», «Фото» и «Галерея» в панели управления конструктором

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

Вы можете также выставить товар прямо на сайте. Для этого добавьте элемент «Магазин» из раздела «Эл. коммерция»:

Добавление магазина с помощью элемента «Эл. коммерция»

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

Стиль отображения товаров в магазине

 

Добавьте форму для сбора отзывов

Перейдите в раздел «Отзывы» в правом верхнем углу:

Раздел «Отзывы» на сайте

Перетащите на страницу элемент «Форма»:

Элемент «Форма»

Чтобы изменить параметры формы, щелкните на элементе правой кнопкой мыши и выберите пункт «Свойства».

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

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

Раздел «Обычные поля» на вкладке «Поля» в свойствах формы

Свойства — поля для создания опроса. Указывайте каждый вариант ответа с нового абзаца:

Раздел «Свойства» на вкладке «Поля» в свойствах формы

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

Раздел «Чекбоксы» на вкладке «Поля» в свойствах формы

На вкладке «Свойства почты» укажите, какой почтовый ящик должен отправлять сообщения с сайта, а какой — получать:

Вкладка «Свойства почты» в свойствах формы

Первое поле для почты — адрес, на который придёт отзыв клиента. Если нужно указать несколько адресов, разделите их точкой с запятой. Пробел после точки с запятой ставить не нужно. Должно получиться так: mail1@domain.com;mail2@domain.com;mail03@domain.com.

Второе поле — адрес, с которого конструктор отправит отзыв. Если оставить это поле пустым, письма будут отправляться от имени вашего хостингового аккаунта — с ящика no-reply@vashdomen.com.

На вкладке «SMTP» укажите данные вашего почтового аккаунта. Если хотите отправлять письма с доменной почты вроде contact@vashdomen.com, сначала создайте её с помощью инструкции по работе с почтой.

Вкладка «SMTP» в свойствах формы

Чтобы посмотреть адрес почтового сервера и SMTP порт, зайдите в cPanel, найдите раздел «Электронная почта» и зайдите в подраздел «Учётные записи электронной почты». Затем нажмите нажмите кнопку «Connect devices» справа от созданного ящика:

Кнопка «Connect devices» в cPanel

Прокрутите страницу вниз до раздела «Mail Client Manual Settings»:

Раздел «Mail Client Manual Settings» в cPanel

Адрес почтового сервера и SMTP порт указаны в табличке слева в строке «Сервер входящей почты».

 

Включите возможность добавлять к отзыву файл

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

Настройка вложений на вкладке «Поля» в свойствах формы

Затем укажите максимальный размер пересылаемого файла на вкладке «Свойства почты»:

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

Максимальный допустимый размер вложения — 50 Мб.

На вкладке «Настройки» можно включить для формы сервис Google reCaptcha. Для этого зарегистрируйтесь на странице сервиса и укажите полученные ключи в полях «Ключ сайта» и «Секретный ключ»:

Добавление Google reCAPTCHA на вкладке «Настройка» в свойствах формы

Публикуйте присланные отзывы с помощью элементов «Текст», «Фото» или «Медиа», если это видеоотзыв.

 

Добавьте контактные данные

Используйте для этого элемент «Текст». Его можно сделать кликабельным. Тогда при нажатии на текст устройство посетителя автоматически предложит совершить действие: отправить письмо или позвонить по телефону.

Электронная почта. Перетащите на сайт элемент «Текст» и нажмите иконку «Вставить/Редактировать ссылку» в панели редактирования:

Функция «Вставить/Редактировать ссылку» в панели редактирования текста

Впишите почту в разделе «Адрес эл.почты»:

Поле «Адрес эл. почты» в свойствах ссылки

Номер телефона. Добавьте ещё один элемент «Текст» и снова выберите опцию «Вставить/Редактировать ссылку».

Впишите номер в поле «Тел. номер»:

Поле «Тел. номер» в свойствах ссылки

Мессенджеры. В свойствах ссылки выберите строку «Веб-адрес» и укажите свой аккаунт в таком формате:

  • WhatsApp: whatsapp://send?phone=+120345678910
  • Viber: viber://add?number=120345678910
  • Telegram: tg://resolve?domain=nickname

Поле «Веб. адрес» в свойствах ссылки

Skype. Вместо элемента «Текст» нажмите в шапке сайта на элемент «Ещё» и выберите Skype в открывшемся окне:

Элемент «Skype» в разделе «Ещё»

 

Добавьте ссылки на соцсети

Добавьте на сайт новый элемент «Фото», выберите любой формат изображения из предложенных и в открывшемся окне перейдите на вкладку «Иконки Font Awesome». Затем впишите название сервиса в поиске и выберите значок, который нравится вам больше всего:

Иконки Font Awesome с логотипом YouTube

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

Свойства иконки

Для удобства посетителей продублируйте в шапке контакты, чтобы они всегда были на виду:

Иконки с логотипами соцсетей в шапке сайта

 

Добавьте карту с локацией

Чтобы добавить карту с местоположением вашего магазина, выберите «Ещё» из списка элементов в шапке конструктора и перетащите на сайт элемент HTML:

Элемент с произвольным кодом в разделе «Ещё»

Откройте сервис Google Карты, отметьте на них нужное место и нажмите слева на кнопку «Поделиться»:

Кнопка «Поделиться» в Гугл Картах

В открывшемся окне перейдите на вкладку «Встраивание карт» и нажмите «Копировать HTML»:

Кнопка «Копировать HTML» в Гугл Картах

Вернитесь на вкладку с конструктором и вставьте код в поле «HTML-код»:

Окно с HTML-кодом в конструкторе

 

Включите режим одностраничника

Чтобы показывать все разделы на одной странице, активируйте галочкой режим «Лендинг»:

Режим «Лендинг» в настройках конструктора

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

«Пункт меню по умолчанию» в свойствах меню

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

Синие кнопки, которые вы видите в конструкторе, не будут отображаться на сайте:

Синие кнопки в режиме редактирования сайта

Кнопку в начале страницы можно сделать ссылкой на конкретный раздел на сайте. Вернитесь к кнопке и откройте «Свойства». На вкладке «Общее» нажмите на карандаш в разделе «URL»:

Добавление ссылки в свойствах кнопки

В строке «Страница на вашем веб-сайте» выберите раздел, на который должна вести кнопка:

Выбор раздела, на который будет вести кнопка

Теперь при нажатии кнопки «Хочу» посетитель будет сразу попадать в раздел «Контакты».

 

Установите SSL-сертификат

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

Внешний вид SSL-сертификатов в популярных браузерах

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

Сначала получите и установите сертификат с помощью инструкции для cPanel. Затем включите использование сертификата в конструкторе. Для этого зайдите в настройки в верхнем углу редактора:

Раздел с настройками конструктора

Выберите раздел «Настройки». Поставьте галочку в пункте «Публикация сайта с принудительным HTTPS» на вкладке «Общее» и сохраните изменения:

Публикация сайта по HTTPS в настройках конструктора

 

Опубликуйте сайт

Сохраните черновик на будущее и опубликуйте сайт в интернете:

Кнопка публикации сайта

 

Что делать после создания сайта

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

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

Если не уверены, что справитесь, обратитесь к профессионалам. Вот список компаний, о которых мы слышали хорошее.

Наши другие статьи о конструкторе помогут:

Оцените, пожалуйста, статью:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 5,00 из 5)
Загрузка...