Создание первого сайта

Если вы только начинаете работу с Photosquare, это руководство проведёт через основные шаги создания сайта — для личного бренда, портфолио, блога или сайта малого бизнеса.

При создании сайта вы сначала задаёте структуру (страницы и навигацию), затем добавляете контент (секции и блоки), и в конце настраиваете стиль (шрифты, цвета, кнопки). Если представить сайт как дом, структура — это планировка комнат, контент — мебель и предметы внутри, а стиль — цвета, материалы и детали, которые делают пространство узнаваемым.

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

[изображение] Обзор редактора Photosquare: панель страниц слева, превью сайта по центру, панель стилей и настроек справа.

Создайте аккаунт и сайт

Перед редактированием нужен аккаунт Photosquare и сам сайт на основе шаблона.

Регистрация

1. Перейдите на account.photosquare.ru и создайте аккаунт или войдите в существующий.
2. После входа откроется панель Вебсайты — здесь отображаются все ваши проекты.

Выбор шаблона и создание сайта

1. Нажмите Создать сайт — откроется каталог шаблонов на главном сайте Photosquare.
2. Выберите шаблон, который ближе всего к вашей задаче (портфолио, визитка, блог и т.д.).
3. Посмотрите демо-версию шаблона в браузере, чтобы оценить структуру и оформление.
4. Нажмите кнопку создания сайта. Если вы не авторизованы, система предложит войти в аккаунт.
5. После создания вы автоматически попадёте в редактор по адресу ваш-сайт.photosquare.ru/config.

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

Примечание: на пробном периоде (14 дней) сайт доступен по встроенному адресу идентификатор.photosquare.ru. Позже можно подключить свой домен и оформить подписку, чтобы сайт продолжал работать после окончания trial.

[изображение] Каталог шаблонов Photosquare с превью и кнопкой создания сайта.

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

Структура сайта — это страницы в навигации. Когда вы добавляете страницу в панели Страницы, её название появляется в шапке сайта (если страница находится в основном меню). Разделение контента по страницам помогает посетителям быстро найти услуги, портфолио, контакты или блог.

Совет: ниже в этой статье есть разделы про блог и галереи — их тоже можно добавить в навигацию как отдельные типы страниц.

Добавьте страницы в навигацию

1. В редакторе откройте раздел Страницы на главной панели.
2. В нужном разделе навигации (например, главное меню) нажмите +.
3. Выберите тип страницы:
4. Страница — обычная страница с секциями и блоками;
5. Блог — лента записей с отдельными страницами постов;
6. Папка — выпадающий пункт меню с вложенными страницами;
7. Ссылка — пункт меню, ведущий на внешний или внутренний URL без отдельной страницы.
8. Введите название страницы. Оно сразу появится в списке навигации — название можно переименовать, кликнув по заголовку в панели.
9. Чтобы сделать страницу главной (первой при открытии сайта), откройте меню действий у страницы и выберите Сделать главной.

Страницы внутри одного раздела навигации можно перетаскивать, меняя порядок в меню. Папки позволяют группировать связанные страницы — например, «Услуги» → «Свадьбы», «Портреты», «Корпоративы».

Подробнее о типах страниц и их настройках: Настройки страницы.

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

[изображение] Панель «Страницы» с главным меню, кнопкой «+» и разделом «Не прилинкованы».

Настройте шапку сайта

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

Чтобы отредактировать шапку:

1. В превью сайта наведите курсор на шапку.
2. Нажмите кнопку редактирования шапки.
3. Настройте элементы:
4. Брендинг — логотип, название, слоган;
5. Навигация — отображение пунктов меню;
6. Соцсети — иконки и ссылки (VK, Telegram, Instagram и др.);
7. Кнопка — призыв к действию (например, «Записаться» или «Связаться»);
8. Дизайн и цвета — фон шапки, прозрачность, цвета элементов;
9. Мобильное меню — раскладка логотипа и навигации на телефоне.

Подробная инструкция: Настройка шапки сайта.

[изображение] Диалог редактирования шапки с вкладками «Элементы», «Дизайн» и «Цвета».

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

После того как структура готова, наполните страницы контентом. В Photosquare страницы состоят из секций, а внутри секций размещаются блоки:

1. Блоки — текст, изображения, кнопки, видео, формы и другие элементы. Их можно перетаскивать в сетке редактора (Fluid Engine).
2. Коллекции — наборы связанных материалов: записи блога, альбомы галереи. У них есть общая страница-лента и отдельные страницы элементов.

Добавьте контент с помощью блоков

Блоки — основной способ показать информацию на обычных страницах. Чтобы добавить блок:

1. Откройте раздел Страницы и выберите нужную страницу.
2. В превью кликните по секции, в которой хотите работать.
3. Нажмите Добавить блок (или выберите точку вставки между существующими блоками).
4. Выберите тип блока из списка:
5. Текст — заголовки, абзацы, списки, ссылки;
6. Изображение — фото с кадрированием и точкой фокуса;
7. Кнопка — ссылка в виде кнопки;
8. Линия — горизонтальный разделитель;
9. Видео — встроенное видео;
10. Карта — Яндекс.Карты с меткой;
11. Встраивание — внешний контент по URL;
12. Код — произвольный HTML;
13. Форма — поля для заявок и обратной связи.

Повторите шаги, чтобы добавить ещё блоки. Чтобы изменить расположение, перетащите блок в сетке. Размер блока меняется за углы и края. В панели Слои удобно менять порядок блоков в секции.

Изменения сохраняются автоматически. Переключатель Компьютер / Телефон в панели превью позволяет проверить, как блоки выглядят на мобильных — для телефона можно задать отдельное расположение.

Больше деталей: Добавление контента с помощью блоков.

[изображение] Секция страницы с сеткой блоков и панелью «Добавить блок».

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

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

1. В превью наведите курсор на границу между секциями или на край страницы.
2. Нажмите +, чтобы открыть каталог секций.
3. Выберите:
4. Добавить пустую — чистая секция для блоков;
5. Секция-галерея — секция со встроенной фотогалереей;
6. готовую секцию из каталога по категориям (герои, контакты, команда и т.д.);
7. секцию из Сохранённых секций — если вы ранее сохранили удачную вёрстку.

У каждой секции есть собственные настройки: фон (цвет или изображение), цветовая тема, высота, выравнивание, разделитель между секциями. Подробнее: Секции страниц и Сохранённые секции.

[изображение] Каталог секций с категориями и пунктом «Сохранённые секции».

Добавьте контент через коллекции

Коллекции — это наборы связанных материалов. У них двухуровневая структура: страница-лента (список) и отдельные страницы элементов.

1. Блог — лента записей с обложками и краткими описаниями; клик открывает полный текст поста.
2. Галерея — альбом снимков с отдельными страницами фотографий или проектов.

Примечание: у страниц типа «Блог» на ленте есть зарезервированная секция с лентой постов — её нельзя удалить, не удалив всю страницу блога. Если вы работаете с демо-контентом шаблона, обратите внимание на тип страницы перед правками. Для максимальной гибкости обычных страниц используйте тип Страница.

Отдельные руководства:

1. Записи блога
2. Галереи и портфолио
3. Библиотека медиа

Добавьте блог (необязательно)

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

Добавьте новую запись

1. В разделе Страницы выберите страницу блога.
2. Откройте панель управления записями блога.
3. Нажмите +, чтобы создать новую запись.
4. Задайте заголовок, краткое описание, обложку и контент записи в редакторе.
5. В настройках записи выберите статус:
6. Опубликовано — запись сразу видна на сайте;
7. Запланировано — публикация в указанную дату и время;
8. Черновик — запись видна только вам в редакторе.
9. Сохраните изменения.

[изображение] Панель записей блога со списком постов и кнопкой создания.

Помогите аудитории найти контент

У записей блога есть встроенные возможности для оформления и продвижения:

1. задайте краткое описание — оно отображается в ленте блога;
2. добавьте главное изображение — обложка в ленте и в шапке страницы записи;
3. настройте SEO и изображение для соцсетей во вкладках настроек записи;
4. при необходимости включите комментарии в настройках сайта.

Подробнее: Работа с записями блога.

Добавьте галерею (необязательно)

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

1. Откройте нужную страницу в редакторе.
2. Нажмите + между секциями или в конце страницы, чтобы открыть каталог секций.
3. В боковом меню каталога выберите категорию с галереями.
4. Кликните по понравившемуся макету — секция добавится на страницу.
5. Замените демо-изображения своими: откройте настройки секции и загрузите снимки из Библиотеки или с компьютера.
6. При необходимости измените раскладку, отступы и оформление в параметрах секции.

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

Подробнее: Галереи и портфолио.

[изображение] Каталог секций: категория с галереями и список готовых макетов справа.

Настройте стиль сайта

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

Глобальные стили

Откройте раздел Стили на главной панели редактора. Доступны разделы:

1. Шрифты — готовые наборы шрифтов и размеры для заголовков, основного текста и подписей;
2. Цвета — палитра сайта и цветовые темы для секций;
3. Кнопки — форма, заливка, обводка и размер кнопок;
4. Размеры и отступы — общие пропорции и интервалы на сайте.

Если в настройках сайта включён cookie-баннер, его оформление тоже настраивается в разделе стилей.

Подробнее: Стили сайта.

[изображение] Панель «Стили сайта» с разделами «Шрифты», «Цвета», «Кнопки».

Оформите отдельные секции

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

1. Откройте страницу в редакторе.
2. Наведите курсор на секцию и откройте её настройки (иконка карандаша).
3. Переключайтесь между вкладками Дизайн, Фон и Цвета.
4. Настройте высоту секции, фоновое изображение, наложение, цветовую тему, разделитель снизу.

Те же принципы описаны в Секции страниц.

Создайте руководство по стилю (необязательно)

При разработке сайта рекомендуем создать страницу-руководство по стилю в разделе Не прилинкованы. Она не появится в меню, но останется доступной вам по прямой ссылке. Такая страница помогает:

1. экспериментировать и зафиксировать элементы фирменного стиля;
2. сократить время на правки на поздних этапах;
3. сохранить единообразие, если над сайтом работает несколько человек.

В руководство по стилю имеет смысл включить:

1. Цвета — hex-коды, палитры и цветовые темы из раздела Стили → Цвета;
2. Типографика — шрифты, размеры заголовков и основного текста из Стили → Шрифты;
3. Логотип — варианты для светлого и тёмного фона, рекомендуемые отступы;
4. Макет — типичные отступы секций и ширина контента;
5. Изображения — допустимые пропорции, стиль обработки, подписи к работам;
6. Тексты — тон общения, обращение на «вы»/«ты», ключевые формулировки.

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

1. заголовки разных уровней;
2. абзацы текста;
3. кнопки основных и дополнительных стилей;
4. линии-разделители;
5. ссылки в тексте.

[изображение] Пример страницы-руководства по стилю с образцами заголовков, текста, кнопок и цветовых тем.

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

Когда структура, контент и оформление готовы, подготовьте сайт к запуску.

Проверьте перед публикацией

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

Также проверьте:

1. Видимость сайта — в Настройки → Веб-сайт → Видимость выберите «Публичный», «Приватный» (только для вас) или защиту паролем;
2. SEO — заголовок и описание сайта в Настройки → Веб-сайт → SEO;
3. Иконку сайта (favicon) — в соответствующем разделе настроек;
4. Аналитику — при необходимости подключите Яндекс.Метрику или Google Analytics в Настройки → Сторонние сервисы.

Подробнее: Видимость сайта и Основы SEO.

Подключите домен

Сайт сразу доступен по адресу идентификатор.photosquare.ru. Чтобы использовать свой домен (например, studio.ru):

1. Откройте Настройки → Домены.
2. Нажмите Подключить свой домен.
3. Подтвердите владение доменом (TXT-запись) и настройте A-запись у регистратора.
4. Дождитесь статуса «Подключен» — обновление DNS может занять от нескольких минут до 24 часов.

Пошаговая инструкция: Подключение своего домена.

Оформите подписку

На пробном периоде (14 дней) сайт полностью работает. Когда будете готовы продолжить после trial, оформите подписку:

1. Внизу редактора нажмите Подписаться или Перейти к оплате на баннере пробного периода.
2. Либо откройте Настройки → Оплата и выберите тарифный план.
3. Укажите период оплаты (ежемесячно или ежегодно) и завершите оплату.

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

Примечание: если пробный период истёк, сайт переходит в неактивное состояние. Посетители увидят заглушку; после оплаты подписки сайт снова станет доступен по прежнему адресу.

[изображение] Баннер пробного периода внизу редактора с кнопкой «Подписаться».