Начало > Помощен център > E-Store > Дизайн > CloudCart - модули в конструктора за целеви страници

CloudCart - модули в конструктора за целеви страници

Помощен център

CloudCart - модули в конструктора за целеви страници

Освен интерфейс за редактиране на шаблона, CloudCart предоставя и конструктор за създаване на страници, който разширява капацитета на избраната тема до границите на нашето въображение, предоставяйки възможност за интегриране на 16 (до момента) модула.

Също така през модула Add Code Snippets може да добавите HTML кода на всеки дизайн елемент, който считате за нужен за работата на магазина.

За да представим подробно всеки модул от конструктора за страници, създадохме нов сайт http://demobuilder.icn-demo.com, в който инсталирахме темата Flair главно заради много подходящия дизайн на под-менютата. Като посочите с мишката връзката Tools от под-менюто може да отворите страницата на съответния модул.

За да работят коректно модулите първо създаваме категории, продукти, производители и блог статии, които действия сме описали подробно в статията CloudCart - персонализиране на темата по подразбиране.

В статията CloudCart - настройки на конструктора на целеви страници описахме как се създава нова страница, как се избира структура на реда, какви са настройките за управление на ред и модул и др.

В контролния панел на CloudCart отворете Магазин > Визуален конструктор на страници.

Добавете нов ред от бутона +Добави нов ред и изберете структура от колони. Натиснете бутона +Добави нов модул за да се зареди панел с наличните модули:

Панел с модули във визуалния конструктор

Модул 'Добави заглавие'

Натиснете секцията Добави заглавие. В панела на модула изберете типа на заглавието от падащото меню (H1-H6), въведете текст в полето Заглавие и го запазете като натиснете бутона Запази:

Настройки на модул Добави заглавие

Може да редактирате типа и текста на заглавието като посочите с мишката заглавието и в горния десен ъгъл на секцията натиснете иконата със символ молив и етикет Edit widget.

Модул 'Добави текст'

Добавянето на текст става по същия начин - натиснете бутона +Добави нов модул в произволна колона и от панела с модули изберете Добави текст. CloudCart добавя богат на функции текстов редактор, с който може да създавате заглавия, да форматирате текст и списъци, да влагате изображения и видео и много други.

Настройки на модул Добави текст

С добавяне на модула за текст в съседни колони може да създавате разнообразни и интересни за посетителите на магазина страници.

Модул 'Продуктова витрина'

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

Настройки на модул Продуктова витрина

Панелът с настройки е разделен на две секции. Въведете (по желание) заглавие в полето Заглавие на витрината.

Останалите полета в тази секция са филтри за селектиране на продуктите във витрината по много различни признаци - дата, посока, нови продукти, разпродажба, препоръчани, филтриране по категория, таг, производител, колекция, по видове продукти. Благодарение на системата за филтриране може да показвате различни продуктови витрини в различни страници от магазина.

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

Модул 'Витрина с Категория/Производител'

Един и същ модул се използва за показване витрина на производители и категории, но в примера сме създали отделни страници за тях.

Настройки на модул Витрина с Категория/Производител

Изберете структура на ред с две колони и от панела с модули изберете Витрина с категория/производител. От менюто Вид изберете между производител и категория, въведете име в полето Заглавие на витрината.

В менюто Категории/Марки кликнете линковете с имената на категориите/производителите, които желаете да се виждат във витрината, за да се заредят като бутони в полето.

В дясната секция в полето Елементи на ред изберете броя на категориите/производителите във витрината. В секция Опции на елементите може да активирате изглед слайдер или таблица. Ако активирате Слайдер препоръчаме да ползвате само опцията Позволи стрелки и да махнете отметката от полето Описание.

Модул 'Добави код'

Това е полезен модул, с който може да добавите произволен HTML код. Но ... този външен за темата код няма да изглежда в магазина по същия начин, по който изглежда в оригиналния сайт.

Панел на модул Добави код

Затова освен HTML кода в полето Съдържание, трябва да се добави и персонализиран CSS код (@media) за всички области между точките на пречупване (breakpoints) за да изглежда страницата добре на устройства с различни дисплеи.

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

Модул 'Разделител'

Разделителят е много полезен елемент за разделяне на редове и на текстови елементи в една колона. Модулът на CloudCart предлага пълен набор от настройки (стил, позициониране, цвят, дебелина, ширина), което едновременно улеснява настройването и разширява възможностите за използване.

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

Въвеждане на стойности за отстояние отгоре и отдолу (padding-top и padding-bottom) се прибавят към зададените стойности в темата.

Модул 'Добави видео'

Използване на видео не може да бъде по-лесно. Просто изберете структура, от панела с модули изберете Добави видео, изберете доставчик от менюто (YouTube, Vimeo или VBOX7) и копирайте линка на видеoто:

Настройки на модул Добави видео

За да гледате видеото в оригиналната резолюция, в полето Видео източник изберете Embed, копирайте Embed кода на видеото и го поставете в полето Линк/Код (разбира се, размерите на контейнера трябва да са по-големи от тези на видеото, затова изберете нов ред и структура с една колона).

За да гледате видео файл, който хоствате на собствен сървър или хостинг, изберете за Видео източник HTML5 и в полето Линк/Код поставете URL адреса до видео файла.

Модул 'Слайдър'

При добавяне на модула Слайдър се зарежда абсолютно същия панел за управление, който разгледахме подробно в статията CloudCart - персонализиране на темата по подразбиране, в секция Персонализиране на слайдър.

Модул 'Детайли на поръчка'

С добавянето на модула ще активирате в страницата секция, в която ще се визуализират детайлите на вече направена от клиента поръчка.

Може да използвате този модул при създаване на страница, която ще се зарежда след успешна поръчка (thank you page). Може да персонализирате страницата като добавите този модул и включите секция с продукти, например.

Модул 'Секция пакети'

За да добавите този модул трябва да сте създали поне един пакет от продукти, както е описано в статията Създаване и управление на Продуктови Пакети. След това избирате структура от колони за реда и от панела с модули избирате Секция пакети:

Настройки на модул Секция пакети

От опциите в падащото меню избирате желания пакет и кликате линка за да се премести в полето Филтри. Изберете подходящи стойности за полетата Брой на продукти и Продукти на ред, и кликнете бутона Запази.

Модул 'Продукт'

Този модул позволява създаването на страница за отделен продукт с възможност за включване на голям брой настройки. Поради многото информация, която може да се добави за продукта, при избор на структура препоръчаме показване на цял ред или в по-широката колона при съотношение 4/6 - 2/6 или 3/4 - 1/4.

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

След избиране на структурата и добавяне на модула се зарежда споменатия панел с настройки, в който първо избирате продукта и след това може да добавяте или премахвате информация чрез радио бутоните. Запазете вашия избор като натиснете бутона Запази.

Бутон "Добави в количката"

Модулът създава само бутон (без изображение или текст), който добавя избран продукт в пазарната количка. Настройките позволяват избор на продукт, избор на цвят от темата, избор на стандартно позициониране, запълване цялата ширина на контейнера (разпънат по ширина), въвеждане на персонализиран текст:

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

Удобен е за ползване в статии или друг тип информационни страници в комбинация с модула текст за добавяне на изображение и текст.

В примера избираме структура с три еднакви колони, в средната колона добавяме модул текст и публикуваме изображение и текст. Като следващ модул в колоната добавяме бутона "Добави в количката" и попълваме настройките от изображението.

Модул 'Бутон'

Модула създава само бутон (без изображение или текст), който при кликане зарежда зададен в настройките URL адрес.

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

Настройките са идентични с тези на бутона "Добави в количката" с тази разлика, че в полето Линк въвеждате URL адрес за пренасочване.

И в този случай ползването само на бутона няма смисъл и трябва да се комбинира с текст и/или изображение.

Модул 'Статии'

Модула зарежда статии от блога в различни структурни комбинации:

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

Настройките от изображението зареждат последните четири статии в един хоризонтален ред. На втория ред в примера показваме последните две статии по една на ред и последните четири статии по две на ред.