Онлайн-редактор. Основы работы

Данный видеоурок посвящен основам работы в онлайн-редакторе конструктора Wilda.

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

Общие принципы работы конструктора

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

Настройки блоков

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

Слева направо:

Редактировать

Кнопка "Редактировать" открывает окно настроек, где можно изменить дизайн блока.

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

Слои

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

Копировать

Кнопка "Копировать" позволяет скопировать блок со всеми его настройками.

Фиксация

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

Центрование

Кнопка "Центрование" показывает центр блока по горизонтали и вертикали. Служит для выравнивания блоков относительно друг друга. Подсказка. Если вы хотите найти центр у какого-то фрагмента страницы, создайте блок по ширине этого фрагмента и нажмите кнопку "Центрование".

Удалить

Кнопка "Удалить" удаляет блок без возможности восстановления. Помимо этой кнопки удалить блок можно путем его переноса за границы редактируемого документа, а также кнопкой "Delete" на клавиатуре компьютера.

Типы блоков

Блок "Фон"

Основной блок для создания дизайна. С помощью блока «Фон» можно создавать прямоугольные и квадратные фигуры, полоски, поворачивая их на любое количество градусов и создавая как горизонтальные, так и вертикальные фигуры. Блок «Фон» можно залить цветом и градиентом, либо использовать фотографии и изображения. При этом пропорции фонового блока могут произвольно меняться, и изображение будет подстраиваться под них автоматически. В фоновый блок возможна загрузка фотографий и изображений в форматах JPEG, PNG, SVG.

Блок "Изображение"

Основное отличие от блока "Фон" в том, что пропорции блока "Изображение" не меняются произвольно, как у блока "Фон", а всегда сохраняются одинаковыми. Благодаря этому свойству блок "Изображение" идеально подходит для загрузки логотипов и иконок. Форматы загружаемых изображений: JPEG, PNG и векторный формат - SVG.

Блок "Текст"

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

Кнопки текстового редактора слева – направо:

Отмена действия

Позволяет отменить последние действия.

Шрифт

Позволяет выбрать шрифт текста. Для вашего удобства шрифты в конструкторе Wilda сортированы не по алфавиту, а по категориям: Шрифты без засечек, Шрифты с засечками, Рукописные шрифты и Дизайнерские шрифты. Выбранный шрифт подсвечен красным полем. О том, какой шрифт предпочтительнее выбрать для вашего дизайна, узнайте из статьи "Правила написания текстов".

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

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

Начертание

Выбор начертания "Жирный", "Курсив", "Подчеркнутый", "Зачеркнутый".

Выравнивание

Выравнивание текста по левому, правому краю, по центру или ширине.

Цвет текста

Выберите цвет текста из представленной палитры готовых цветов. Если вы знаете код цвета, который используете в дизайне (выглядит как #111111 в настройках цвета каждого блока), то можете скопировать этот код и вставить в палитру текстового редактора, нажав на кнопку #.

Список

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

Ссылка

Служит для добавления или удаления ссылки. Для этого выделите текст и выберите соответствующую команду.

Очистка формата

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

Вставка HTML

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

Блок "Фигура"

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

Блок "Линия"

Блок "Линия" обладает настройками выбора типа линии (сплошная, пунктирная, точки, двойная). Также, возможно выбрать толщину, цвет, прозрачность и тень.

Блок "Таблица"

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

Горячие клавиши

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

Удалить блок – Delete

Движение блоков – Shift+стрелки (лево, право, верх, низ). Используйте для «тонкой» подгонки блоков, когда необходимо передвинуть блок на 1-2 px.

Выделение всего текста в поле текстового редактора — Ctrl+A

В процессе развития функционала конструктора Wilda будут добавляться новые сочетания клавиш.

Панель управления

На Панели управления конструктора Wilda расположены следующие кнопки, слева-направо:

Домой

Кнопка позволяет перейти в Личный кабинет пользователя.

Документ

Название редактируемого документа.

Добавить страницу

Служит для добавления новой страницы. Новая страница добавляется сразу за той страницей, которая была активна на этот момент. (Активной страница становится после клика на нее). Для копирования или удаления страницы служит кнопка "Настройки", возникающая при клике на страницу.

Инструменты

Кнопка открывает доступ к следующим командам: Сетка, Линейка, Движение по сетке, Обрезка, Подсказки.

Сетка

Кнопка активирует сетку различных делений – 10, 20, 40, 80 px. Сетка помогает корректно расположить блоки относительно страницы и других блоков и правильно определить расстояние от края страницы. Сетка начинает отсчет от левого верхнего края каждой страницы.

Линейка

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

Движение по сетке

Движение блоков по сетке помогает упорядочить блоки на странице. Шаг движения сетки – 10 px. В случае, когда вам нужна более «тонкая» подгонка блока – просто отключите движение по сетке. По умолчанию Движение по сетке выключено.

Разметка под обрезку

Разметка под обрезку необходима для документов, подготавливаемых для печати в типографии, так как при нарезке напечатанных документов существует небольшая погрешность. Разметка под обрезку на конструкторе Wilda составляет 3 мм от края документа, что отвечает требованиям всех современных типографий. Тем не менее, область под обрезку не должна быть белым полем, она должна являться частью общего дизайна, например, "залита" фоном или изображением. Просто необходимо помнить, что в некоторых случаях граница среза может проходить в пределах этой области, и всю важную графическую или текстовую информацию необходимо размещать не у самой границы среза. Мы рекомендуем сделать отступ еще 20 - 30 px от границы среза.

Помощь

Кнопка "Помощь" вызывает соответствующую страницу сайта.

Предпросмотр

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

Сохранить

Кнопка "Сохранить" позволяет сохранить редактируемый документ. Кнопка "Сохранить как" сохраняет документ под другим именем. Другие действия с документом - публикация, скачивание на компьютер осуществляются из Личного кабинета.

Важно! Не забывайте сохранять редактируемый документ! Для предотвращения сохранения нежелательных версий документа Функция автоматического сохранения не установлена!