Наверх

Добавление текста и изображений

В этом разделе

  1. Добавление и форматирование текста
  2. Изменение цвета текста
  3. Изменение шрифтов
  4. Добавьте нумерованный список или маркированный список
  5. Добавление автономного изображения
  6. Добавить фоновые изображения и цвет
  7. Выберите макет изображения на карточке строки
  8. Добавление кнопки
  9. Добавление меню-гармошки
  10. Найдите поддерживаемые компоненты Calcite
  11. Настройка текста с помощью HTML
  12. Связанные ссылки

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

  • Строка — это строительные блоки вашего сайта, поскольку каждая другая карточка должна быть вложена в карточку строки. Вы можете добавить изображения и цвета фона для карточек строк. Дополнительную информацию про форматирование строк см. в разделе Разработка компоновки сайта.
  • Текст – добавьте текст в любое место на своем сайте, поместив эту карточку в карточку строки. Вы также можете использовать эту карточку, чтобы добавить кнопки, списки, таблицы и пользовательский код на ваш сайт.
  • Изображение – добавляйте автономные изображения на любую карточку строки в любом месте вашего сайта используя карточку изображения.

Добавление и форматирование текста

Текст может быть добавлен на ваш сайт везде, где есть карточка строки.

Чтобы добавить и отформатировать текст, выполните следующие шаги:

  1. Отредактируйте компоновку сайта или страницы.
  2. На панели Настройка щелкните Компоновка.
  3. Перетащите карточку Текст на строку в компоновке.
  4. Выберите любой текст, который необходимо отформатировать.

    Опции включают стиль (Нормальный, Код, Заголовки и так далее.), полужирный шрифт, курсив и ссылки.

  5. Чтобы изменить размер текста, выберите кнопку стилей и выберите размер заголовка.
  6. Чтобы настроить выравнивание текста, выберите параметры абзаца и выберите один из них; чтобы переместить линию текста, выберите опцию абзаца и выберите увеличение или уменьшение отступа.
  7. Щелкните Сохранить компоновку.

Изменение цвета текста

Чтобы применить один и тот же цвет ко всему тексту на вашем сайте, измените цвет текста в настройках Темы вашего сайта. Также можно настроить цвет текста, используя настройки строки.

Для изменения цвета текста выполните следующие шаги:

  1. Отредактируйте компоновку сайта или страницы.
  2. Чтобы установить цвет для всего текста на вашем сайте или странице, откройте боковую панель и раскройте меню Тема.

    Дополнительную информацию про темы см. в разделе Создание бренда сайта с использованием параметров заголовка и темы.

  3. Чтобы задать цвет для нужной строки, щелкните кнопку Редактировать, карандаш редактирования для строки.
  4. Измените цвет, введя шестнадцатеричный код цвета или выбрав цвет.

    Подсказка:
    Коды Hex применяются для обеспечения согласованного брендинга ресурсов вашей организации. Если вы не уверены в специфике, связанной с брендингом вашей организации, посмотрите, предоставляет ли она какую-либо документацию или рекомендации по бренду.

  5. Щелкните Сохранить компоновку.

Изменение шрифтов

Вы можете изменить шрифт заголовков и основного текста, используя Google Fonts. Основной текст - это весь текст компоновки сайта. Этот шрифт также применяется ко всем страницам, добавляемым на сайт, страницам описаний элементов, открывающихся через поиск на сайте, и ко всем отображениям событий.

Добавьте нумерованный список или маркированный список

Чтобы добавить нумерованный список или маркированный список, выполните следующие шаги:

  1. Отредактируйте компоновку сайта или страницы.
  2. Добавьте карточку Текст в строку.
  3. Добавьте текст или выберите существующий текст.
  4. Выберите Неупорядоченный список, чтобы создать маркированный список, либо Упорядоченный список, чтобы создать нумерованный список.
  5. Щелкните Сохранить компоновку.

Добавление автономного изображения

Чтобы добавить отдельное изображение на карточку строки, выполните следующие действия:

  1. Отредактируйте компоновку сайта или страницы.
  2. Перетащите карточку Изображение на строку в компоновке.
  3. Под Изображением выберите источник изображения.

    Оба варианта поддерживают JPG, JPEG PNG, и так далее.

    • Чтобы указать URL, выберите URL Изображения и вставьте поддерживаемую ссылку на изображение в поле URL.
    • Чтобы загрузить файл, выберите Выгрузить изображение и перетащите файл в окно или выберите Обзор изображения, чтобы добавить изображение (Макс. размер файла 3 MB).
  4. Чтобы настроить выгруженное изображение, выберите кнопку Обрезать изображение и перетащите элемент управления для изменения размера фрейма вырезания. Чтобы изменить положение фрейма вырезания, выберите и перетащите пунктирную линию. Чтобы уточнить масштабирование, измените положение бегунка под изображением.
  5. В меню Опции укажите изображение вместо текста, чтобы помочь пользователям с плохим зрением и улучшить доступность вашего сайта.
  6. Если применимо, укажите гиперссылку изображения и задайте ссылку, которая откроется в той же или в новой вкладке.

    Примечание:
    Рекомендации по обеспечению доступности (на входе 3.2.2 и методике G201) рекомендуют избегать открытия ссылок на новых вкладках или окнах, если вы не предоставите расширенное предупреждение.

  7. Введите текст для Подпись изображения и выберите выравнивание текста.
  8. Можно также выбрать Масштабировать изображение для заполнения, чтобы задать точку фокуса изображения.

    Точка фокуса обеспечивает то, что изображение будет всегда выглядеть адекватно - независимо от размера дисплея.

  9. Щелкните Сохранить компоновку.

Добавить фоновые изображения и цвет

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

Подсказка:

Чтобы отобразить текст или ресурс поверх изображения, выберите светлый или темный цвет фона. Например, если вы используете текст светлого цвета или отображаете карту светлого цвета, выберите темный цвет фона, например черный, чтобы текст оставался четким. Затем отрегулируйте прозрачность цвета, чтобы изображение оставалось видимым.

Чтобы добавить фоновые изображения и цвет фона, выполните следующие шаги:

  1. Отредактируйте компоновку сайта или страницы.
  2. Добавьте карточку Строка в компоновку и формат в разделе Оформление.
  3. Под Фоновым изображением выберите источник изображения.

    Оба варианта поддерживают JPG, JPEG PNG, и так далее.

    • Чтобы указать URL, выберите URL Изображения и вставьте поддерживаемую ссылку на изображение в поле URL.
    • Чтобы загрузить файл, выберите Выгрузить изображение и перетащите файл в окно или выберите Обзор изображения, чтобы добавить изображение (Макс. размер файла 3 MB).
  4. Выберите Цвет фона, введя шестнадцатеричный код или выбрав цвет.
    Примечание:

    Только карточки строк поддерживают цвета фона.

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

    Это осветлит или затемнит цвет фона и обеспечит доступность изображений и текста для незрячих пользователей.

  6. Щелкните Сохранить компоновку.

Выберите макет изображения на карточке строки

Каждая карточка строки имеет два варианта компоновки, которые определяют способ отображения изображения.

Чтобы выбрать компоновку изображений, выполните следующие шаги:

  1. После добавления изображения на карточку строки, выберите широкую или фиксированную компоновку изображения и другого ресурса, отображаемого на карточке следующим образом:
    • Выберите Рамка, если вы хотите, чтобы изображение оставалось неизменным.
    • Выберите Широкая, если хотите, чтобы изображение занимало всю ширину вашего сайта.
  2. Задайте Точку фокуса изображения, чтобы быть уверенным, что изображение будет всегда выглядеть адекватно - независимо от размера дисплея.
  3. Щелкните Сохранить компоновку.

Добавление кнопки

Кнопка со ссылкой на другое местоположение, например раздел или страницу, является полезным инструментом навигации. Кнопки также могут включать призывы к действиям, предлагая пользователям сделать что-либо, например зарегистрироваться, узнать больше или принять участие в опросе. Кнопки используют Основной цвет ссылки и параметры Основной цвет фона, чтобы обеспечить их доступность для всех типов пользователей. Более подробно см. в разделе Обновить цвета темы кнопки Hub.

Для добавления кнопки, выполните следующие шаги:

  1. Отредактируйте компоновку сайта или страницы.
  2. Добавьте карточку Текст в компоновку.
  3. Выберите кнопку Вставить и выберите Кнопка.
  4. Выберите </> Редактирование в HTML.
  5. В теге 'href', введите URL вместо '#' и текст ссылки вместо 'Button' (Указание на компоненты calcite).
  6. Выберите Применить и нажмите Сохранить компоновку.

Добавление меню-гармошки

Добавьте сворачиваемое меню - это удобная функция для добавления часто задаваемых вопросов.

Чтобы добавить меню-гармошку, выполните следующие действия:

  1. Отредактируйте компоновку сайта или страницы.
  2. Добавьте карточку Текст в компоновку.
  3. Выберите кнопку Вставка, а затем - Гармошкой.
  4. Выберите </> Редактирование в HTML, чтобы добавить и отформатировать текст (Указание на компоненты calcite).
  5. Выберите Применить и нажмите Сохранить компоновку.

Найдите поддерживаемые компоненты Calcite

Карточка Текст поддерживает компоненты Calcite Design System приведенные ниже. Ознакомьтесь с каталогом всех компонентов Calcite, который содержит описания, оптимальные варианты использования, примеры и многое другое.

  • 'calcite-action'
  • 'calcite-accordion'
  • 'calcite-accordion-item'
  • 'calcite-avatar'
  • 'calcite-block'
  • 'calcite-button'
  • 'calcite-card'
  • 'calcite-chip'
  • 'calcite-dialog'
  • 'calcite-dropdown-group'
  • 'calcite-dropdown-item'
  • 'calcite-fab'
  • 'calcite-flow'
  • 'calcite-icon'
  • 'calcite-link'
  • 'calcite-panel'
  • 'calcite-rating'
  • 'calcite-split-button'
  • 'calcite-stepper'
  • 'calcite-stepper-item'
  • 'calcite-tab'
  • 'calcite-tab-nav'
  • 'calcite-tab-title'
  • 'calcite-tabs'
  • 'calcite-tile'
  • 'calcite-tooltip'

Настройка текста с помощью HTML

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

Для настройки текста с помощью HTML, выполните следующие шаги:

  1. Отредактируйте компоновку сайта или страницы.
  2. Добавьте карточку Текст в компоновку.
  3. Выберите </> Редактирование в HTML, чтобы добавить и отформатировать текст (Указание на компоненты calcite).
  4. Используйте тег <a> для создания ссылки на страницу. Вставьте слаг для страницы между атрибутом href="" тега <a>, например: <a href="/pages/target-page">Visit the linked page</a>.
    5. Подсказка:

    Использование в теге <a> относительного, а не абсолютного пути, предотвратит полное обновление страницы при щелчке этой ссылки. Для того, чтобы эта ссылка была открыта в новой вкладке, добавьте target="_blank" сразу после атрибута href в теге <a>.

  5. Выберите Применить и нажмите Сохранить компоновку.

Примечание:

В целях безопасности Текстовые карточки не поддерживают встроенный JavaScript. Теги скриптов будут игнорироваться.

Элементы HTML допускаются

  • 'a'
  • 'abbr'
  • 'acronym'
  • 'address'
  • 'article'
  • 'audio'
  • 'b'
  • 'bdi'
  • 'bdo'
  • 'big'
  • 'blockquote'
  • 'br'
  • 'caption'
  • 'center'
  • 'cite'
  • 'code'
  • 'col'
  • 'colgroup'
  • 'datalist'
  • 'dd'
  • 'del'
  • 'details'
  • 'dfn'
  • 'div'
  • 'dl'
  • 'dt'
  • 'em'
  • 'embed'
  • 'fieldset'
  • 'figcaption'
  • 'figure'
  • 'font'
  • ''footer'
  • 'frameset'
  • 'h1'
  • 'h2'
  • 'h3'
  • 'h4'
  • 'h5'
  • 'h6'
  • ''head'
  • ''header'
  • 'hgroup'
  • 'hr'
  • 'i'
  • 'image'
  • 'input'
  • 'ins'
  • 'kbd'
  • 'keygen'
  • 'li'
  • 'link'
  • 'main'
  • 'map'
  • 'mark'
  • 'menu'
  • 'meter'
  • 'nav'
  • 'ol'
  • 'optgroup'
  • 'option'
  • 'output'
  • 'br'
  • 'p'
  • 'param'
  • 'pre'
  • 'progress'
  • 'q'
  • 'rp'
  • 'rt'
  • 'ruby'
  • 's'
  • 'samp'
  • 'section'
  • 'small'
  • 'source'
  • 'span'
  • 'strike'
  • 'strong'
  • 'style'
  • 'sub'
  • 'summary'
  • 'sup'
  • 'table'
  • 'tbody'
  • 'td'
  • 'tfoot'
  • 'textarea'
  • 'th'
  • 'thead'
  • 'time'
  • 'title'
  • 'tr'
  • 'track'
  • 'tt'
  • 'u'
  • 'ul'

Для этих элементов допускаются следующие атрибуты, указанные ниже. Все поддерживаемые элементы HTML позволяют : ['class', 'style'].

  • 'a' : ['href', 'title', 'data-toggle', 'data-target', 'data-toggle' 'name', 'rel', 'style', 'target']
  • 'audio' : ['autoplay', 'controls', 'loop', 'muted', 'preload']
  • 'blockquote': ['cite']
  • 'button' : ['name', 'value', 'data-toggle', 'data-target', 'data-dismiss']
  • 'col' : ['span', 'width']
  • 'colgroup' : ['span', 'width']
  • 'div' : ['style', 'align', 'data-show', 'data-target', 'data-toggle']
  • 'font': ['size', 'color', 'style']
  • 'img' : ['align', 'alt', 'border', 'height', 'style', 'src', 'title', 'width']
  • 'ol' : ['align', 'start', 'type']
  • 'p' : ['style']
  • 'q' : ['cite']
  • 'source' : ['media', 'src', 'type']
  • 'span' : [style]
  • 'table' : ['border', 'cellspacing', 'cellpadding', 'class', 'height' 'style', 'summary', 'width']
  • 'td' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap', 'rowspan', 'style', 'valign', 'width']
  • 'th' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap', 'rowspan', 'style', 'valign', 'width']
  • 'tr' : [alignt, 'height', style', valign']
  • 'ul' : ['type']

Связанные ссылки

Дополнительные сведения см. в:

  • Редактирование сайта
  • Руководство по компонентам Calcite

Отзыв по этому разделу?

В этом разделе
  1. Добавление и форматирование текста
  2. Изменение цвета текста
  3. Изменение шрифтов
  4. Добавьте нумерованный список или маркированный список
  5. Добавление автономного изображения
  6. Добавить фоновые изображения и цвет
  7. Выберите макет изображения на карточке строки
  8. Добавление кнопки
  9. Добавление меню-гармошки
  10. Найдите поддерживаемые компоненты Calcite
  11. Настройка текста с помощью HTML
  12. Связанные ссылки