Устанавливаем баннер в шапке сайта. Шапки баннер


размеры, шаблоны и хорошие примеры

1.5 миллиарда пользователей в месяц смотрят видео на Youtube и в среднем тратят на это более 1 часа в день. Компании не могут позволить себе игнорировать эту платформу как источник трафика. Если у вашего бизнеса еще нет канала на Youtube, советуем начать его вести.

b_5a90114b1e594.jpg

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

Оформление Youtube канала не играет такую критичную роль, как обложка бизнес-страницы на Facebook. Видео привлекает в разы больше внимание, чем статичная шапка канала. Но она тоже помогает брендировать канал, передать сообщение пользователям и завоевать подписчиков.

Если у вас уже есть отличная обложка для YouTube - вам стоит время от времени вносить разнообразие и обновлять ее. Как делать это легко и где брать идеи – расскажем в этой статье.

Какой размер у YouTube баннера?

Размеры шапки зависят от платформы. Баннер, который вы видите на мониторе, значительно отличается от того, что вы видите на экране мобильного. Вот небольшой гид:

D9Q-CqVv9dmj0WE1khYBvmLN-9Yb209FB1DcH8_I

Текст должен располагаться в центре баннера, тогда он не будет обрезаться на разных устройствах. Если вы хотите добавить на него логотип - разместите его в этой “безопасной области”. Следуйте рекомендациям от Google:

  • Минимальный размер загружаемой картинки: 2560х1440 пикселей
  • Размер “безопасной зоны” для размещения текста и лого: 1546х423 пикселей
  • Максимальная ширина: 2560 пикселей. Края будут обрезаться на разных устройствах.
  • Размер загружаемого файла: макисмум 6 МБ

Что такое хороший YouTube баннер?

Хорошая шапка Youtube канала – это еще один шанс рассказать о вашей компании людям, которые посещают вашу страницу. Поэтому шапка должна быть:

1. Высокого разрешения

2560 x 1440 - это файл большого размера. Некоторые смотрят видео на YouTube по телевизору, так что баннер должен хорошо смотреться и на больших экранах.

2. В стиле бренда

YouTube канал - это возможность продвинуть ваш бренд, но это стоит делать аккуратно. Не лепите на баннер все сразу: лого, слоган, призыв к действию и контактную информацию. Разместите логотип в “безопасной области” чтобы его было видно на всех устройствах. Используйте цвета вашего бренда, шрифты и общий стиль.

3. Релевантная контенту

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

Как создать баннер для Youtube

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

Crello очень удобный инструмент - вам не нужно подбирать размеры и нервничать по поводу отсутствия идей. Вы можете взять за основу готовый дизайн и изменить его так, как вам будет нужно.

7 примеров отличных Youtube баннеров

Давайте рассмотрим хорошие дизайны шапок YouTube от известных брендов.

  1. GoPro

-bGrQ2yXfeXJKW-ekaetpejenlUt0CgAZO2R49Cw

Совет: на изображении должны присутствовать объекты, которые олицетворяют ваш бренд. Если сомневаетесь - добавьте изображения с людьми в контексте использования вашего продукта.

2. TripAdvisor B2B

b_5a9010d89911d.jpg

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

3. Tasty

KJBZTIY0sELq9tnlbMnP47NfjvHGIwGQ_ufg5rCs

Совет: сделайте ваш баннер ярким, добавьте индивидуальности - так он будет отличаться от других.

4. Airbnb

JhhD5EUObmeviObSx1WdQ8CNeLCLwDWce9B-MiLY

Совет: если вы не можете выбрать одно изображение - сделайте коллаж. Разместите в “безопасной области” лого вашей компании или одно небольшое сообщение.

5. Lego

iW9IE9sDv4Xv3tCQ2X4MXjSJSGOFxZoyoR7x9mnn

Совет: Помните о вашей целевой аудитории. Аудитория Lego - дети, и дизайн разрабатывается специально для того, чтобы привлечь их внимание.

6. BigThink

Mwa9rNWNZ5ADMmHDxGyxRdGGP2Jtesx3cUCkl-Aa

Совет: почитайте про базовые советы по дизайну. Вы узнаете как правильно комбинировать цвета, объекты и шрифты.

7. LinkedIn

OL-3wIMYEBtGJYHzl5IllkReyV1VU2EdULbCMg97

Совет: все должно быть просто. На баннере LinkedIn черно-белая картинка, а логотип является частью текста. Несмотря на отсутствие ярких цветов, баннер вызывает эмоции и запоминается.

Даже если у вас нет возможности заказать баннер у дизайнера, вы можете оформить Youtube канал профессионально. Берите пример с больших брендов, ищите идеи среди готовых шаблонов и пробуйте. Удачи!

spark.ru

Устанавливаем баннер в шапке сайта

banner-v-shapke-sajtaДоброго времени суток, дамы и господа! Давно хотел написать этот пост - рекламный баннер в шапке сайта, но всё откладывал на потом. Вот время "потом" наступило. Установив понравившийся шаблон WordPress, возникает необходимость установить в шапку сайта определенный рекламный баннер или какую нибудь картинку. Сделать это можно двумя способами. Первый: это - в настройках шаблона, многие темы представляют такую возможность. Вставляете код в специальное поле, сохраняете  и опля, баннер в шапке сайта. Но, что делать, если в настройках шаблона такой возможности нет?

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

Как установить рекламный баннер в шапку сайта на Wordpress

Для того, чтобы вывести рекламный блок или любой баннер в шапке блога вам необходимо зайти в раздел "Внешний вид" - "Редактор". Откройте файл "Заголовок" (header.php) в вашей теме. Найдите то место, где у вас выводится название блога (или логотип) или описание блога. Далее, вашему приготовленному рекламному коду нужно присвоить определенный класс, для того, чтобы в следующем шаге задать нужное положение баннера в шапке блога:

<div> ваш код здесь </div>

<div> ваш код здесь </div>

Как видите у меня задан класс ad1, вы можете указать любой, например так: banner или ещё как то в этом роде. Всю эту конструкцию кода вставляем чуть ниже найденной строчки (смотрите выше):

kod-banneraКод баннера после описания блога

Как видите код баннера я вставил после описания этого моего блога (слоган). Обновите файл. У вас теперь в шапке сайта появится баннер (посередине), но ему нужно указать место, где он должен находиться, то есть справа заголовка и описания блога. Для этого нам нужно использовать стили CSS. Откройте файл "Таблица стилей" (style.css) и в самом конце добавьте небольшой код CSS, где будут заданны координаты вашего баннера:

.ad1 { padding: 30px 0 0 550px; }

.ad1 {

 

padding: 30px 0 0 550px;

 

}

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

.ad1– присвоенный класс баннера;

padding – свойство позволяющее задать величину поля для всех сторон элемента сразу;

30px – отступ от верхнего края;

0 – отступ от нижнего края;

0 – величина отступа от правого края;

550px – величина отступа от левого края.

Можно попробовать такой стиль (если у вас вдруг не получиться):

.ad1 {float: right;margin: 10px 10px 0px 0px;}

.ad1 {float: right;margin: 10px 10px 0px 0px;}

Установите нужные границы и получите красивое расположение баннера в шапке блога:

bannerКрасивое расположение баннера в шапке блога

Вот вроде и всё. Если чего то не получается, спрашивайте, помогу. А я с вами прощаюсь. Всего доброго. Удачи.

С уважением, Сергей - блог WordPress mania

Понравилась статья? Поделись с друзьями!

wordpressmania.ru

Баннер в шапке сайта | Создание сайта

 

Как вставить баннер в шапку.

 

Иногда в шапке сайта есть много свободного места, которое можно использовать с пользой для себя. Можно сделать в шапке рекламное место. Вставив в то место баннер, можно и заработать на нём. Как это сделать... Для новичков объясню подробно. Рассмотрим пример установки баннера на этом сайте.

Код баннера выглядит так:

<a href="http://www.2domains.ru" ><img src="http://www.2domains.ru/images/ban/468_60.gif" alt="регистрация доменов" border="1" /></a>

Этот код надо немного переделать. Код, который необходимо вставить в шапку, в общем выглядит так:

<a href="ССЫЛКА НА МЕСТО ПЕРЕХОДА"><img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ БАННЕРА"></a>

Выделенная часть - это и есть то, что надо добавить в код баннера.  Рассмотрим, что в этом дополнении находится и и для чего это надо.

  • position:absolute - это говорит о том, что расположение баннера прозрачное
  • top:50px - это расположение баннера относительно верхнего края шапки сайта. При увеличении или уменьшении этого значения, баннер будет передвигаться вниз или вверх.
  • right:300px - это расположение баннера относительно правого края шапки сайта. Изменяя этот размер, соответственно баннер передвигается влево или вправо
  • border: 1px - это величина обводки баннера. Если Вам нужна обводка побольше, то увеличьте значение, а если обводка не нужна, то просто поставьте ноль.
  • solid #ddad22 - выполняет функцию цвета обводки. Изменяя цветовой код, можно менять цвет обводки баннера.

Теперь можно написать изменённый код баннера, который мы хотим вставить. Он будет выглядеть так:

<a href="http://www.2domains.ru"><img style:"position:absolute;top:50px;right:300px; border: 1px solid #ddad22;" src="http://www.2domains.ru/images/ban/468_60.gif" alt="регистрация доменов" border="1"></a>

Теперь будем вставлять этот код в шапку сайта. Для этого надо пройти по пути: панель инструментов --> редактор --> заголовок (header.php). Теперь надо найти место, куда вставить баннер. Открыв файл header.php, мы видим кучу кракозябров. Куда вставлять? Обычно пишут, что надо вставлять в районе тегов с названием сайта. Надо сделать поправку на то, что почти каждый шаблон wordpress имеет свою особенность. Я в своём шаблоне таких кракозябров не нашел. Для эксперимента, я вставил этот код перед тегом </head>. Сработало! Изменяя вышеописанные величины кода, я добился нужного расположения баннера в шапке. Чего и вам желаю!!! Не бойтесь экспериментов!

Хочу внести в статью немного дополнения. Столкнулся с таким случаем, что поменяв свой шаблон сайта на другой, я не смог вставить баннер в шапку сайта вышеизложенным способом. Причиной оказалось, что шапка на новом шаблоне была в виде целой картинки. Тут пришлось покопаться в интернете. Решение было найдено (простое), хотя объяснения были очень замудрённые!

Если у Вас шаблон сайта имеет шапку в виде цельной картинки, то изменения в вышеописанном коде будут минимальные. Я не буду описывать что, почему и для чего, но проблема решилась заменой в коде атрибута position:absolute на position:relative. Теперь код у меня стал выглядеть так:

<a href="http://www.2domains.ru" target="_blank"><img src="http://www.2domains.ru/images/ban/468_60.gif" alt="регистрация доменов" border="1" /></a>

Никак не мог выставить баннер на своё место. Обратите внимание на атрибут top, выделенный зелёным цветом. Только при этом отрицательном значении баннер встал на своё место. Так что при установке пробуйте разные значения top.

P.S. У многих, после составления кода для своего баннера, ничего не работает. Причина этого очень простая. Если Вы копируете какие-то части кода с сайтов, то особое внимание обращайте на форму кавычек!!! Они могут отличаться. Кавычки в скопированном коде имеют не такую форму как в визуальном редакторе сайта. Если установленный код не работает, то в первую очередь смотрите на кавычки в коде и если они отличаются формой, то удалите и поставьте новые с редактора.

mehelps.ru


Смотрите также