HTML Конструктор дизайна W3 для CS-Cart

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

Функционал модуля:

  • Создание проектов в конструкторе сайтов
  • Редактирование разных версий проекта
  • Создание пользовательских шаблонов
  • Создание привилегий на изменение проекта

Особенности конструктора:

  • Простое и понятное создание сайтов
  • Гибкая система стилизации
  • Простой, но сильный модальный блок


Возможности конструктора

Используя конструктор, сделать сайт не составит труда!

Готовый набор инструментов содержит всё необходимое для создания веб-страниц.

Выбирайте из  33 готовых шаблонов.

   


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

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

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


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

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

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

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

Конструктор имеет комплексный  визуальный редактор создания форм для любых целей. Содержит стандартные и специфичные элементы ввода, такие как «прикрепить файл» или «установить дату». Настройте любую форму и подключите её к своей электронной почте или маркетинговому сервису. 




Пример готовой страницы



Настройки модуля

1. Перейдите во вкладку «Модули» → «Управление модулями»



2. Выберите модуль из списка



3. Введите лицензионный ключ



4. Введите Email, на который будут приходить письма из форм обратной связи


5. Примените, чтобы при создании резервной копии сайта копировать конструктор



6. Сохраните данные, чтобы не потерять их при переустановке модуля



7. Перейдите в «Витрины». Отметьте витрину, для которой будет применён модуль, ИНАЧЕ НИЧЕГО РАБОТАТЬ НЕ БУДЕТ



8. Сохраните настройки модуля




Функционал модуля

1. Зайдите во вкладку «Маркетинг» → «MW: HTML конструктор дизайна W3»



2. Нажмите кнопку «Конструктор», чтобы создать проект. Функционал конструктора описан в одноимённой главе



3. Когда закончите работу над проектом, сохраните его. Обновите страницу «Проекты». Новый проект будет сохранён последним в списке под сегодняшней датой



4. Пункт меню «Проекты». Наведите курсор на проект, нажмите на появившуюся шестерёнку, чтобы выполнить одно из следующих действий во всплывающем меню:

1) Загрузить

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

3) Заменить

4) Переименовать

5) Сохранить как шаблон


4.1. Нажмите «Загрузить», чтобы сохранить каждую созданную в конструкторе страницу



4.1.1. Страницы будут отображаться в пункте меню «Контент» и иметь то имя, которое им присвоили при создании



4.2. Нажмите «Редактировать», чтобы открыть окно конструктора выбранного проекта



4.3. Нажмите «Заменить» . Функция позволяет заменить контент после редактирования проекта



4.3.1.  Выберите нужный проект и нажмите кнопку «Заменить». После этого обновится список контента


4.4.  Нажмите «Переименовать», чтобы открыть окно переименования



4.4.1. Впишите новое название и нажмите «Сохранить»



4.5. Нажмите «Сохранить как шаблон», если хотите создать пользовательский шаблон



4.5.1. Впишите имя шаблона и нажмите «Сохранить»



4.5.2. Проект появится во вкладке «Пользовательские шаблоны»



5. Пункт меню «Контент». Здесь находятся созданные страницы проекта. Для разных языков можно менять содержимое контента (рекомендовано менять только текст). 

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

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

2) Создать страницу

3) Удалить



ВНИМАНИЕ! 

Во время редактирования внешний вид в административной панели может отличаться от витрины.


5.1. Нажмите «Редактировать», чтобы перейти к редактированию страницы



5.2. Нажмите «Создать страницу», чтобы открыть окно создания страницы



5.2.1. Выберите родительскую страницу



5.2.2. В поле впишите название новой страницы



5.2.3. Отметьте "Обновлять страницу при обновлении контента", если нужно



5.3. Нажмите «Удалить». Подтвердите своё решение, после чего страница будет удалена



ВНИМАНИЕ!

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


6. Пункт меню «Формы обратной связи». Если в конструкторе при создании проекта добавлялись формы обратной связи, то они отобразятся здесь



6.1. В поле впишите тему письма



6.2. Отметьте, если нужно, чтобы копия сообщения, которое пользователь отправил через форму обратной связи, пришла ему на почту



6.3. Введите название поля Email, которое отобразится в форме обратной связи



7. Пункт меню «Шаблоны». Стандартные шаблоны представляют из себя готовые проекты, собранные в одном месте. Используя модуль впервые нужно нажать кнопку «Обновить», чтобы отобразился список шаблонов



7.1. В конструкторе представлено 33 готовых шаблона


7.2. Чтобы использовать стандартный шаблон, нажмите на нужный (например: «agency2»)



7.3. Откроется конструктор. В боковом меню выберите «Страницы проекта»



7.4. Нажмите на кнопку «Загрузить проект» 



7.5. Сохраните проект



7.6. Вернитесь в панель администратора. В пункте меню «Проекты» наведите курсор на тот, который только что создали, нажмите на появившуюся шестерёнку, выберите «Загрузить»



7.7. Страницы проекта отразятся в пункте меню «Контент»


8. Пункт меню «Пользовательские шаблоны» содержит список шаблонов, созданных пользователем. Их использование аналогично стандартным




Вставка контента в страницу через блок

1. Для отображения контента на витрине перейдите в «Дизайн» → «Макеты»



2. Выберите подходящую страницу (например: «Домашняя страница»)



3. Наведите курсор на основную секцию «КОНТЕНТ», нажмите на значок «+», нажмите «Добавить секцию»



4. В открывшемся окне напротив пункта  «Ширина» выберите «16»



5. Если нужно сделать отступы между секциями, то в поле «Пользовательский CSS-класс» вставьте нужные CSS-классы без кавычек через пробел. Для того, чтобы создать отступ с нужным значением пикселей от 1 до 5, в имени приведённых ниже CSS-классов замените цифру 1 на нужную:

1) «mw_wm-padding-top1», если нужно сделать отступ сверху 

2) «mw_wm-padding-bottom1», если нужно сделать отступ снизу

3) «mw_wm-padding-left1», если нужно сделать отступ слева 

4) «mw_wm-padding-right1», если нужно сделать отступ справа


6. Нажмите кнопку «Создать»



7. Наведите курсор на созданную секцию, нажмите на значок «+», нажмите «Добавить блок»



8. Перейдите во вкладку «Создать новый блок», выберите «HTML Конструктор дизайна W3»



9. В открывшемся окне напишите название блока (например: «HTML Конструктор дизайна W3»)



10. Перейдите во вкладку «Контент», нажмите на кнопку «Добавить блок»



11. В открывшемся окне выберите контент, который нужно добавить, нажмите кнопку «Добавить и закрыть» или «Добавить блок», если после добавления этого блока нужно добавить ещё блоки



12. Нажмите кнопку «Создать»



13. Наведите курсор на секцию, нажмите на шестерёнку


14. В окне «Редактирование секции» появится пункт «Вся ширина». Выберите «Вся ширина», если нужно, чтобы добавленный контент располагался по всей ширине экрана. Нажмите «Сохранить»



В результате на витрине появится блок, созданный при помощи конструктора



Вставка контента в виде страницы

1. Если Вам нужно создать новую страницу, на которой контент будет отображаться на всю ширину экрана, нажмите «Добавить страницу макета...»



2. В открывшемся окне напротив пункта «Страница: Другое» впишите «pages.view» без кавычек



3. В следующем поле напишите название (например: «MW: Страница») и нажмите кнопку «Создать»


4. Наведите курсор на основную секцию «КОНТЕНТ», нажмите на значок «+», нажмите «Добавить секцию»



5. В открывшемся окне напротив пункта  «Ширина» выберите «16»


6. Если нужно сделать отступы между секциями, то в поле «Пользовательский CSS-класс» вставьте нужные CSS-классы без кавычек через пробел. Для того, чтобы создать отступ с нужным значением пикселей от 1 до 5, в имени приведённых ниже CSS-классов замените цифру 1 на нужную:

1) «mw_wm-padding-top1», если нужно сделать отступ сверху 

2) «mw_wm-padding-bottom1», если нужно сделать отступ снизу

3) «mw_wm-padding-left1», если нужно сделать отступ слева 

4) «mw_wm-padding-right1», если нужно сделать отступ справа



7. Нажмите кнопку «Создать»



8. Наведите курсор на созданную секцию, нажмите на значок «+», нажмите «Добавить блок»


9. Во вкладке «Использовать существующий блок» выберите «Главное содержимое»



10. Наведите курсор на секцию, нажмите на значок «+», нажмите «Добавить блок»



11. Перейдите во вкладку «Создать новый блок», выберите «HTML Конструктор дизайна W3»



12. В открывшемся окне напишите название блока (например: «HTML Конструктор дизайна W3»)



13. Перейдите во вкладку «Контент», нажмите на кнопку «Добавить блок»



14. В открывшемся окне выберите контент, который нужно добавить, нажмите кнопку «Добавить и закрыть» или «Добавить блок», если после добавления этого блока нужно добавить ещё блоки



15. Нажмите кнопку «Создать»



16. Наведите курсор на секцию, нажмите на шестерёнку


17. В окне «Редактирование секции» появится пункт «Вся ширина». Выберите «Вся ширина», если нужно, чтобы добавленные блоки располагались по всей ширине экрана. Нажмите «Сохранить»




Привилегии

1.Перейдите во вкладку «Покупатели»  → «Группы пользователей» 



2. Выберите нужную группу (например: «Администратор»)



3. В разделе «HTML Конструктор дизайна W3» отметьте нужные пункты:

1) «Просмотр» - открывает доступ к просмотру своих проектов, контента, шаблонов;

2) «Управление» - открывает доступ к созданию, редактированию своих проектов, контента, шаблонов, к удалению контента (но не проектов);

3) «Удаление проектов» - открывает доступ к удалению своих проектов;

4) «Доступ к проектам всех пользователей» - открывает доступ к просмотру и редактированию проектов, которые создают все пользователи;

5) «Все пользовательские шаблоны» - открывает доступ к просмотру и использованию всех пользовательских шаблонов.



4. Нажмите «Сохранить»




Функционал конструктора

1. Для создания контента в боковом меню выберите вкладку «Создать страницу»



2. В редакторе около 400 вариантов блоков, распределённых по типам



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



4. При наведении на блок появляется небольшое меню настроек



5. Стрелками «Вверх» и «Вниз» можно можно менять позицию блока на странице



6. Откройте «Настройки фона» для редактирования фонового изображения



7. Откройте «Настройки секции» для редактирования секции 


8. Если нужно, откройте окно редактирования HTML-кода



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


10.  Нажмите, чтобы удалить блок. Подтвердите  своё решение, после чего блок будет удалён


11. В боковом меню выберите вкладку «Стили страницы»


12. Измените внешний вид заголовков, ссылок, кнопок, форм, галерей, редактируйте отступы с помощью появившейся панели сразу во всём магазине



13. Измените текст описания, просто нажав на него. Выбранный фрагмент будет обведён черной рамкой



14. Перейдите во вкладку «Страницы проекта»



15. Нажмите «Настройки контента», чтобы редактировать данные



16. Нажмите «Создать копию», если нужно создать дубликат страницы



17. Нажмите «Удалить страницу», если нужно



18. Нажмите «Добавить новую страницу» для создания нового контента



19. Нажмите, чтобы создать новый проект



20. Нажмите, чтобы сохранить  проект



21. Нажмите кнопку «Загрузить проект», чтобы открыть выбранный проект.



ВНИМАНИЕ!

Все данные об изменении проекта хранятся в кэше браузера, поэтому если случайно закроется сайт или браузер, выключится компьютер или отключат свет, никакие данные не потеряются! При открытии конструктора загрузится тот проект, который редактировался последним, если такой имеется. Чтобы открыть нужный проект, который не является последним, нужно нажать кнопку «Загрузить проект».

Адаптивность

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

1. Версия для мобильного телефона



2. Версия для планшета



3. Версия для компьютера




ВНИМАНИЕ!

1. Имена страниц должны быть не длиннее 50 символов без использования спецсимволов и кириллицы, пишите только на английском языке. Название должно начинаться с латинской буквы, может содержать только латинские буквы, цифры и подчёркивания.

2. В настройках форм поле «Field name» нельзя использовать спецсимволы и кириллицу, пишите только на английском языке. Название должно начинаться с латинской буквы, может содержать латинские буквы, цифры и подчёркивания.

3. Использование модальных панелей невозможно в UniTheme, UniTheme2, YOUPI Themeнежелательно (невозможно закрыть всплывающие сообщения).