Шапка сайта. Типовое решение «GS: Print

• Главная
• Документация
• Типовое решение «GS: Print — Сайт типографии»
• Шапка сайта

Большая часть элементов в шапке сайта представлена включаемыми областями. Исключение: кнопка «Записаться на сервис», Форма поиска, Заказать звонок.

Включаемые области

1. Адрес компании
2. Email
3. Картинка логотипа
4. Текст логотипа
5. Текст о компании
6. Телефон
7. График работы

Редактирование включаемых областей

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

1.

Адрес компании

2. Email

Email необходимо изменить в двух местах.

3. Картинка логотипа

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

Предположим у вас есть изображение логотипа с именем logo.png

Во включаемой области вместо <i aria-hidden=»true»></i> вы можете прописать следующий код:

<img src=»/images/logo.png» alt=»Ваша компания» title=»Ваша компания»>

Для загрузки изображения:

1. Переходим во вкладку Администрирование

2. Контент — Структура сайта — Файлы и папки — images (если папки images нет, её необходимо создать)

3. Загружаем файл logo.png в папку images

Отредактировать размер и расположение картинки логотипа относительно других элементов в шаблоне можно в файле стилей style.

css.

4. Текст логотипа

Если в логотипе предполагается только картинка, то текст логотипа можно удалить.

5. Текст о компании

6. Телефон

7. График работы

Элементы шапки редактируемые через шаблон

1. Кнопка «Оставить заявку»
2. Ссылка «Заказать звонок»
3. Форма поиска на сайте

1. Кнопка «Оставить заявку»

Отредактировать кнопку можно в коде шаблона сайта.

Вместо <?=GetMessage(«HEADER_ZAYVKA»)?> вы можете указать свой текст ссылки.

2. Ссылка «Заказать звонок»

Отредактировать код ссылки «Заказать звонок» можно в коде шаблона сайта.

Вместо <?=GetMessage(«CALLBACK»)?> вы можете указать свой текст ссылки.

3. Форма поиска на сайте

Отредактировать форму поиска можно в коде шаблона сайта.

Делаем шапку

Для создания шапки для сайта воспользуемся программой Фотошоп. Больших сложностей при создании шапки не возникнет. Постараюсь всё объяснить по порядку и как можно подробнее.

Чтобы поменять шапку своего сайта, Вам необходимо знать её размер и, исходя из размера Вашей шапки, будем создавать новую с помощью программы Фотошоп. Для начала запускаем программу. В строке меню выбираем: файл => создать. Откроется такое окно:

В этом окне надо выставить размеры шапки. Я привожу пример для создания шапки размером 900х200 пикс. Прописав размеры, нажмите ОК. Появится вот такое рабочее окно:

В этом окне и будем создавать шапку. Можно пойти несколькими путями, это будет зависеть от Вашего желания. Самый простой путь — это найти картинку, которая будет соответствовать дизайну и тематики сайта. Картинка должна быть обязательно приблизительно такой же ширины, как и шапка. Если будет больше — не страшно. Картинку меньшего размера придётся растягивать, при этом изображение немного исказится.

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

Эта картинка имеет размер 1920х1200 пикс. Теперь надо эту картинку переместить в Фотошоп. Для этого в меню выбираем — файл ==> открыть. В открывшемся окошке выбираете на компьютере файл с нужной картинкой и нажимаете «открыть». Теперь окно Фотошопа будет выглядеть так:

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

Если с фрагментом определились, то можно инструментом «раскройка» раскроить рисунок. С размерами ориентируйтесь по шкале слева и вверху. После работы инструмента картинка будет выглядеть так:

Нас интересует выделенный объект. Надо подкорректировать его размеры. Для этого на нужном фрагменте сделайте клик правой кнопкой мышки и в открывшемся меню выберите – «Редактировать параметры фрагмента». В открывшемся окошке выставляете размеры шапки и нажимаете ОК.

Все размеры отредактированы, теперь остаётся перенести этот фрагмент на шапку. Для этого заходим в меню и выбираем — Редактирование ==> Скопировать

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

Вот и всё, шапка в принципе готова. Смотрим, что у нас получилось. Это и будет шапка сайта, вернее её основа.

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

Вот и всё, это был самый простой способ. Освоив возможности Фотошопа, можно делать более оригинальные виды шапок. Всё в Ваших руках.

 

Статья была полезной?

лучших 500+ изображений в заголовках | Скачать бесплатные изображения на Unsplash

Best 500+ Header Pictures | Скачать бесплатные изображения на Unsplash

• A Photophotos 536
• Степка фотосколков 2,6K
• Группа людей 4

Изображения заголовков

Фоны

Обои

Person

Маркетинг

NOINS

NOUTSTASH

NOINSPLASH. logo

Unsplash+

В сотрудничестве с Чарльзом Эторомой

Unsplash+

Разблокировать

suitmanmale

Джоанна Косинска – –––– – – –– ––– –– –––– – –.

Патрик Томассо

Hd серые обоиHd обои водаморе

Бенджамин Ведемейер

0010 writingblogBook images & photos

Unsplash logo

Unsplash+

In collaboration with Ahmed

Unsplash+

Unlock

Best soccer picturesFootball imagesboy

Hd abstract wallpapersgulf of mexicoEarth images & pictures

Clark Tibbs

signwordsquote

Priscilla Du Preez

WeathermistHd темные обои

Super Snapper

Hd обои для компьютераHd обои для ноутбукаmacbook pro

Tengyart

Nature imagesSpace images & picturesuniverse

Unsplash logo

Unsplash+

In collaboration with Nathan Watson

Unsplash+

Unlock

Hd wallpapersHd 3d wallpapersrender

Brandi Redd

Texture backgroundsHd white wallpapersPaper backgrounds

Ian Schneider

Фоны для сайтаpicsocial

Рабочий столРозовые обоиHD пастельные обои

JESHOOTS. COM

businessstudytech

Дэвид Мартин

чарльстонартур равенел мл. BridgeUnited States

UNSPLASH LOGO

UNSPLASH+

В сотрудничестве с Getty Images

UNSPLASH+

Разблокировать

Фотографии Изображения и PicturessTanding

11111111111111111111111111111111111111111111111111111111111111111111111111111111111111t фотомальчик

WeathermistHd темные обои

Природа фотоКосмос картинкивселенная

Текстуры фоныHd белые обоиБумажные фоны

businessstudytech

Пляж изображения и картинкиpositanoИталия картинки и изображения

–––– –––– –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

Hd желтые фоткиHq фон фотографииHd обои дизайн

Hd серые фоткиHd обои водаморе

Лидерствоösterreichadventure

writingblogBook images & photos

Hd abstract wallpapersgulf of mexicoEarth images & pictures

signwordsquote

Hd computer wallpapersHd laptop wallpapersmacbook pro

Hd wallpapersHd 3d wallpapersrender

Website backgroundspicsocial

Related collections

Header

375 photos · Curated by Hannes Steiner

Заголовок блога Обои

3. 1k фото · Куратор BIZ CELL

header

67 фото · Куратор Эрих Фришеншлагер

Рабочий столРозовые обои HD пастельные обои

charlestonarthur ravenel jr. мостСоединенные Штаты

фотографииЛюди изображения и картинкистоя

костюммужчина

Hd абстрактные обои Мексиканский заливЗемля изображения и картинки

Hd обои компьютерHd обои для ноутбукаMacbook Pro

Текстуры фоныHd белые обоиБумажные фоны

фотографииPeople изображения фотографии0011

пляжные изображения и картинкипозитаноиталии картин и изображения

HD Желтая обои для обои. BridgeUnited States

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – – .

Hd grey wallpapersHd water wallpaperssea

leadershipösterreichadventure

writingblogBook images & photos

signwordsquote

Related collections

Header

375 photos · Curated by Hannes Steiner

Blog Header Wallpapers

3. 1k photos · Curated by BIZ CELL

header

67 фото · Куратор Эрих Фришеншлагер0011

Веб-сайт backgroundspicsocial

businessstudytech

Просматривайте премиум-изображения на iStock | 20% off at iStock

Unsplash logo

Make something awesome

Website Header Image Stok Fotoğraf, Resimler ve Görseller

Görsel

• Görsel
• Fotoğraf
• İllüstrasyon
• Vektörler
• Video

45.563

website header изображение сток фото ве görselini inceleyin veya daha fazla сток фото ве görsel keşfetmek için yeni bir arama başlatın.

Телефон:

En popüler

düğmeli renkli web afish. пастель деграде renkler ve soyut geometrik zemin ile yatay promosyon afiş koleksiyonu. башлык тасарымы. Canlı купон Шаблону. vektör eps 10 — изображение заголовка веб-сайта стоковые иллюстрации

Düğmeli renkli Web afiş. Pastel degrade renkler ve soyut…

бело-синий современный абстрактный широкий баннер с геометрическими фигурами. темно-синий и белый абстрактный фон. — изображение заголовка веб-сайта стоковые иллюстрации

Белый и синий современный абстрактный широкий баннер с геометрическими фигурами.

баннеры tasarım şablonu ve moleküler yapıları ile site için başlıklar. soyut vektör arka planı. bilim, tıp ve yenilik teknolojisi kavramı. dekorasyon веб-сайтов ве diğer fikirler. — изображение заголовка сайта стоковые иллюстрации

Баннеры tasarım şablonu ve moleküler yapıları ile site için başlık

синий современный абстрактный широкий баннер с геометрическими фигурами. темно-синий абстрактный фон. — изображение заголовка веб-сайта стоковые иллюстрации

Синий современный абстрактный широкий баннер с геометрическими фигурами. Темно…

bilim ve teknoloji afiş büyük kümesi. kimyasal ve moleküler yapısı — изображение заголовка сайта стоковые иллюстрации

Bilim ve teknoloji afiş büyük kümesi. Kimyasal ve moleküler yapısı

mavi ve sarı renkli geometrik afiş arka plan. yarı ton geometrik şekillerin evrensel eğilimi. современная векторная иллюстрация. — изображение заголовка веб-сайта стоковые иллюстрации

Mavi ve sarı renkli geometrik afiş arka plan. Yarı ton geometrik ş

vektör soyut tasarım afish. баннерная сеть şablonları kümesi. eps10 вектор. — изображение заголовка веб-сайта, стоковые иллюстрации

Vektör soyut tasarım afish. Баннерная сеть şablonları kümesi. Eps10…

metin, sözcük veya ürün görüntüleme alanı olan koyu mavi minimal doku afişi. afiş, fon, kutlama, yıldönümü, ekran veya herhangi bir arka plan için. — изображение заголовка веб-сайта stok fotoğraflar ve resimler

Metin, sözcük veya ürün görüntüleme alanı olan koyu mavi minimal. ..

bir fotoğraf için üçgen elemanları ile vektör beyaz afiş kümesi. — изображение заголовка веб-сайта фондовых иллюстраций

Бир fotoğraf için üçgen elemanları ile vektör beyaz afiş kümesi.

Soyut Afiş Tasarım Web şablonu Seti, Yatay Başlık Web Afiş — Заголовок веб -сайта. изображения фондовых иллюстраций

Фотографии и геометрические изображения, которые вы можете использовать в качестве фона…

Sunu slayt şablonları veya kahraman banner resimlere web siteleri veya uygulamalar için. i̇ş konsept çizimler. современный стиль düz — изображение заголовка веб-сайта стоковые иллюстрации

Sunu slayt şablonları veya kahraman banner resimlere Web…

sıvı dinamik arka plan web siteleri, açılış sayfası veya iş sunumu için. soyut geometrik duvar kağıdı. sosyal medya başlığı. модный dalgalı şekiller. — изображение заголовка веб-сайта стоковые иллюстрации

Sıvı Dinamik arka план веб-сайтелери, açılış sayfası veya iş…

açılış sayfası şablonu. i̇nternet sayfaları vektör ui iniş için web sitei düzeni tasarım elemanları altbilgi üstbilgi menüsü navigasyon tel kafes — изображение заголовка веб-сайта стоковые иллюстрации

Açılış sayfası shablonu. Интернет Sayfaları вектор уи iniş için…

dijital uygulama, веб-urünleri için kullanılabilir Iş şablonları paketi. веб-сайты tasarımı, sunumlar, portföy, sunum slaytları, el ilanı, broşür, broşür kapağı, yıllık rapor için vektör şablonları. — изображение заголовка веб-сайта стоковые иллюстрации

Dijital uygulama, web ürünleri için kullanılabilir iş şablonları…

soyut afiş tasarım web şablonu seti, yatay başlık web afiş — изображение заголовка веб-сайта стоковые иллюстрации

Soyut afiş tasarım web şablonu Seti, Yatay başlık web afish

arama çubuğu ve büyüteç cam simge tasarımı. — изображение заголовка веб-сайта стоковые иллюстрации

Arama çubuğu ve büyüteç cam simge tasarımı.

yatay vektör siyah web banner fotograf için diyagonal renk hatları ve alan ile şablonlar. — изображение заголовка веб-сайта стоковые иллюстрации

Yatay vektör siyah web banner fotoğraf için diyagonal renk hatları

mutlu çeşitli erkek iş ortakları el sıkışma — изображение заголовка веб-сайта stok fotoğraflar ve resimler

Mutlu çeşitli erkek iş ortakları el sıkışma

üstbilgi, баннер tasarım şablonları düzenlenebilir düzenini минималистская векторная иллюстрация. daireler ve yuvarlak şekiller ile yaratıcı современный план мави арка. — изображение заголовка веб-сайта стоковые иллюстрации

Üstbilgi, баннер tasarım şablonları düzenlenebilir düzenini…

basma düğmesi ile renkli web afişi. soyut sıvı şekilli promosyon afişleri. — изображение заголовка веб-сайта стоковые иллюстрации

Basma düğmesi ile renkli web afişi. Soyut sıvı şekilli promosyon…

halftone style banners set — website header image stock illustrations

Halftone style banners set

i̇ş için ayarlanan açılış sayfaları şablonları — website header image stock illustrations

İş için ayarlanan açılış sayfaları şablonları

online tıp açılış sayfası şablonu veya tıbbi kahraman afiş tasarım konsepti. soyut arka plan üzerinde 3d çizgi sanat tarzı insan kalp anahat organ vektör illüstrasyon — изображение заголовка веб-сайта стоковые иллюстрации

Online tıp açılış sayfası şablonu veya tıbbi kahraman afiş tasarım

веб-сайт Sayfaları düzeni. веб-сайты elemanları arayüzü ui şablon vektör tasarım ile internet tarayıcısı pencereleri — изображение заголовка веб-сайта фондовые иллюстрации

Web sayfaları düzeni.