Первый блок называют «визитной карточкой» сайта — это первое, что видит гость, прежде чем начать скроллить. От того, насколько грамотно он собран, зависит, останется ли посетитель на вашей странице или закроет ее через три секунды. В этой статье мы рассмотрим, как добавить и настроить первый блок и какие варианты вы можете выбрать в Конструкторе сайтов Рег.ру.
Как добавить и настроить первый блок в Конструкторе сайтов Рег.ру
-
1
В редакторе сайта наведите курсор на часть страницы, расположенную под шапкой сайта. Нажмите кнопку Добавить блок:
-
2
Найдите раздел «Первый блок» и выберите желаемый вариант отображения:
-
3
Нажмите на Карандаш, чтобы открыть панель редактирования блока:
-
4
В зависимости от выбранного варианта блока заполните основную информацию. Например, для блока «Картинка сбоку» отредактируйте:
- аватарки и текст,
- заголовок и описание,
- кнопки,
- добавьте соцсети и изображения:
-
5
Настройте внешний вид блока, у каждого из них разные дополнительные настройки. Например, для блока «Картинка сбоку» вы можете настроить:
- цвет фона,
- подложку,
- позиционирование картинки,
- отступ снизу,
- скругление и анимацию:
-
6
После завершения настройки нажмите Сохранить:
Готово, вы добавили и настроили первый блок вашего сайта.
В Конструкторе сайтов Рег.ру есть следующие варианты заглавного блока:
-
1.
Баннер
-
2.
Картинка сбоку
-
3.
Галерея
-
4.
Один товар
-
5.
Скролл-баннер
Далее мы расскажем подробнее о каждом из вариантов, их различиях и порекомендуем, каким проектам подойдет каждый блок.
Баннер
Это полноразмерный верхний блок сайта, в который можно добавить до 20 баннеров. Пользователь листает их вручную, а каждый баннер состоит из фонового изображения с настраиваемой степенью затемнения, заголовка, описания и одной или двух кнопок для перехода к ключевым разделам сайта.
Каким проектам подойдет:
- сайты туристических агентств (показ разных стран),
- портфолио дизайнеров или фотографов,
- интернет-магазины одежды,
- лендинги мероприятий или акций.
Картинка сбоку
Это верхний блок сайта, в котором текст (заголовок и подробное описание), аватарки (аватарки, заголовок и подзаголовок), кнопки, соцсети занимают одну половину экрана, а другую — статичное изображение или ручной слайдер. Расположение картинки (справа или слева от текста) настраивается.
Каким проектам подойдет:
- сайтам, где важно подробно рассказать о продукте, услуге или акции, а визуальный ряд служит поддержкой, а не основой.
Галерея
Это вариант первого блока, где вы показываете заголовок и несколько изображений сеткой. такой формат идеален, когда пользователь должен сразу оценить ассортимент или стилистику, не листая слайдер.
Каким проектам подойдет:
- сайты художников и иллюстраторов,
- каталоги украшений,
- каталоги коллекций одежды,
- портфолио веб-студий (примеры работ).
Один товар
Это крупный промо-баннер в верхней части страницы, предназначенный для презентации ключевого товара с акцентом на одном продукте, позволяя выделить его ключевые преимущества и визуальные особенности. в основных настройках блока вы можете:
- отредактировать аватарки и текст,
- отредактировать заголовок и описание,
- отредактировать кнопки,
- добавить изображение для привлечения внимания к товару,
- выбрать сам товар.
Каким проектам подойдет:
- интернет-магазины (флагманская модель смартфона, новый ноутбук, лимитированная коллекция кроссовок),
- лендинги новинок косметики или техники,
- страницы распродаж, где нужно продвинуть одну позицию.
Скролл-баннер
Это динамичный первый блок, в котором при пролистывании страницы вниз (или автоматически) происходит анимация: загруженные пользователем изображения сменяют друг друга прямо во время скролла. поверх картинок расположены заголовок, подзаголовок и кнопка.
Каким проектам подойдет:
- сайты-портфолио (поэтапный показ проектов),
- лендинги с историями бренда или продукта (визуальное сопровождение рассказа),
- сайты ресторанов (смена блюд при скролле),
- сайты туристических направлений (последовательная демонстрация локаций),
- сайты креативных агентств, где хотят удивить нестандартной подачей.
Помогла ли вам статья?
Спасибо за оценку. Рады помочь 😊