Найти тему

Шаблон "Про бизнес". Настройка шапки.

Шапка сайта или хедер (header). Не люблю я эти англицизмы. Поэтому будет шапка... И так, что такое шапка сайта и для чего она нужна. Не буду оригинальным, шапка сайта - это верхняя часть страницы сайта, в которой обычно находится его название, логотип, контактная информация и меню. Хотя, лично я не считаю что меню относится к шапке. Меню это отдельный элемент функционала сайта, со своей структурой и назначением.

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

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

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

На самом деле структура шапки шаблона состоит из трех блоков. Левый, правый и между ними центральный. Вот о нем и пойдет сейчас речь. Ну правда, столько места пропадает в центре шапки и его нужно чем-то занять. Загрузим туда рекламный баннер. Это может быть картинка. К ней можно добавить ссылку и это уже кликальбельный баннер. Но, это слишком просто. Нужно что-то по сложнее. Сделаем баннер на HTML и CSS.

В панели управления шаблоном есть вот такое поле

-2

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

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

-3

Вводим нужную ссылку и нажимаем "ОК". В нашем поле появится тег ссылки с прописанным адресом.

-4

Теперь в эту ссылку вставим картинку для баннера. Нажимаем на иконку с картинкой и откроется еще одно окно.

-5

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

-6

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

-7

Прописываем нужный текст.

-8

В принципе можно вставить текст, выделить его и нажать на иконку Р, после чего текст будет обернут в блочный html-тег р.

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

-9

Картинка есть, текст есть, баннера нет. Нужно это все как-то оформит с помощью CSS. Для этого в нашей ссылке предусмотрен класс banner-3s, который был прописан вручную, т.к. предполагалось оформление баннера. Теперь нужно прописать CSS стили для этого баннера. Где и как это можно сделать.

Если очень хочется, то стили можно прописать через атрибут style непосредственно в ссылке. Можно в это поле вставить небольшую CSS таблицу. Но делать то и другое не рекомендую. Лучше прописать стили баннера в глобальных стилях шаблона. Понимаю, неохота. Нужно лезть в файл, что-то писать, потом его сохранять и загружать на сервер. Но, можно и по другому.

В настройках шаблона есть раздел "Дополнительные настройки".

-10

Нам нужен "Блок HTML в верху страницы". Прописываем в нем таблицу со стилями нашего баннера.

-11

Сохраняем настройки и смотрим результат.

-12

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

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

-13

Убираем чекбокс и сохраняем настройки. Смотром результат.

-14

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

-15

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

-16

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

-17

Перепишем ориентацию и сделаем ее по правому краю.

-18

Смотрим результат.

-19

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

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

-20

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

-21

А что будет, если удалить сразу оба модуля? Правильно, справа ничего не будет.

-22

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

-23

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

-24

Ну, вот вроде бы все. Или нет, что-то забыл.

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

-25

Ставим чекбокс, сохраняем настройки и смотрим результат.

-26

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

-27

Ставим чекбокс, сохраняем настройки и смотрим результат.

-28

Теперь точно все, т.к. настроек для шапки больше не осталось. Но, можно дописать, если вам очень нужно. Пишите, договоримся.

Если понравилась статья, то ставьте лайк палец вверх, если нет - вниз. Если не подписаны на канал, подписывайтесь. Это не сложно, надавил на кнопочку и все, уже подписан.

#разработка веб-сайтов #создание сайтов #веб-дизайн #интернет #myengine