«

»

Ноя 27

Видеофон для одностраничника. Просто сделать самому

Видеофон в Adobe MuseЗдравствуйте уважаемые читатели! С вами Сергей Бурдин.

Видео фон для одностраничника – это не только красиво, но это высокая конверсия.

Важную роль в интернет бизнесе играют «одностраничники». Это страницы подписки, страницы приземления или продающие страницы.

С помощью одностраничных сайтов выстраиваются воронки продаж, поэтому эти странички должны привлекать вашего посетителя.

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

У Сергея Панферова, есть бесплатный курс, с шаблонами по созданию видеофона для вашей странички. «Бесплатный шаблон видео-сайта с обучающими материалами»

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

Я тоже сначала «пошел этим путем», но меня в этом способе установки видеофона не устроило, то, что в код, нужно вставить ID видео с YouTube (видео которое используется для фона).

Если с кодом все понятно (все есть в уроке), то вот, то что ID с YouTube, это плохо. Зависимость от чужих ресурсов, всегда плохо.

YouTube «заглючит» или не дай бог, канал заблокировали. Тогда все ваши странички окажутся без видеофона. А если вы таких страничек наделали несколько десятков, будет обидно.

"Видеомонтаж в Sony Vegas Pro"

И я нашел выход, это программа Adobe Muse. Ни каких кодов, никакого программирования.

Вы не поверите, но..

Первую страничку я сделал за 3 часа, вторую за час, а все последующие за 15 мин.

Первую страничку я делал долго, потому что по ходу изучал программу.

Теперь послушайте меня внимательно и у вас все получится, и вы сможете «клепать» любые одностраничные и многостраничные сайты или просто странички подписки.

Во-первых, все графические программы имеют интерфейс, чем-то похожий друг на друга. Умеете немного работать в Photoshop, значит и в Adobe Muse сможете.

Посмотрите пару уроков для новичка (полно в YouTube), чтобы иметь минимальное понятие о программе. Если вы не собираетесь делать какие-то навороченные сайты, то для подписных и продающих страничек, вам хватит начальных знаний.

Можете скачать бесплатный курс «Adobe Muse Быстрый Старт 2.0».

Скачать программу сможете с официального сайта (30 дней бесплатно) или, как я, найти на просторах интернета. Я нашел последнюю версию с ключом и русификатором. Меня все устраивает.

Посмотрите мои первые 3 подписные странички и можете сразу подписаться и получить замечательные книги.

 «50 идей за один вечер Мастер Прав Перепродажи»
http://myobzors.ru/delivery/50_idey/index.html

«Продвинутая Идея 2016. Или Онлайн-Бизнес на Статьях с Правами Личной Марки»
http://myobzors.ru/delivery/idey_2016/index.html

«Мастер Прав Перепродажи 2016. Новый Формат Реселлинга»
http://myobzors.ru/delivery/master_pereprodag/index.html

По шаблону, такие странички можно сделать за 10-15 минут, а если хотите что-то новенькое, чуть подольше. Будет зависеть от вашей фантазии.

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

Просто покажу, как быстро делаются странички в Adobe Muse.

Открываем программу.

Выбираем слева в панели инструментов «Прямоугольник» (1)

Adobe Muse

Перетаскиваем на рабочую область (2) и за маркеры (3), растягиваем на всю рабочую область.

Идем в верхнюю панель, пункт «Заливка». Как видите можно залить сплошным цветом, можно градиентом, настроить непрозрачность.

Adobe Muse

Но если нажать на пункт «Изображение — Добавить», то можно выбрать рисунок (у себя на компьютере) для фона. Его можно растянуть по горизонтали, вертикали, произвольно.

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

Получится фон будущей странички. Пока делаем без видео фона.

Adobe Muse

Опять берем прямоугольник в левой панели, устанавливаем в нужном месте и заливаем каким-то цветом (черным), делаем непрозрачность 60% (вы делаете как хотите) – это будет место для формы подписки. На рис. ниже (1)

Все настройки находятся в разделе «Заливка», см. рис. выше

Adobe Muse

Теперь сделаем «шапку» (2) с заголовком продукта или с призывом к действию.

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

Чтобы написать текст, выбираем буква «Т» (1), в левой панели и выделяем область в любом месте (потом перетащим). Пишем текст, «Видеокурс по работе с программой Adobe Muse» (2)

Adobe Muse

Когда нажмете букву «Т», в верхней панели увидите кнопку для настройки шрифта (цвет, размер, начертание)

Точно также делаем еще одну прямоугольную область, заливаем каким-то цветом (бардовым), делаем надпись, например, «Adobe Muse», как на рисунке.

Теперь нужна форма подписки. У меня рассылка на SendPulse http://myobzors.ru/SendPulse, на ней я и буду показывать. Если у кого-то, например, на JustClick http://myobzors.ru/JustClick, все тоже самое.

Берем на сервисе рассылок код вашей формы, копируем в буфер обмена идем в программу Adobe Muse.

Adobe Muse

Кликаем правой кнопкой мыши на черном прямоугольнике и выбираем пункт «Вставить». Равняем по размеру прямоугольника. То, что видите справа (белая область), в браузере ее видно не будет.

Идем в меню «Файл» — «Предварительный посмотреть страницу в браузере», и вот, что у нас вышло.

Adobe Muse

Пустое место над формой подписки, можно чем-то заполнить, например, вставить картинку (коробка, обложка)

Я вставил первую попавшуюся. Вставляется просто, берете и перетаскиваете картинку на окно программы.

Adobe Muse

Если у вас что-то косо, криво или вообще не получается, просто еще раз посмотрите уроки для начинающих и все будет хорошо.

Я не специалист в этой программе, да и мне это не нужно, но странички для себя, сделать сумею.

Делаем видеофон

Теперь осталось вместо простого фона, сделать видеофон.

Делайте все по порядку.

Первое. Найдите видео для фона. Оно должно быть хорошего качества и с хорошим разрешением, 10-15 сек., не более (иначе страничка будет долго грузится).

«Вбейте» в поиске «видеофон», «видео для фона» или что-то подобное. Можно просто вырезать кусочек из понравившегося видео.

Видео должно быть в двух форматах, один файл в формате mp4 (например, fon.mp4) и второй в формате webm (например, fon.webm). это для того, чтобы фон отображался во всех браузерах.

Для конвертации видео в любые форматы, предлагаю «офигенный» конвертор, Aimersoft Video Converter Ultimate (еще не раз пригодится), но может у вас стоит какой-то свой, пожалуйста, пользуйтесь им.

Второе. Сделайте скриншот с экрана, он должен быть в формате jpg (например, fon.jpg). Это для того, чтобы, когда видео долго загружается, будет видна эта заставка.

Третье. Самое главное, нужен виджит для программы Adobe Muse, с помощью которого вставляется видеофон (без всякого программирования).

Называется виджит, Musegrid Fullscreen Video. Расширение у файла виджита должно быть .mulib (примерно так, Musegrid Fullscreen Video.mulib)

Как установить виджит

Откройте программу, кликните 2 раза по файлу виджита, и он сам автоматически установится.

После этого, правая панель, пункт «Библиотека». Виджит должен появится там.

Ставим видеофон на страницу подписки.

Сначала уберите фон со странички. Для этого заходим «Слои», в правой панели и отключаем слой с фоном, как в Photoshop (кнопочка рядом со слоем фона).

У меня слой находится в самом низу. Как видите фон исчез.

Adobe Muse

Теперь нужно скопировать файлы, которые вы приготовили, в программу, это файлы: fon.mp4, fon.webm, fon.jpg

Для этого заходим в меню «Файл – Добавить файлы для передачи…» и копируем свои приготовленные файлы.

Adobe Muse

Подключаем виджит.

Adobe Muse

Заходим в «Библиотека», выбираем свой виджит и перетаскиваем его на любо место вашей странички (его видно не будет)

Настройки виджита

muse11

(1) Открывает меню настроек
(2,3,4) ваши файлы (названия файлов должны быть написаны латинскими буквами)
(5) Повтор видео (видео зацикливается)
(6) Звук (включить\отключить), если он у вас есть.

ВСЁ! Смотрим, что получилось

Загружаем страничку, к себе на хостинг

Adobe Muse

Заходим «Файл – Экспортировать как HTML» (1), «выскакивает» окно.

(2) Указываем свой домен, (3) – путь на компьютере, куда будет сохранена страничка.

Adobe MuseТеперь осталось только загрузить файлы к себе на хостинг. У меня вот такие файлы.

Открываем любой файловый менеджер и загружаем файлы на хостинг, в какую-нибудь папку (лучше создать отдельную папку)

Ваша страничка откроется по адресу:

http://ваш домен/ваша папка/index.html

Потренируйтесь, посмотрите уроки (хотя бы для новичков) и вы будите, как я говорил раньше, делать странички на раз, два.

С уважением, Сергей Бурдин

P.S.

Вы даже не представляете какие возможности у этой программы. Для интереса посмотрите уроки про виджеты, и вы увидите какие «навороты» можно делать с их помощью.

RSS

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *