Tehnografi.com - Технологические новости, обзоры и советы
[adinserter block="67"]
Blogging

Как добавить текст значка или ярлыка на сайт Weebly?

Выделение текста — полезный способ привлечь внимание пользователя и продемонстрировать важную мысль. Это полезно, когда у вас большой абзац и вы хотите, чтобы пользователи убрали из него важную мысль. Такие платформы, как WordPress, по умолчанию выделяют текст с помощью встроенного стиля CSS. Даже вы можете использовать компоненты значков в Bootstrap для добавления текстовых меток. Если вы хотите добавить такую ​​метку или значок в текст на сайте Weebly, то вот руководство с полным кодом.

Текстовая этикетка или значок

Вы можете использовать метки, чтобы выделить фон текста разными цветами, чтобы привлечь внимание пользователя. Например, вы можете выделить текст предупреждения красным цветом на своем сайте, чтобы указать важность предупреждающих сообщений без необходимости добавления дополнительных уведомлений. Использовать такие текстовые метки в Weebly очень просто с помощью элемента «Код для вставки» и кода CSS. Мы объясним пять разных цветовых меток, вы можете использовать один цвет или добавить столько цветов, сколько вам нужно для вашего сайта. Прежде чем перейти к приведенному ниже коду, рассмотрим пример текстовых таблиц, о которых мы говорим:

Текстовая этикетка или значок

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

Добавление ярлыков в Weebly

Текстовые метки добавляются с помощью простого CSS, и этот процесс состоит из трех шагов:

  • Создание CSS-кода
  • Вставка кода CSS
  • Встраивание HTML

    • 1. Код CSS для ярлыков

    Мы определим код CSS для базовой метки, как показано ниже, без прикрепленного к ней цвета. Это помогает создавать столько цветов отдельно вместе с основным кодом этикетки.

    .label { отступ: 5px; высота строки: 2; цвет: #ffffff; радиус границы: 4px; }

    В этом примере мы определим следующие пять цветных меток — по умолчанию, информация, успех, предупреждение и опасность.

    .label-default {цвет фона: #b3b3b3;} .label-info {цвет фона: #5bc0de;} .label-success {цвет фона: #5cb85c;} .label-warning {цвет фона: #f0ad4e ;} .label-danger {цвет фона: #d9534f;}

    Сложение полного кода CSS для ваших ярлыков должно выглядеть так, как показано ниже.

    2. Вставка кода CSS в Weebly

    В зависимости от ваших потребностей есть три возможности вставки кода CSS.

  • Вы можете добавить приведенный выше код в свой main.less, чтобы добавить текстовые метки на уровне сайта (или в разделе заголовка сайта). Это означает, что вы можете встроить HTML-код в любое место вашего сайта, и на опубликованном сайте будут отображаться ярлыки.
  • Вставьте код в раздел кода заголовка страницы. В этом случае вы должны вставлять HTML только на ту страницу, где вы вставляете CSS.
  • Используйте элемент кода для встраивания, чтобы объединить CSS и HTML вместе. Таким образом, вы можете использовать текстовые метки где угодно, не добавляя CSS в заголовок страницы или сайта.

    • Если вы ищете, как добавить код CSS на свой сайт Weebly, ознакомьтесь с возможностями, описанными в этой статье. Помните, что вам не нужно включать теги

    , если вы добавляете код CSS в основной файл main.less таблицы стилей.

    3. Вставка HTML с помощью элемента Embed Code

    Теперь, когда у вас есть код CSS, следующим шагом будет перетаскивание элемента кода встраивания и добавление текстового содержимого. Вы можете использовать HTML-тег span для вставки меток и выделения текста одним из определенных цветов, как показано ниже:

    Ярлык по умолчанию Это ярлык по умолчанию. Информационная метка Это информационная метка. Ярлык успеха Это ярлык успеха. Предупреждающая метка Это предупреждающая метка. Ярлык опасности Это ярлык опасности.

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

    Этикетки в одну строку

    Line-height=2 в CSS-классе .label используется для обеспечения достаточного пространства между строками, когда метки используются в непрерывном абзаце. Вы можете уменьшить размер шрифта или использовать любые другие свойства CSS, чтобы улучшить отображение на вашем сайте Weebly.

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

    Метки в непрерывном абзаце

    Пункты к сведению

  • Если вы не хотите использовать несколько цветовых меток, просто добавьте атрибут background-color к основному коду метки, чтобы определить цвет фона.
  • Мы рекомендуем использовать сочетание CSS и HTML внутри элемента кода встраивания. Таким образом, вы можете сохранить код, если измените тему.
  • Вы также можете добавить значки Font Awesome с ярлыками.

    • Если вы ищете, как добавить абзац с цветным фоном в Weebly, ознакомьтесь с этой статьей.