Общая информация

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

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

Имеет смысл тестировать различные сочетания новостных и товарных блоков в пределах одной страницы, поскольку это позволит разнообразить объявления и иногда может быть выгоднее использования блоков только одного типа.

ОЧЕНЬ ВАЖНО включать и настраивать отдельную конфигурацию блоков для мобильных устройств (кнопка слева вверху в конструкторе).

Без этого блоки на телефонах и планшетах будут отображаться так же, как и на десктопе, что в 99% случаев приводит к проблемам с внешним видом и потерям в CTR. В плане формата, для мобильных лучше делать вертикальные блоки на 4-7 объявлений (при размещении после статьи), в зависимости от свободного места и ваших предпочтений.

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

Ну и не стоит забывать, что количество ≠ качество и 2-3 правильно настроенных блока, размещенные в хороших местах, принесут больше дохода и будут меньше загружать страницу, чем попытка забить рекламой все свободное пространство на сайте (да, и такое бывает). Результатов такой подход все равно не принесет благодаря эффекту баннерной слепоты.

Конструктор блоков

В этом разделе мы разберем доступные настройки при создании рекламного блока и научимся создавать наиболее профитные и универсальные форматы. Не забываем о важной, удобной и полезной фиче Предпросмотр в нашем конструкторе — проще один раз увидеть, что делает тот или иной пункт настроек в "безопасном" режиме.

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

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

В большинстве случаев на этой вкладке нас интересуют только пункты Объявлений в строке и Число строк с объявленями. Положение текст под картинкой наиболее привычно и наглядно, а так же блоки подобного формата удобно группировать и устанавливать в любом месте сайта. При размещении блоков после основного контента сайта (после статьи, под плеером и т.д.), оптимальным вариантом будет сделать блок в 2-3 строки с 3-4 объявленями в каждой. Для создания вертикального блока в пункте Объявлений в строке выбираем 1, а в пункте Число строк с объявленями устанавливаем нужное количество. К слову, размер блока автоматически масштабируется в зависимости от количества объявлений в нем и от свободного места в родительском блоке (если только размеры не заданы вручную, что нежелательно), так что волноваться на этот счет не стоит, просто выбираем нужную размерность исходя из пропорций между желаемым количеством объявлений и приятным внешним видом.

В пункте Цветовые схемы можно найти несколько заготовок с простыми цветовыми схемами. Подходит если вы быстро потестировать блоки без заморочек с настройками. В большинстве случаев стандартные белый фон и черный текст подойдут 90% сайтов, для оставшихся 10% вы скорее всего захотите настроить цветовую схему блока более детально, что можно будет сделать на других вкладках конструктора.

При включении пункта Добавлять рекламный маркер в правом верхнем углу блока появится небольшой значок i, при наведении превращающийся в строку oblivki-реклама и при клике ведущий на наш сайт oblivki.biz

Вкладка "Блок объявлений"

На данной вкладке задаются настройки для ВСЕГО рекламного блока. Если, к примеру, вам требуется изменить отступы между отдельными объявлениями внутри блока, сделать это можно на вкладке Объявление.

Пункт Максимальная ширина, как уже говорилось выше, стоит трогать только в очень редких случаях, хорошо понимая зачем оно вам надо. Как понятно из названия, здесь можно жестко задать, какой размер по горизонтали будет занимать блок объявлений, игнорируя размерность родительского блока. При значении авто блок пропорционально масштабируется и занимает столько пространства, сколько ему доступно в отведенном месте на странице.

Настройка Отступы внутри блока задает отступ от внешней границы начала блока до объявлений внутри него. Понять будет проще если покрутить настройки самому и кликнуть на Предпросмотр в конструкторе.

В разделе Рамка можно включить обрамление для всего блока объявлений. Иногда такой вариант оформления может привести к хорошим результатам, все зависит от дизайна сайта и места расположения блока. При использовании цвета элементов сайта для обрамления, можно добиться эффекта "нативности", при этом ненавязчиво выделяя блок объявлений для взгляда, в случаче если он визуально забивается другими элементами сайта.

С настройкой Фон возможны два варианта: если основной цвет фона вашего сайта — белый, либо белый с ним хорошо сочетается, то менять здесь ничего не нужно. Если же фон сайта отличен от белого (особенно если в нем преобладают темные тона), то для нормального внешнего вида блоков стоит использовать такой же цвет, как на сайте, и сделать это нужно как на текущей вкладке, так и на вкладке Объявление. И не забудьте поменять цвет текста объявлений на более светлый!

Воспользуюсь удобным случаем чтобы заметить, что цвета в нашем конструкторе можно задавать как в формате шестнадцатеричных значений (#012345, #111, #fff), так и в RGB/RGBA, со всеми вытекающими — задать прозрачный цвет можно с помощью rgba(0, 0, 0, 0), полупрозрачный — rgba(0, 0, 0, 0.5) и т.д.

А пункт Фоновая картинка на данный момент не работает :(

Вкладка "Объявление"

Все то же самое (почти), что и на предыдущей вкладке, только применительно к отдельным объявлениям внутри блока. Здесь мы впервые встречаем палец рядом с различными настройками. Включенный палец задает настройки для элемента при наведении на него курсором.

Пункт Внутренний отступ изменяет расстояние между объявлениями.

Пунктов Рамка и Фон мы уже касались, а вот Фоновая картинка все еще не работает.

Последний пункт на этой вкладке — Масштабирование объявления по наведению. В некоторых случаях может быть полезно для привлечения внимания к рекламным блокам, но это больше дело вкуса и предпочтений. Негативной статистики на практике с этим пунктом замечено не было.

Вкладка "Картинка"

Формат изображения (соотношение сторон)

Как показывает практика, для блоков вида "текст под фото" лучше подходят форматы 4:3 и 1:1. Формат 16:9 больше актуален для горизонтальных блоков.

Пункты Ширина картинки относительно ширины объявления и Максимальная ширина картинки так же актуальны только для горизонтальных блоков. Что делают настройки, пожалуй, и так понятно из их названия. Трогать только с четким пониманием такой необходимости, т.к. по-умолчанию в объявлении отведено свободное место под текст и под картинку, и если нарушить пропорции, при больших объемах текста в некоторых объявлениях может слететь верстка и выглядеть блоки будут так себе.

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

Рамка и Масштабирование картинки по наведению — тут все понятно: то же самое, что и на предыдущих вкладках, только отдельно для картинки.

Вкладка "Текст"

Настройки на данной вкладке будут разделены на две части: Заголовок и описание и Мотивирующий текст.
Начнем с первой.

Шрифт лучше оставлять "Как на странице", для последовательности в стилистике. Дело вкуса, пожалуй, но из предложенных шрифтов лучше всего себя показывает Arial — наиболее читабельный и чистый, даже при небольших размерах.

Размер шрифта заголовка и Размер шрифта описания лучше задавать одинаковый. Для десктопа это значения 15-16px, для мобильных устройств — 17-18px.

Такая же история с настройками Стили начертания заголовка и Стили начертания описания — выбираем одинаковые стили. И оба текста лучше сделать жирными — статистически у таких блоков показатели лучше.

Цвет текста заголовка и Цвет текста описания для большинства сайтов оптимальным вариантом будет сделать черными (#111) без изменений при наведении курсора. Если чувствуете в себе желание экспериментировать и цветовая схема сайта позволяет, можно попробовать что-то оригинальное. Главное — не переборщить. Серый (и другие блеклые цвета) плохо читаются.

В пункте Горизонтальное выравнивание текста можно выбрать два варианта: по левому краю и по центру. При выравнивании по центру объявления (особенно в блоках на несколько строк) могут выглядеть слишком симметрично, но, как и со многим другим, тут больше дело вкуса. Стоит отталкаваться от дизайна сайта и расположения блока — пробуйте разные варианты.

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

Переходим к разделу Мотивирующий текст.

Галочка Добавлять в объявления, как понятно из названия, определяет, будут ли блоки отображаться с мотивирующим текстом или нет.

На всякий случай: мотивирующий текст — это подписи "Читать дальше", "Смотреть", "Подробнее" под описанием.

И в пункте Текст мы как раз можем выбрать один из этих вариантов.

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

Отступы лучше не трогать, по-умолчанию они настроены оптимально. Имеет смысл что-то менять в данном пункте только при нестандартном внешнем виде блоков.

Шрифт и Размер шрифта выбираем такие же, как и для остального текста в объявлении.

В Стилях начертания стоит включить подчеркивание при наведении, для добавления интерактивности объявлению и соблюдения привычного дизайн кода ссылка-подчеркивается-при-наведении. В остальном — повторяем стили текста объявления.

А вот Цвет текста лучше задать отличный от основного. Хорошей практикой может быть использование цветов из палитры сайта.

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

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

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





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




Основная сложность при создании такого блока состоит в том, что базовых настроек в конструкторе недостаточно для того, чтобы придать подложке текста такой же вид, как на скриншоте. Если вы хотите установить подобный блок у себя на сайте, напишите нам в тикеты или 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-код страницы ниже места где добавлен сам блок.





Хороший пример того, как можно использовать цвета из палитры сайта для создания более органичного дизайна. Горизонтальные блоки используются нечасто, но иногда один блок такого формата идеально подходит для размещения в тех местах, где с блоками других форматов не удается добиться оптимального вида. В данном блоке так же используются дополнительные 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>
			

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