Выберите город
Ваш город
RU
Как сделать профессиональный баннер для сайта за 5 минут без дизайнера на INTEC: Universe

Как сделать профессиональный баннер для сайта за 5 минут без дизайнера на INTEC: Universe

01.09.2020
#Готовые сайты
#Universe
#UniverseLite
#UniverseSite
#Дизайн сайтов

Коллеги! С вами Ярослав Голуб, руководитель интернет-агентства INTEC. В этой статье я расскажу, как сделать крутой баннер для сайта, который будет точно соответствовать корпоративному стилю вашей компании. При этом не придется вникать в тонкости веб-дизайна, или разбираться в том, как работает та или иная графическая программа для создания баннеров. Все, что вам нужно – штатные средства «Битрикса» и INTEC:Universe.

Как это работает: недавно мы выпустили обновление, которое позволяет добавлять дополнительное изображение для баннера на главной. Рассказали об этом тут.

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

Итак, мы выбрали картинку цеха 2560 × 1707:

zavod.jpeg

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

tilesheet24_8004like 1.png

Теперь переходим в админку, Рабочий стол-Контент-Контент.

111111.png

Заходим в инфоблок «Баннеры», находим Элементы:

2222222.png

Чтобы создать новый баннер, необходимо нажать кнопку «Добавить элемент».

33333.png

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

44444.png

Теперь переходим к добавлению дополнительного изображения:

55555555.png

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

6666666.png

Переходим во вкладку «Анонс» для загрузки фонового изображения.

77777.png

Теперь сохраняем изменения и смотрим, что получилось:

full-hd.png

Вот так баннер выглядит на мобильных устройствах:

mobile.png

Как видите, дополнительное изображение исчезло, осталась только самая важная информация.

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

стоматология.jpg

Помощь в подготовке к ЕГЭ:

jenshina.png

Баннер для турфирмы:

семья.jpg

Баннер ремонт квартир:

ремонт.jpg

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

Напоминаю, что наша линейка включает готовые сайты под любую задачу:

Посмотреть демо-сайт

#Готовые сайты
#Universe
#UniverseLite
#UniverseSite
#Дизайн сайтов
(Голосов: 2, рейтинг: 3.44)
Презентация интернет-агентства INTEC
Семинар "Digital-трансформация маркетинга и продаж"
Трофименко Александр - Руководитель компании "Тех-Ас"
Игорь Родимов - Директор автосервиса "Мастер 12 Вольт"
загрузка карты...
загрузка карты...
загрузка карты...
загрузка карты...