Начало > Помощен център > Апликации > WordPress > Създаване на WordPress бизнес сайт – SiteOrigin Page Builder

Създаване на WordPress бизнес сайт – SiteOrigin Page Builder

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

Създаване на WordPress бизнес сайт – SiteOrigin Page Builder

В статията ще представим накратко основните елементи от интерфейса на SiteOrigin Page Builder преди да започнем работа по сайта.

За целта създаваме нова страница Temp в WordPress и я публикуваме. Кликаме бутона Add SiteOrigin Layout Block за да се зареди интерфейса на SiteOrigin:

Зареждане интерфейса на SiteOrigin в Gutenberg

Съдържанието на страницата се изгражда в редове - Rows, затова кликаме бутона Add Row в навигационната лента или бутона Row в полето под нея:

Създаване на нов ред в SiteOrigin

Зарежда се главният интерфейс за управление на редове в SiteOrigin:

Интерфейс за управление на ред в SiteOrigin

Навигационната лента съдържа следните инструменти:

  • Set row layout - определя на колко колони да се раздели съответния ред;
  • Columns with a ratio of - от падащото меню може да изберем предефинирани съотношения между размера на отделните колони;
  • Going from - избираме посока на оразмеряването - отляво-надясно или обратно;

Разделяне на реда на колони

Обръщане на посоката отдясно-наляво:

Промяна на реда на колоните

Чрез натискане и плъзгане с мишката (drag'n'drop) може да изтеглим границите на всяка колона до желан от нас размер:

Промяна размера на колона чрез плъзгане и изтегляне (drag'n'drop)

Възстановяваме еднаквата ширина на колоните като от падащото меню Columns with a ratio of избираме първата опция Even (1):

Възстановяване на еднаква ширина на колоните

Кликаме бутона Insert в долния десен ъгъл за да запазим избора:

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

В дясната навигационна лента на интерфейса Row Styles имаме достъп до четири разгъващи се панела с настройки.

Attributes - тук може да въвеждаме ръчно CSS код като в някое от първите три полета посочваме елемента от структурата на кода, а в четвъртото поле въвеждаме съответните CSS команди по една на ред:

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

Layout - в секцията въвеждаме информация как да бъдат разположени елементите - разстояние до следващия ред (bottom margin), разстояние между колоните (gutter), вътрешно разстояние между елементите в самата колона (padding), ширина на реда (row layout) и др.:

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

Mobile Layout - предоставя достъп за настройване на същите параметри за мобилни устройства с по-ниска резолюция:

Панел за настройки Mobile Layout

Design - от секцията въвеждаме дизайн елементи като цвят на фон, фоново изображение, показване на фоново изображение, цвят на граница и др.:

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

След като затворим панела с бутона Insert трябва да запазим информацията и в WordPress като кликнем бутона Update. Ако сега кликнем бутона Preview ще се зареди бял екран тъй като само сме дефинирали реда и колоните, но в тях няма никаква информация.

Въвеждане на информация в колоните става като маркираме колонa и кликнем бутона Add Widget:

Бутон за добавяне на Widget

В новия панел имаме достъп до голям брой widgets, всеки от които прави възможно създаване на съдържание с конкретна структура и дизайн. За примера избираме една от най-използваните програми SiteOrigin Editor (която всъщност е текстов редактор):

Панел за избиране на widgets

При посочване на widget с мишката се появява меню с три опции:

  • Edit - отваря панела на widget-a за въвеждане/редактиране на данни;
  • Duplicate - създава копие на елемента в същата колонa;
  • Delete - премахва widget-a;

Меню за управление на widget

Чрез натискане и плъзгане с мишката (drag'n'drop) може да местим елементи между различните колони или да им разменяме местата в същата колонa:

Преместване на елементи чрез плъзгане drag'n'drop

С използване на клониране и плъзгане създадохме ред със следната структура:

Структура от widgets

В SiteOrigin Image панелите избрахме по едно изображение от Media Library, a в SiteOrigin Editor панелите въведохме заглавие и текст, като съответно ги форматирахме ляво, център и дясно за различните панели (в следващата статия ще разгледаме подробно работата с различни widgets). Запазихме промените и заредихме реда в браузър:

Изглед на страницата в браузър

Меню за управление на ред в SiteOrigin

При кликане на иконата със символ гаечен ключ в горния десен ъгъл на реда се отваря меню със следните линкове.

Edit Row - отваря панела за редактиране на целия ред, който разгледахме при създаването на нов ред:

Линк за редактиране на ред

Duplicate Row - създава точно копие на реда и елементите в него:

Линк за клониране на ред

Delete Row - не изтрива реда, но след първото кликане се променя надписа на линка:

Предупреждение за изтриване на ред

Are you sure? - ако потвърдим изтриването с второ кликане, реда се изтрива:

Потвърждение за изтриване на ред

При посочване на цвят се променят границите на реда в избрания цвят:

Промяна цвета на границите на реда

Чрез натискане и плъзгане с мишката (drag'n'drop) на иконата със символ две противоположни стрелки може да променяме вертикалното разположение на редовете в страницата:

Промяна вертикалното местоположение на ред

При кликане с десен бутон върху widget се зарежда меню с много опции:

  • Add Widget Below - добавяне на един от посочените четири widgets;
  • Widget Action - може да отворим widget-а за редактиране, да копираме, клонираме или изтрием widget-a;
  • Add Row - да добавим нов ред с 1-4 колони;
  • Row Actions - да изпълним посочените действия с реда, които разгледахме по-горе;

Контекстно меню с много опции

При копиране на ред или widget, след кликане с десен бутон върху друг ред или колона, в менюто се появява линк за поставяне (paste) на копираното съдържание:

Линк за поставяне (paste) на widget

Линк за поставяне (paste) на ред

Добавяне на страници с примерен код Layouts

Сега ще разгледаме как може да ползваме страници с готов код чрез опцията Layouts в SiteOrigin.

Създаваме нов празен ред с една колона и в нея импортираме Layout Builder с десния бутон на мишката от контекстното меню:

Импортиране на Layout Builder

Кликаме линка Edit за да влезем в режим на редактиране:

Линк Edit в Layout Builder

В панела на Layout Builder кликаме един от двата бутона, показани на изображението:

Бутони Layout и Prebuilt Layout

В отделен панел се зареждат страниците с примерно съдържание, чиито код можем да заредим в текущата страница:

Страници с примерен код

Всяка примерна страница можем да разгледаме предварително в нов прозорец на браузъра като я посочим с мишката и кликнем бутона Preview:

Преглед на страница с примерен код

Импортираме готова страница като кликнем името на страницата за да я маркираме и кликнем бутона Insert. Зарежда се меню, в което трябва да посочим къде в нашата страница да бъде импортирано съдържанието на примерната страница.

Възможните опции са следните:

  • Insert after - импортиране след съдържанието на текущата страница;
  • Insert before - импортиране преди съдържанието на текущата страница;
  • Replace current - импортиране на мястото на текущата страница. Не изтрива нищо, само променя името на линка;
  • Are you sure? - импортира примерното съдържание на мястото на текущото съдържание (изтрива всичко на страницата);

Предупреждение за импортиране

Потвърждение на импортирането

В следващия пример ще покажем как може да създадем страница Services, която да съдържа по един ред от първите три примерни страници с примерен код.

Импортираме съдържанието на първия темплейт като няма значение коя опция за импортиране ще изберем тъй като нашия ред беше празен. Ето как изглеждат редовете с импортирано съдържание:

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

Изтриваме всички редове освен реда What We Do:

Изтриване на ненужните редове

След това маркираме втория темплейт и го импортираме след (Import after) първия. Изтриваме всички редове освен Our Services като запазваме и предишния ред What We Do:

Запазените два реда от двете страници с примерен код

Импортираме и третия темплейт, но този път избрахме опцията Import before и редовете бяха импортирани преди двата запазени реда. Изтриваме всички нови редове без Services като внимаваме да не изтрием предварително запазените два реда. Променяме и името на панела на Services layouts:

Изглед на панела Services layouts

Запазваме промените като кликаме бутона Done и ъпдейтваме страницата (Update):

Изглед на страницата Temp с двата реда

Така изглежда страницата с трите реда Services от трите различни темплейта, които импортирахме:

Зареждане на панела Services layouts в браузър

Сега SiteOrigin има да ни предложи една още по-вълнуващата опция - създадената страница Services layouts може да запазим в JSON формат и да я импортираме в други сайтове, които изграждаме с SiteOrigin.

Кликаме бутона Layouts:

Бутон Layouts в SiteOrigin

В менюто избираме линка Import/Export и кликаме бутона Download:

Линк Import / Export

Файл в JSON формат се записва на нашия компютър:

Записаният файл в JSON формат

Сега изтриваме двата реда от страницата Temp:

Страница Temp без редове в SiteOrigin

В празния панел кликаме Layouts, кликаме Import/Export в менюто и кликаме бутона Select Import File:

Бутон Select Import File

В прозореца навигираме до JSON файла:

Навигиране до JSON файла

и кликаме бутона Insert с произволна опция тъй като нашата страница е празна. Запазваме промените и ъпдейтваме страницата Temp:

Възстановена структура на страницата Temp

Импортираният архив е идентично копие на съдържанието, което изтрихме по-рано.

Допълнителен инструмент History браузър

В навигационната лента на началната страница на сайта откриваме два допълнителни инструмента - History и Live Editor:

Бутони History и Live Editor

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

Клонирахме бутона в първия фрейм на слайдера, затворихме панела SiteOrigin Hero без да запазваме промяната и кликнахме бутона History:

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

Грешката се визуализира при кликане на таба Current (текущ). При кликане на таба Widget edited се зарежда състоянието на страницата преди грешната промяна:

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

Без да кликаме бутона Save Home Page или Update, в зависимост от това в кой интерфейс на WordPress сме отворили началната страница (Custom Home Page или Edit Page), може да извършваме поредица от действия и всички те се записват в навигационното меню на History:

Запис на текущи действия в History

Кликане върху всеки таб показва как изглежда съответната версия на страницата. Когато решим коя версия желаем да възстановим, кликаме съответния таб, уверяваме се визуално, че точно това е правилното копие на страницата и кликаме бутона Restore Version.

За да запазим възстановената версия на страницата, трябва да клинем един от двата бутона Save Home Page или Update. Ако след това отворим History няма да открием никакъв запис в навигационнното меню освен стандартните Current и Original.

Препоръка - Бъдете много внимателни при работа с инструмента History.

Препоръчаме в процеса на разработване на сайта да активирате и WordPress Revisions, ако по някаква причина сте ги изключили във файла wp-config.php или по друг начин (плъгин).

Допълнителен инструмент Live Editor

Live Editor ни позволява да правим промени в реално време в сайта преди да запазим тези промени. Изключителното удобство на Live Editor е, че когато кликнем на елемент от сайта, автоматично се отваря панела за управление на същия елемент:

Изглед на Live Editor

Навигационната лента на Live Editor ни предлага следните възможности:

Навигационна лента на Live Editor

  • за да видим промените в Live Editor на цял екран кликаме иконата със символ стрелка в горния ляв ъгъл;
  • за да видим как изглежда дизайна на сайта на устройства с по-малка резолюция (таблет и смартфон), кликаме иконата със символа на съответното устройство;
  • затваряме Live Editor като кликнем бутона Close (промените не се запазват);
  • запазваме промените като кликнем бутона Update;

Ако сме закупили платената версия на SiteOrigin, през бутона Addon имаме достъп до премиум плъгините. Кликане на бутона Addon в безплатната версия ни пренасочва към страницата за закупуване на премиум плъгините в сайта на SiteOrigin.

Това са само част от възможностите на интерфейса на SiteOrigin. Добавете към тях няколко десетки безплатни плъгина и WordPress теми, изключително качествения плъгин SiteOrigin CSS, чрез който можем да редактираме цялото съдържание на WordPress сайта в реално време, и ще разберете защо SiteOrigin има над един милион активни инсталации.