Банер

Банер — перший екран сторінки: велике фото, заголовок, короткий текст і кнопка. Його бачать раніше за все інше, тож саме тут відвідувач вирішує, чи гортати далі.

Банер буває двох видів:

• «Банер на весь екран» — фото на всю ширину сторінки, текст і кнопка поверх нього. Найчастіше його ставлять на головну.
• «Банер у дві колонки» — текст в одній колонці, фото в іншій. Спокійніший варіант, добре пасує до сторінки «Про мене».

---

Як додати банер

У більшості шаблонів банер уже стоїть першим на головній сторінці. Щоб додати його на іншу сторінку:

1. Відкрийте сторінку в редакторі.
2. Наведіть на блок, поруч із яким має бути банер, і натисніть «+» на його верхньому чи нижньому краї.
3. У вікні «Додати блок» у групі «Банер з текстом» оберіть «На весь екран» або «Дві колонки».

---

Що заповнити

Заголовок і текст під ним редагуються прямо на сторінці: клікніть по них і друкуйте.

Решту задайте в панелі праворуч: клікніть по банеру й перейдіть на вкладку «Контент».

• Фото. У банері на весь екран поле називається «Фонове зображення», у банері у дві колонки — «Зображення». «Замінити» завантажує нове фото, «Медіатека» відкриває вже завантажені фото й фото з ваших галерей Gallera.
• Точка фокусу. На прев'ю фото є біла точка — перетягніть її на головне в кадрі, наприклад на обличчя пари. Банер обрізає фото під розмір екрана, а точка завжди лишається в кадрі. Кнопка з прицілом «У центр» повертає точку в центр. Детальніше — у статті Обрізка, формат і точка фокусу.
• «Опис фото (alt)» — що на фото, одним реченням. Опис читають пошукові системи й програми для незрячих. Як його писати — у статті Фото і пошук.
• «Текст кнопки» і «Посилання кнопки» — напис на кнопці й куди вона веде: сторінка сайту, секція на сторінці або інший сайт. Щоб прибрати кнопку, зітріть її текст.

У банері у дві колонки є ще «Фонове зображення (за обома колонками)» з окремим описом — «Опис фонового фото (alt)». Таке фото лягає на всю ширину блока, за текстом і основним фото. Воно необов'язкове: без нього фон банера одного кольору.

---

Варіанти вигляду

Відкрийте вкладку «Налаштування». Угорі в розділі «Макет» можна перемкнути банер: «На весь екран» чи «Дві колонки». Фото, тексти й кнопка при цьому залишаються.

Нижче — розділи частин банера: «Блок», «Заголовок», «Підзаголовок», «Кнопка», а в банері у дві колонки ще «Зображення». Якщо клікнути по заголовку чи кнопці на сторінці, панель одразу відкриє їхній розділ.

Банер на весь екран

У розділі «Блок»:

• «Висота блока»:
  • «Авто» — за висотою тексту й відступів;
  • «Компактна» — близько половини екрана;
  • «Середня» — близько 70 % екрана, так банер виглядає спочатку;
  • «На весь екран» — увесь екран під меню.
• «Вирівнювання» — текст зліва, по центру чи справа.
• «Текст по вертикалі» — текст по центру, зверху чи знизу банера.
• «Затемнення фото» — «Немає», «Легке», «Середнє» чи «Сильне». Затемнення робить текст читабельним на світлому чи строкатому фото. Поки ви не вибрали «Колір тексту», текст на фото білий, а затемнення — «Середнє».
• «Фото нерухоме при прокручуванні» — фото стоїть на місці, а сторінка ковзає поверх нього. У редакторі ефект вимкнено, тож перевіряйте його в «Переглянути» або на сайті.

Банер у дві колонки

У розділі «Блок»:

• «Фото з боку» — фото праворуч чи ліворуч від тексту.
• «Пропорції колонок» — «Порівну (1:1)», «Фото ширше (3:2)» чи «Текст ширший (2:3)».
• «Відстань між колонками» — у пікселях, спочатку 32.
• «Висота блока» — спочатку «Авто»: фото показується цілим, у своїх пропорціях, і саме задає висоту банера. Якщо вибрати іншу висоту, на комп'ютері фото заповнить свою колонку й обріжеться за точкою фокусу.
• «Порядок на мобільному» — що буде зверху на телефоні, див. нижче.
• «Затемнення фото» — діє лише на фонове фото за обома колонками.

У розділі «Зображення» — «Ширина» фото в колонці й «Скруглення кутів».

У розділах «Заголовок», «Підзаголовок» і «Кнопка» — розмір, шрифт, колір і стиль цих частин.

Меню поверх фото

Щоб меню лежало просто на фото банера, як на обкладинці журналу, клікніть по меню й на вкладці «Налаштування» в розділі «Блок» увімкніть «Прозора навігація». Це працює, коли банер — перший блок сторінки. Детальніше — у статті Меню і футер.

---

На телефоні

• Банер на весь екран показує те саме фото, але екран телефона вузький і високий. Від горизонтального кадру лишається вертикальна смуга — від третини до половини його ширини. Яку саме частину буде видно, вирішує точка фокусу.
• Банер у дві колонки стає однією колонкою. Що буде зверху, оберіть у полі «Порядок на мобільному»: «Текст зверху» — так спочатку — чи «Зображення зверху». Фото на телефоні показується цілим, без обрізки.
• Великий заголовок меншає сам: 60 px на комп'ютері — це близько 36 px на телефоні. За потреби розмір, вирівнювання й відступи можна задати окремо для телефона — див. Мобільна версія сайту.

Перевірте банер у режимі «Телефон» у верхній панелі редактора, а після публікації — на справжньому телефоні.

---

Обмеження

• Ручної обрізки немає, лише точка фокусу. Щоб показати інший фрагмент кадру, обріжте фото перед завантаженням.
• Окреме фото для телефона поставити не можна.
• Відео в банер не вставляється. Для відео є блок «Відео», а в блоках «Зображення» і «Зображення + текст» фото можна замінити відео: на вкладці «Контент» у полі «Що показувати» оберіть «Відео».
• Нерухоме фото при прокручуванні є лише в банері на весь екран.

---

Поради фотографу

• Фото. Горизонтальний кадр, 2560 px по довшій стороні, головне — ближче до центру, а довкола — трохи «повітря»: на телефоні краї обріжуться. Як підготувати фото — у статті Як підготувати фото для сайту.
• Точка фокусу — на обличчях, а не на сукні чи пейзажі: саме обличчя мають лишитися в кадрі на телефоні.
• Спокійна ділянка під текст. Заголовок добре читається на небі, траві чи стіні й губиться на дрібних деталях. Якщо фон строкатий, додайте «Затемнення фото».
• Заголовок — про вашу послугу й місто. Це головний заголовок сторінки, його бачить Google:
  • добре: «Весільний фотограф у Львові», «Сімейні фотосесії в Києві — Олена Коваль»;
  • погано: «Ласкаво просимо», «Моє портфоліо».
• Кнопка — з конкретною дією: «Перевірити дату», «Подивитися весілля» замість «Детальніше». Ведіть її на форму заявки або в портфоліо.

---

Якщо щось не так

Фото не стоїть на місці при прокручуванні. У редакторі цей ефект вимкнено. Відкрийте «Переглянути» — і перевірте, що це банер на весь екран.

На телефоні обрізано обличчя. Перетягніть точку фокусу на обличчя на вкладці «Контент» і перевірте результат у режимі «Телефон».

Текст погано видно на фото. Увімкніть «Затемнення фото» або виберіть інший «Колір тексту» в розділі «Блок».

Кнопки немає на сайті. Кнопка ховається, коли поле «Текст кнопки» порожнє.