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

GUIDE

Руководство пользователя
для архитектурно-проектного бюро "Град"

1. Начало работы

Левой кнопкой мыши кликните по названию папки нужного раздела.

Найдите страницу "Шаблон объекта", кликните по кнопке "Настройки".

Найдите страницу "Шаблон объекта", кликните по кнопке "Настройки".

Выберите вкладку "Действия" — "Дублировать страницу". Нажмите на кнопку "Перейти к новой странице".

2. Структура

Любой блок на странице «Шаблон объекта» можно копировать, перемещать и удалять.

Найдите страницу "Шаблон объекта", кликните по кнопке "Настройки".

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

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

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

i

3. Редактирование блока

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

Найдите страницу "Шаблон объекта", кликните по кнопке "Настройки".

Текст

Выделите текстовый блок, кликнув по нему левой кнопкой мыши. Кликните еще раз, потяните вправо, выделите весь текст, удалите и нажмите Ctrl+V (предварительно нужный текст необходимо скопировать в буфер).

Найдите страницу "Шаблон объекта", кликните по кнопке "Настройки".

Чтобы добавить/убрать жирное начертание, выделите слово и в открывшемся меню выберите/снимите привычную букву "B".

Отрегулируйте ширину текстового блока. Нужно сделать так, чтобы подзаголовки, выделенные жирным, располагались не друг под другом. Тяните за правый край (!), чтобы не сбить отступ от левого края экрана.

В объектах, где в составе только 2 предложения, после первого ставим "Enter". В объектах, где больше текста, после каждого предложения ставим пробел.

i

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

Отрегулируйте высоту блока на каждом экране. Снимите все выделения, кликнув на серый фон редактора, нажмите на кнопку "SETTINGS".

Измените высоту в строчке "GRID CONTAINER HEIGHT" (поставьте курсор на строчку и нажмите клавишу "вверх", чтобы увеличить, "вниз" — чтобы уменьшить).

Закройте окно, нажмите Ctrl+A и проверьте, что блок заканчивается на нижней границе текстового блока.

Сохраните изменения и закройте редактор.

Не заходя в редактор, выделите текст (как в Word), в открывшемся меню нажмите на значок книги. Типограф убирает висячие предлоги и делает текст более читабельным. Если в тексте есть кавычки, после типографа снова откройте блок и замените "кавычки-елочки"
на английские кавычки, чтобы сохранить единообразие.

Чтобы заменить изображение, нужно кликнуть по нему левой кнопкой мыши, нажать на кнопку "SETTINGS", затем — на кнопку "Upload file" и загрузить нужную картинку.

На обложке поверх рендера накладывается png-файл с названием объекта. Поэтому сначала нужно выделить левой кнопкой верхний слой, зажать Shift и 2-3 раза нажать на клавиатуре стрелку вниз. Затем выделить нижний слой, заменить изображение. После — вернуть на место верхний слой (зажать Shift и 2-3 раза нажать на клавиатуре стрелку вверх).

i

Сохраните изменения и закройте редактор.

Изображения

Размеры изображений (для стандартных блоков)

Обложка — 1680px * 1054px

План помещения — 1680px*945px

Рендер 1 — 1680px*945px
Рендеры 2/3 — 1500px*1500px (в интерьерах) 1500px*1150px (в архитектуре)

Рекомендации — 280px*187px

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

Найдите страницу "Шаблон объекта", кликните по кнопке "Настройки".

Отступы между картинкой и текстом, связанными по смыслу, или группой изображений настраиваются внутри блока. Регулируя высоту блока, сделайте отступ под верхним изображением. Десктоп (1200-max) — 10px, планшет горизонт (960-1200) — 10px, планшет вертикаль (640-960) — 6px, смартфон горизонт (480-640) — 4px, смартфон вертикаль (320-480) — 4px.

Найдите страницу "Шаблон объекта", кликните по кнопке "Настройки".

Отступы между текстом и нижней картинкой и между смысловыми блоками регулируются в настройках блока. Отступ между картинкой и текстом внутри одного смыслового блока — 0,5 line (15px), отступ между смысловыми блоками — 1 line (30px).

Найдите страницу "Шаблон объекта", кликните по кнопке "Настройки".

Видео

Выделите блок с видео, кликнув по нему левой кнопкой мыши. Нажмите на кнопку "SETTINGS" и замените ссылку на ролик. Сохраните изменения.

Найдите страницу "Шаблон объекта", кликните по кнопке "Настройки".

4. Адаптив

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

Найдите страницу "Шаблон объекта", кликните по кнопке "Настройки".

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

Кликайте по разным разрешениям на серой полоске вверху экрана или выбирайте конкретные устройства (горизонт/вертикаль), открыв вкладку "Responsive".

5. Настройка страницы

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

Найдите страницу "Шаблон объекта", кликните по кнопке "Настройки".

Перейдите во вкладку "Бейджик" и загрузите обложку (только без темного фильтра и названия объекта). Опубликуйте страницу.

6. Страница раздела

На странице раздела есть квадратные и прямоугольные объекты (горизонтальные и вертикальные, состоящие из 2, иногда из 3 "квадратов"). Прямоугольные объекты используются для динамики и не должны располагаться рядом друг с другом или прямо друг под другом. Иногда ряд может состоять из одних квадратных объектов, но только если не портит общую картину.

Найдите страницу "Шаблон объекта", кликните по кнопке "Настройки".

Ошибка: 2 прямоугольных и 4 квадратных блока подряд. Верстка выглядит скучно. Нет динамики.

За один раз на страницу раздела можно добавлять не меньше 2 объектов.
При этом некоторые квадратные объекты из предыдущего ряда нужно будет "превратить" в прямоугольные, чтобы после добавления объектов в ряду не осталось пустого места.

i

Что сделали: "разбавили" квадратные объекты горизонтальными и вертикальными прямоугольниками. Появилась динамика, глазу "есть за что зацепиться".

Прямоугольник — 573px * 280px / 280px * 573px. Квадрат — 280px*280px

Десктоп (1200-max): от края — 20px, между картинками — 13px. Планшет горизонт (960-1200): от края — 10px, между картинками — 7px. Планшет вертикаль (640-960): от края — 10px, между картинками — 7px. Смартфон горизонт (480-640): от края — 10px, между картинками — 5px. Смартфон вертикаль (320-480): от края — 9px, между картинками по горизонтали — 6px, между картинками по вертикали — 5px.

Проверяйте отступы с помощью панели настроек. Для объектов, расположенных в одном ряду, — одна координата Y, для объектов, расположенных друг под другом — одна координата X.

Выделите объект нужного типа с помощью курсора, нажмите Ctrl+C, затем — Ctrl+V, сформируйте ряд или два, соблюдая отступы и принципы верстки. Проверьте
и адаптируйте верстку для разных типов экранов. Отрегулируйте высоту блока.

Верстка

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

Если текста не видно, выделите фиолетовый квадрат, нажмите кнопку "SETTINGS" и в строчке "ARRANGE" кликните на иконку "Send Back". Или попробуйте заново выделить всю группу объектов.

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

i

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