В этом разделе мы посмотрим на наиболее универсальные и рабочие варианты блоков, с перечислением примененных настроек. Внимание: размер блока на картинке не будет соответствовать такому же блоку, размещенному на странице, поскольку блок пропорционально масштабируется, подстраиваясь под свободное место.
- Положение текста: текст под картинкой
- Объявлений в строке: 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>
Разумеется, конкретные значения свойств нужно подбирать индивидуально. Либо можно не париться и написать нам — сделаем как надо.