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

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

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

Как выйти на редактировании статьи

Эту процедуру мы сможем выполнить только из служебного раздела вашего интернет-магазина. Чтобы в него попасть, для начала нужно войти в конструктор 1os. Ссылку на биллинговую (управляющую) панель мы отправили на вашу почту в первом письме в процессе регистрации. Давайте сейчас не будем отвлекаться на ревизию почты и войдем в биллинг прямо из этой инструкции:

https://billing.1os.ru/auth/login

Чтобы вход в конструктор был безопасным, нужно заполнить форму с адресом электронной почты и паролем — именно те данные, которые вы указали при регистрации на 1os. Убедитесь, что правильно заполнили оба поля и нажмите кнопку «ВХОД»:

Перед вами открылась биллинг-панель. Находим на ней левое вертикальное меню, вбираем пункт «МОИ САЙТЫ» и нажимаем на него:

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

Вы видите перед собой экран административной части своего-интернет-магазина — главную ее страницу со всеми доступными функциями. На верхней панели справа найдите иконку «глаз» и нажмите на нее:

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

Возможности визуального редактора

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

Именно с их помощью мы можем манипулировать статьей, не заходя в какие-то глубинные разделы сайта. Если нажмем «УДАЛИТЬ», система предложит проверочную форму:

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

Если же вы нажмете «РЕДАКТИРОВАТЬ», откроется собственно визуальный редактор. Здесь путем простых действий вы сможете внести изменения в текст, добавить или удалить картинку, красиво оформить заголовки:

Обратите внимание на опции слева вверху:

Путем простановки отметок вы можете открыть статью для просмотра посетителями или закрыть ее, а также открыть или закрыть комментарии к ней. Также здесь можно либо перенести статью в другой, ранее созданный, раздел или «СОЗДАТЬ РАЗДЕЛ» совершенно новый. Если нажмем на эту кнопку, откроется простая форма:

Заполните ее, нажмите «ПРОДОЛЖИТЬ» и раздел появится в перечне. Далее можно вернуться к редактированию статьи.

Здесь также есть исключительно полезная кнопка «SEO НАСТРОЙКИ»:

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

Заполните форму прямо сейчас или вернитесь к ней позже.

Как внести изменения в статью

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

Также возникнут 2 лаконичные дополнительные панельки, которые позволяют оперировать выбранным блоком в целом — копировать, перемещать, удалять, менять настройки. Что касается изменения текста, то фактически пред вами сейчас текстовый редактор, где можно делать с текстом все, что требуется.

Теперь посмотрим, как здесь внести более глобальные изменения. Обращаем ваше внимание, что визуальный редактор работает с блоками. Например, мы можем добавить новый блок (чтобы потом его заполнить). Для этого есть 2 пути. Первый — выбор на правой панели нужной формы и перетягивание ее мышкой на рабочее поле:

Второй — через кнопку «ДОБАВИТЬ БЛОК»:

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

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

Работа с картинками

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

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

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

Обратите внимание: появились кнопки для работы с этим элементом. Нажимаем на иконку-«картину», чтобы загрузить файл со своего компьютера. Открылось окно для выбора файла. Теперь требуется нажать на большую стрелку:

Откроется классический проводник. На этом этапе нужно выбрать файл и нажать кнопочку «ОТКРЫТЬ». Пошла загрузка на сайт. Через секунду-другую изображение «проявится» в окне и появится зеленая галочка. Все, файл загружен на сайт, вам остается только нажать кнопку «ПРИМЕНИТЬ»:

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

Теперь можно добавлять следующий блок или закончить на этом. Если вы окончили редактировать статью, обязательно нажмите кнопку «СОХРАНИТЬ ИЗМЕНЕНИЯ» в правом нижнем углу страницы. После этого рекомендуем посмотреть, как обновленная статья выглядит на сайте. Если решите что-то еще поменять, повторите описанные выше действия.

Надеемся, вы оценили простоту работы со статьями в визуальном редакторе. Простановка отметок, перетягивание нужного блока при помощи мыши, интуитивно понятная загрузка изображения и редактирование текстов — все это поможет поддерживать ваш контент в актуальном состоянии.

Потому что 1os — это просто!