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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В 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) на копираното съдържание:

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

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

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

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

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

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

Всяка примерна страница можем да разгледаме предварително в нов прозорец на браузъра като я посочим с мишката и кликнем бутона 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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Без да кликаме бутона Save Home Page или Update, в зависимост от това в кой интерфейс на WordPress сме отворили началната страница (Custom Home Page или Edit Page), може да извършваме поредица от действия и всички те се записват в навигационното меню на 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 като кликнем бутона Close (промените не се запазват);
• запазваме промените като кликнем бутона Update;

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

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