Если мы просто вставим логотип внутрь header, без всяких стилей:
То, можно будет увидеть следующую картину:
Место для меню сместилось на уровень ниже и теперь отображается не правильно.
Чтобы избежать этой ситуации, к логотипу нужно добавить следующие стили CSS.
Для ссылки, которая содержит логотип мы используем обтекание слева float:left, и с помощью margin-ов задаем точную позицию логотипа.
Теперь все отображается так, как надо:
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Как установить кликабельный логотип в шапку
Логотип это стилизованное изображение, несущее в себе информацию о компании, группе, сообществе и т.п. Часто логотип выполнен в стиле минимализма с целью лучшего восприятия и запоминаемости. Одной из основных задач логотипа является указание на род деятельности владельца и визуальная идентификация принадлежности. Кроме изображения в логотипе может присутствовать наименование или же часть наименования владельца. Разработка логотипа достаточно сложный процесс и желательно заказывать создание у специалистов. Но сегодня не об этом, это лишь вступление.
Сайты в интернете не исключение и практически всегда имеют свой собственный логотип, который принято размещать в headere (шапке) страницы. Логотип практически всегда делают кликабельным, и как правило ссылка с лого ведет на главную страницу проекта. Вот именно размещением логотипа ссылкой в шапке, мы и будем сегодня заниматься.
Для начала необходимо подготовить изображение логотипа, желательно в формате .PNG, который поддерживает прозрачности и полупрозрачности. Я подготовил для этого урока простое несложное изображение, которое использую для установки в шапке шаблона одного из сайтов созданных на okis.ru. Выглядит моя заготовка вот так:
У заготовки нет фона и она имеет размеры 350 пикс. на 100 пикс. В вашем случае размеры будут вероятнее всего другие.
Итак для того что бы установить логотип в шапку нужно с помощью html привязать к изображению ссылку, добавить описание для поисковых систем и пользователей у которых отключен просмотр изображений на сайтах и назначить при необходимости атрибуты ссылки. Кажется сложным? Не беда, ведь у вас под рукой визуальный редактор с помощью которого можно сделать все это быстро.
- Загрузите изображение через «Загрузку файлов» и скопируйте ссылку
- Начните создание страницы (никакие поля заполнять не нужно)
- Вставьте изображение на страницу с помощью «Добавить/Изменить изображение, не забыв прописать описание.
- С помощью кнопки «Добавить/Изменить ссылку» привяжите к картинке ссылку.
- Отключите визуальный редактор и скопируйте готовый html код.
- Просто уйдите со страницы не закрепляя результат.
Полученный код выглядит вот так:
Можете просто скопировать его и заменить ссылки и значения на свои.
Далее перейдите на вкладку размещения рекламы и вставьте код логотипа во второе поле, (Нижеследующий код будет отображаться под меню сайта), нажмите кнопку «Обновить» что бы закрепить результат. Перейдите на сайт и посмотрите результат. Изображение логотипа будет кликабельно и расположено под меню. Остается изменить положение логотипа что бы установить его ссылкой в шапке.
Для этого вставленный ранее код нужно заключить в DIV контейнер и присвоить ему идентификатор. 🙂 Пожалуй проще будет показать чем объяснить. Результат:
Итак div имеется и нужно с помощью css указать ему положение на странице. Для этого в редактор css добавляем следующий код:
Свойство position указывает на то как элемент будет расположен на странице. В нашем случае элемент будет абсолютно позиционирован, и остальные элементы не будут взаимодействовать с ним.
Закрепите изменения кнопкой «Обновить» css редактора и перейдите на сайт посмотреть результат. Если вы все сделали правильно, логотип сместится вверх и немного вправо.
Собственно цель достигнута, и мой логотип на месте. Скорее всего у вас другой шаблон и вам нужно поэкспериментировать со значениями что бы поставить логотип со ссылкой на место.
Спасибо за внимание, если все таки что то не понятно спрашивайте в комментариях. Обязательно постараюсь ответить.
Добавление логотипа
Логотип — это текстовое или графическое изображение, которое представляет вашу компанию. Добавление логотипа в шапку или подвал поможет вам подчеркнуть дизайн вашего веб-сайта и показать брендинг вашей компании. В этой статье вы сможете найти подробную инструкцию о том, как добавить текст или изображение в качестве логотипа для вашего сайта.
Вы также можете посмотреть нашу короткую видео-инструкцию о настройках логотипа:
Добавление текстового логотипа
Чтобы добавить логотип в шапку или подвал вашего сайта, наведите курсор мыши на пустую секцию и нажмите «плюс», затем выберите элемент Логотип во всплывающем окне:
Важно: вы можете добавить только один логотип к шапке и подвалу на вашем сайте.
Чтобы отредактировать логотип, выделите весь текст двумя кликами мыши и измените его вид во всплывающем меню:
Здесь вам доступны настройки цвета, размера, шрифта и выравнивания текста.
Вы также можете регулировать размер логотипа с помощью рычагов, которые находятся по бокам. Для этого наведите мышку на пустое пространство между элементами в блоке и потяните разделитель в нужную сторону:
Примечание: учтите, что размер логотипа может быть ограничен высотой блока и соседними колонками. Если вы сделали максимальный размер, но ничего не изменилось, попробуйте удалить некоторые элементы по бокам, чтобы дать логотипу больше пространства.
Нажмите на «бегунок» в конце строки, чтобы открыть Настройки логотипа :
Во вкладке Контент вы можете изменить шрифт и начертание текста или добавить слоган под логотипом — короткую фразу, которая описывает вашу компанию:
Подсказка: обратитесь к статье Добавление собственного шрифта на сайт, чтобы узнать, как применить собственный шрифт к логотипу.
Во вкладке Поведение вы можете выбрать страницу, блок или ссылку на сторонний ресурс, которая будет открываться при нажатии на логотип. Детальнее вы можете прочитать об этом в статье Добавление ссылок на элементы.
Добавление изображения в качестве логотипа
Для начала выделите весь текст двумя кликами мыши и нажмите на «бегунок» в конце всплывающего меню:
Перейдите в раздел Изображение во вкладке Контент и загрузите или выберите из галереи картинку для вашего нового логотипа:
Подсказка: ознакомьтесь со статьей Добавление alt-текста на изображения, чтобы узнать о преимущества добавления описаний к картинкам.
Нажмите на него в шапке или подвале сайта, чтобы изменить его отображение в блоке:
Не забудьте опубликовать свой сайт, чтобы изменения вступили в силу.
Обновлено на: 19/02/2021
Была ли эта статья полезна?
