8 Способів змінити дизайн посилань, щоб виділити їх, верстка сайту

Коли справа доходить до посилань, їх легше прийняти такими, як вони є. Зрештою, ви просто посилаєтеся на який-небудь текст і все. Але що можна реально зробити, щоб змусити людей клікнути по ним? Може п одчерківаніе тексту CSS?

Є купа маркетингових методів, якими можна скористатися, щоб роздобути ці кліки. Але що, якщо потрібно просто привернути більше уваги до заслання?

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

Виділіть свої посилання! У цій статті я розповім про 8 ефективні способи зміни стилю посилань.

1. Додайте колір

Один з кращих способів стилізації посилань полягає в тому, щоб додати колір. Коли більша частина тексту чорного кольору, додайте інші кольори, щоб зробити посилання помітніше.

Але ви повинні бути впевнені, що обраний колір взаємодіє з іншою частиною вашого бренду. Інакше посилання будуть виділятися, але неправильно.

Також пам'ятайте про контрасті. Темний, майже чорний колір не забезпечить відмінності посилання від решти абзацу. А надто світлий не дасть достатньої контрасту між білим фоном і текстом.

Мерайя c Femtrepreneur використовує цікавий червоний колір, щоб виділити свої посилання:

Щоб змінити колір посилань на сайті, погляньте на таблицю стилів теми і знайдіть наступне:

Змініть значення поряд з color. Це воно!

Невеликий рада - якщо ви поміняєте значення кольору, і нічого не зміниться, цілком ймовірно, що посилання в ваших постах контролюються іншим елементом. Прокрутіть таблицю стилів і знайдіть рядок .content a або .entry a. Ось де потрібно змінити значення кольору.

Потрібна допомога у виборі кольору? Скористайтеся одним з популярних інструментів:

• 0to255;
• Adobe Kuler.

2. Зробіть жирніше

Щоб зробити CSS підкреслення посилання напівжирним, додайте наступний код:

Або використовуйте шрифт, який підтримує різні значення насиченості (товщини):

Наприклад, шрифт Open Sans має товщину 300. 400. 600. 700 і 800. Якщо товщина тексту 400. то хорошим вибором для посилань буде використання товщини 600. 700 або 800.

3. Додайте підкреслення

Щоб здійснити підкреслення посилання CSS. використовуйте цей код:

Більш нетрадиційний спосіб додати підкреслення посиланням - встановити нижню межу. Цей метод дає більше гнучкості, коли мова заходить про те, як відображається підкреслення.

Невеликий рада. Не обов'язково дотримуватися суцільний кордону. Можна спробувати один з наведених нижче варіантів:

• CSS підкреслення пунктиром (dotted);
• Точковий (dashed);
• Подвійний (double).

4. Стиль курсивом

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

Ось як можна домогтися цього:

5. Зробіть всі букви великими

Якщо ви подивіться на пости в цьому блозі. то помітите, що посилання оформлені таким чином. Ось як можна оформити посилання великими літерами:

6. Використовуйте інший шрифт

Ще один спосіб виділити посилання - використовувати інший шрифт. Цей метод може внести безлад, якщо він неправильно використаний. Так що дотримуйтесь наступних порад.

Для забезпечення максимальної злагодженості виберіть шрифт з того ж сімейства. У стислому або чорному варіанті шрифт буде виділятися, але не надто відрізнятися.

Для своїх посилань я вибрала шрифт, який досить схожий, щоб не кидатися в очі, але відрізняється від решти тексту. Так я отримала контраст, який хотіла.

7. Додайте фоновий колір

Один з моїх улюблених способів виділити посилання (після підкреслення точками CSS) - додати фоновий колір. Подивіться на наступний приклад:

Ви ні в якому разі це не пропустіть.

Все, що потрібно зробити, це додати колір фону і, можливо, невеликий внутрішній відступ. Також можна змінити колір шрифту для кращої Новомосковскемості:

8. Комбінуйте!

Для досягнення максимальних результатів скомбінуйте будь-які два (або більше) з перерахованих вище методів виділення. Ви, напевно, помітили, що в більшості наведених прикладів посилання були кольоровими. Це пов'язано з тим, що колір відіграє дійсно велику роль у виділенні посилань в порівнянні з навколишнім текстом.

Переклад статті "8 WAYS TO STYLE LINKS SO THEY STAND OUT" був підготовлений дружною командою проекту Сайтобудування від А до Я.