IQSites - умный конструктор сайтов
+7 (911) 11-8888-1
Звоните прямо сейчас
Социальные сети
Улучшаем текст при помощи HTML тегов

Улучшаем текст при помощи HTML тегов

В конструкторе IQSites не случайно заложен виджет HTML кода, он существенно расширяет возможности сайта, позволяет нелинейно прорабатывать контент, добавлять различные полезные элементы. Для начала, давайте посмотрим, как можно применять html теги на примере работы с обычным текстом.

12 декабря 2016 в 18:33

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

ВАЖНО: все html теги в данной статье будут написаны с пробелами перед и после треугольной скобки ( < > ), но в визуальном редакторе вы должны убрать эти пробелы.

Итак, начнем. Возьмем простенький экран лендинга с фоновой картинкой, заголовком и второстепенным текстом:

Улучшаем текст при помощи HTML тегов

1. Смена цвета фрагмента текста

Допустим у нас есть УТП - "Лучшая пекарня в мире" и мы захотели сменить цвет слова "пекарня". Для этого воспользуемся html-тегом < font > < /font > (без пробелов). Открываем наш виджет с обычным текстом и прописываем вокруг "пекарня" следующее:

ЛУЧШАЯ < font color="cfaf8a" >ПЕКАРНЯ< /font > В МИРЕ

cfaf8a = код цвета, вы можете выбрать любой цвет, его можно получить прямо в настройках того же виджета текста, в строчке "Цвет текста:", подберите нужный и скопируйте код цвета в наш html код.

Улучшаем текст при помощи HTML тегов
Улучшаем текст при помощи HTML тегов

2. Жирный фрагмент текста

Возьмем наш второстепенный текст и выделим некоторые слова жирным. Идем в соответствующий виджет текста и прописываем следующее:

Вкус, за которым вы будете возвращаться < b >снова и снова< /b >.

Мы прописали тег < b > < /b > и выбранные слова стали немного жирнее обычного, в нашем примере это не сильно заметно, но если текст был бы большего размера, это бы было заметнее. Небольшая оговорка: вы не сможете сделать жирным текст, у которого уже задан стиль Bold в настройках виджета.

Улучшаем текст при помощи HTML тегов
Улучшаем текст при помощи HTML тегов

3. Подчеркнутый фрагмент текста

Тег < u > < /u > делает текст подчеркнутым. В нашем случае мы просто добавляем этот тег вокруг того, что уже есть:

Вкус, за которым вы будете возвращаться < u >< b >снова и снова< /b >< /u >.

Получаем:

Улучшаем текст при помощи HTML тегов
Улучшаем текст при помощи HTML тегов

4. Зачеркнутый фрагмент текста

Тег < s >< /s > делает текст зачеркнутым. Актуальный тег, когда необходимо поставить цену по акции, например. Заменим наш второстепенный текст и пропишем следующее:

Цены от < s >60 рублей< /s > 30 рублей за единицу!

Получаем:

Улучшаем текст при помощи HTML тегов
Улучшаем текст при помощи HTML тегов

5. Размер фрагмента текста

В последнем примере не хватает увеличить размер шрифта в фрагменте "30 рублей". Сделаем это посредством тега < font size >:

Цены от < s >60 рублей< /s > < font size="35" >30 рублей< /font > за единицу!

35 = размер текста.

Получаем:

Улучшаем текст при помощи HTML тегов
Улучшаем текст при помощи HTML тегов


Подписка на обновления блога
Хотите оперативно получать новости компании из корпоративного блога? Просто заполните форму ниже.
Вы сможете отписаться в любой момент.
* Поля, обязательные для заполнения
Теги: IQSites, Полезное

Другие статьи блога

Как работает модуль технической поддержки в IQSites?
Как работает модуль технической поддержки в IQSites?
Сайт для социальной сети будущего - Infinite Loop.
Сайт для социальной сети будущего - Infinite Loop.
Make WordArt или назад в 90е
Make WordArt или назад в 90е

×

Информация, за которую другие щедро платят!

Подпишитесь на блог IQSites и получайте свежие лайфхаки конверсии сайтов, привлечения трафика и клиентов, тренды веб-дизайна, реальные кейсы и многое другое. Это всё ещё бесплатно!
* Поля, обязательные для заполнения

Нажимая "Подписаться", Вы принимаете
условия обработки персональных данных.

Наверх
array(5) { ["id"]=> int(0) ["ip"]=> string(13) "54.225.39.142" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "47ead4985fa0839eae1366f36a71a301" }