Работа в визуальном HTML редакторе

Общий вид и список функций редактора

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

Панель форматирования - нужна для того, чтобы вы могли оформить ваш текст не прибегая к html-коду (хотя такая возможность в редакторе тоже имеется).

Окно для редактирования - здесь помещается ваш контент - текст и картинки. Здесь же вы можете видеть все изменения, которые были сделаны при помощи панели форматирования.

Кнопка увеличения окна редактирвования - нажмите на неё и потяните мышь, чтобы увеличить размеры окна.

Инструменты форматирования

Рассмотрим подробнее инструменты для форматирования.

Важно: чтобы применить форматирование к определенному фрагменту контента - сначала выделите его мышью. Это касается и текстов и картинок. Если же вы хотите ввести текст сразу с определенным форматированием - сначала выберите нужное форматирование в панели, а затем вводите текст.

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

Быстрые кнопки для выделения текста жирным или курсивом. Можно заменить кнопками CTRL+b (жирный), CTRL+i (курсив)
В этом меню расположены расширенные возможности для форматирования текстов. Описания - ниже.

В этом подменю можно задать тексту значения заголовков, соответствующие html-тэгам от <h1> до <h6>. Эти тэги важны для продвижения вашего магазина - поисковые роботы учитывают эти тэги - <h1> для них означает заголовок всей страницы, <h2> - подзаголовок страницы, <h3> - подзаголовок раздела и так далее, до <h6>.

Если в шаблоне магазина этим заголовкам заданы разные начертания (размер, цвет, гарнитура шрифта и т.д.) - то после сохранения вы увидите разницу непосредственно на странице, которую редактировали.

Здесь вы найдёте стандартный набор выделений, который видели, если хоть раз пользовались редактором Word или ему подобным: Полужирный, Курсив, Подчёркнутый, Зачеркнутый, Верхний индекс (X2), Нижний индекс (X2)
Выбор шрифта для текста. Этот выбор может быть расширен, если прописать в шаблоне дополнительные варианты шрифтов.
Название пункта говорит само за себя - здесь можно выбрать нужный размер шрифта, если текущий вам не подходит. Размер задаётся в пунктах - от 8 до 36. Больше или меньше можно сделать через редактирование html-кода (об этой возможности читайте ниже)
Кнопка полностью удаляет всё форматирование, которое вы применили ранее, или которое применилось, если вы вставляли текст из буфера обмена (например из Word или с другого сайта).
Эта кнопка позволяет задать тексту цвет. Можно выбрать из предустановленных вариантов или задать любой произвольный цвет при помощи кнопки "Выбрать.." в этом меню. Также можно удалить любые настройки цвета при помощи кнопки "Без цвета" (кнопка с крестиком). В нижней части панели выбора цвета появляются цвета, которые вы уже использовали при редактировании. Подробнее о работе с цветом рассказывается ниже в этой главе
Если вы хотите задать тексту цвет фона, то используйте эту кнопку. Её функции аналогичны функциям кнопки задания цвета, которая описана выше.
Используйте эту кнопку, чтобы задать тексту выравнивание. Возможноые варианты: По левому краю, По правому краю, По центру и По ширине.

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

  • Стандартный (жирные точки)
  • Окружности без заливки
  • Круги с заливкой
  • Квадраты.

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

  1. Стандартный (обычные цифры)
  2. Строчные латинские буквы
  3. Заглавные латинские буквы
  4. Строчные греческие буквы
  5. Строчные римские цифры
  6. Заглавные римские цифры
Таблицы - очень полезный инструмент для форматирования текстов и изображений. Например, данный блок сделан при помощи таблиц. Они позволяют красиво и аккуратно выровнять контент. Более подробно работа с таблицами описывается в этой главе далее.
Вставка/удаление ссылки. Можно применять как к тексту, так и к изображениям. При вставке ссылки есть возможность как задать любую произвольную, так и выбрать из имеющихся. Более подробно - смотрите ниже в этой главе.
Вставка/редактирование изображений. Можно загружать новые изображения, а также выбирать из имеющихся. Подробности - далее в этой главе.
Редактирование HTML-кода. Очень важный и полезный инструмент. Здесь вы видите ваш контент в виде простого текста с html-тэгами. Рекомендуем вам изучить основы HTML, чтобы вы легко и быстро могли отредактировать ваш контент.
Эти кнопки предназначены для отмены или возврата последних произведённых изменений. Работают также, как в любом редакторе текстов, к которому вы привыкли - кнопка "Назад" отменяет последнее изменение, вплоть до момента начала редактирования, кнопка "Вперёд" - возвращает отменённое действие.

Расширенное описание некоторых функций редактора

Работа с цветом

Это панель выбора цвета. Она одинакова для определения цвета текста и его фона. Здесь вы можете задать один из предустановленных цветов, один из ранее использованных цветов (поля в нижней части) и удалить (кнопка X) цветовое оформление цвета. Кнопка "Выбрать" служит для задания любого произвольного или определенного при помощи кода цвета.
При нажатии на кнопку "Выбрать" появляется окно для задания произвольного или определенного кодом цвета. Поле в центре служит для выбора оттенка, поле в центре - для выбора цвета, поля справа - для задания точных значений в шкале RGB или при помощи HTML кода.

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

 

При помощи этого инструмента вы можете вставить таблицу максимальным размером 10 на 10 ячеек.

Если вам нужно больше 10 ячеек по горизонтали или по вертикали - нужно будет использовать HTML редактор. "Тело" таблицы - это тэги

<table>
<tbody>

</tbody>
</table>

Внутри этих тэгов располагаются тэги строк и собственно ячеек. Строки это тэг <tr>, между ними может располагаться любое количество ячеек. Они обозначаются тэгом <td>. Из ячеек формируются столбцы. Скольк ячеек в строке - столько и столбцов.

Пример:

<table>
<tbody>
<tr>
<td>Это контент ячейки первой строки</td>
<td>Это контент второй ячейки первой строки</td>
</tr>
<tr>
<td>Это контент ячейки второй строки</td>
<td>Это контент второй ячейки второй строки</td>
</tr>
</tbody>
</table>

Пока в таблице нет никакого контента внутри ячеек стоит html код пробела - &nbsp;. Вы можете заменить его на свой контент.

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

Свойства таблицы - общие.

Здесь можно задать простое форматирование для всей таблицы - ширину, высоту, отступ от внешнего края, отступ от внутреннего края, толщину рамки и общее выравнивание для таблицы - то есть расположение её на странице - по центру, слева или справа.

 

Свойства таблицы - расширенные.

Здесь вы можете задать при помощи css стиль для всей таблицы, цвет рамки и цвет фона, также для всей таблицы.

Свойства ячейки - общие

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

Свойства ячейки - расширенные

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

Параметры строки - общие

Здесь можно задать выравнивание для контента внутри строки, если для конкретных ячеек не задано собственное выравнивание. Еще здесь можно задать высоту для всей строки.

Параметры строки - расширенные

По аналогии с ячейками здесь задаются css стили для строки, а также цвет для её рамки и фона.

Работа со ссылками

Заголовок ссылки

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

Адрес ссылки - сюда можно вставить любой произвольный адрес, ведущий на любую страницу в интернете или на вашем сайте. Скопировать адрес ссылки можно из адресной строки вашего браузера.

Отображаемый текст - тот текст, который вы хотите сделать ссылкой. Если вы делаете ссылку для картинки, это поле будет недоступно.

Заголовок - создаёт для ссылки всплывающую подсказку.

Список ссылок - это те ссылки на страницы, которые вы создали на своем сайте, а также на файлы, которые вы закачали в раздел "Файлы". Когда вы выбираете ссылку из списка её адрес подставляется в поле Адрес ссылки.

Открывать ссылку - позволяет выбрать, как браузер будет открывать вашу ссылку - в новом окне (вкладке) или в том же. В веб-дизайне считается вежливым открывать все ссылки в том же окне.

Работа с изображениями

Вкладка "Общие"

Здесь находятся параметры загрузки изображения.

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

Список изображений - тех, которые вы загрузили в свой магазин в раздел "Файлы".

Загрузить изображение - служит, чтобы вы могли загрузить любое изображение с компьютера. Поддерживаются расширения JPG, JPEG, PNG, GIF.

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

Размер - позволяет задать точный размер картинки на странице. Можно задавать его как жёстко, так и с сохранением пропорций, указывая только один параметр - длину или высоту.

Вкладка "Расширенные"

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

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

Вертикальный и Горизонтальный интервал - позволяет задать отступы картинке, то есть, расстояние, на которое она будет удалена от любых других объектов - других картинок, текстов, таблиц и так далее.

Рамка - позволяет задать рамку для изображения. Значение указывает толщину рамки в пикселях.

 

 

Если эта статья не помогла решить вашу проблему - обязательно свяжитесь с нами и сообщите об этом!

Остались вопросы? Отправьте тикет в техподдержку!

Создать запрос!

Недавно просмотренные статьи

Еще нет магазина на InSales? Создайте интернет-магазин бесплатно