Как создать сайт

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

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

Перейдите на вкладку «Сайты» и нажмите «Создать сайт» (Create website).

Выберите «Сайт».

Затем нажмите «Новый сайт» (New site), чтобы создать сайт с нуля.

Также вы можете отобрать показ готовых шаблонов по категориям или языку шаблонов, выбрать шаблон и адаптировать его под свои цели. Нажмите на шаблон, просмотрите дизайн и внизу нажмите на кнопку «Редактировать» (Edit).

Общий стиль страницы

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

Настройки общего стиля сайта применяются ко всем страницам. Читайте подробнее: «Общий стиль страницы» и «Настройка внешнего вида элементов».

Настройка элементов

Создайте структуру

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

Вы можете добавлять неограниченное количество блоков и до 6 колонок в одной секции.

Выберите подходящий блок из библиотеки. Чтобы перейти в нее, нажмите «Добавить блок» (Add block).

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

Если вы уже добавили элемент на будущий сайт и хотите перейти к следующему, наведите на блок и нажмите «+ Добавить блок» (Add block).

Читайте подробнее про механику создания сайта и настройку внешнего вида элементов в статье «Как работать с элементами сайта».

Добавьте виджеты

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

Меню

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

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

Читайте также: «Как добавить меню сайта».

Кнопка

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

В панели редактирования виджета «Кнопка» вы можете добавить дополнительные кнопки или выровнять элемент кнопки относительно пространства в колонке.

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

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

Рассмотрим назначение каждого типа ссылки:

Выберите стиль кнопки. По умолчанию стили подтягиваются из общего стиля страницы: основной и вторичный. Но и можно создать для каждой кнопки свой стиль — для этого выберите опцию «Настраиваемый» (custom). Еще можно настроить анимацию появления кнопки при прокрутке страницы.

Текст

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

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

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

Картинка

С помощью виджета «Картинка» вы можете добавить мультимедийный элемент на страницу. Подбирайте иллюстрации так, чтобы они усиливали эффект текста.

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

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

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

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

Для изображений на сайте применяется ресайз — это автоматический подбор размера картинки в зависимости от области изображения на устройстве посетителя (720, 1080 или 1920 px), а также конвертация в формат webp. Если нужного размера нет, посетителю будет показан оригинал, который хранится в менеджере файлов.

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

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

Видео

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

Галерея

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

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

Читайте подробнее: «Как добавить галерею на сайт».

Соцсети

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

Чтобы добавить новую соцсеть, нажмите «Добавить». Затем нажмите на иконку редактирования, выберите соцсеть и введите ссылку на нее.

Настройте внешний вид элемента: отображать как кнопки или иконки, в каком цвете и как выровнять по отношению к контенту колонки.

Читайте подробнее: «Как добавить соцсети на сайт».

Разделители: отступ и линия

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

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

При добавлении виджета «Отступ» (Spacer) вы можете задать размер по высоте в пикселях.

Для элемента «Линия» (Divider) можно выбрать ее цвет, тип, толщину и размер. К примеру, если вам нужна линия на всю колонку — выставьте ширину 100%. Если нужна на меньшую часть — отрегулируйте ширину ползунком и выберите опцию выравнивания контента по левому или правому краю или по центру.

Форма подписки

Собирайте данные посетителей сайта и подписывайте их на рассылки с помощью формы подписки.

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

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

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

Затем настройте поля формы, кнопку подписки и их внешний вид.

Читайте подробнее: «Как добавить форму подписки на сайт».

Оплаты

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

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

Читайте подробнее: «Как принимать платежи на сайте».

Чат-боты

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

Выберите внешний вид и стиль кнопки. Затем добавьте новый элемент или отредактируйте существующий, указав социальную сеть.

Читайте подробнее: «Как добавить подписку на чат-боты».

Таймер

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

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

Читайте подробнее: «Как добавить таймер на сайт».

FAQ

Используйте элемент «FAQ», чтобы добавить развернутые ответы на часто задаваемые пользователями вопросы.

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

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

Читайте подробнее: «Как добавить FAQ на сайт».

Карта

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

Подключите уникальный ключ Google Maps API. Добавьте нужные адреса и описания к ним. Настройте масштаб и стиль отображения карты.

Подробнее о добавлении виджета читайте в статье «Как добавить на сайт виджет Google Maps».

Авторизация EDU

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

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

Выберите курс, для которого вы хотите добавить страницу курса. Выберите и настройте кнопки, которые будут отображаться, или добавьте новую кнопку.

Читайте подробнее: «Как добавить виджет для авторизации и регистрации на курс».

Кастомный код

Если вам нужно добавить на сайт дополнительный элемент, например виджет с календарем или системой комментариев, вы можете добавить его с помощью виджета «Вставка кода» (Custom code).

Можно добавить блок с HTML, CSS или JavaScript кодом, написанным собственноручно или сгенерированным в нужном сервисе. Для этого добавьте виджет на страницу и нажмите его, чтобы открыть модальное окно для вставки кода.

Читайте подробнее «Как добавить кастомный код блоком на сайте».

Отзывы

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

После добавления виджета перейдите в поле «Отображение отзывов» (Review display option) и выберите способ отображения отзывов: в карусели или сеткой.

В поле «Источник» (Source) выберите курс, для которого нужно отображать отзывы.

Курс должен быть на том же домене, что и сайт, а также содержать существующие отзывы. В настройках курса «Отзывы студентов» должно быть активировано отображение отзывов.

В поле «Количество» (Number) выберите число отзывов, которые нужно отображать.

Читайте подробнее: «Как добавить на сайт виджет с отзывами».

Управление изменениями

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

Отмена касается последнего действия в конструкторе. Чтобы отменить предыдущие записи данных, продолжайте нажимать кнопку. Шаг назад можно выполнить не только нажатием на кнопку, но и с помощью комбинации клавиш Ctrl + Z.

Также вы можете возобновить действие, которое было отменено. Для этого нажмите стрелочку вправо или воспользуйтесь комбинацией клавиш Ctrl + Y.

Читайте также: «Как работать с конструктором сайта».

Предпросмотр

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

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

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

Читайте подробнее: «Как редактировать элементы в мобильной версии».

Cохранение и публикация

Когда вы закончили создание страницы, нажмите «Сохранить и выйти» (Save and exit). Введите название и ссылку на сайт. При добавлении новой страницы введите ссылку на страницу.

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

Читайте также: «Как управлять страницами сайта».

Чтобы изменить название и ссылку страницы, перейдите в «Настройки», введите новое название и URL адрес и нажмите «Сохранить» (Save).

Первая добавленная страница при создании сайта по умолчанию считается главной. Чтобы изменить главную страницу, перейдите в «Настройки сайта» (Site settings) и выберите новую страницу в выпадающем меню.

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

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

Также вы можете следить за статистикой посещений вашего сайта. Для этого перейдите во вкладку «Статистика» и выберите тип отслеживаемой статистики.

Обновлено: 25.09.2023