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

CloudCart - персонализиране на темата по подразбиране

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

CloudCart - персонализиране на темата по подразбиране

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

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

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

Избор на целева страница

При натискане на бутона в горния десен ъгъл на екрана Добави нова страница се зарежда панела Избери вид на целевата страница със следните типове страници:

Панел за избиране типа на целевата страница

  • Визуален конструктор на страници - предлага интерфейса, който ще използвате най-често и който предлага достъп до всички дизайн модули. Може да отворите директно визуалния конструктор за страници като изберете от главното меню Магазин > Визуален конструктор на страници.
  • Визуален конструктор на системни страници - при избиране се зарежда нов панел със следните опции: Начална страница, Страница при успешна поръчка и Страница "Грешка 404". Тези страници не предлагат различни инструменти, но техния URL адрес автоматично се прибавя към структурата на сайта (при успешна поръчка на продукт автоматично се зарежда Страница при успешна поръчка).
  • Статична страница - зарежда текстов редактор без възможност за добавяне на дизайн елементи, подходящ за публикуване на документи.
  • Страница *Често Задавани Въпроси* - популярен формат, при който кликане върху въпрос отваря панел с отговор.
  • Външна страница - може да използвате интерфейса за създаването на целеви страници с персонализиран HTML код, информация и дизайн.

Избор на структура на страницата

След като изберете Визуален конструктор на страници се зарежда основния интерфейс на конструктора:

Изглед на основния панел на конструктора на страници

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

Панел с различни структури на колоните

Изберете структура на реда с две колони, които визуално се добавят под бутона и съдържат линкове към панела с модули +Добави нов модул:

Поле за добавяне на нов модул

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

Меню с опции за управление на модули

Същото меню се зарежда и когато посочите с мишката бутона +Добави нов ред. Препоръчаме да бъдете внимателни дали се зареждат бутоните за управление на реда или на модула под него:

Меню с опции за управление на ред

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

Крайният бутон със символ молив и етикет Row settings предоставя възможност за промяна настройките на реда в темата. Стойностите във всички полета съответстват на CSS функции за фон, разстояние и позициониране на елементите в реда:

Панел с полета за настройки на ред

Важно: използвайте настройките в панела само ако желаете да промените настройките по подразбиране на темата.

Настройване на фоново изображение

От менюто на поле Фон може да добавите фоново изображение по един от следните начини:

Изглед на настройките на меню в полето Фон

Външно изображение за фон - в полето Източник на изображението на фона въведете URL адрес до изображението (проверете правата на изображението, ако не го зареждате от собствен хост).

Зареждане на външно изображение

Цвят за фона - от цветовата палитра изберете желания цвят за фон на реда:

Избиране на цвят за фон

Изображение от мястото за съхранение - качете избранo от вас фоново изображение през линка +Добави изображение за фон:

Качване на изображение за фон

Настройки на ред

От менюто в поле Хоризонтална позиция изберете къде да се позиционира фона - централно, вляво или вдясно (center, left, right).

От менюто Вертикална позиция изберете позицията на фона по вертикалната ос - в средата, отгоре или отдолу (middle, top, bottom).

От менюто Стил на фона посочете дали фоновото изображение да изпълва размерите на целия контейнер, дори собствените му размери да са по-малки (cover и stretch), или контейнера да съдържа фоновото изображение в неговите оригинални или намалени размери (contain).

Настройките в следващия ред (Отстояние от горе, Отстояние от долу и Отстояние отстрани) дефинират разстоянието на елементите вътре в реда до границите на реда - отгоре (padding-top), отдолу (padding-bottom) и от двете страни (padding-left, padding-right).

Настройване на отстояния от границите на реда

Настройките в следващия ред (Външно отст. от горе, Външно отст. от долу и Външно отст. отстрани) дефинират външните разстояния на реда до съседните редове отгоре (margin-top) и отдолу (margin-bottom), както и разстоянието до контейнера отстрани (margin-left, margin-right).

Настройване на разстояния до съседни редове

Ако маркирате полето От край до край към CSS кода се добавя настройката overflow: hidden;, която указва на браузъра фоновото изображение да не излиза от рамката на реда.

В полето CSS клас (по желание) може да добавите уникално име и да запазите промените като различен CSS клас.

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

Настройки в помощния панел

В страничната лента имате достъп до Настройки на страницата и История на промените:

Изглед на помощна лента с настройки

В секция Настройки на страницата въведете:

  • име на страницата - ще се ползва в таблицата с целеви страници,
  • линк на страницата - ще се ползва в URL адреса на страницата.
  • SEO заглавие на страницата - официалното име на страницата, което ще се ползва от търсещите машини.
  • SEO мета описание - кратко описание на съдържанието на страницата.

Полета за въвеждане информация за страницата

През бутона Избери файл може да качите изображение, което ще се ползва при споделяне на страницата в социални мрежи:

Качване на изображение за споделяне на страницата

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

Изглед на записаните промени в страницата

Натиснете бутона Прегледай за да видите как изглежда страницата в нов прозорец на браузъра. Когато сте доволни от крайния резултат натиснете бутона Публикувай за да запазите страницата.

Инструменти за управление на страници

Новата страница се добавя в таблица, която може да достъпвате през менюто като изберете Маркетинг > Целеви страници.

Запис на статия в таблица

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

Икона за преглед на страница

От менюто в колона Назначена към може да промените типа на страницата като изберете една от наличните опции:

Опции в меню Назначена към

При маркиране на страница от таблицата се активира бутона Инструменти, през който имате достъп до опциите Активиране, Деактивиране, Изтриване и Дублиране:

Опции в меню Инструменти

Система за филтриране на резултати и запазване на филтър

Ако за работата на сайта сте създали десетки страници може да ползвате системата за филтриране за бързо и лесно намиране на конкретна страница.

Въвеждаме в полето името на страницата demopage и натискаме иконата със символ лупа - в таблицата се зарежда само търсената страница demopage.

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

При следващо влизане в конструктора на страници за да заредим страница demopage натискаме бутона Запазени филтри и от менюто избираме homepage:

Запазване на филтри в CloudCart