Красивый футер. Прибитый к низу футер своими руками. Начнём с теории

02.05.15 21.5K

Это кошмар какой-то! Почему подвал вашего сайта опять «всплывает » и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?

Понятно, тогда сидите и ничего не делайте, пока не прочитаете нашу статью до конца. Делаем правильный футер для своего сайта

Многие владельцы сайтов встречаются с этой проблемой, когда footer страницы просто всплывает «кверху ». И тогда непонятно, что делать. Чаще всего таким недостатком грешат дизайны сайтов, сверстанные на скорую руку, самостоятельно (кружок «очумелые ручки» ) или начинающими веб-мастерами.

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

Для устранения этого «дефекта » сверстанного шаблона не обязательно тратиться на услуги веб-мастера. Чаще всего футер сайта можно поставить на место самостоятельно. Рассмотрим все возможные варианты устранения подобной проблемы:

Первый способ

Первый способ «привязать » подвал «к дну » страницы построен на основе CSS . Для начала приведем код примера, а затем более подробно рассмотрим его реализацию:

html { height: 100%; } header, nav, section, article, aside, footer { display: block; } body { height: 100%; } #wrapper { width: 1000px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; } #header { height: 150px; background-color: rgb(0,255,255); } #content { padding: 100px; height:400px; background-color: rgb(51,255,102); } #footer { width: 1000px; margin: -100px auto 0; height: 100px; position: relative; background-color: rgb(51,51,204); }

Для того чтобы приклеить подвал к низу страницы тег мы вынесли за пределы контейнера (слоя wrapper ). Растягиваем всю страницу и содержимое «тела » до границ экрана. Для этого в коде CSS мы задали высоту тегов и в 100%:

html { height: 100%; } body { height: 100%; }

Минимальную высоту слоя-контейнера устанавливаем тоже в 100%. Для случая, если ширина контента будет больше, чем высота контейнера, задаем свойству значение auto . Благодаря этому wrapper будет автоматически подстраиваться под ширину размещенного на странице контента:

#wrapper { min-height: 100%; height: auto !important; height: 100%; }

Строчка кода «height: 100% » предназначена для старых версий IE , которые не воспринимают свойство min-height .

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

#content { padding: 100px; }

На данном этапе мы получили веб-страницу шириной во весь экран и дополнительно 100 пикселей, которые «нейтрализуются » отрицательным значением отступа для футера (margin: -100px ) при установленном для него относительном позиционировании (position: relative ). Таким образом, с помощью отрицательного значения отступа мы «сдвигаем » подвал в область контейнера, для которого установлена высота в 100%.

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

header content footer

Усовершенствованный вариант

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

Чаще всего в реализации pop-up окон используется свойство CSS z-index . С помощью его значений задается порядок наложения слоев друг на друга.

Чем больше значение z-index элемента, тем выше он будет находиться в общем стеке «наслоения ».

Но из-за того, что в предыдущем примере мы использовали отрицательное значение отступа для футера, нижняя часть всплывающего окна будет перекрываться верхней областью подвала. Даже несмотря на то, что оно будет иметь большее значение z-index . Потому что у родителя всплывающего окна (wrapper ) значение этого свойства все равно меньше.

Вот более совершенный вариант:

CSS — код примера:

html, body { height: 100%; } .header { height:120px; background-color: rgb(0,255,102); } .main { min-height:100%; position: relative; background-color: rgb(100,255,255); } .footer { height:150px; position: absolute; left: 0; bottom: 0; width: 100%; background-color: rgb(0,0,153); }

Как видно из кода, подвал мы поместили в состав основного элемента. Контейнеру мы задали относительное позиционирование, а для футера – абсолютное. Подвал мы закрепили в самом низу контейнера, установив его положение слева и сверху в 0. Вариант для подвала с нефиксированной высотой

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

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

Что размещать в футере сайта?

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

Контактная информация больше всего подходит для веб-магазинов. Размещение в подвале адреса карты проезда, телефона, адреса почты магазина или организации и т.п., позволяет человеку быстрее совершить заказ или покупку.

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

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

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

Примеры красиво оформленных подвалов сайта

Для того чтобы создать красивый и информативный футер предлагаем вашему вниманию наиболее известные работы дизайнерских веб-студий:

1. Дизайнерское решение Французской веб-студия KDIGIT:

2. Оформление футера дизайнерской веб-студии SNOWDEN industries:

3. Дизайнерское решение в оформлении футера шведской компании Uforia CMS:

4. Изящное оформление футера компании Tapbots:

5. Футер дизайнерской веб-студии Ready made designs:

6. Оформление футера компании Mecannical:

7. Красивое оформление футера:

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

Добавление в футер блоков информации

Самым простым способом добавления в футер блоков информации будет добавление в админку вордпресс, блока виджетов подвала. Для создания, такого блока виджетов необходимо открыть админ меню—>редактор и в колонке справа, выбрать файл functions.php, в котором добавляем код:

if (function_exists("register_sidebar")) register_sidebar(array("name" => "Footer Sidebar", "before_widget" => "", "after_widget" => "", "before_title" => "", "after_title" => "",));

if (function_exists ("register_sidebar" ) ) register_sidebar (array ( "name" = > "Footer Sidebar" , "before_widget" = > "" , "after_widget" = > "" , "before_title" = > "" , "after_title" = > "" , ) ) ;

Это код регистрации нового блока виджетов в админке, где ‘name’ — задается имя виджета, ‘before_widget’ — отображаемый HTML код до виджета, и ‘after_widget’ — отображаемый HTML код после виджета, а также код до и после заголовка title. Добавляется он как правило в самое начало файла functions.php.

Сохраняете содержимое functions.php и заходим в раздел «Виджеты». Если все было сделано без ошибок, то вы найдете там новый блок:

Итак, в админ меню отображение нового блока виджетов мы сделали, теперь нам нужно вывести виджеты этого блока на сайте. Для этого открываем админ меню —>редактор и справа выбираем файл footer.php, кстати такие блоки виджетов, можно выводить не только в футере, но и в любом другом месте сайта.

В файле footer.php добавляем следующий код.

Для начала покажу Вам результат сегодняшнего поста. Футер будет небольшим, и будет иметь лишь одну строчку текста

Проблемы при реализации футера

Если футер это низ станицы, то в чем же проблема реализовать его? Ведь можно просто сделать продолжение нашей главной таблицы и вставить в него всю нужную информацию! Да так и есть, такой подход применим в 99% случаев реализации сайтов, но есть одна маленькая проблема встречающаяся в 1% случаев.

Вот схематично изображенный браузер

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

Но что будет если высота сайта не такая большая, что бы создать вертикальный скролл?

Как видите получается печальная картинка. Футер в такой ситуации является не низом страницы, а центром. Как же это исправить?

Есть два варианта:

• Плюнуть на то, что футер появляется в центре, ибо в 99% случаев сайт имеет достаточную высоту, что бы футер появлялся там где надо.
• Прибегнуть к иному способу реализации футера

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

Теория реализации футера

Что я предлагаю? Я предлагаю использовать jquery . С помощью нее мы можем узнать высоту браузера, или любого другого объекта на нашем сайте. Для чего это нужно? Так как футер будет являться абсолютно позиционированным объектом (иметь стиль position:absolute;) то высота рабочей области, или же высота главной таблицы, позволит нам узнать на сколько сдвинуть, по верху (стиль top), нашу футер область!

Думаю ясно как мы будем реализовывать наш подвал

Что касается работы функции ява скрипта. Нам нужно будет определить, какую высоту (высоту браузера или высоту главной таблицы) использовать для сдвига футера. Тут все просто, устраиваем проверку, что выше, таблица или окно браузера, если окно браузера, то используем его высоту. Если же наоборот, то используем высоту главной таблицы.

Создаем футер >Редактируем стиль таблицы

Для начала нам необходимо подправить стиль нашей главной таблицы.

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

Открываем пользовательский style.css, находим класс table (.table{...}) и правим вот так

Table
{
position:absolute;
top:0px;
left:50%;
margin-left:-390px;
padding-bottom:50px;
z-index: 1;
}

Я добавил стиль padding-bottom:50px;, то есть сделал пространство, между концом таблицы и концом окна браузера, размером в 50 пикселей. Для подвала который я задумал (скрин на результат в начале поста) этого места будет предостаточно, если Вы задумали футер куда больше чем мой, то ставьте столько пикселей сколько Вам надо!

>Редактируем главный шаблон

Открываем пользовательский index.html и перед

вставляем наш футер

Работает на RS-BLOG v2 | При копирование материал с даного блога не забывайте выкладывать ссылку на источник - rsblog.ru

Поясню некоторые стили которые тут используются

• display:none; - Наш подвал будет появляться пользователю только после того как загрузится вся страница, до этого момента футер видно не будет!
• left:50%;margin-left:-390px; - Эти два стиля позволяют позиционировать футер ровно в центре браузера.
• text-align:center; - позволяют разместить текст, содержащийся в блоке, по центру.

>Подключаем jquery и js.js

Для начала ее необходимо скачать. Заходим вот по этой ссылке и жмем сюда

Откроется код, выделяем его весь и копируем в блокнот. В блокноте жмем Файл -> Сохранить как

Вводим имя (jquery.js) файла обязательно с.js

и сохраняем в пользовательской папке templates. Теперь у нас в папке с движком есть необходимый нам файл. Так же стоит создать файл js.js (пока пустой файл). В нем мы будем скоро писать функцию отображение футера. Вот как выглядит сейчас содержимое папки templates

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

Теперь осталось подключить js файлы к нашему блогу. Для этого открываем пользовательский index.html и после сточки

Что разместить в подвале сайта

Один из самых главных вопросов, который интересует многих веб-мастеров: «Что должно быть в футере сайта?». Рассмотрим самые необходимые элементы навигации. Не обязательно включать в ваш футер все ниже перечисленные пункты, это лишь рекомендации, веб-мастер сам принимает решение относительно каждого элемента.

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

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

Вывод: карта сайта или ссылка на все статьи незаменимый элемент для футера сайта.
Контакты. Как ни крути, но большинство веб-мастеров создают сайты для заработка. То есть, реклама нужна практически всем владельцам сайтов. Футер сайта – идеальное место для размещения контактной информации на всех страницах сайта.

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

Вывод: контакты незаменимый элемент для футера сайта.

Счетчики и информеры. Чтобы помочь рекламодателю определится с выбором именно вашего сайта для размещения рекламы, ему необходимо показать, насколько сайт популярен. Счетчик посещаемости идеальный вариант для отображения реальной популярности сайта. Счетчиков и сервисов, ведущих статистику посещаемости, достаточно много. Мы рекомендуем установить несколько. Самые популярные: Yandex.Metrika informer, LiveInternet counter и [email protected] counter.

Более того, 99% рекламодателей не размещают рекламу на сайтах, где не установлен хотя бы один счетчик посещаемости. Также, для размещения рекламы в той или иной рекламной сети, сайт должен иметь среднюю посещаемость не ниже определенного уровня. Например, всем известный Google Adsence не принимает сайты, средняя посещаемость которых ниже 500 уникальных посетителей в сутки.

Вывод: счетчики и информеры незаменимый элемент для футера сайта.

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

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

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

Если вы не знаете, что писать в футере сайта, пропишите ссылки на популярные статьи.

Как правильно разместить информацию об авторском праве, что прописать в так называемом копирайте: символ «©» или слово «Copyright»; нужно отобразить две даты: дату начала работы сайта и текущую дату; имя физического лица, которому принадлежат авторские права; название сайта; в некоторых случаях можно написать про недопустимость копирования материалов сайта (на мой взгляд, это бесполезно); информация про что сайт. На моем сайте авторское право прописано следующим образом:

© 2015-2016 сайт. Все права защищены. Все о заработке в интернете

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

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

Вывод: кнопки на соц. сети в подвале сайта устанавливаются на усмотрении веб-мастера. К примеру, из соц. сетей в подвале я разместил лишь кнопку «Подпишись на мой YouTube канал».

Вот мы и ответили на вопрос «Что пишут в подвале сайта?». Проявите креативность, в подвале можно разместить любую информацию. Главное правило: все размещенные элементы должны идеально вписываться в общий дизайн и улучшать удобство пользования сайтом.

Как правильно оформить подвал сайта

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

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

Подвал должен кардинально отличаться от общей контентной части. Обычно, футер делают в темных тонах. Пользователь должен отчетливо видеть границу перехода с контента на футер. Контрастность именно то, что нужно, чтобы привлечь внимание. Многие веб-мастера изощряются (в хорошем смысле этого слова) и придумывают различные графические фишки, такие как «оторванный» кусочек контентной части на фоне темного подвала. Согласитесь, выглядит достаточно креативно:
Я, к примеру, на границе изобразил переход в виде волны:Подвал сайта примеры. Общие принципы и правила оформления футера мы рассмотрели выше. Теперь давайте закрепим информацию и посмотрим на самые красивые экземпляры футеров. На основе этих примеров можно придумать дизайн футера, который будет гармонично вписываться в дизайн вашего сайта. Футер сайта примеры:

Креативные подвалы для сайта: