Как изменить шапку сайта. Поговорим сейчас о том, как изменить шапку сайта на wordpress и как изменить его название всего за 5 минут. Сразу же объясню, что такое шапка сайта и что в нее входит. Если знаете, то хорошо, но знают не все. И так, шапка сайта (header) это верхняя часть сайта, которая является неизменной для всех страниц. В шапку сайта, всегда встраивают наиболее важные части проекта, такие как его название, краткое описание, обратную связь, логотип, и основные страницы.
В интернет магазинах, так же указывают адрес и основной номер телефона. Шапка, это как реклама Вашего проекта, и она должна по мере возможности, быть заметной, и более того запоминаемой.
По этому, нельзя наплевательски относиться к этой части вашего проекта. Вы же делаете его для людей, так делайте же его уникальным и приятным для посетителя. Шапка сайта, это первое что видит посетитель, попав на Ваш ресурс, и ее вид должен, отложится у него в памяти. Да, к стати, почитайте еще статью, она даст вам дополнительные знания по созданию и управлению вашим проектом. Ну, все, хватит теории, приступаем к практике.

Как изменить название сайта

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


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

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


Зная размер шапки, ее можно подобрать, введя в строку поиска «шапки для сайта wordpress», можно заказать фрилансеру, а можно сделать самому. Что бы сделать самому, достаточно найти нужный вам рисунок подходящего размера ширины, и обрезать его по высоте, или же если рисунок очень большой, вырезать из него нужную вам часть, и сохранить.
Для того, что бы поменять шапку, необходимо зайти на Ваш хостинг (у меня sprinthost), выбрать в меню «файловый менеджер » выбрать папку public html → ваш сайт (у меня сайт) → wp-content → themes → выбрать тему, которая у вас установлена, войти в папку image, и найти здесь файл с названием header. Обязательно его просмотрите, точно ли это рисунок Вашей шапки, если да, то скопируйте название этого файла, и дайте его файлу шапки, которую хотите установить.
Теперь у Вас есть на рабочем столе готовый рисунок с названием файла шапки (у меня header.jpeg). Находясь на хостинге в папке image (как показано ниже на видео), загрузите нужный Вам рисунок для шапки (который находится на рабочем столе) в текущую директорию и нажмите сохранить(находясь в папке image, в низу есть кнопка загрузить файлы, воспользуйтесь ней для загрузки).
Кликните на звездочку, и выберите качество видео 720HD

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

Итак, как поменять шапку сайта на okis.ru ? Для начала разархивируйте файл, который Вы скачали и найдите там шапку сайта, которая имеет название shapka.png . Нам нужно её загрузить на наш сайт. Как это сделать? Зайдите в пункт «Загрузка фото» в панели управления сайта.

Здесь Вы можете загружать изображения на сайт.

Прежде чем загружать шапку нашего коктейльного сайта, обязательно снимите галочку с «Уменьшить размер изображение до 500 х 500 px» , так как шапка шире чем 500 px. Галочку сняли, теперь жмем «Обзор», затем находим файл shapka.png и нажимаем «Открыть».

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

Зайдите в редактор CSS -> Редактировать CSS . На этот раз мы воспользуемся вспомогательными кнопками. Нажмите на кнопку «Шапка сайта» и введите тот адрес ссылки на картинку с шапкой, который показан в админке Вашего сайта, после чего нажмите «Сохранить».

Нажмите «Обновить». Вы увидите, что в поле, где пишутся все стили, появился новый код:

div.art-header-jpeg {background: url(/ПУТЬ_К_ФАЙЛУ/ shapka.png );}

Это и есть стили для шапки сайта.

В моём случае путь к файлу такой: /img/cocktail60/shapka.png

Значит в моей админке написан следующий код:
div.art-header-jpeg {background: url(/img/cocktail60/shapka.png );}
У Вас же ПУТЬ_К_ФАЙЛУ к шапке другой , поэтому Вы копируете ту ссылку, которая показывается у Вас в админке.

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

Дело в том, что во всех шаблонах сайта okis.ru, где есть закругленные углы , шапка состоит из двух частей: из основной картинки , которую мы загрузили и из контура шапки . Давайте поменяем контур шапки. Зайдите снова в пункт «Загрузка фото» в панели управления сайта и загрузите там файл shapka_kontur.png . Перед загрузкой контура шапки не забудьте снять галочку с «Уменьшить размер изображение до 500 х 500 px». В админке нет кнопки «Контур шапки», поэтому мы добавим стили вручную для данного элемента. В редакторе CSS с новой строчки нам нужно прописать следующий код:

div.art-header-png {background: url(ПУТЬ_К_ФАЙЛУ/ shapka_kontur.png );}

В моем случае путь к файлу контура шапки такой:
Поэтому я прописываю следующий код:
div.art-header-png {background: url(/img/cocktail60/shapka_kontur.png );}
Не забывайте о том, что Ваш путь к файлу отличается от моего.

Сохраните изменения.

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

Теперь Вы знаете, как поменять шапку сайта в конструкторе сайтов ОКИС. В следующем уроке Вы узнаете, как поменять низ сайта на okis.ru .

Дополнительные уроки по созданию и ведению сайта на OKIS:
Урок№9. Как организовать общение на сайте, сделанном на okis.ru
Урок№10. Как активировать сайт на okis.ru с помощью WebMoney
Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы

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

Простой шаблон сайта, замена шапки сайта

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

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

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

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

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

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

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

В новом окне открывается изображение шапки сайта. В адресной строке браузера (вверху) прописан адрес нашей шапки сайта (картинки). Адрес моей шапки выглядит так: копируем и сохраняем этот адрес.

Теперь мы видим, где лежит наша картинка на хостинге: папка wp-content; папка themes; папка zeestyle; папка imagis и наконец, название картинки — header_bg.png. Это нам пригодится в будущем.

В браузере Google Chrome адрес узнается почти также. Наводим мышкой на шапку сайта, нажимаем правой кнопкой мыши, в диалоговом окне выбираем «Копировать URL картинки», также копируем и сохраняем ссылку. Бывают шаблоны, где картинки открываются более хитрым способом.

Далее открываем картинку в новом окне и можем с ней работать. Можно редактировать её в фотошопе или другом редакторе для изображений. Работа с моей шапкой сайта выполнялась в программе Pixlr (это онлайн фотошоп). Подробнее об этом читайте в статьях « » и « «.

После завершения работы над картинкой, её надо сохранить с тем же расширением и теми же геометрическими размерами, что и старая картинка. Для сохранения названия отредактированную картинку переименовываем (я делаю это в Total Commander) и присваиваем ей имя header_bg.png. Это имя взято из вышеприведенной ссылки (у каждого имя будет своё).

Замену картинки (шапки) сайта можно сделать либо через FTP, или напрямую на сервере, я делал напрямую. Для этого заходим на наш хостинг, открываем наш сайт, открываем папку public_html, папку wp-content, themes, zeestyle, images и находим нашу шапку (картинку) — header_bg.png.

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

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

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

Для решения этой проблемы надо разделить ссылки, сделать отдельно картинку для шапки и отдельно для футера. Для этого возвращаемся в админпанель нашего сайта, заходим «Внешний вид», «Редактор» и выбираем «Стили», «Таблица стилей» (style.css).

Находим footer и видим там название нашей картинки в строке — background: url(images/header_bg.png) no-repeat #1d4c82; Предварительно код «Таблицы стилей» лучше сохранить. Если допустите ошибку, всегда сможете вернуться в исходное состояние.

Мы помним, что header_bg.png это название картинки нашей шапки. Теперь в коде вместо header пишем footer (смотрите скрин),

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

На всякий случай картинку футера я положил на сервер, возможно в будущем буду редактировать. Для этого была взята картинка шапки до переделки и переименована в Total Commander – вместо header_bg.png пишем footer_bg.png и закачиваем её на хостинг. Картинку закачиваем в папку images, туда же, где находится картинка нашей шапки.

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

С уважением, Иван Кунпан.

P.S. Для правильно создания блога, правильного его продвижения, нужно всё делать в строгой последовательности. Такая последовательность показана в моей интеллект карте, которую я разработал на собственном опыте. . Полезной будет и , Вы можете скачать также бесплатную книгу «Как написать статью для блога».

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

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

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

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

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

Так выглядела шапка до изменений:

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

Что бы я изменил в дизайне?

1. Шрифт и цвет у логотипа
2. Размер и цвет остального шрифта
3. Убрать зеленую полосу
4. Блок с контактами разместить на верхней панели

После изменений:

Между тегами head в HTML файле:

//прописываем мета тег для адаптивности

//подключаем другие шрифты

//подключаем библиотеку Font Awesome

//подключаем внешний файл стилей, сюда будем писать стили

//скачиваем и подключаем файл нормализации стилей

Делать верстку мы будем на flexbox .

Первый ряд – панель с контактами (top header).

HTML разметка

В блок-контейнер с классом top-header , поместим три флекс-элемента – абзацы с текстом.

CSS стили

Инфоблоки встанут в ряд благодаря display: flex . Свойство space-around равномерно распределяет пустое пространство между инфоблоками. Однопиксельная серая рамка, визуально разграничит верхнюю панель от самой шапки.

/* Флекс контейнер для верхних инфо-блоков */
.top-header {
display: flex;

padding: 5px;
font-size: 100%;
border-bottom: 1px solid #efd0d0;
position: relative;
}

Выделим некоторые слова зеленым цветом.

/* Зеленый цвет у текста инфо-блоков */
.top-header .green {
color: #b2db41;
font-weight: bold;
}

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

Второй ряд – шапка (header)

Слева направо, первым идет логотип, а затем навигационное меню.

HTML код

Начинается с открывающего тега header , внутри которого блок с логотипом. Логотип вставляется, как ссылка, ведущая на главную страницу.