Как создать страницу подписки бесплатно на Google Сайтах?

Привет! К вопросу о создании страниц подписки бесплатными способами, без своего домена и хостинга – решила рассмотреть вариант с Гугл Сайтами. И вместе с вами на конкретном примере создать простую страницу подписки. Возможно, для кого-то пригодится такой способ.

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

Или читайте текстовую инструкцию.

Чтобы пользоваться Гугл Cайтами, понадобится аккаунт в Гугл (почта gmail). Попасть в конструктор можно по адресу: sites.google.com.

Или зайти с вашего Гугл Диска, нажав по кнопке «Создать» — «Еще» — «Google Сайты».

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

И перед нами открывается конструктор:

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

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

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

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

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

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

Тип заголовка позволяет выбрать вид шапки:

«Обложка» – шапка становится шире и занимает собой всю первую прокрутку экрана

«Большой баннер» – занимает большую верхнюю часть прокрутки экрана.

«Баннер» – занимает меньшую верхнюю часть прокрутки экрана.

«Только заголовок» – полное отсутствие баннера (фоновой картинки) в шапке.

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

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

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

Ниже добавлю еще один текстовый блок и при этом выберу макет с картинкой слева.

Здесь я хочу добавить обложку своего продукта и прописать его выгоды (буллиты).

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

Далее при помощи ползунков по краям корректируем вид и размер обложки.

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

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

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

Но можно и оставить – просто перенести в него вот эту часть «Что внутри комплекта и в чем его ценность?» из подзаголовка выше.

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

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

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

И под ним добавлю форму подписки по email – для этого воспользуюсь блоком «Встроить».

Тут важно: если добавлять код, который выводится скриптом, то может не работать. Во всяком случае, у меня так получается с кодом формы подписки от Джастклика и Spoonpay. А вот если выбирать вариант html-кода, то работает.

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

Предварительно при помощи ползунков уменьшаем размер этого блока.

С формой от Spoonpay возник нюанс – при ширине полей меньше 300 пикселей и расположении их друг под другом форма добавлялась криво.

Получилось нормально со следующими настройками:

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

Формы подписки от Джастклика и Massdelivery (ширина полей не более 300 пикселей) адаптируются и на компе, и на мобильном нормально.

Далее сделаю еще один вариант подписки – через Вконтакте. Для этого сначала добавлю очередное текстовое поле с призывом подписаться в ВК.

И затем кнопку со ссылкой на подписку через ВК.

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

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

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

Кнопку можно сделать в сервисе: www.clickminded.com/button-generator

В самом конце страницы подписки я добавлю подвал (текстовый блок) с контактной информацией. Для этого нажму внизу «Нижний колонтитул».

Теперь такой нюанс: если вы хотите поставить на этот сайт код Яндекс.Метрики, то можно сделать это ниже, опять же, выбрав блок «Встроить» и добавить код вашего счетчика.

Но есть и другой вариант – собирать аналитику при помощи счетчика Гугл Аналитикс, это настраивается отдельно. Чуть ниже, покажу где.

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

У Гугл Сайта есть дополнительные настройки – клик по шестеренке вверху. Откроется меню с настройками сайта.

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

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

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

Пользовательские URL – здесь можно привязать свой домен к Google Сайту, следуя инструкциям.

Аналитика – здесь можно добавить идентификатор Google Analytics и включить сбор статистики на сайте.

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

В строке «Веб-адрес» указываем для нашего сайта название латиницей (коротко, без лишних символов и пробелов), оно будет фигурировать в ссылке на этот сайт.

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

Этой ссылкой вы можете делиться и привлекать трафик на вашу страничку подписки.

Единственный нюанс: в конце ссылки получаются кракозябры, потому как название страницы «Главная» указано на русском. Где это можно изменить и прописать название латиницей?

Перейдите в подраздел «Страницы», кликните по троеточию рядом с названием «Главная страница»:

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

Не забудьте опубликовать сайт заново после внесенных изменений!

Ссылка на страницу поменяет свой вид:

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

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

Есть неплохой выбор блоков – встройка видео с Ютуб, карусель изображений, карта, таблица и т.д.

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

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

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

А уже созданный сайт можно отредактировать, удалить, переименовать… Чтобы перейти к редактированию – кликаем по нему в перечне. Если вносите правки в опубликованный сайт, чтобы они применились, нажимаем повторно по кнопке «Опубликовать».

Важно: сайты хранятся на вашем Гугл Диске, если вы удалите сайт с диска, то удалите его из доступа!

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

Буду рада вашим вопросам и комментариям!

Виктория