Визуальный редактор
Редактор позволяет вам сформировать уникальный дизайн своего сайта. Редактор основан на блоках и блочной системе верстки, которая является простой и удобной.
Вы можете ознакомиться с примером создания дизайна на данной странице.
Редактор делиться на 3 части:
- Панель управления редактором – содержит параметры отображения, редактор страниц и палитру доступных компонентов;
- Рабочая область – непосредственно макет будущего сайта;
- Свойства компонента – список свойств выбранного компонента.
Панель управления редактором
Данный блок содержит:
- Параметры отображения редактора
- Редактор страниц
- Список компонентов
Параметры отображения страниц
Данный блок содержит кнопки переключения между размерами экрана.
- Очень маленькие экраны – телефоны
- Маленькие экраны – планшеты
- Средние экраны – ПК
- Большие экраны – широкоформатные мониторы
- Текущий экран – рабочая область подстраивается под размер текущего окна браузера
Также в данном блоке можно менять отображение самого редактора:
- Стереть все – очищает шаблон текущей страницы (очищает в рамках данной сессии, если вы закроете окно браузера и откроете редактор снова через панель управления, то загрузится сохраненный шаблон).
- Показать/скрыть сетку – отображает или же скрывает сетку макета.
- Предпросмотр – скрывает боковые панели и сетку.
Редактор страниц
Данный блок содержит кнопки управления дизайном:
- Главная страница – редактировать макет страницы, которая отображается при заходе на ваш сайт.
- Остальные страницы – редактировать макет всех страниц с динамическим содержимым (каталог, новости, страницы).
- Сохранить – сохранение текущих макетов страниц (ВНИМАНИЕ: все сохранения сразу же применяются на вашем сайте).
- Сохранить как черновик – сохранение текущих макетов страниц в черновиках. При данном сохранении дизайн вашего сайта не меняется, и таким образом вы можете сохранять промежуточные результаты дизайна.
- Выйти – выйти из редактора без сохранения.
Список компонентов
Данный блок содержит список компонентов, которые вы можете использовать в дизайне. Подробнее компоненты рассмотрены в главе «Компоненты».
Рабочая область
Рабочая область содержит непосредственно макет. Все изменения которые вы вносите в свойства компонентов происходят в реальном времени, и вы можете сразу видеть что в итоге получиться (подробнее про WYSIWYG).
Взаимодействовать с рабочей областью вы можете следующим образом:
- Перетаскивать компоненты из палитры в рабочую область
- Перетаскивать компоненты внутри рабочей области
- Редактировать свойства компонента
- Удалять компоненты
Перетаскивание компонентов из палитры в рабочую область
Для того чтобы перетащить компонент, нужно:
- зажать левой кнопкой мыши на нужном компоненте в палитре
- не отпуская кнопки перенести курсор в рабочую область на нужное место (другие компоненты при этом начнут перемещаться, определяя свое будущее положение)
- отпустить кнопку, когда компонент будет размещен в нужном месте
Перетаскивание компонентов внутри рабочей области
Для того чтобы перетащить элемент внутри рабочей области, нужно произвести все те же действия что и при перетаскивании из палитры:
- зажать левой кнопкой мыши на нужном компоненте
- не отпуская кнопки перенести курсор на нужное место (другие компоненты при этом начнут перемещаться, определяя свое будущее положение)
- отпустить кнопку, когда компонент будет размещен в нужном месте
Редактирование свойств компонента
Для того чтобы вызвать меню свойств компонента, нужно:
- щелкнуть один раз по нужному компоненту левой кнопкой мыши (рамка подсветиться красным)
- перенести курсор в правую часть редактора, к блоку свойств компонента.
- Боковая панель увеличит свой размер, и вы можете приступать к редактированию компонента
Удаление компонента
Удалить компонент из рабочей области можно 2-мя способами:
- В боковой панели свойств компонента нажать кнопку «Удалить»
- Выделить нужный компонент (щелкнуть по нему один раз) и нажать на клавиатуре кнопку «DELETE» (ВНИМАНИЕ: кнопка «DELETE» не срабатывает, если у вас в фокусе находиться поле ввода)
Свойства компонента
По умолчанию все компоненты, содержат следующие свойства:
- Стиль
- CSS класс
- Большие устройства
- Средние устройства
- Маленькие устройства
- Очень маленькие устройства
Стиль
Содержит CSS код, который применяется непосредственно к элементу. Для указания фона контейнера или блока, можно использовать следующий код:
background: gray;
CSS класс
Класс, который в последствии можно использовать в CSS стилях.
Большие устройства
Определяет размер блока для экранов более 1200 пикселей. Указывается в долях, т.е. «3/12» это 25% ширины контейнера, «6/12» это 50% и т.д.
Средние устройства
Определяет размер блока для экранов более 992 пикселей. Указывается в долях, т.е. «3/12» это 25% ширины контейнера, «6/12» это 50% и т.д.
Маленькие устройства
Определяет размер блока для экранов более 768 пикселей. Указывается в долях, т.е. «3/12» это 25% ширины контейнера, «6/12» это 50% и т.д.
Очень маленькие устройства
Определяет размер блока для экранов менее 768 пикселей. Указывается в долях, т.е. «3/12» это 25% ширины контейнера, «6/12» это 50% и т.д.
Компоненты
Ниже рассмотрены доступные компоненты редактора, а также описано их назначение и небольшие примеры использования.
Контейнер
Служебный компонент, может содержать в себе другие компоненты. Не имеет свойств. Использовать можно, например, для создания столбцов на странице (красным выделены контейнеры):
Виджет «Страница» Facebook
Компонент, позволяет встроить виджет «Страница» для социальной сети Facebook. Имеет стандартные свойства, а также свойство iframe, в которое нужно вставить код сгенерированный на странице https://developers.facebook.com/docs/plugins/page-plugin
После настройки виджета, нужно нажать кнопку «Получить код»:
В открывшемся окне, выбрать вкладку «IFrame», выбрать нужную группу, и скопировать ПОЛНОСТЬЮ весь код.
После чего вставить данный код в свойства компонента:
Виджет «Сообщество» ВКонтакте
Компонент, позволяет встроить виджет «Сообщество» социальной сети «ВКонтакте». Имеет стандартные свойства, а также свойство ID сообщества, в которое нужно вставить идентификатор сообщества. Чтобы узнать ID воспользуйтесь данной инструкцией https://vk.com/page-43503600_44245051.
Виджет «Твиты» Twitter
Компонент, позволяет встроить виджет "Твиты" социальной сети Twitter. Имеет стандартные свойства, а также:
- URL страниц - куда нужно вставить адрес страницы, твиты которой вы хотите транслировать (например, https://twitter.com/RetavaRu ).
- Ширина и высота - устанавливают соотвественно ширину и высоту виджета в пикселях. Писать нужно только целые числа, без указания метрики (например, нужно писать "20" вместо "20px").
Виджет «Группа» Одноклассники
Компонент, позволяе встроить виджет "Группа" социальной сети Одноклассники. Имеет стандартные свойства, а также:
- ID группы - идентификатор группы, получить который можно скопировав из адресной строки браузера (например, для группы https://ok.ru/group/54479846506723 - ID будет "54479846506723")
- Ширина и высота - устанавливают соотвественно ширину и высоту виджета в пикселях. Писать нужно с указанием метрики (например, "20px" вместо "75%").
Метрика
Компонент, позволяет встраивать счетчики статистики на ваши страницы. Не имеет стандартных свойств.
Свойство ID счетчика Яндекс.Метрика можно получить в кабинете Яндекс. Метрики:
Свойство Код meta-тэга для подтверждения домена Яндекс.Метрика можно получить в кабинете Яндекс. Вебмастер (нужен именно символьный код, а не весь HTML):
Свойство ID счетчика Google.Analytics можно получить в кабинете Google Analytics:
Изображение
Компонент выводит изображение. Свойство компонента:
- URL картинки – адрес картинки, которая будет отображаться. Если картинка загружается с компьютера, то поле заполняется автоматически.
- Описание изображения – информация, которая выводится пока картинка еще не загружена. Также используется в SEO.
- Ширина, высота – параметры картинки, задаются либо в px, либо в %
Произвольный HTML
Компонент выводит HTML код, который вы можете ввести с помощью визуального редактора.
Панель инструментов визуального редатктора:
- открыть/закрыть исходный HTML код
- вырезать выделенный текст
- скопировать выделенный текст
- вставить содержимое буфера обмена
- вставить содержимое буфера обмена без форматирования
- вставить содержимое буфера обмена из документа Word сохранив форматирование
- отменить/вернуть последнее действие
- поиск по тексту
- найти и заменить текст
- выделить все
- проверить орфографию текста
- стилизовать выделенный текст: жирный, курсивный, подчеркнутый, зачеркнутый
- над-строчное и под-строчное положения текста
- скопировать/очистить форматирование выделенного текста
- нумерованный и маркированный списки
- убрать/добавить отступ (табуляцию)
- стилизованный блок с цитатой
- HTML контейнер
- выравнивание текста
- направление текста
- добавление/удаление внешней или внутренней ссылки
- вставить изображение
- вставить таблицу
- вставить горизонтальную черту
- вставить специальный символ
- включить/выключить отображение разметки
- свернуть/развернуть редактор в полноэкранный режим
- цвет текста и цвет фона
Также после добавления элемента на страницу, вы можете взаимодействовать с ним с помощью правой клавиши:
Все горячие клавишы (Ctrl+C, Ctrl+V, Ctrl+X, ...) доступные в текстовых редакторах, также работают и в данном редакторе.
Логотип магазина
Компонент который вводит логотип магазина, указанный в панели управления магазином. Имеет те же свойства что и компонент Изображение, за исключением URL картинки.
CSS стили
Компонент выводит произвольные CSS стили. По сути является представлением тэга style.
Меню
Компонент вывод список ссылок. Имеет стандартные свойства, а также:
- Элементы – данное свойство позволяет вам указать список отображаемых элементов. Обратите внимание, что элемент отображается только если указаны и название, и ссылка. Чтобы добавить в список новый элемент, нужно нажать кнопку добавить.
Содержимое страницы
Компонент, который выводит динамическую часть текущей страницы. Например, при просмотре каталога товаров, данный компонент выведет список товаров, при просмотре статической страницы сайта, компонент выведет содержимое страницы.
Поисковая строка
Компонент выводит строку поиска по каталогу магазина. Имеет стандартные свойства.
Список категорий каталога
Компонент выводит категории, в которых размещены товары и услуги текущего магазина. Свойства:
- Выбор категории – позволяет вручную выбрать нужные категории, которые будут отображаться. Для выбора категории нужно начать вводить ее название в поле, либо установить курсор в поле ввода и список категорий откроется. После выбора нужно, необходимо нажать на кнопку «+», и категория появится в списке ниже. Для того чтобы исключить категорию, нужно нажать на «х» рядом с названием категории. При указании хотя бы одной категории, свойство количество категорий игнорируется.
- Количество категорий – определяет сколько категорий будут отображаться. Категории выбираются автоматически.
- Отображать картинки – свойство, определяющее показывать или нет картинки категорий.
- Отображение – свойство, определяющее ориентацию вывода категорий.
Если вы вручную указываете категории, и при этом у вас отмечена галочка "Отображать картинки", то не смотря на то, какие категории вы выбрали, отображаться будут только те, у которых установлено изображение!
Добавление категории:
Удаление категории:
Корзина
Компонент выводит корзину. Имеет стандартные свойства.
Список продуктов
Данный компонент выводит список товаров и услуг текущего магазина. Имеет стандартные свойства, а также:
- Выбор товара – позволяет выбрать отображаемые товары (по аналогии со списком категорий).
- Шаблон – позволяет выбрать в каком стиле отображать товары.
- Отображать пагинацию – позволяет выбрать, показывать или нет кнопки переключения страниц
- Отображать сортировку – позволят выбрать, показывать или нет кнопки сортировки списка товаров.
Список отзывов
Компонент отображает отзывы текущего магазина. Имеет стандартные свойства, а также:
- Количество отзывов – определяет, сколько отзывов отображать
Список новостей
Компонент отображает активные новости текущего магазина. Имеет стандартные свойства, а также:
- Количество новостей – определяет, сколько новостей отображать.
- Отображать картинки – позволяет выбрать, показывать ли превью новостей.