Как изменить фоновый цвет в блоке конструктора главной?

Чтобы для блока конструктора главной задать определенный фоновый цвет или фоновую картинку на всю ширину, перейдите в Внешний вид > Настроить > Конструктор главной, добавьте блок “Вывод постов/HTML” и в поле “CSS-классы:” данного блока вставьте произвольный класс, например, constructor-block-1.

Чтобы задать фоновый цвет, перейдите в Внешний вид > Настроить > Дополнительные стили и добавьте код

/* Произвольный фоновый цвет блока встроенного конструктора главной */
.section-block.constructor-block-1:before {
  content: "";
  position: absolute;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  background-color: #f3f3f3;
}

Цвет фона #f3f3f3 можно изменить на другой.

Чтобы задать фоновую картинку, перейдите в Внешний вид > Настроить > Дополнительные стили и добавьте код

/* Произвольная фоновая картинка блока встроенного конструктора главной */
.section-block.constructor-block-1:before {
  content: "";
  position: absolute;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  background-image: url(Здесь вставьте ссылку на картинку фона);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

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

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

Вам помог ответ?
Похожие вопросы