Top.Mail.Ru
Новый inSales для маркетплейсов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таблицы - полезный инструмент для форматирования текстов и изображений. 
Вставка/удаление ссылки. Можно применять как к тексту, так и к изображениям. При вставке ссылки есть возможность как задать любую произвольную, так и выбрать из имеющихся. 
Вставка/редактирование изображений. Можно загружать новые изображения, а также выбирать из имеющихся. 
Редактирование 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.

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

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

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

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

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

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

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

Вкладка "Альтернативное изображение"

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

Оставить оценку

Оценка успешно отправлена.
Она будет проверена администратором перед публикацией.
Перед публикацией все оценки проходят модерацию

Оценки: 0

Остались вопросы?
Отправь тикет в техподдержку!
Еще нет своего магазина?
Создайте интернет-магазин на платформе inSales
Всё для продаж уже внутри!
Недавно просмотренные статьи