Як вставити банер в блог. Покрокова інструкція
Одна з найбільш затребуваних і одночасно утопічних завдань в e-commerce - продавати більше і якомога безболісніше для покупця. Людина повинна думати, що це він хоче купити, а не йому підсовують допродажу грамотні руки маркетолога. Реклама - дуже ефективний спосіб, але і вельми дратівливий. Її немислиму кількість і спроби кожного рекламодавця виділити своє оголошення привели до таких явищ, як банерна сліпота, коли відвідувач сайту підсвідомо ігнорує миготливі картинки з боків. На щастя, і advert-розробки не стоять на місці, тому зараз ми маємо нативную рекламу, органічно вписується в середу розміщення, і виконує ту саму задачу інтернет-комерції. Про неї і поговоримо. Хороша вона і для тих, хто хоче ненав'язливо повідомити відвідувачам про своїх акційні пропозиції, і для тих, хто намагається заробити на сайті, розміщуючи чужу рекламу. Бачили, як легко лягають оголошення в стрічці Фейсбуку? Ось і ми подумали, що користувачам OkayCMS буде корисно додати в свій блог пару природних рекламних блоків.
Як додати банери в блог з рівномірним проміжком
Наприклад, Ви хочете, щоб реклама проскакувала в списку статей через певну кількість позицій:
Розглянемо варіанти вставки блоку для банера через 2, 4 і 8 новин, тому що в стандартній схемі блогу на дефолтних шаблоні Окаі ряд складається з 4 позицій.
Дотримуйтесь нашої інструкції, і Ви впораєтеся з цим самостійно. А якщо раптом не зможете, техпідтримка надасть допомогу.
Для того щоб зробити блоки з рекламою в блозі потрібно:
- Знайти файл design / okay_shop / html / blog.tpl.
У OkayCMS 2.0 і вище в нього можна потрапити з адмінпанелі таким шляхом: в бічному меню зліва вибираємо «Дизайн» → файли шаблонів → blog.tpl
У ранніх версіях також потрапляємо в нього з адмінки: шаблони → вкладка «Шаблони» вгорі → blog.tpl
- У файл потрібно внести зміни, виділені коментарями.
{* Advertising_in_posts *} ......... .. {* / advertising_in_posts *}- вставити блок через кожні 2 статті:
{* The blog page template *}
{* The canonical address of the page *}
{If $ smarty.get.type_post == "blog"}
<H1 class = "h1"> <span data-page = "">
<Div class = "blog clearfix blogWrap">
{Foreach $ posts as $ post}
{* Advertising_in_posts *}
{$ Iter = $ post @ iteration}
{* / Advertising_in_posts *}
<Div class = "blog_item no_padding col-sm-6 col-lg-4 {* advertising_in_posts *} col-xl-6 blogWrap__item {* / advertising_in_posts *}">
{* The post image *}
<a class="blog_image" href="/ ">
{If $ post-> image}
<Img class = "blog_img" src = "{* advertising_in_posts *} {$ post-> image | resize: 600: 600: false: $ config-> resized_blog_dir} {* / advertising_in_posts *}" alt = " "title ="
<Div class = "h5">
<a href="/ "data-post =" ">
<Div class = "blog_date"> <span>
{If $ post-> annotation}
<Div class = "blog_annotation">
{If ($ iter% 2 == 0)}
<Div class = "adverBanner"> </ div>
{/ If}
{* / Advertising_in_posts *}
{/ Foreach}
</ Div>
{* Pagination *}
{Include file = 'pagination.tpl'}- додати блок через кожні 4 статті:
{* The blog page template *}
{* The canonical address of the page *}
{If $ smarty.get.type_post == "blog"}
<H1 class = "h1"> <span data-page = "">
<Div class = "blog clearfix blogWrap">
{Foreach $ posts as $ post}
{* Advertising_in_posts *}
{$ Iter = $ post @ iteration}
{* / Advertising_in_posts *}
<Div class = "blog_item no_padding col-sm-6 col-lg-4 col-xl-3 {* advertising_in_posts *} blogWrap__item {* / advertising_in_posts *}">
{* The post image *}
<a class="blog_image" href="/ ">
{If $ post-> image}
<Img class = "blog_img" src = "{$ post-> image | resize: 360: 360: false: $ config-> resized_blog_dir}" alt = "" title = "
<Div class = "h5">
<a href="/ "data-post =" ">
<Div class = "blog_date"> <span>
{If $ post-> annotation}
<Div class = "blog_annotation">
{If ($ iter% 4 == 0)}
<Div class = "adverBanner"> </ div>
{/ If}
{* / Advertising_in_posts *}
{/ Foreach}
</ Div>
{* Pagination *}
{Include file = 'pagination.tpl'}- вставити блок після 8 статей:
{* The blog page template *}
{* The canonical address of the page *}
{If $ smarty.get.type_post == "blog"}
<H1 class = "h1"> <span data-page = "">
<Div class = "blog clearfix blogWrap">
{Foreach $ posts as $ post}
{* Advertising_in_posts *}
{$ Iter = $ post @ iteration}
{* / Advertising_in_posts *}
<Div class = "blog_item no_padding col-sm-6 col-lg-4 col-xl-3 {* advertising_in_posts *} blogWrap__item {* / advertising_in_posts *}">
{* The post image *}
<a class="blog_image" href="/ ">
{If $ post-> image}
<Img class = "blog_img" src = "{$ post-> image | resize: 360: 360: false: $ config-> resized_blog_dir}" alt = "" title = "
<Div class = "h5">
<a href="/ "data-post =" ">
<Div class = "blog_date"> <span>
{If $ post-> annotation}
<Div class = "blog_annotation">
{If ($ iter% 8 == 0)}
<Div class = "adverBanner"> </ div>
{/ If}
{* / Advertising_in_posts *}
{/ Foreach}
</ Div>
{* Pagination *}
{Include file = 'pagination.tpl'}У структурі сторінки блогу з'явилися банери. Тепер потрібно підправити відображення, для цього переходимо до наступного кроку.
- У тому ж файлі design / okay_shop / html / blog.tpl дописати в кінець документа:
/ * Advertising_in_posts * /
.blogWrap
{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.adverBanner {
background-color: yellow;
float: left;
height: 200px;
width: 100%;
}
@media (max-width: 1199px)
{
.h1 {
border-bottom: none;
}
.blog_item {
box-shadow: none;
}
.blogWrap
{
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.blogWrap__item
{
width: 40%! important;
margin: 5px 10px;
border: 1px solid # e1e8ed;
}
.adverBanner
{
width: calc (80% + 20px);
margin: 10px 0;
}
}
@media (max-width: 767px)
{
.blogWrap__item
{
width: 100%! important;
}
.adverBanner
{
width: calc (100% - 20px);
margin: 10px 0;
}
}
/ * / Advertising_in_posts * /
Зверніть увагу, що дані зміни будуть актуальні тільки для стандартного шаблону, в інших випадках при спробі внести ці зміни, може серйозно постраждати верстка, або файли .tpl і .css просто будуть іншими і позбавлять Вас можливості ці правки додати. Тому, не маючи грунтовних знань у front-end, не намагайтеся застосовувати статтю на практиці. В даному ж прикладі ми постаралися врахувати порушення, які можуть відбуватися в верстці. Все ж, якщо Ви помітите помилки, просимо повідомити нам.
А ті, хто розбирається добре і відчуває необхідність змінити кількість новин між рекламними вставками, можуть скористатися таким рецептом:
в конструкції $ iter% 2 == 0 цифру 2 замінити на таку, скільки статей потрібно пропустити перед банером.
Користуйтеся таким рішенням, тільки якщо зможете усунути наслідок поплив верстки.
Коли все зроблено правильно, Ви побачите приблизно наступне:
рекламний блок після 4-х статей (ПК)
рекламний блок після 2-х статей (ПК)
рекламний блок після статей (планшет + мобільний)
Зробити банер швидко, не володіючи професійними навичками дизайнера, можна за допомогою онлайн-редакторів, наприклад, в Canva . Основний функціонал і велика частина зображень безкоштовні: знайдіть відповідне по тематиці, додайте кнопку або текст і можете викладати на сайт або використовувати для реклами на зовнішніх ресурсах.