Меню для лендинга. Нужна ли навигация на лендинге: данные, подтвержденные кейсами. Кейс «за» навигацию

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

Слово баннер происходит от английского слова «banner», что в переводе означает «флаг» или «транспарант». В современной интерпретации для сайтов баннер — это некое графическое изображение, предполагающее своей целью:
— рекламу какого-то товара или услуги,
— сообщение о каком-либо важном событии в жизни сайта (конкурс, акция, начало тренинга…)
— просто позитивное информирование посетителей сайта с целью улучшения имиджа (поздравления с праздниками, позитивные фразы и мотиваторы, вызывающие улыбку и поднимающие настроение посетителям сайта…)

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

На статических баннерах используется одно изображение без движения. Это изображение может представлять собою просто картинку, фон или картинку с надписями, либо просто надписи. Изображение может быть как в формате jpg, так и в формате gif (если картинка с анимационными эффектами).

Анимационные (GIF-баннеры) представляют собой несколько последовательно идущих друг за другом изображений, которые сменяют друг друга и создают «эффект движения». Смена каждого изображения происходит последовательно с учетом выставляемой выдержки (задержки) времени каждого кадра. В данном виде баннера обычно используется несложный сценарий, плавность движений в нем зависит от количества промежуточных кадров, дающих визуальный эффект движения. Но при этом чем сложнее сценарий, тем больше «весит» баннер. Это тоже надо учитывать при создании анимационного баннера. Оптимальное количество кадров- 5-6 для такого вида баннеров.

Флэш-баннеры – это результат процесса программирования, и обычно они создаются в специальных программах, типа Adobe Flash. В этих баннерах используется векторная графика, что позволяет делать анимационные эффекты при небольшом «весе» баннера, а также есть возможность использования звуковых эффектов, качественные флэш-баннеры сложны в изготовлении и поэтому их разработку осуществляют чаще всего квалифицированные специалисты.

Стандартные размеры баннеров
На сайтах обычно используются баннеры стандартных размеров. Баннеры бывают горизонтальными, вертикальными и квадратными. Я сделала картинки-шпаргалки, которые, надеюсь, помогут вам при создании баннера, и которые при необходимости вы сможете распечатать для себя. Кликните по ссылке с интересующими вас размерами баннеров и перед вами предстанет картинка!

Создание статического баннера для сайта
Для создания статического баннера вам пригодится фотошоп или любой другой графический редактор. Процесс создания достаточно прост и не требует больших усилий. Он состоит из следующих операций:
выбираем размер баннера,
приводим готовое изображение (фон, картинку, коллаж, анимированную картинку…) к размеру выбранного баннера,
делаем внешнюю обводку баннера,
пишем нужный текст,
сохраняем полученный баннер в формате jpg, png или gif.

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

Вот такой баннер я сделала для своего сайта в фотошопе.

Или можно воспользоваться бесплатным онлайн-сервисом

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

2- Меню «Макет» предполагает:
2.1 — выбор размера баннера (размер по умолчанию, ваш индивидуальный размер баннера и стандартный размер баннера из выпадающего списка),
2.2 — выбор фона баннера: однотонный фон с выбором нужного вам цвета; фон градиентный- можно выбрать любой из предложенного списка; фон (картинка, фон, коллаж) ваш, который можно загрузить с вашего компьютера.

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

4- Выбираем меню «Текст»

4.1 — в поле «текст» вводите построчечно необходимый вам текст,
4.2 – затем подбираете параметры шрифта: название, размер, цвет шрифта, а также поворот текста для каждой строчки введенного вами текста.
Нажимаете кнопку 3 и двигаете на самом баннере текст так, как вам больше нравится. Когда вы расположили текста так, как вам нужно, опять нажимаете кнопочку 3 и переходите к следующему пункту.

5- Меню «Воздействие». Перевод неправильный. Я бы назвала эту закладку выбор эффекта для текста. В данной закладке подбираете тень для каждой строчки текста вашего баннера. После нажатия кнопки 3 – видите эффект.

6- Меню «Пограничная». Опять же «деффект» перевода. В данной закладке вам предлагается выбрать окантовку вашего баннера (рамочку).

7- Меню «Формат». Выбираете формат, в котором вы хотите сохранить свой баннер.

8- Если полученный вариант вам не нравится, нажимаем на кнопочку «Начать новую», то есть начинаете создавать новый баннер.

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

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

11- Нажав кнопку «Получить коды» вы увидите код баннера, который вы можете скопировать и затем вставить непосредственно на свой сайт или в свою статью.

Вот на сегодня и все. Успехов вам!
Я сделала вот такой простой баннер при помощи вышеуказанного онлайн сервиса буквально за 2 минуты.

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

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

Что такое баннер? Основные виды баннеров В наружной рекламе В спорте

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

Баннер в интернете - что это такое и зачем он нужен

Я, думаю, что каждый пользователь Интернета, хоть раз, видел баннер. Многим они приелись, поэтому такие люди используют специальное расширение браузера для блокировки рекламы на веб-сайтах, плагин Адблок и другие.

Для чего нужен баннер?

Основной задачей баннера является привлечение внимания посетителя сайта. А вебмастера, те ребята, у кого есть собственные раскрученные веб-ресурсы. Как раз-таки они размещают баннеры для того, чтобы на них зарабатывать. У некоторых, баннерная реклама — это основной источник прибыли.

История появления баннеров

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

По такому изображению кликали постоянно, потому что это было что-то новое, незнакомое.

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

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

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

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

Виды баннеров в интернет-рекламе

Любой из типов баннера — это графическое изображение в формате GIF или JPEG. Картинка на них может быть, как статической (неподвижная в формате jpg), так и анимированной (движущаяся в формате gif, эффект движения в таком баннере создается благодаря чередованию нескольких картинок).

Различают три типа баннеров:

• Статичные баннеры - одно графическое изображение, как и было в начале.
• GIF-баннеры - последовательность растровых кадров, сменяющие друг друга в определенном интервале времени. Это более сложный баннер, требующий определенных навыков для своего создания. Разумеется, по весу он будет тяжелее статичного изображения.
• Flash-баннеры или Java - такие блоки рекламы можно сделать в программе Adobe Flash. Используется не растровая графика, а векторная графика, что позволяет получать анимацию при небольшом весе баннера. Интересной возможностью данного типа считается возможность использования звуковых эффектов.

Где заказать баннер?

Сегодня интернет-баннер можно сделать на любой вкус. Есть возможность своими усилиями его создать, а можно заказать на . На таких сайтах, с навыками изготовителя красивых баннеров много.

Типы и размеры баннеров

Баннеры бывают разные, лично я представляю в голове такой небольшой прямоугольный баннер над статьей 468 x 60 px. Раньше их часто размещали на сайтах.
Итак, по размерам баннеры разделяют на:

• Горизонтальные прямоугольники: 728 x 90, 468 x 60, 234 x 60, 88 x 31, 120 x 60, 120 x 90.
• Вертикальные прямоугольники: 300 x 600, 160 x 600, 120 x 600, 120 x 240, 240 x 400.
• Квадраты: 250 x 250, 125 x 125.
• «Почти квадраты»: 336 x 280, 300 x 250, 180 x 150.

Основные задачи баннерной рекламы

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

• Сперва необходимо привлечь внимание к продукту, делая упор на отображающуюся картинку - тем самым рекламодатель пытается не просто привлечь внимание к товару, происходит работа по формированию положительного образа в головах массы.
• Изображение или анимация может вызвать интерес, заинтересовать потенциального клиента.
• Существует множество фишек по привлечению аудитории, одна из них — это недосказанность. Например, будет написано: вы удивитесь, что стать миллионером за месяц можно, если…», таких примеров тьма. Главное заставить сделать клик по баннеру и совершить полноценный переход.
• Бывает, достаточно одного лишь качественного полного содержания, чтобы побудить пользователя к действию. Кому-то интересна тема изучения веб-программированию, а в баннере про это как раз-таки говорится (бесплатный курс веб-программирования для новичка). В таком случае, человек кликает, потому что его это заинтересовало.Никаких рекламных трюков, только информация.
• Бывает устанавливают баннеры не для того, чтобы по ним кликали, а для того, чтобы просто узнавали.

Как сделать баннер?

Это тема для отдельной статьи, поэтому скажу лишь, что его можно сделать при помощи стандартного Paint, фотошопа или онлайн-сервиса http://bannerovich.ru.

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

width=»200″ height=»200″ /> — это ширина и высота. Разумеется, баннер должен быть нарисован в таких же размерах.

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

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

Статьи на тему эффектов при прокрутке страницы:

Суть эффекта: перед прокруткой к следующему блоку есть небольшая задержка, а затем страница переходит к следующему блоку. Анимация также происходит и при скролле в обратном направлении. Создается впечатление небольшой .

Попробуйте прокрутить данный лендинг до конца, а затем используя меню:

Скачать

Процесс смены блоков:

Как сделать такой дизайн лендинга?1 HTML структура

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

Структура меню стандартная:

1 2 3 4 5 6

Блок 1 Блок 2 Блок 3 Блок 4

Поясню атрибуты:

• data-menuanchor — атрибут необходим для формирования меню.
• href — атрибут ссылки, который переходит к соответствующему якорю с таким же идентификатором.

Сейчас создадим структуру всех блоков:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Есть общий блок с идентификатором "fullpage" , в котором находятся блоки с содержимым. Здесь есть один незнакомый для Вас атрибут:

• data-anchor — данный атрибут для функционирования меню, которое мы заставим работать немного позже.

2 Стили CSS

Никаких стилей особых здесь нет, поэтому здесь размещу только стили для меню:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

#menu { height : 60px ; left : 0 ; margin : 0 ; padding : 0 ; position : fixed ; top : 0 ; width : 100% ; z-index : 70 ; text-align : right ; background : #fff ; } #menu li { background : rgba(255 , 255 , 255 , 0.5 ) ; border-radius : 4px ; color : #000 ; display : inline-block; margin : 10px ; } /*Стиль ссылки когда активен соответствующий блок*/ #menu li a , #menu li.active a { display : block ; padding : 9px 18px ; text-decoration : none ; color : #ccc ; } /*Стиль элемента списка когда активен соответствующий блок*/ #menu li.active { background : rgba(0 , 0 , 0 , 0.5 ) ; color : #fff ; }

Осталось подключить скрипт и написать небольшой JS код.

3 JS часть

Необходимые библиотеки:

• jQuery.min.js

Подключаем их:

1 2

Привет друзья, коллеги! Как ваши дела? Надеюсь у всех все здорово:) Сегодня будем делать простое адаптивное меню для наших landing page. Все чаще спрашивают об этом, а я подобные вопросы записываю в и стараюсь в свободное время писать на эти темы статьи.

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

Как сделать адаптивное меню для сайта

Google подтвердил, что с середины апреля одним из факторов ранжирования станет адаптивность сайта под мобильные устройства. В связи с этим все материалы о том, как сделать ваш landing page адаптивным — как никогда актуальны. Я не буду сегодня городить что-то сложное, а наоборот, расскажу, как сделать очень простое адаптивное меню с минимумом затрат времени.

В основном это будет html + css, но понадобится совсем маленький скрипт, для обработки клика. Итак…

Адаптивное горизонтальное меню

Начнем с html. Прежде всего подключим библиотеку jquery. Наверняка, вы давно ей пользуетесь, поэтому убедитесь, что не подключаете ее второй раз:

Теперь разметка. Обычный ненумерованный список, и небольшой div, который содержит иконку меню. Она будет видна только на маленьких разрешениях.

Скачать прайс

Контакты

Отзывы

Как видите — ничего сложного, думаю, по мере необходимости вы сами сможете усовершенствовать его.
Теперь давайте добавим стили:

#menu { background: #2ba9c0; width: 100%; padding: 10px 0; text-align: center; } #menu a { color: #fff; text-decoration: none; padding: 12px 12px; } #menu a:hover { border-bottom: 4px solid #fff; background: #078ecb; } .itemsMenu li { display:inline; padding-right: 35px; width:100%; margin: 0 auto; } .itemsMenu li img{ vertical-align: middle; margin-right: 10px; } .iconMenu { color: #fff; cursor: pointer; display: none; } .showitems { display:block !important; } @media screen and (max-width: 600px) { #menu a{ padding-bottom: 13px; } #menu a:hover { border-bottom: none; } .iconMenu { display:block; } .itemsMenu { display:none; } .itemsMenu li { display:block; padding:10px 0; } }

Теперь, при уменьшении окна браузера вы увидите следующую картину:

Мне бы очень не хотелось описывать каждую строчку, ведь блог не о верстке как таковой. Давайте я просто попытаюсь объяснить.

Сначала элементам li задаем свойство display:inline, чтобы сделать их расположение горизонтально друг за дружкой. Можно было бы использовать float:left, но решил таким образом сделать. И скрываем иконку меню свойством display:none. Когда разрешение экрана меньше 600 пикселей, убираем inline, у элементов li, и скрываем их, а показываем иконку. В двух словах — так.

Теперь нам нужен простенький скрипт, который бы обрабатывал клик по иконке меню и показывал бы его элементы:

$(function() { $(".iconMenu").click(function() { if($(".itemsMenu").is(":visible")) { $(".itemsMenu").removeClass("showitems"); } else { $(".itemsMenu").addClass("showitems"); } }); });

Вот так. Я его вынес в отдельный файл и подключил перед закрывающимся тегом body.

Вот и все. Таким образом можно быстро сверстать простое адаптивное меню для landing page.

Конечно, есть недостатки. Отступы заданы в пикселях, но можно задать все расстояния и в процентном соотношении. Просто в этом не было необходимости. Если бы это был полноценный сайт, то и иконки бы я использовал в svg или шрифтовые, а не png и отступы бы пересчитал в процентах. А так, это был небольшой экспромт:) Надеюсь все понятно? Пока.

Как создать ссылку в меню лендинга? Да очень просто! Просто скопировать часть кода (пару строк) и вставить в нужное место. Сейчас всё это рассмотрим. Но с начало поясним. Изначально подразумевается, что ленд никуда не ведет (в смысле на другие страницы), это одностраничный сайт. Поэтому все ссылки по идее должны вести только на разделы самого LP (). Иногда бывает нужно поставить ссылку на другую страницу, к примеру, на политику конфиденциальности. Все эти подробности мы уже описывали в статье « ». Рассмотрим оба варианта добавления гиперссылок в одностраничник.

В качестве примера будем использовать наш ресурс « ». Перейдите по ссылке на страницу и нажмите сочетание клавиш Ctrl + U (переключать клаву на английский не надо). Откроется html код страницы.

Html код лендинга

Гипер ссылки на сайтах заключены в специальные html теги . Тег имеет атрибут href=далее следует юрл адрес, ссылка на страницу (другую) либо якорь на часть документа со знаком # и названием, примерно так Бонус

Код меню

Теперь надо поставить пересылку на нужную часть ленда, для этого используется идентификатор id=«название которое использовалось в меню со знаком #», в нашем случаи «screen», см. картинку

Идентификатор из меню

Теперь создадим дополнительную ссылку на футер (подвал). Для этого в каком то html редакторе, к примеру NotePad++, просто скопируйте одну из существующих ссылок меню и вставьте ниже после стоимости. Далее после значка # замените на futer и слово после птички >Футер. Вот что у Вас должно получиться.

добавленная новая ссылка в меню

Запустите свой бизнес в интернете — откройте партнерский интернет магазин. В статье « », дана пошаговая инструкция по запуску, без вложений. А оформив подписку, получите целый курс по этой теме и абсолютно бесплатно. Так же смотрите « », в статье даны реальные кейсы и принципы вывода ресурса в ТОП выдачи.

Меню до добавленной ссылки
Меню после добавления кода

Далее необходимо поставить id в нужное место. Для этого идем вниз документа и ищем div с именем footer, я специально сделал ошибку в новом имени меню и поставил futer, так как id должен быть уникален. Вот какой результат должен быть, см. скрин.

Установка идентификатора из меню Замена ссылки на другую страницу

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