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

Създаване на WordPress бизнес сайт – допълнителни страници

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

Създаване на WordPress бизнес сайт – допълнителни страници

Създаване на WordPress бизнес сайт -- допълнителни страници

Продължаваме с персонализиране или по-скоро със създаване на нови страници от нашия бизнес WordPress бизнес сайт. Ще следваме реда на линковете в footer менюто като започваме от Services и завършим с Terms:

Линкове на допълнителни страници в footer

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

Създаване на страница Services

В администрацията на WordPress кликаме Pages > Services за да достъпим структурата на страницата в SiteOrigin:

Структура на страница Services

В началото виждаме нов widget - SiteOrigin Headline, който служи за създаване на заглавия.

Както при всеки ред досега, първо дефинираме позицията на секцията чрез настройките в панела Layout като задаваме разстояние от 40 пиксела между заглавието и съседните секции отгоре и отдолу:

Позициониране на реда от Layout

Затваряме панела за редактиране на редове и отваряме widget-a SiteOrigin Headline като кликнем линка Edit:

Изглед на SiteOrigin Headline

Интерфейсът съдържа панели за управление на заглавие (Headline), подзаглавие (Sub headline) и разделител (Divider) и секция Element Order за промяна местата на елементите чрез плъзгане.

Не е задължително винаги да ползваме и трите елемента. Според нуждите на дизайна може да ползваме само един елемент, дори само разделителя.

За да създадем заглавие кликаме лентата на панела Headline и в полето Text въвеждаме текста на заглавието. Може да направим заглавието линк, който да зарежда вътрешна страница (избира се от бутон Select Content) или да пренасочва към външен URL адрес, който въвеждаме в полето Destination URL. Ако маркираме полето Open in a new window страницата ще се отвори в нов прозорец на браузъра.

Може да дадем тежест на заглавието като му прикачим таг (H1-H6) от менюто HTML Tag. От бутона Color избираме цвета на заглавието:

Настройки на текста на заглавието

В лентата на заглавието може да ползваме HTML тагове, както посочихме в предишни примери.

От менюто Font може да изберем различен шрифт, в полето Font Size въвеждаме стойност за размер на шрифта, позиционираме заглавието от менюто Alignment, Line Height е параметър, който показва колко е широк реда, който заглавието заема - в примера към големината на шрифта браузъра ще добави по 5 пиксела отгоре и отдолу на заглавието за да се получи стойност 50 px за височина на линията (буквален превод на Linehight). Полето Top and Bottom Margin оставяме празно:

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

Абсолютно същите опции са налични и в панела за създаване на подзаглавие Sub headline:

Настройки на текста на подзаглавието

Настройки на дизайна на подзаглавието

В панела Divider определяме стила на линията от менюто Style, избираме цвят (Color), дебелина (Thickness), позициониране (Alignment) и дължина (Width) на разделителя:

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

Поради възможността за всеки отделен елемент да се настройват Top and Bottom Margin, а за шрифтовете да се дефинира и стойност Line Height, може да срещнете затруднение с установяване на правилното разстояние между елементите.

За Top and Bottom Margin може да ползвате и отрицателни стойности за да намалите разстоянието. Тествайте като променяте само един елемент и ползвайте бутона Preview за проверка.

Може да разменяте местата на заглавията и разделителя в секция Element Order като кликате и плъзгате елемента на новата позиция.

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

Най-напред определяме разстоянието на реда спрямо съседните редове. Обърнете внимание, че вътрешното разстояние Padding е дефинирано в проценти:

Позициониране на елементите

Използваме менюто Cell Vertical Alignment за да центрираме съдържанието на двете колони (ефекта се забелязва при текста):

Позициониране на елементите

Двата widget-a, които използваме за създаване на секциите - SiteOrigin Headline и SiteOrigin Image, вече разгледахме подробно.

Въвеждаме заглавията в полето Text, а текста въвеждаме като подзаглавие и ги позиционираме (ляво, дясно) според дизайна на страницата, оставяме дефинираните системни шрифтове, даваме стойност за големина на заглавието H2 - 30px, на подзаглавието - Paragraph - 18px.

Секции със съдържание в страница Services

Последния CTA елемент го копираме от началната страница и го поставяме (paste) като последен елемент в страницата Services.

Създаване на страница Portfolio

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

Структурата на страницата в SiteOrigin е изключително опростена - заглавие, шест повтарящи се блока от по три елемента, разположени на два реда, и CTA секция:

Структура на страницата Portfolio

Секцията със заглавието е копие на заглавието от страница Services - и позиционирането на реда, и параметрите на различните полета са идентични, променяме само текстовото съдържание.

Основният структурен блок, който се повтаря шест пъти, представяйки шест различни продукта, се състои от три widget-a, които вече разгледахме подробно - SiteOrigin Hero (слайдера на началната страница), SiteOrigin Editor и SiteOrigin Button:

Повтарящ се структурен блок от widget-и

Тук само накратко ще припомним основните настройки.

В SiteOrigin Hero създаваме само един фрейм - въвеждаме заглавието, което се визуализира в изображението, в редактора Content:

Създаване на заглавие

Отваряме панела Background за да изберем фоново изображение от Media Library. Настройваме фоновото затъмняване на изображението, правим изображението линк и посочваме към какъв ресурс да пренасочва при кликане:

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

Отказахме се от основния шрифт за заглавие Roboto Slab 700 и избрахме компактния и пестелив на украшения Roboto Condensed за да не отвлича вниманието от изображението:

Избор на шрифта на заглавието

Въвеждаме текста на бутона и определяме URL адреса, към който да пренасочва при кликане. Възможно е връзките на изображението и на бутона да пренасочват към различни ресурси. Например, кликане върху изображението да води към галерия, а кликане върху бутона - към страница за контакт:

Настройване пренасочването на бутона

В следващите полета определяме дизайна на бутона:

Настройване дизайна на бутона

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

Създаване на страница FAQ

FAQ е популярно съкращение от Frequently Аsked Questions (често задавани въпроси).

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

SiteOrigin съдържа widget Accordion, който ще използваме в структурата на нашата страница FAQ:

Достъп до SiteOrigin Accordion

Готовата структура на страницата е показана на следващото изображение:

Структура на страницата FAQ

Настройки за позициониране в панела Layout:

Настройки в панела Layout

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

Отваряме SiteOrigin Headline и въвеждаме заглавие в полето Text, избираме вида на заглавието в менюто HTML Tag, избираме цвят на заглавието в Color и позиционираме заглавието от менюто Alignment:

Заглавие на информационен блок

Позициониране на заглавие Alignment

В редактора SiteOrigin Editor въвеждаме текста и го подравняваме в центъра:

Въвеждане и форматиране на текст в редактор

В SiteOrigin Button създаваме бутона като попълваме заглавие и URL за пренасочване. Често срещана практика е, ако при кликане на бутона посетителя се пренасочва към външен адрес, да се маркира опцията за отваряне в нов прозорец на браузъра (Open in...):

Въвеждане име и URL за пренасочване в бутон

В допълнителните полета избираме позициониране на бутона (Align), тип на бутона (Button theme), цвят на бутона и текста (Button Color & Text Color ), шрифт и големина на текста (Font & Font size), заобляне (Rounding) и разстояние между текста и границата на бутона (Padding):

Настройки на бутон

Сега отваряме SiteOrigin Accordion и в полето Choose Accordion Style избираме дизайна на widget-a:

Дизайн и функционални настройки на SiteOrigin Accordion

Ако маркираме опцията Allow to function... всеки елемент ще се отваря и затваря само при кликане на собственото заглавие и по този начин може да бъдат отворени последователно всички панели.

Ако маркираме и втората опция Check if you need... всички елементи ще бъдат отворени при зареждане на страницата.

Когато двете опции са изключени при зареждане на страницата всички панели са затворени. При кликане върху заглавието или лентата се отваря съответния панел и символа на иконата се променя от знак плюс (+) в знак (Х). Ако в момента на кликането има отворен панел, той се затваря и символът на иконата отново се променя в знак плюс (+).

Отделните елементи създаваме/редактираме като кликнем панела Add или кликнем панела със съответното заглавие:

Създаване на панел в SiteOrigin Accordion

Въвеждаме заглавието в полето Panel Title, а в полето Panel ID въвеждаме идентификатор с уникално име, който да служи за вътрешна връзка към панела (обикновено се използва един и същ стринг с добавени цифри - austinfaq1, austinfaq2...).

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

Зареждане на страница FAQ в браузър

Създаване на страница Gallery

Галериите са едни от най-посещаваните страници, затова нашият бизнес сайт също включва страница с галерия.

Структурата на страницата включва 'обичайните заподозрени' SiteOrigin Headline widget за заглавие, подзаглавие и разделител, и СТА секция.

Припомняме ви, че може да преименувате редове в SiteOrigin и да им давате описателни имена като посочите иконата със символ гаечен ключ , кликнете Edit Row, кликате надписа Row в горния ляв ъгъл на екрана и въвеждате желаното име:

Описателно име на ред в SiteOrigin

Галерията в страницата се управлява само от средния ред Галерия.

Структура на страницата Gallery

Дефинираме разстояние между галерията и двете съседни секции от 60 пиксела през панела Layout на widget-a (през линка Edit). Разстоянието от 40 пиксела отдясно и отляво служи за да се създаде еднаква по размер граница между изображенията в галерията:

Позициониране на секция Gallery

Накратко ще ви припомним как се създава галерия през текстовия редактор.

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

Бутон за добавяне на медия в редактора

Кликаме линка Create Gallery:

Линк Create Gallery

В панела Create Gallery избираме изображения за галерията и кликаме бутона Create a new gallery:

Бутон Create a new gallery

В следващия панел Edit Gallery посочваме накъде да пренасочва кликането върху изображението от менюто Link To, посочваме броят изображения на ред (Columns), ако маркираме полето Random Order при всяко зареждане на галерията изображенията ще се показват в случаен ред, в менюто Size избираме размер за изображенията (Thumbnails са подходящи само за галерия в странична лента или footer):

Настройки в панел Edit Gallery

Чрез кликане и плъзгане може да разменяме местата на изображенията, а при кликане върху всяко едно изображение се зарежда панел, в който въвеждаме Alt Text и заглавие (Title), малко по-късно ще покажем защо:

Добавяне атрибути на изображение

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

Бутон Insert gallery

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

Зареждане на Attachment страница с изображение

За да може читателите на сайта да разглеждат изображенията в галерията в реален размер, без да напускат страницата, с възможност да навигират между изображенията или да активират slideshow функционалност (автоматично редуване на изображенията през интервал от време), ще инсталираме допълнителен плъгин Simple Lightbox.

Инсталираме и активираме плъгина през Plugins > Add New > Install > Activate:

Инсталиране и активиране на плъгин Simple Lightbox

Настройките на плъгина може да достъпим през линка Appearance > Lightbox:

Достъп до настройки на плъгина от менюто

или през Plugins > Simple Lightbox > Settings:

Достъп до настройките през плъгина

В настройките по подразбиране е активирана поддръжката за страници в първата секция Activation - полето след Enable on Pages е маркирано. Но по-важните настройки се намират в панела UI:

Панел UI с настройки на Simple Lightbox

Избираме тъмен фон на галерията (Dark), изключваме автоматичното стартиране като махаме отметката пред опцията в секция Start Slideshow Automatically, активираме показването на заглавия Enable default title, в противен случай вместо заглавие се зарежда името на файла без разширението, което не е желателно.

Запазваме промените в настройките като кликаме бутона Save Changes, зареждаме страницата Gallery и кликаме върху произволно изображение.

Зареждане на изображение в галерията Simple Lightbox

То се зарежда в отделен панел, ефекта lightbox затъмнява останалата част от екрана, чрез кликане на бутона със символ стрелка пускаме автоматичното slideshow, с кликане върху бутона със символ X или с кликане в празно пространство на екрана затваряме галерията.

Създаване на страница Clients

За създаване на тази страница ще използваме само widget-a Testimonials от плъгина Livemesh SiteOrigin Widgets:

Widget Testimonials от Livemesh SiteOrigin Widgets

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

Структура на страница Clients

Настройки за позициониране на целия ред:

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

Настройки за позициониране на widget-a:

Настройки за позициониране на widget

Отваряме интерфейса на widget-a като кликнем линка Edit:

Изглед на панела Testimonials

За да започнем да създаваме елементите с отделните мнения, ако няма създадени Testimonials, кликаме бутона Add. За да редактираме съществуващ елемент кликаме лентата с името на клиента:

Панел за създаване на testimonial

В полето Name въвеждаме името, в полето Author Details въвеждаме информация за клиента - месторабота, длъжност... В полето Image избираме изображение от Media Library, в редактора въвеждаме мнението на клиента.

В панела Settings посочваме колко мнения да има на един ред в полето Testimonials per row, втората и третата настройка редуцират броя на мненията за таблет и смартфон:

Настройки responsive settings

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

Изглед на Testimonial в Preview

Създаване на страница Team

За създаване на страницата Team ще ползваме widget-a Team Members от плъгина Livemesh... :

Widget Team Members

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

Структура на страницата Team

Настройки за позициониране на реда:

Настройки за позициониране на ред Team

Настройки за позициониране на widget-a:

Настройки за позициониране на widget Team Members

Отваряме widget-a Team Members като кликнем линка Edit. За да създадем нов профил кликаме бутона Add, за да редактираме съществуващ профил кликаме лентата с името:

Изглед на widget-a Team Members

В полето Name въвеждаме име, от полето Team member image избираме изображението от Media Library, в полето Position въвеждаме длъжност на лицето от профила, в текстовото поле въвеждаме информация за профила:

Попълване на информация за профил в Team Members

В секция Social profile въвеждаме информация в полетата на социалните медии, които желаем да активираме за съответния профил:

Активиране на линкове към социални медии

В полето Choose Animation Type може да анимираме отделните елементи, ние предпочитаме да не го правим (None):

Настройки за анимиране

В панела Settings въвеждаме броя на профилите на един ред със слайдера Team Members per row. Следващите две настройки определят броя на профилите за таблет и смартфон (устройства с по-малки дисплеи и резолюция на екрана):

Responsive design настройки

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

Зареждане на страница Team в браузър

Създаване на страница About

За създаване на страницата About използваме само познати widget-и - SiteOrigin Headline и SiteOrigin Editor:

Структура на страница About

Layout настройки на секция About (Edit Row):

Layout настройки на секция About

Layout настройки на двата widget-a Галерия и Текст (през линка Edit):

Layout настройки на widget Галерия

Layout настройки на widget Текст

Създаваме галерията в редактора по същия начин както на страницата Gallery:

Създаване на галерия в редактора

Създаваме текста в редактора и го форматираме както е показано на изображението:

Създаване на текст в редактора

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

Създаване на страница Partners

В структурата на страница Partners използваме непознат досега widget - SiteOrigin Icon, който ни позволява да поставяме икони на произволни места в страниците.

Създаваме нов ред (преименуваме го на Client Logos), който разделяме на шест равни колони и дефинираме разстояние до съседните редове от 80 пиксела в панела Layout:

Разделяне реда на колони в панела Client Logos

В панела Design създаваме фиксирано фоново изображение като избираме изображението в полето Background Image и опцията Fixed в менюто Background Image Display:

Създаване на фиксирано фоново изображение

Във всяка колона добавяме (с бутона Add Widget) SiteOrigin Icon:

Икона SiteOrigin Icon в плъгина Widgets Bundle

и след това клонираме (през линка Duplicate) всеки widget за да получим структурата на изображението - по два widget-a във всяка колона:

Структура на секция Client Logos

Настройването на иконите е повече от елементарно - избираме иконата (Icon), дефинираме цвят (Color), размер (Size) и позициониране (Alignment). Ако въведем адрес в полето Destination URL иконата ще се превърне в линк, който може да се отваря в нов прозорец на браузъра ако маркираме полето Open in a new window:

Настройки в панела SiteOrigin Icon

Запазваме промените в страницата и я зареждаме в браузъра:

Зареждане на страница Partners в браузър

Създаване на страница Resources

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

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

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

Структура на страница Resources

Създаваме първата част от текста в редакторa SiteOrigin Editor и поставяме граница от 40 пиксела между текста и границата (Padding) от панела Layout:

Позициониране на секцията

Досега за разделител използвахме SiteOrigin Headline, сега ще ползваме друг widget - Inked Divider, който добавяме с Add Widget:

Икона на Inked Divider в панела Widgets for SiteOrigin

Настройването на Inked Divider е изключително лесно - от менюто Type избираме типа на линията, в панела Styling посочваме цвят (Color), дебелина (Thickness), дължина (Width), разстояние до съседните елементи (Margin...):

Настройване на Inked Divider

Няма настройка за позициониране ляво, център и дясно - по подразбиране разделителя е центриран. Един от начините да преместим разделителя вляво или вдясно е да създадем собствен CSS клас, чиито стилове въвеждаме в панела Attributes:

CSS клас и стилове в панела Attributes

Позициониране на разделителя вдясно

Ако отворим инспектора на браузъра и навигираме до въпросния елемент, ще открием създадения от нас CSS клас (pgs-divider-rt) и неговите стилове:

CSS клас и стилове в инспектора на браузъра

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

.pgs-divider-lt {
    float:left;
    padding-left:40px;
}

ще премести разделителя вляво:

Позициониране на разделителя вляво

След това създаваме и втората част от съдържанието с URL адресите , като в настройките за позициониране премахваме 40 пиксела разстояние до разделителя в панела Layout:

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

Сега остава да създадем информационните секции за трите доставчика, като за целта ще използваме познатия widget SiteOrigin Features.

Избираме от Media Library изображение с логото на доставчика през бутона Choose Media, въвеждаме име като заглавие в Title text и въвеждаме описанието в редактора като го центрираме:

Създаване на информационна секция в редактор

Избираме цвят и големина на текста и на заглавието в под-панелите Title и Text на панела Font Design:

Настройване на заглавие и текст

Посочваме брой полета на ред и активираме Responsive настройките:

Допълнителни настройки

Запазваме съдържанието на страницата и я зареждаме в браузъра:

Зареждане на страница Resources в браузър

Създаване на страница Terms

Завършената структура на страница Terms е показана на изображението:

Структура на страница Terms

Секция Заглавие

Създаваме текст и заглавие с widget SiteOrigin Hero като кликаме панела Frames и в редактора въвеждаме и форматираме текста и заглавието:

Текст и заглавие в SiteOrigin Hero

За да намалим разстоянието между текста и заглавието, в текстов режим въвеждаме CSS стил margin-top с отрицателен знак:

Въвеждане на CSS стил в редактора

Вътрешното разстояние между текста и заглавието като блок, и границите на полето (Padding) определяме в пaнела Layout:

Настройки Padding в пaнела Layout

Тъмния фон зад текста и заглавието определяме с настройките:

Създаване на тъмен фон за заглавието

В панела Design and Layout въвеждаме следните настройки - големина на заглавието (Heading size), цвят (Text color), големина (Text size) и шрифт (Text font) на текста:

Настройки в панела Design and Layout

Допълнителни настройки в Design and Layout

Секция Документ

Следващата секция Документ създаваме само с SiteOrigin Editor като въвеждаме разстояние до следващия елемент 45 пиксела (Bottom Margin) и вътрешно разстояние между текста и границата на документа също от 45 пиксела (Padding) в панела Layout:

Настройки в панела Layout

Форматираме текста в редактора:

Форматиране на текст в редактор

Секция CTA Terms

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

Посочваме вътрешно разстояние (Padding) от 45 пиксела в панела Layout:

Вътрешно разстояние Padding

В панела Headline въвеждаме текста на заглавието, посочваме вида заглавие (H1-H6) в полето HTML Tag и избираме цвят в полето Color:

Настройки на заглавие в панела Headline

Големината на шрифта посочваме в полето Font Size, а позиционирането избираме от менюто Alignment:

Настройки шрифт и позициониране

В дясната колона конфигурираме SiteOrigin Button като въвеждаме текста на бутона в полето Button text и URL адреса (в полето Destination URL), към който кликането на бутона ще пренасочва:

Въвеждане текст на бутона и конфигуриране на URL

В следващите настройки конфигурираме позиционирането на бутона (Align), типа на бутона (Button theme), цвят на бутона и текста (Button Color & Text Color ), шрифт и големина на текста (Font & Font size), заобляне (Rounding) и разстояние между текста и границата на бутона (Padding):

Настройки на бутона

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