1. aspro.ru
  2. Аспро: Медицинский центр 3.0
  3. Главная страница для Аспро: Медицинский центр 3.0
  4. Блок «О компании» на главной странице для Аспро: Медицинский центр 3.0
  5. Настройки оформления блока «О компании» для Аспро: Медицинский центр 3.0

Настройки оформления блока «О компании» для Аспро: Медицинский центр 3.0


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

Общие настройки блока

При любом типе отображения для блока можно установить разделитель для указания границы блока и назначить серый фон на весь блок (1). А также задать верхние и нижние отступы, которые отделяют блок от соседних (2). 

88243890-7b5e-11f1-8fe4-fa163e2ff576

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

1112840a-7b61-11f1-8fe4-fa163e2ff576

Верхние и нижние отступы задаются по конкретным значениям и определяют, насколько блок будет отдален от соседних блоков. Всего четыре интервала: 0, 40, 80, 130. Чем больше значение, тем удаленнее блок.

1e7126cf-7b5d-11f1-8fe4-fa163e2ff576

  • верхний блок: 0, нижний: 0;

3c2034d4-7b5b-11f1-8fe4-fa163e2ff576

  • верхний блок: 130, нижний: 130.

c762f030-7b61-11f1-8fe4-fa163e2ff576

Настройки по типам блока

Первым двум типам отображения блока можно настроить ширину картинки (1). Типу «С большим баннером» можно задать отступы по правому и левому краю баннера (2). Первому и третьему типу отображения можно выбрать тип картинки у тизера (3). А второму типу «С текстом и картинкой» можно назначить позицию картинки (4).

a2627472-7b5f-11f1-8fe4-fa163e2ff576

Рассмотрим, чем отличается широкая и неширокая картинка, с отступами и без отступов:

  • неширокая картинка;

f6c85175-7b5f-11f1-8fe4-fa163e2ff576

  • широкая картинка;

a28b052a-7b62-11f1-8fe4-fa163e2ff576

  • широкий баннер с отступом (только для первого типа);

3ae4504e-7b5f-11f1-8fe4-fa163e2ff576

  • широкий баннер без отступа.

ea76ef2c-7b64-11f1-8fe4-fa163e2ff576

Теперь рассмотрим разницу в типах картинок у тизера:

  • тип картинки у тизера: текст;

bbcfd627-7b5e-11f1-8fe4-fa163e2ff576

  • тип картинки у тизера: картинки;

a874db4f-7b5b-11f1-8fe4-fa163e2ff576

  • тип картинки у тизера: иконки.

3d571499-7b5e-11f1-8fe4-fa163e2ff576

Отдельно для второго типа «С текстом и картинкой» разберем позиции картинки:

  • Позиция картинки: справа;

0adabc98-7b60-11f1-8fe4-fa163e2ff576

  • Позиция картинки: слева.

fce003b5-7b62-11f1-8fe4-fa163e2ff576

Предыдущая статья Блок «О компании» на главной странице для Аспро: Медицинский центр 3.0
Следующая статья Дополнительные настройки блока «О компании» для Аспро: Медицинский центр 3.0