Большинство партнёров нашей партнёрской сети, работающих в разделе Микс-Товары с контекстными объявлениями, не уделяют должного внимания оформлению внешнего вида рекламных блоков, просто размещая их как есть, а ведь хорошо оформленные объявления могут существенно увеличить доход!
Возможности по настройке внешнего вида рекламных блоков контекстного товара практически ничем не ограничены, в отличие от той же контекстной рекламы, настройки которой весьма скудные и ограничены выбором нужного цвета шрифтов, заднего фона и бордюра. Этими возможностями нужно пользоваться, тем более что ничего сложного в этом нет, просто проявите немного фантазии и оформите рекламные материалы на сайтах так, что бы они лаконично вписывались в дизайн и были более заметными.
В настройках рекламных блоков «Контекстный товар» есть вот такой блок, где можно указать нужные стили или вовсе сформировать блок по своим правилам.
В левой части мы видим стандартный шаблон одной ячейки блока, где в определённых местах указаны теги, которые отвечают за вывод того или иного элемента рекламного блока:
- <%PICT%> – Картинка
- <%NAME%> – Название товара
- <%DESC%> – Описание товара
- <%PRICE%> – Цена товара
- <%MERCH%> – Адрес интернет магазина
Что бы было проще понять, как выглядит код блока целиком, я приведу его ниже:
<div id="mixkt_xxxxxxxxxx"> <table id="xxxxxxxxxx_xxx" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <!-- Код настраеваемый в интерфейсе системы --> </td> </tr> <tr> <td> <!-- Код настраеваемый в интерфейсе системы --> </td> </tr> <tr> <td> <!-- Код настраеваемый в интерфейсе системы --> </td> </tr> </tbody> </table> </div> |
В тех местах кода, где вставлен комментарий и выводятся блоки, настраиваемые нами в интерфейсе системы. Т.е. если оставить код по умолчанию, то вместо комментариев появится следующий код:
<table cellpadding="5"> <tr> <td width="100" align="center">< %PICT%></td> <td valign="top">< %NAME%> - < %PRICE%><br /><br />< %DESC%><br />< %MERCH%></td> </tr> </table> |
где вместо всех технических тегов будут подставлены соответствующие элементы в виде картинок, ссылок или текста.
Есть два способа настроить оригинальное оформление блоков.
Первый, указать в «Настройках специальных классов» (на первой картинке справа) классы для каждого элемента и прописать их в CSS, при этом оставить код из правой части на картинке без изменения. Этот способ достаточно простой и банальный, поэтому не позволяет развернуться на полную катушку.
Второй, и более гибкий и функциональный способ касается только основной части кода рекламного блока, где мы сразу и укажем нужные классы для разных элементов.
А сейчас я покажу простой пример того, как можно эффективно оформить рекламный блок для сайта с фоном отличного от белого, ибо абсолютное большинство товарных предложений идут с картинками на белом фоне, а фон сайтов далеко не всегда белый.
Первым делом нужно определиться с дизайном, размерами и структурой рекламных блоков, которые конечно же зависят от дизайна того сайта, где они будут размещаться. Я не буду брать какой-то конкретный сайт, а просто возьму данные с потолка.
Предположим, что у нас есть сайт о дайвинге в морских тонах, на котором есть свободное место под рекламный блок по ширине 240 пикселей. В рекламном блоке я буду отображать только три обязательных элемента и картинку, исключу только описание, ибо для вертикального блока такой небольшой ширины оно не совсем уместно.
Шаг первый – Дизайн рекламного блока
Это, пожалуй, самый сложный и проблематичный шаг для большинства наших партнёров, ведь сделать хороший дизайн, который будет работать на вас не так просто, но с другой стороны, если сесть и подумать, то могут родиться достаточно интересные мысли.
Вот что родилось буквально около часа назад:
С дизайном определились, теперь нужно его сверстать, что порой гораздо сложнее чем нарисовать дизайн.
Шаг второй – Вёрстка рекламного блока
Я покажу пример, как подобные вещи верстаются на DIV`ах, которые уже давно потеснили не совсем удобную табличную вёрстку. К сожалению, в рамках этого поста я не смогу научить вас вёрстке, поэтому просто покажу, как всё оформляется в коде и как в итоге выглядит в уже свёрстанном виде.
Сначала выбираем нужный товарный блок в своём интерфейсе и в поле «Код HTML» заменяем стандартный код на следующий:
<div class="mix-block"> < %PICT%> <div class="mm-right"> <div class="mm-name">< %NAME%></div> <div class="mm-price"> <div class="l"></div> <div class="c">< %PRICE%></div> <div class="r"></div> <div style="clear:both;"></div> </div> <div class="mm-merch">< %MERCH%></div> </div> <div style="clear:both;"></div> </div> |
Сохраняем и переходим к описанию стилей, которые можно либо разместить в отдельном файле и подключить его в интерфейсе системе на первом шаге в поле «Путь», либо просто добавить их к уже имеющемуся на сайте CSS файлу.
Стили выглядят следующим образом:
div.mix-block{ background:#fff; width:240px; position:relative; font-family:Arial, Helvetica, sans-serif; margin-bottom:10px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=95); -moz-opacity:0.95; -khtml-opacity:0.95; opacity:0.95; } div.mix-block img{ width:70px; height:auto; margin:10px 0px 10px 10px; text-align:center; float:left; position:relative; display:block; } div.mm-right{ float:right; width:140px; margin-right:10px; } div.mm-name a{ display:block; color:#005073; font-size:15px; line-height:18px; text-decoration:none; padding:8px 0px 12px 0px; } div.mm-name a:hover, div.mm-merch a:hover{ text-decoration:underline; } div.l{ width:2px; height:30px; background:url(l.jpg) no-repeat; float:left; } div.c{ background:#ffc629; float:left; color:#fff; font-size:14px; font-weight:bold; padding:7px 4px 7px 9px; } div.r{ width:18px; height:30px; background:url(r.jpg) no-repeat; float:left; } div.mm-merch a{ display:block; font-size:11px; color:#999; text-decoration:none; padding:7px 0px 7px 0px; } |
Код для тех кто уже имел опыт в вёрстке не представить ничего сложного, тем же кто не этим ни разу не занимался, советую немного почитать хотя бы о тех свойствах, которые используются в моём примере. Информации по этому поводу в сети предостаточно.
А вот как в итоге выглядит уже свёрстанный рекламный блок, с реальными рекламными предложениями:
Для оформления денного рекламного блока я использовал в основном только возможности CSS, а так же пару маленьких картинок для ценника на объявлениях, что бы придать объявлению слегка необычный вид. Что бы объявление более хорошо сочеталось с фоном, я добавил ему немного прозрачности.
Файл стилей и 2 маленькие картинки вы можете скачать по этой ссылке.
При оформлении рекламных блоков соблюдайте основные правила, которые требуют обязательного наличия у каждого объявления: названия, цены и ссылки на сайт рекламодателя. Картинки и описания не являются обязательными и при желании их всегда можно убрать из объявлений. Все данные рекламного объявления должны хорошо читаться и если этим пренебрегать, то к вам могут быть применены санкции.
Если вы не умеете и не хотите учиться делать подобные вещи сами или у вас попросту нет на это времени, то данную услугу можно заказать через раздел бонусов, называется она там «Оригинальное оформление блоков «Контекстный товар»».
Будем рады услышать ваши объективные замечания и комментарии.
Очень полезно! Спасибо, Саша!
Супер! Большое спасибо, сделала за 5 минут, блок стал выглядеть намного привлекательнее.
Никогда бы не додумался оформить рекламные блоки так красиво, даже в мыслях такого никогда не было, теперь буду знать в каком направлении работать. Кузен, буду тебе весьма благодарен, если расскажешь о том, как можно красиво оформить блоки Где Купить, я видел на твоих сайтах они очень симпатично смотрятся, но в интерфейсе я на нашёл, где можно изменить оформление!
Про оформление ГК я обязательно тоже напишу подробные инструкции
"С дизайном определились, теперь нужно его сверстать, что порой гораздо сложнее чем нарисовать дизайн. "
Вот с этим не согласен =)
Для рисования нужны особые навыки, а вот код писать могут все. Мне например, гораздо сложнее что-то создать в графическом редакторе.
Ну а все остальное, как всегда на высоте!
Ни че не понятно, ковырял, ковырял, в итоге ни че интересного не выковырял.
О! Спасибо большое! Скачала и поставила себе! Смотрится нааааамного лучше, чем без настроек! Надеюсь повлияет на CTR :))))))))
Спасибо, очень неплохо. Но, как ограничить количество символов названия товара? Название товара, хотелось бы вообще сделать сверху картинки а не справа. И как изменить фон между блоками?
Как понимаю, на демонстрации картинки с прозрачностью просто показаны, а в реальных условиях с белыми приходиться работать?
Также ярлычек, видимо, придется в png переводить, так как привязка к белому цвету идет.
А в общем, спасибо за идею оформления :)
Я еще ожидаю рассмотрения площадки, но уже вынужден штудировать учебник по CSS, чтобы, забегая вперед, настроить рекламные блоки.
В других партнерских программах все намного проще со стилями.
Не заработав еще ни копейки, придется привлекать программиста для успешной верстки.
Впервые с этим сталкиваюсь!
Дмитрий Николаевич, если у вас будут вопросы по настройке, напишите в поддержку, обязательно поможем.
Написала в поддержку с просьбой помочь настроить внешний вид блока. Ответили, что этим не занимаются и прислали в этот раздел учиться(