Микс-Товары: Оформление рекламных блоков

25 Мар 2011 в 02:00

Большинство партнёров нашей партнёрской сети, работающих в разделе Микс-Товары с контекстными объявлениями, не уделяют должного внимания оформлению внешнего вида рекламных блоков, просто размещая их как есть, а ведь хорошо оформленные объявления могут существенно увеличить доход!

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

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

В левой части мы видим стандартный шаблон одной ячейки блока, где в определённых местах указаны теги, которые отвечают за вывод того или иного элемента рекламного блока:

  1. <%PICT%> – Картинка
  2. <%NAME%> – Название товара
  3. <%DESC%> – Описание товара
  4. <%PRICE%> – Цена товара
  5. <%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 маленькие картинки вы можете скачать по этой ссылке.

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

Если вы не умеете и не хотите учиться делать подобные вещи сами или у вас попросту нет на это времени, то данную услугу можно заказать через раздел бонусов, называется она там «Оригинальное оформление блоков «Контекстный товар»».

Будем рады услышать ваши объективные замечания и комментарии.

Александр Кузнецов
Специалист по работе с ключевыми партнерами Партнерской сети Миксмаркет
Комментарии: 12
  1. Iceman:

    Очень полезно! Спасибо, Саша!

  2. Виктория:

    Супер! Большое спасибо, сделала за 5 минут, блок стал выглядеть намного привлекательнее.

  3. Dori:

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

  4. Антон:

    "С дизайном определились, теперь нужно его сверстать, что порой гораздо сложнее чем нарисовать дизайн. "

    Вот с этим не согласен =)

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

    Ну а все остальное, как всегда на высоте!

  5. Саша:

    Ни че не понятно, ковырял, ковырял, в итоге ни че интересного не выковырял.

  6. Ольга:

    О! Спасибо большое! Скачала и поставила себе! Смотрится нааааамного лучше, чем без настроек! Надеюсь повлияет на CTR :))))))))

  7. Ваньчик:

    Спасибо, очень неплохо. Но, как ограничить количество символов названия товара? Название товара, хотелось бы вообще сделать сверху картинки а не справа. И как изменить фон между блоками?

  8. Slam:

    Как понимаю, на демонстрации картинки с прозрачностью просто показаны, а в реальных условиях с белыми приходиться работать?

    Также ярлычек, видимо, придется в png переводить, так как привязка к белому цвету идет.

    А в общем, спасибо за идею оформления :)

  9. Дмитрий Николаевич:

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

    В других партнерских программах все намного проще со стилями.

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

    Впервые с этим сталкиваюсь!

    • Дарья Орлова:

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

      • Светлана:

        Написала в поддержку с просьбой помочь настроить внешний вид блока. Ответили, что этим не занимаются и прислали в этот раздел учиться(

Оставить комментарий