Как изменить текст на странице битрикс

Шаг 1. Авторизация

Для начала работы с текстовым редактором необходимо выбрать пункт «Изменить страницу» в публичной части сайта.

Также редактор доступен в административной части сайта, например при редактировании разделов или элементов инфоблока.

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

Рассмотрим инструменты, которые нам предоставляет текстовый редактор.

1. Выбор режима отображения

Доступны 4 режима:

• «визуальный режим» — будет отображаться только визуальный редактор;
• «режим редактирования исходного кода» — отображается только поле для ввода html;
• «совмещенный режим по горизонтали/вертикали» — редактор будет разделен на 2 части (визуальный редактор и редактор исходного кода).

2. Стиль оформления.

Данный пункт позволяет выбрать какой стиль будет применен к тексту (обычный текст, заголовок от h1 до h6, абзац или блок).

3. Шрифт

Позволяет выбрать какое семейство шрифта использовать.

4. Размер шрифта

Изменяет размер шрифта.

5. Инструменты для изменения внешнего вида текста

• полужирный;
• курсив;
• подчеркнутый;
• зачеркнутый;
• удалить форматирование текста;
• цвет текста.

6. Список

• нумерованный список;
• маркированный список.

7. Выравнивание текста

• увеличить отступ;
• уменьшить отступ;
• выравнивание текста (по левому краю, по центру, по правому краю, по ширине).

8. Инструмент для размещения ссылки

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

Помимо этого есть дополнительные поля. Рассмотрим наиболее полезные из них:

• Всплывающая подсказка. Здесь можно указать текст, который будет отображаться при наведении на ссылку;
• CSS класс. С помощью этого поля можно присвоить CSS класс для ссылки (чаще всего этот пункт используется, если необходимо сделать, чтобы изображение открывалось в модальном окне. Для этого ссылке прописывается класс fb. Подробнее об этом можно почитать на странице Изображения в модальном окне );
• Не учитывать ссылку поисковиками. Необходимо выбрать этот пункт, если нужно, чтобы ссылка не учитывалась поисковыми системами.

9. Изображение

Используется для загрузки изображений в редактор.

Изображение можно выбрать:

• из медиабиблиотеки;
• из структуры сайта;
• или разместить ссылку на изображение со стороннего ресурса.

10. Вставить видео

Дает возможность разместить ссылку на ролик со стороннего ресурса.

11. Якорь

Позволяет установить якорь в нужном месте страницы, для создания ссылки именно на это место страницы.

12. Таблица

Инструмент для вставки таблицы.

Также можно открыть дополнительные настройки кнопкой «Еще».

Рассмотрим содержащиеся там инструменты.

• Спецсимвол. Позволяет размещать спецсимволы на странице;
• Вставить разрыв для печати страницы. Позволяет разбить одну страницу на несколько при печати;
• Вставить разделитель страниц. Позволяет осуществить разбиение текста при просмотре публичной части сайта. Данная функция работает только при редактировании инфоблока;
• Проверка орфографии. Включает проверку орфографии. Чтобы данный инструмент можно было использовать, необходимо установить расширение pSpell;
• Вставить горизонтальный разделить. Вставляет горизонтальную полосу;
• Нижний индекc. Добавляет нижний индекс;
• Верхний индекс. Добавляет верхний индекс.

Визуальный редактор предоставляет различные средства форматирования текста. Опишем подробнее кнопки и выпадающие списки панели форматирования:

Стили шаблонов сайта

При переходе к редактированию страницы из административного раздела в списке шаблонов будет выбран шаблон по умолчанию. Его таблица стилей (файл styles.css) будет подключена для использования для данной страницы.

Для каждого шаблона задается своя таблица стилей (файл styles.css). При смене шаблона в этом окне визуальный редактор подгрузит стили выбранного шаблона.

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

Примечание: Все стили шаблона разделены на две таблицы стилей, хранящиеся в двух разных файлах. Один из них носит название styles.css и содержит стили для представления внутреннего содержания страниц на сайте. Во втором – с именем template_styles.css – описаны стили для представления шаблона дизайна. Эти стили отображаются при редактировании шаблона сайта с помощью визуального редактора.

Работа со стилями

Для каждого шаблона задается своя таблица стилей (файл styles.css), которые можно использовать для оформления текста. В визуальном редакторе описанные стили могут выводится как с названиями, так и без них в зависимости от настроек модуля Управление структурой.

В выпадающем списке можно выбрать необходимый стиль для текста или другого элемента страницы.

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

Для изменения названий стилей:

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

  

• Сохраните внесенные изменения.

Теперь стили будут отображаться под выбранными вами названиями.

Работа с заголовками

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

Значение Normal из списка выбрано по умолчанию, оно соответствует отсутствию заголовка.

Шрифты

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

Цвет фона текста задается по кнопке .

Цвет самого текста задается по кнопке .

Размер шрифта

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

Кнопки форматирования

Рассмотрим, с помощью каких тегов реализуется различное написание текста.

Кнопка удаляет текстовое форматирование, т.е. удаляет тег <font> со всеми его атрибутами, отменяет выделение жирным, курсивом, подчеркивание.

Кнопка позволяет вставить горизонтальный разделитель. В коде это действие выполняется с помощью тега <hr>

Кнопка Оптимизировать HTML-код убирает пустые HTML-теги.

Список убираемых пустых тегов: b, em, font, h1, h2, h3, i, li, ol, p, small, span, strong, u, ul и т.д.

Выравнивание текста

Кнопка	Текст	Теги
	По левому краю	<p align="left">По левому краю</p>
	По правому краю	<p align="right">По правому краю</p>
	По центру	<p align="center">По центру</p>
	Выравниваем по ширине	<p align="justify">Выравниваем по ширине</p>

Списки элементов

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

1. первый
2. второй
3. третий

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

• первый
• второй
• третий

Сдвиг текста

В редакторе есть возможность увеличить отступ от края с помощью кнопки , а затем его можно уменьшить с помощью кнопки .

Кнопка сдвигает текст влево и убирает из кода тег <blockquote>

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

1. (3 минуты 24 секунды, 15.45 Мб.)

Загрузить ролик.

2. (3 минуты 14 секунд, 9.78 Мб.)

Загрузить ролик.

0

 Работа с текстом |

Описание курса

| Копирование и вставка текста 

В Битрикс24 появился инструмент для изменения дизайна сайтов и магазинов. Теперь вы можете за пару кликов изменить шрифты и цвета текстов.

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

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

Какие настройки дизайна доступны

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

У некоторых блоков есть заранее прописанная цветовая стилистика, для них настройки дизайна действовать не будут.

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

Функция Корпоративный цвет (выбор из палитры или свой #hex) доступна не на всех тарифах Битрикс24. Узнать подробнее вы можете на странице тарифов.

Цвет текста и заголовков изменяет соответствующий цвет в блоках.

Шрифт текста и заголовков изменяет соответствующий текст в блоках.

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

Индивидуальный фон страницы изменяет фон текущей страницы.

Оглавление

BITRIX.
Работа с редактором 2

Внешний вид
редактора 2

Панель инструментов 2

Форматирование
текста 3

Размер шрифта 3

Кнопки
форматирования 4

Выравнивание
текста 4

Списки элементов 5

Копирование и
вставка текста 5

Работа с таблицами 6

Создание новой
таблицы 6

Редактирование
существующей таблицы 6

Работа с
гиперссылками 7

Создание ссылки 7

Ссылка на документ
на сервере 7

Ссылка на другой
сайт 9

Загрузка и
размещение изображения 9

Выбор изображения
из медиабиблиотеки 10

Выбор изображения
из структуры сайта 11

BITRIX. Работа с редактором

Внешний вид редактора

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

Панель инструментов

Общая
панель инструментов визуального
редактора состоит из нескольких меньших
панелей, в каждой из которых объединены
кнопки по своему назначению. Детальное
описание панелей приводится на страницах
с описанием конкретных видов работ.

• Стандартные

• Управление и
  настройки

• Стиль

• Форматирование 

  

Форматирование текста

Визуальный
редактор предоставляет различные
средства форматирования текста. Опишем
подробнее кнопки и выпадающие списки
панели форматирования:

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

Значение Normal из
списка выбрано по умолчанию, оно
соответствует отсутствию заголовка.

Цвет
фона текста задается по кнопке .

Цвет
самого текста задается по кнопке .

Размер шрифта

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

Кнопки форматирования

Рассмотрим,
с помощью каких тегов реализуется
различное написание текста.

Кнопка  удаляет
текстовое форматирование, т.е. удаляет
тег <font> со
всеми его атрибутами, отменяет выделение
жирным, курсивом, подчеркивание.

Кнопка  позволяет
вставить горизонтальный разделитель.
В коде это действие выполняется с помощью
тега <hr>

Выравнивание текста

Списки элементов

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

1. первый

2. второй

3. третий

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

• первый

• второй

• третий

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

• #
• #
• #
• #
• #
• #
• #
• #
• #
• #
• #