Визуальная верстка

Классическая верстка сайта - это сложный и трудоемкий процесс, требующий знаний в области HTML и CSS кода. Верстка кодом имеет множество преимуществ, однако большинство задач с которыми сталкиваются профессиональные верстальщики - типовые и вполне могут быть автоматизированы за счет использования WYSIWYG редакторов (What You See Is What You Get).


CMS Smart Engine позволяет визуально создавать лендинги, сайты и интернет-магазины с использованием собственного визуального HTML-редактора (WYSIWYG редактора). Удобный и понятный интерфейс, возможность указания размеров в PX и процентах, а также вставка собственного кода сделают Вашу работу с сайтом простой, удобной и эффективной.

*На фото показана среда визуальной верстки. Перетащите синий указатель со стрелочками и увидите, как выглядит генерируемый код для этой страницы.

Визуальный HTML редактор
before
after

Внешний вид визуального HTML редактора в CMS Smart Engine

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

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

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

 

 

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

Система размеров в PX для статичной верстки и процентах для создания "резиновой" верстки.

 

 

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

Ориентация

9 вариантов ориентирования объектов для максимально удобной верстки и создания различного поведения объектов.

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

Объединение объектов в группы для добавления эффектов, ссылок и создания собственной "физики" внутри группы.


 

Блокировка и скрытие объектов в визуальном HTML редактореБлокировка и скрытие объектов

Полная и частичная блокировка объектов в среде визуальной верстки.

 

 

Выравнивание и подгонка объектов в визуальном HTML редакторе

Выравнивание и подгонка

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


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

Определение порядка объектов (z-index) с возможностью закрепления объекта на определенном уровне.

 

  

Размещение кода в визуальном HTML редактореСниппеты и HTML

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

 

 Визуальные эффекты в визуальном HTML редакторе

Визуальные эффекты

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


Визуальная верстка Template


Очень многие пользователи путаются в том, что такое Template (шаблоны) и зачем они нужны. Дело в том, что Template в конструкторах сайтов и CMS это абсолютно разные понятия.


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


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



Почему это важно?

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

Если на сайте используются Template для автоматизации вывода контента


Анонс с фотографией выведется автоматически в начале списка, а все предыдущие анонсы (товаров или новостей) сами опустятся вниз.


Администратор сайта не потратит на это ни одной минуты, все просто и удобно!

Если Вы используете конструктор сайтов, в котором Template -  это красивый шаблон дизайна


Здесь нет никакой автоматизации вывода и Вам нужно будет разместить анонс вручную.


Сначала нужно «освободить» место для новой информации и поэтому придется опустить другие анонсы ниже. Сначала один, потом другой и так далее. Что если на сайте 100 товаров или новостей (а для рабочего проекта это совсем немного)?


На перемещение одного анонса Вы потратите примерно 10 секунд. В этом случае Вам потребуется минимум 15 минут просто для того, чтобы освободить место для новой информации!


0
30

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


При всех преимуществах WYSIWYG редакторов, визуальная верстка не всегда может заменить классическую верстку кодом. Мы высоко ценим профессиональных разработчиков, их умения и опыт. Основная задача CMS Smart Engine заключается в автоматизации рутинных процессов и облегчении работы пользователей и профессиональных разработчиков.


Основные функции:

Среда визуальной верстки CMS Smart Engine позволяет не просто визуально разместить картинки, текст и другие объекты на странице, а полноценно добавлять HTML, CSS, JS и даже PHP код.


Модуль «Среда разработчика», входящий в состав даже стартовой лицензии, позволит создавать сниппеты, модули и плагины с помощью MVC структуры.
Использование кода в визуальном html редакторе