Примеры оптимальных блоков

В этом разделе мы посмотрим на наиболее универсальные и рабочие варианты блоков, с перечислением примененных настроек. Внимание: размер блока на картинке не будет соответствовать такому же блоку, размещенному на странице, поскольку блок пропорционально масштабируется, подстраиваясь под свободное место.



  • Положение текста: текст под картинкой
  • Объявлений в строке: 3
  • Число строк с объявлениями: 2
  • Формат изображения: 4:3
  • Шрифт заголовка и описания: Arial
  • Размер шрифта заголовка и описания: 16px
  • Стили начертания заголовка и описания: жирный
  • Цвет текста заголовка и описания: #111111

  • Мотивирующий текст зафиксирован внизу справа
  • Шрифт мотивирующего текста: Arial
  • Размер шрифта мотивирющего текста: 16px
  • Стили начертания мотивирующего текста: жирный, с подчеркиванием при наведении
  • Цвет шрифта мотивирующего текста: #c91313

"Золотой стандарт" для размещения под основным контентом. Количество строк и объявлений в строке может быть больше, но слишком много делать не стоит — объявления будут слишком маленькими и, скорее всего, начнут иногда повторяться. Слишком мало объявлений в блоке тоже плохо, поскольку в этом случае они масштабируются в большой размер, что портит внешний вид.



  • Положение текста: текст с подложкой на картинке
  • Цвет подложки текста: rgba(0, 0, 0, 0.7)
  • Высота подложки текста: 30%
  • Объявлений в строке: 3
  • Число строк с объявлениями: 2
  • Формат изображения: 1:1
  • Шрифт заголовка и описания: Arial
  • Размер шрифта заголовка и описания: 16px
  • Стили начертания заголовка и описания: жирный
  • Цвет шрифта заголовка и описания: #f1f1f1
  • Горизонтальное выравнивание текста: по центру

Основная сложность при создании такого блока состоит в том, что базовых настроек в конструкторе недостаточно для того, чтобы придать подложке текста такой же вид, как на скриншоте. Если вы хотите установить подобный блок у себя на сайте, напишите нам в тикеты или Telegram: @oblivkisupport

Если же у вас есть возможность отредактировать код страниц на вашем сайте и добавить доп.стили, то вы можете использовать следующий код, чтобы добиться такого же результата, как в нашем примере:

<style>
#ID_БЛОКА .table-o1b2l3 a.table-cell-o1b2l3 .content-cover-o1b2l3 .text-o1b2l3 {
background: linear-gradient(to top, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0) 100%) !important;
}
#ID_БЛОКА .table-o1b2l3 a.table-cell-o1b2l3 .content-cover-o1b2l3 .title-o1b2l3 {
padding-top: 12px !important;
}
</style>

#ID_БЛОКА нужно заменить на реальный ID, который можно найти в окне "Код для вставки" и поставить перед ним символ решетки #.

Получившийся код нужно вставить в исходный HTML-код страницы ниже места где добавлен сам блок.



  • Положение текста: текст справа от картинки
  • Объявлений в строке: 1
  • Число строк с объявлениями: 1
  • Фоновый цвет блока (блок и объявление): #fff8e8
  • Формат изображения: 4:3
  • Ширина картинки относительно ширины объявления: 50%
  • Шрифт заголовка и описания: Arial
  • Размер шрифта заголовка и описания: 16px
  • Стили начертания заголовка и описания: жирный
  • Цвет шрифта заголовка и описания: #444444
  • Горизонтальное выравнивание текста: по центру
  • Выравнивание по центру по вертикали: включено

  • Мотивирующий текст: добавлять в объявления
  • Текст: Подробнее...
  • Фиксация внизу объявления: включена
  • Шрифт: Arial
  • Размер шрифта: 16px
  • Стили начертания: жирный
  • Горизонтальное выравнивание текста: по центру

Хороший пример того, как можно использовать цвета из палитры сайта для создания более органичного дизайна. Горизонтальные блоки используются нечасто, но иногда один блок такого формата идеально подходит для размещения в тех местах, где с блоками других форматов не удается добиться оптимального вида. В данном блоке так же используются дополнительные CSS-правила, в этот раз для превращения мотивирующего текста "Подробнее..." в кнопку. Если знаете, что делать, то код вот:

<style>
#ID_БЛОКА a.table-cell-o1b2l3 .content-cover-o1b2l3 .text-o1b2l3 .read-more-o1b2l3 {
width: 145px !important;
margin-left: 390px !important;
bottom: 4px !important;
background-color: #ab6c40 !important;
border: 2px solid #ab6c40 !important;
border-radius: 35px;
color: white !important;
text-shadow: black 2px 2px 3px;
transition: .2s;
}
#ID_БЛОКА a.table-cell-o1b2l3 .content-cover-o1b2l3 .text-o1b2l3 .read-more-o1b2l3:hover {
background-color: white !important;
color: #ab6c40 !important;
text-shadow: none;
}
</style>

Разумеется, конкретные значения свойств нужно подбирать индивидуально. Либо можно не париться и написать нам — сделаем как надо.