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

Нет комментариев

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

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

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

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

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

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

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

##READMORE_BLOCK_3121##

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

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

Выбираем «Google Сайты» из выпадающего меню «Еще»

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

Конструктор Google Sites

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

Основной функционал Google Sites

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

Некоторые кнопки активны после публикации сайта: копировать ссылку и открыть доступ

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

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

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

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

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

В настройках легко разобраться

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

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

Дополнительные функции

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

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

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

Названия в двух строках могут отличаться

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

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

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

Стандартные инструменты форматирования

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

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

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

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

При изменении шапки вид сайта значительно меняется

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

Выбрать можно любое изображение

Конструктор предлагает достойные изображения

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

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

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

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

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

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

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

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

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

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

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

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

Значок сайта – тоже важный элемент брендинга

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

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

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

Загруженный логотип появляется в левом верхнем углу сайта

На самом деле, конечно, все не так просто. Логотип – это не просто красивая картинка. Он должен отражать суть вашего бизнеса и правильно восприниматься вашей аудиторией. Быть простым, но запоминающимся. Дизайнеры TexTerra знают, как создать классный логотип.

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

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

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

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

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

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

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

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

Все элементы сайта привязаны к сетке 960gs

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

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

Создаем текстовое поле

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

Каждый слой можно визуально отделить друг от друга

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

Меняем цвет фона

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

С помощью маркера мы переносим элемент

Переносим текстовое поле

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

Привязываем текст к изображению

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

При желании блоки можно обратно отсоединить друг от друга

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

Приветственный блок сайта-портфолио

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

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

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

Есть некоторая пустота после текста

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

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

Добавляем документ с нашей работой

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

На опубликованном сайте есть возможность пролистать весь документ

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

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

Выравниваем две работы относительно друг друга

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

Добавляем еще две работы

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

Добавляем документы через Google Диск

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

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

Готовые макеты значительно упрощают работу

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

Широкий выбор типа контента

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

Добавляем нужный файл

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

Готовые макеты можно менять по своему усмотрению

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

##READMORE_BLOCK_90614##

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

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

Сворачиваемый текст для блока «вопрос-ответ»

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

Оглавление упрощает поиск по сайту

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

Изображения можно растянуть во всю ширину

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

Создаем кнопку

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

Привязываем кнопку к тексту для удобства и красоты

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

Отделяем смысловые блоки друг от друга

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

Универсальная метка-заполнитель

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

Топовые видео по запросу – котята

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

Добавляем календарь

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

Вводим адрес

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

Карту можно приблизить

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

Просматриваем слайды презентации прямо на странице

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

Вставляем готовую форму

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

Добавляем нижний колонтитул

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

Вводим текст про авторские права

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

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

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

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

Создаем заголовок

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

Создаем блок с выгодами

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

Выравниваем выгоды относительно друг друга

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

Создаем блок с контактами

##READMORE_BLOCK_76006##

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

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

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

Кнопка создания новой страницы

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

Сразу вводим окончание адреса страницы

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

Изображение в шапке сайта сохраняется на созданной странице

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

Выбираем желаемое отображение панели навигации

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

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

Меняем местами страницы

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

Делаем страницу «Контакты» дочерней

Отображение страниц меняется

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

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

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

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

Добавляем подстраницу

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

Выбираем нужную нам страницу

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

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

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

Переносим страницу и делаем ее самостоятельной

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

Пишем новое имя

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

Создаем ссылку на другой сайт

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

Так отображается созданная ссылка

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

Публикация

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

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

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

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

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

Дополнительное меню после публикации

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

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

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

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

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

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

Окончание адреса на русском языке

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

Открываем параметры

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

Пишем желаемое имя латинскими буквами

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

Окончание адреса поменялось – теперь нашу ссылку не стыдно показать заказчику

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

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

Добавляем пользователей

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

Убираем галочку, чтобы урезать права редактора

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

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

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

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

Главная страница сайта

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

Блок выгод и видеоэкскурсии по отелю

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

Шапка сайта

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

Примеры работ художника

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

Изображение задаёт тон дальнейшему восприятию

Страница «О компании»

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

About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

Subscribe to our newsletter!

More from our blog

See all posts

Оставить комментарий