Как сделать красивый заголовок сайта
CSS стили для заголовков сайта
Оформление текстовой информации в Web имеет свои определенные особенности. Если вы размещаете на сайте какой-то контент, то, как правило, он должен быть хорошо структурированным — для этого используются заголовки. С их помощью тексты получаются максимально легкими для чтения и восприятия.
Собственно, о них мы сегодня и поговорим — пост использует наработки из этой англоязычной статьи. Там имеется 6 разных вариантов оформления заголовок на любой вкус, я же приведу лишь 5 самых интересных, на мой взгляд. Они могут давать вам идеи и подсказки при реализации своих уникальных стилей. Также советуем глянуть подборку лучших шрифтов Google Fonts для заголовков.
Перед тем как начать пару моментов:
Напоследок во вступлении упоминается такое понятие как «вертикальный ритм» (vertical rhythm). Оно фактически задает все отступы между блоками на странице — будь то заголовки, текстовые параграфы, изображения или даже просто элементы шаблона сайта. Особенно актуально это при использовании необычной типографики. Итак, во всех примерах CSS стилей используется один и тот же «ритм»:
Теперь можно переходить непосредственно к практике.
Пример 1
Начинаем с более-менее простого варианта. Типографика отлично подходит для сайта СМИ, может быть даже какой-то газеты. Особых изысков это решение не предлагает, разве что используется 2 шрифта — Ultra (sans-serif), Orienta (sans-serif). Итоговый CSS код:
Пример 2
Здесь уже чуть более интересная реализация — добавляется фон для заголовка в виде сплошной заливки и картинки. CSS код прописан достаточно грамотно, отступы указаны в процентах дабы при уменьшении изображения текст заголовка не сливался с фоновой картинкой. Используемые шрифты Titillium Web (sans-serif), Muli (sans-serif).
Пример 3
Теперь пример реализации заголовков для сайта с темным дизайном. Для этого был подобран достаточно яркий, контрастный голубой цвет в противовес темно серому фону. Используемые шрифты Hammersmith One (sans-serif), Questrial (sans-serif).
Пример 4
Экспериментируем с фоном — как насчет добавить деревянную текстуру. Шрифты Scada (sans-serif), Carrois Gothic (sans-serif), причем листочек для H2 также реализован через шрифт, а не картинку.
Пример 5
Еще одно интересное и не совсем обычного цветовое решение — возможно, подтолкнет вас к каким-то своим идеям и реализациями. Заголовки, в принципе, не всегда могут иметь жирный большой шрифт — бывают и такие варианты.
Если вы знаете CSS практически досконально, то в оригинальной статье рассказывается как использовать некие pre-processors в стилях дабы сократить объем кода и сделать его проще. Честно говоря, использование функций и подстановку параметров в файле стилей CSS я видел впервые, но код получается весьма наглядным. Также, разумеется, в исходной статье найдете ссылки на исходники и демо версии всех вариантов.
P.S. Тем, кто работает в интернете или только-только начинает статья о том что такое ТИЦ поможет сориентироваться в одном из самых актуальных и обсуждаемых понятий в сети.
Самый хороший пример 4. Остальное плохо подобраны цвета шрифтов. Но всёравно спасибо за инфу, будет полезно для новичков.
А вообще нужно не только подбирать цвет и размер тени (эффект вдавлиности), но и подбирать цвет самого шрифта, так как шрифт и его объёмность + фон должны гармонично смотреться и играть между собой.
Vladymyr, тут еще важно как шрифты смотрятся в общем дизайне сайта — тогда может некоторые из них и «заиграют» весьма интересно.
В примере 2 как сделать так, чтобы линия тега h2 обрывалась если есть фото напротив.
Пример тут http://clip2net.com/s/jaFF1S
Катя, точный код, увы, вам не подскажу. Было бы просто, если бы для этого h2 был какой-то class, тогда в стилях можно было бы легко прописать для h2.class_name ширину width: 400px. Но если прописывать просто для h2, то все они будут одинаковые даже когда картинки рядом нет. Может попробовать width: 100%, или убрать position: relative.
Огромное спасибо! Очень помогло )
Антон, рассмотреть все варианты нереально:) Реализаций стилей для заголовков может быть множество.
10 советов по улучшению заголовков страниц
Тег принадлежит разделу HTML-документа и выглядит следующим образом:
Функции тега
Тег задает заголовок страницы и указывает пользователям и поисковым машинам тему данной страницы. В браузере заголовок отображается на вкладке данной веб-страницы.
Тег — это первое, что появляется в результатах поиска. Пользователь может оценить, соответствует ли сайт его запросу по тегу :
У пользователя в голове откладывается ваш заголовок, потому что он появляется в браузере, в истории посещений, в любимых страницах… Заголовок — это также первое, что видит пользователь, когда переходит по ссылке. Например, из социальных медиа:
Как написать хороший тег заголовка?
Есть 10 советов, которые помогут улучшить заголовок и завоевать симпатию поисковых систем.
1. Мыслите последовательно
Тег title HTML действительно должен быть последовательным. Он должен четко описывать тему страницы. Вы не можете озаглавить страницу контактов « Фотогалерея «.
Основные ключевые слова должны быть использованы в заголовке страницы. Если это не так, тогда либо ваш заголовок не полностью соответствует странице, либо ваши ключевые слова подобраны неправильно.
Избегайте заголовков по умолчанию и неоптимизированных заголовков типа « новая страница «, « без названия «… И автоматически генерируемых заголовков, которые включают в себя ключевые слова типа « Добро пожаловать на мой сайт! »
2. Не обманывайте! (Google не глуп)
Ваш HTML meta title не должен представлять собой набор различных ключевых слов без всякого смысла. Текст должен содержать логичное выражение, которое отражает содержание страницы. Алгоритмы Google Panda и Penguin налагают санкции за такое.
Следите, чтобы в заголовке не повторялись несколько раз одни и те же ключевые слова, если не хотите раздражать своих читателей и быть удаленным из результатов поисковой.
3. Думайте как человек, а не как робот
Попробуйте поставить себя на место пользователя: после того, как он ввел в поиск ключевое слово и получил список ссылок, какой заголовок он выберет? Почему он должен захотеть нажать на вашу ссылку? Заставьте его почувствовать эмоции, благодаря которым он должен выбрать ваш сайт, а не конкурента.
4. Короткие названия, которые говорят много …
Все больше и больше пользователей посещают сайты со смартфонов или планшетов, и заголовок страницы должен быть оптимизирован под эти устройства. Мы рекомендуем использовать заголовок такого же размера ( от 55 до 65 символов ), но избегать длинных слов.
5. Будьте уникальны
Поисковые системы не должны находить дублированного контента ( наличия нескольких страниц в пределах веб-сайта, содержащих тот же самый контент ). Выбирайте уникальные, понятные и персонализированные заголовки для каждой страницы сайта. Главная страница, галерея или страница контактов имеют разные функции и должны быть дифференцированы.
6. Покажите, кто вы такой!
Если вы популярны в поиске, то можете написать в теге title HTML страницы имя вашего бренда. Но не злоупотребляйте этим! Вы должны указать основной атрибут соответствующей страницы ( например, фотогалерея ), прежде чем указывать название бренда. В противном случае вы вызовите недовольство посетителей.
7. Удаляйте стоп-слова
Стоп-слова — это слова, которые фильтруются до или после обработки данных на естественном языке ( текста ).
8. Заголовок идет первым
9. Не ленитесь и не используйте заголовок из
Не копируйте заголовок страницы в теге
HTML-документа. Поисковые системы будут рассматривать эту практику как дублированный контент, и вы спровоцируете негативную реакцию пользователей.
10. Не используйте специальные символы
Но есть исключения: символ « & » вместо « and » может сэкономить для вас количество символов ( например, « sale of shoes and bags » в таком виде « sale shoes & bags « ).
Адаптивные заголовки (текст) на чистом CSS
Приветствую вас друзья! Хочу еще раз поздравить всех (на всякий случай для тех, кто не получал моего новогоднего поздравления) с наступившим Новым годом!
Давно не писал на своем блоге. Причина все таже — катастрофическая нехватка времени. Помимо всех моих забот, которых итак у меня не мало я ввязался в такую большую авантюру, как строительство собственного дома. По стройке я здесь писать не буду, создам для него отдельный проект. Но сейчас не об этом…
И так, сегодня поговорим о верстке и о таком трюке в CSS, который позволяет сделать наши заголовки адаптивными, причем размер может меняться плавно при уменьшении экрана браузера. Вообще, подзаголовками может подразумеваться любой текст на сайте.
Для динамичного уменьшения шрифта воспользуемся методом calc() в css.
Размер шрифта меняется в пределах от 30px (на большом экране) до 24px (на мобильном экране) с помощью формулы, которая работает в методе calc().
Расшифровку цифр я наглядно представил на картинке ниже.
Расшифровка формулы адаптивного заголовка
Итак, давайте разберем подробнее каждый компонент формулы.
1.5rem — минимальный размер шрифта на мобильном при ширине контейнера 320px. Для тех, кто не в курсе rem (root em) — это условная единица, которая определяется, исходя из базового размера шрифта тега html (корневой элемент). Напишу про em и rem более подробнее в другой статье. По умолчанию базовый размер шрифта, устанавливаемый браузером равняется 16px. Вы можете самостоятельно переопределить этот размер (я этого не делаю). В нашем примере минимальный размер шрифта на мобильном — это 24px: 24/16 = 1.5
6 — разница между максимальным и минимальным размерами шрифта. То есть: 30 — 24 = 6. Думаю, здесь все понятно.
100vw — максимальная ширина контейнера сайта на широкоформатном экране. Здесь не путаем с максимальной шириной окна браузера. Именно ширина контейнера! В моем примере она равняется 1200px. Обратите внимание, что заголовки H1-H6 являются блочными элементами в HTML и растягиваются на ширину своего родителя (если нет дополнительных стилей). Вы можете возразить, сказав, что под 100vw определяется именно ширина окна браузера, а не контейнера. Да, и будете правы. Вот этот момент обсудим чуть ниже.
320px — минимальная ширина контейнера сайта на мобильном устройстве. Минимальную ширину я обычно выставляю в 320px, если будет меньше, то появляется горизонтальный скролл.
880 — разница между максимальным размером контейнера сайта и минимальным размером контейнера сайта. То есть: 1200 — 320 = 880.
Если мы данную формулу просто применим к определенному заголовку, то на широком экране FullHD (1920×1080) получим огромный размер шрифта, несмотря на то, что определили максимальный размер (в моем случае — 30px). Здесь как раз сработало значение 100vw, которое мы указали, как максимальную ширину контейнера. Как быть? Прибегнем к медиа-запросам в css.
Как видно из кода css формула с адаптивным заголовком у нас работает только в пределах от 320 до 1200px, ниже и выше — фиксированные значения. Таким образом мы избавились от слишком крупного размера на широких экранах более 1200px и слишком мелкого шрифта на экранах менее 320px.
Адаптивный режим просмотра на CodePen
В принципе здесь все. Добавлю, что данную формулу можно использовать не только для заголовков, но и для любого другого текста. Я даже, было дело, таким образом динамически изменял поля и отступы — margin и padding.
Упрощаем при помощи Sass/Scss
Дополню для любителей верстать на препроцессоре Sass (не понимаю, как можно верстать на чистом css). Лично я запихнул все это дело в миксин и просто в нужном месте его вызываю, передав минимальный и максимальный размеры шрифта.
В данном миксине медиа-запросы я вызываю через миксины Bootstrap 4, так как использую данный фреймворк при верстке макетов.
Теперь там, где нужно вызываем миксин responsive-tlt.
Вот и все хитрости. На этом все. Если возникнут вопросы, то задавайте в комментариях. Помогу обязательно!
Как сделать красивый заголовок сайта
Также в мануале мы начнем ваш путь к овладению стилем текста с помощью CSS. Здесь мы подробно рассмотрим основные основы стилей текста и шрифта, включая настройку веса шрифта, семейство и стиль, сокращение шрифта, выравнивание текста и другие эффекты, а также интервал между линиями и буквами.
Если вы некоторое время являетесь сторонним веб разработчиком, есть большая вероятность, что у вас был момент, когда вы пытались выяснить, как что-то закодировать и поняли после небольшого количества поисковых запросов. Это сообщение представляет собой набор таких CSS кодов, которые могут дать вам такие функции, как повернуть элемент липким, дать вам пунктирные линии, подчеркивающие возможности, поток текста вашей страницы в особой форме или достижение эффекта параллакса. Некоторые из них широко поддерживаются, а другие находятся на пути к полной поддержке всех браузеров.
Свойства CSS, используемые для стильного текста, обычно делятся на две категории, которые мы рассмотрим отдельно в этой статье:
1. Стили шрифта: свойства, что влияют на шрифт, который применяется к тексту, влияющий на то, какой шрифт применяется, насколько он большой, будь то жирный или курсив.
2. Стили текстового макета: свойства, влияющие на интервал и другие возможности компоновки текста, позволяющие манипулировать, например, пробелом между строками и буквами и тем, как текст выравнивается внутри поля содержимого.
Как вы уже испытали в своей работе с HTML и CSS, текст внутри элемента располагается внутри поля содержимого элемента. Он начинается в левом верхнем углу области содержимого. Как только он достигнет конца, он перейдет к следующей строке и продолжит, затем следующую строку, пока все содержимое не будет помещено в поле.
В этой статье вы найдете полезные трюки и методы CSS, которые использовались для стилизации заголовков, шрифтов, текста и контента, а не полагаться на Photoshop.
Пример для всех установок
Установка для всего оформление знаков:
Первый вариант для заголовка, где шрифт идет темный, а по кроям светлый, что визуально смотрится оригинально.
Описание выставляем под класс tlosazmilan, также для жирного знака выставил h2, что вам не нужно делать, это для наглядности идет.
Цепляющий заголовок. 5 правил, 3 модели и 10 примеров из жизни
Добрый день, дорогие друзья!
В недавней статье мы подробно разобрали один из главных элементов посадочной страницы — призыв к действию (CTA). Но при всем уважении к CTA, самым важным элементом страницы является заголовок. Это идеальное сочетание выгод вашего торгового предложения. Его главная задача — кратко и при этом ёмко донести ваше УТП до посетителя страницы.
Почему следует уделить самое пристальное внимание заголовку?
Заголовок — это первое, на что обращает внимание посетитель. У вас есть несколько секунд, чтобы заинтересовать человека, иначе он перейдет на страницу вашего конкурента.
5 правил создания манящего заголовка
Правило 1. Заголовок должен вызывать желание читать дальше
Для этого вам следует проанализировать свою ЦА и выявить ее главные потребности. Не стоит недооценивать важность этого действия. Многие владельцы бизнеса искренне считают, что точно знают потребности своей ЦА. Зачастую они путают реальные потребности ЦА и свой субъективный взгляд. Например, человек, продающий кофе оптом, может в заголовке написать о невероятном вкусе своего продукта, забыв о более важной потребности клиента — желании заработать.
Заголовок должен содержать в себе главные выгоды или интригующий вопрос.
Приведем 2 примера:
Пример 1. Заголовок, содержащий выгоды
Рисунок 1. Заголовок сайта стоматологической клиники
Заголовок в тандеме с подзаголовком содержат сразу 4 выгоды: обворожительная улыбка, бережная имплантация, цена от 15 000 рублей и гарантия до 5 лет.
Пример 2. Интригующий заголовок
Рисунок 2. Интригующий заголовок
Данный интригующий вопрос направлен на топовые компании, которые ищут исполнителя для съемки рекламного ролика. Им очень важна компетентность исполнителя, его опыт работы с крупнейшими компаниями и портфолио.
Прежде чем тестировать интригующие заголовки на своей странице, оцените, подходит ли данный вид заголовка для вашей ниши. Как минимум, это может выглядеть нелепо. Заголовком «Почему Пугачева советует ремонтировать стиральные машины у нас?» вы бесспорно вызовите эмоции у читателя, но не те, что вам нужны. Для ниши ремонта бытовой техники подходит заголовок с конкретикой, пример которого приведен во втором правиле.
Правило 2. Используйте конкретику
Выцепите главные потребности клиентов, и на их основе дайте конкретные предложения в виде цен, фактов, свойств и идентификации. Конкретика вызывает доверие и закрывает основные возражения потенциального клиента.
Рисунок 3. Заголовок, содержащий конкретику
На рисунке 3 мы достигаем конкретики при помощи идентификации (для офисов, зданий и складов) и конкретных цифр, говорящих о стоимости и сроках.
Правило 3. Вы-ориентированный заголовок
Никому не интересно слушать о достижениях вашей компании. «Мы — лидеры производства металлоконструкций» — данная фраза заставит вас в очередной раз испытать гордость за компанию, но не решит проблемы клиента. Поэтому при написании заголовка следует обращаться к клиентам с выгодами, которые они получают.
Заметьте, в данном примере мы не говорим о том, что это самый популярный в России сервис онлайн отчетности. Не кичимся масштабами и успехами компании. Мы даем бухгалтерам удобное и легкое решение — сдача отчетности через интернет без ошибок и за 5 секунд.
Правило 4. Используйте эмоциональные заголовки
Заголовок может содержать эмоциональную оценку. Это достигается при помощи качественных прилагательных, метафор, эпитетов. Вызвать в человеке эмоцию гораздо проще, чем логически убедить его сделать покупку.
Рисунок 5. Заголовок с эмоциональной оценкой
На рисунке 5 заголовок содержит эмоциональный посыл для ЦА — вы утрете нос инспектору, который пожаловал к вам с проверкой.
Правило 5. Трансляция запроса пользователя в заголовок вашей страницы
Подмена заголовка или его части при помощи utm-меток — эффективный инструмент увеличения конверсии вашей страницы. Подмена позволяет дать посетителю вашей страницы точное решение.
Рисунок 6.Подмена заголовка
На рисунке 6 показан пример заголовка при переходе с поискового запроса «ремонт стиральной машины бош павелецкая». При помощи utm-меток мы делаем подмену заголовка и максимально точно удовлетворяем потребность клиента.
3 модели заголовка
Существует 3 эффективных модели заголовка. Они просты в понимании и применении. Определить наиболее подходящую для своей ниши обычно не составляет труда, но если вы все же сомневаетесь, проведите A/B тест.
1. Модель «Выгода + выгода»
Суть ее заключается в том, чтобы выявить наиболее важные для ЦА выгоды и отразить их в заголовке. Их количество не ограничено двумя выгодами, как вы могли бы подумать, исходя из названия модели. Это может быть 2, 3, 4 выгоды… и даже больше, если они действительно важные и не перегружают заголовок.
Заголовок данной модели выглядит следующим образом:
Качественное прилагательное + предмет рекламы + выгода + выгода.
Один пример такого заголовка мы уже показали в данной статье в примере 1, где заголовок содержит 4 выгоды.
Другим примером является следующий заголовок:
Рисунок 7. Заголовок по модели «выгода + выгода»
Разберем данный заголовок по формуле, которая приведена выше:
2. Модель «Как с минимальными усилиями получить максимальные результаты»
Это в чистом виде давление на эмоции, на желание лежать на диване и получать все прелести жизни.
Конверсия страницы, которая приведена на рисунке 8, составляет 41%. Конечно, во многом этому способствовало то, что продукт предоставляется бесплатно.
Приведем более приземленный пример:
Рисунок 9. Второй пример заголовка по модели «Как с минимальными усилиями получить максимальный результат»
Формулировка заголовка несколько отличается от шаблона данной модели, но суть остается прежней — мы предлагаем заработать неимоверное состояние за 20 дней. Единственное, чего не хватает в данном заголовке — минимальных усилий. Мы не стали писать банальные «лежа на диване» или «сидя дома перед монитором». Минимальные усилия мы отразили как раз во фразе «за 20 дней».
3. Модель «Что это? Какой результат я получу?»
Заголовок этой модели строится следующим образом:
Пример такого заголовка приведен на рисунке 10.
Рисунок 10. Заголовок по модели «Что это? Какой результат я получу?»
Предметом рекламы является коучинг. Можно расположить его как в качестве заголовка, так и подзаголовка. Эмоциональная потребность закрывается фразой «постройте убойный отдел продаж», а конкретный результат показан фразой «увеличьте чистую прибыль в 3 раза».
Заключение
Надеюсь, данная статья оказалась для вас полезной, и вы найдете в ней интересные решения для своей ниши.
Подписывайтесь на наши статьи, чтобы не пропустить полезную информацию!
Давайте дружить!
Оставьте заявку на нашем сайте и менеджер проведет анализ вашей ниши.
Мы составим подробный медиаплан рекламной кампании и предложим несколько вариантов создания системы привлечения клиентов.