Как создать крутой сайт-портфолио на Google Sites за 1 час

Специалист без портфолио – как сапожник без сапог. Конечно, создать портфолио можно просто в каком-нибудь файле, но гораздо профессиональнее выглядит собственный сайт-портфолио. Сервис Google Sites позволяет создать его максимально быстро и просто. Разбираем по шагам.

Данное руководство будет полезно:

• фрилансерам и специалистам, которым требуется портфолио;
• бизнесам для создания сайта-визитки.

Преимущества Google Sites

Для начала разберем, чем Google Sites отличаются от других способов создания портфолио.

• Tilda. Для освоения сайтостроения на Tilda потребуется много времени. Вопрос: если я копирайтер, захочу ли я тратить на это свое время ради одного портфолио?
• WordPress. Та же история, что и с Tilda, плюс потребуются специальные навыки. Тратим много времени, особенно на первых порах.
• Ссылки на Google Docs. Многие скидывают заказчикам ссылки на отдельные работы. Иногда в анкете отклика на вакансию просят показать три или пять лучших работ – тогда портфолио не нужно. Но в остальных случаях ссылки выглядят непрофессионально.
• Биржа контента. Есть и такой вариант. На бирже ваш клиент может заметить другого исполнителя и выбрать его.

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

Знакомство с Google Sites

Для начала работы нам нужен аккаунт Gmail. Далее мы заходим на «Google Диск», нажимаем «Создать» и выбираем «Google Сайты».

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

Первая вкладка «Вставки» содержит все возможные элементы, которыми мы можем наполнить сайт. Во вкладке «Страницы» можно создавать новые страницы и управлять ими. Вкладка «Темы» дает нам на выбор 6 базовых тем для оформления сайта.

Панель навигации содержит базовые кнопки.

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

Скопировать ссылку на сайт. Доступна после публикации.

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

Отменить и повторить последнее действие.

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

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

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

Наполняем сайт

В строке «Сайт без названия» мы вводим название нашего сайта, но как документа.

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

Работа с шапкой сайта

Рабочая область состоит из шапки и основного холста. Шапка содержит заголовок сайта. То, что первое попадется на глаза клиенту.

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

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

Обложка. Растянет изображение на весь холст.

Большой баннер и просто баннер. Отличаются по размеру.

Только заголовок. Останется текстовое поле без изображения.

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

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

Для этого достаточно убавить настройки яркости в любом редакторе.

Кнопка «Восстановить» вернет первоначальный вид заголовка.

Вот как у меня выглядит шапка сайта.

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

Я уменьшила размер шрифта заголовка, потому что в мобильной версии у слова «Копирайтер» буква р переносилась на следующую строку.

Добавляем логотип

Логотип – элемент брендинга. Если у вас нет логотипа, это отличная возможность его разработать.

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

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

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

Основные элементы

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

Добавление изображений

Выбрать фото или картинку можно как с компьютера, так и с «Google Диска». Найти сразу через поиск или ввести ссылку на изображение.

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

Менять размер изображения мы можем с помощью бегунков. Хочу заметить, что размер подстраивается под сетку 960gs.

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

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

У каждого слоя есть небольшое меню.

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

Чтобы совместить несколько элементов на одном слое, используем маркер. Он есть у всех элементов.

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

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

Так выглядит приветственный блок на моем сайте.

Я вставила фото, добавила к нему подпись. Далее написала текст и перенесла его справа от фото.

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

Добавление веб-контента

Элемент «Встроить» позволяет добавлять контент через код или ссылку.

Например, ссылка на Google Docs с вашей работой. Появляется окно с документом.

Намного интереснее, чем просто ссылка. При нажатии на значок в правом верхнем углу документа работа откроется уже в Google Docs.

Вот как я оформила свои работы на сайте.

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

Еще один вариант вставки – через «Google Диск» напрямую.

Готовые макеты

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

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

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

Далее заполняем текстовое поле: подзаголовок и текст. У нас готов целый блок.

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

Остальные элементы

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

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

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

Кнопка. Создаем кликабельную кнопку.

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

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

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

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

Календарь. Добавляем «Google Календарь», в котором можно отметить важные даты.

Карта. Вводим нужный адрес и добавляем метку.

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

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

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

Нижний колонтитул. Находится в самом низу страницы.

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

Если колонтитул больше нам не нужен, удаляем его с помощью кнопки «Удалить».

Смысловые блоки: выгоды и контакты

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

Сначала создаем заголовок на отдельном слое.

Находим картинки для выгод. Свои я нашла в «Яндекс». После вставки картинки занимают достаточно много места. Наша задача поместить по две выгоды в строке.

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

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

Создаем многостраничный сайт

Иногда может понадобиться создать сайт с несколькими страницами. Например, для сайта-визитки, в котором отдельно стоит вынести информацию «О нас», «Контакты», «Разделы».

Заходим во вкладку «Страницы». Внизу видим кнопку с плюсом – кнопка создания новых разделов.

Нажимаем. Нас просят ввести название страницы. Например, «О нас». Тут же нажимаем «Еще» и вводим латиницей желаемое имя, которое будет отображаться в ссылке.

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

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

Если нам нужно создать еще страницу, действуем по тому же принципу.

Если нужно изменить последовательность страниц в панели навигации, например, «О нас» и «Контакты» поменять местами, во вкладке «Страницы» зажимаем левой кнопкой мыши «Контакты» и перетаскиваем ее после страницы «О нас».

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

Если же появляется обозначение в виде линии, то страницы просто меняются местами.

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

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

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

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

Аналогично мы создаем кнопку.

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

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

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

На панель навигации можно вставить ссылки на другие свои ресурсы. Для этого выбираем кнопку «Добавить ссылку».

Вводим адрес и название страницы. Готово. Кликабельная ссылка появляется в списке и на панели навигации.

Ссылку также можно менять местами с другими страницами, делать ее дочерней.

Публикация

Теперь, когда наш сайт-портфолио готов, пора его опубликовать. Для этого используем кнопку «Опубликовать». Нас просят ввести веб-адрес. Начало адреса у всех Google-сайтов стандартное. Мы вводим уникальное имя, которым будет заканчиваться наш сайт. Если имя занято, система оповестит нас.

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

Настройки поиска закрывают наш сайт для поисковых систем и наоборот.

После публикации на кнопке «Опубликовать» появляется дополнительное меню.

Настройки публикации. Их мы уже изучили.

Проверить и опубликовать. Позволяет нам проверить все изменения, которые мы совершили, но забыли повторно опубликовать.

Открыть опубликованный сайт. Переносит нас на страницу нашего сайта.

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

Меняем адрес веб-страницы

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

Выглядит это, скажем прямо, не очень. Меняем адрес на красивый. Открываем вкладку «Страницы», далее наводим курсор на строку «Главная страница» и нажимаем на три точки справа.

Выбираем «Открыть параметры», далее нажимаем «Еще» и видим строку «Указать путь». Именно сюда и нужно написать желаемое имя страницы на латинице. Например, «Main» – главная страница на английском языке.

Осталось повторно опубликовать сайт. Готово.

Настройки доступа

Открыть доступ к редактированию сайта можно через кнопку «Открыть доступ». В появившемся окне мы можем добавлять пользователей и наделять их правами – читатель (после публикации) и редактор.

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

Красивые дизайны Google Sites

Мы создали самое простое портфолио. Но с Google Sites можно создать достойные и красивые сайты. Приведу несколько примеров Google-сайтов с красивым дизайном.

Сайт HotelFlanders.com бельгийского отеля Flanders, расположенного в Брюгге.

Красивые изображения, контраст темных и светлых блоков.

Сайт-портфолио американского художника GoogleDrawings.org. Яркий, бросающийся в глаза сайт.

Этот сайт-портфолио мне запомнился больше всего.

Сайт-визитка компании Jivrus.com. На сайте много страниц, в заголовках использованы красивые фотографии.

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