Създаване на WordPress бизнес сайт – допълнителни страници
Създаване на WordPress бизнес сайт -- допълнителни страници
Продължаваме с персонализиране или по-скоро със създаване на нови страници от нашия бизнес WordPress бизнес сайт. Ще следваме реда на линковете в footer менюто като започваме от Services и завършим с Terms:
Не е задължително един бизнес сайт да съдържа всички или точно тези страници. В зависимост от съдържанието и графиката, които желаете да представите на читателите, вие трябва да направите собствен избор на страници за вашия сайт.
Създаване на страница Services
В администрацията на WordPress кликаме Pages > Services за да достъпим структурата на страницата в SiteOrigin:
В началото виждаме нов widget - SiteOrigin Headline, който служи за създаване на заглавия.
Както при всеки ред досега, първо дефинираме позицията на секцията чрез настройките в панела Layout като задаваме разстояние от 40 пиксела между заглавието и съседните секции отгоре и отдолу:
Затваряме панела за редактиране на редове и отваряме widget-a SiteOrigin Headline като кликнем линка Edit:
Интерфейсът съдържа панели за управление на заглавие (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.
Последния CTA елемент го копираме от началната страница и го поставяме (paste) като последен елемент в страницата Services.
Създаване на страница Portfolio
Продължаваме създаване на страници, които посетителите очакват да намерят в един качествен бизнес сайт. Без съмнение Portfolio е популярен тип страница за описание на предлаганите от компанията продукти.
Структурата на страницата в SiteOrigin е изключително опростена - заглавие, шест повтарящи се блока от по три елемента, разположени на два реда, и CTA секция:
Секцията със заглавието е копие на заглавието от страница Services - и позиционирането на реда, и параметрите на различните полета са идентични, променяме само текстовото съдържание.
Основният структурен блок, който се повтаря шест пъти, представяйки шест различни продукта, се състои от три widget-a, които вече разгледахме подробно - SiteOrigin Hero (слайдера на началната страница), SiteOrigin Editor и SiteOrigin Button:
Тук само накратко ще припомним основните настройки.
В SiteOrigin Hero създаваме само един фрейм - въвеждаме заглавието, което се визуализира в изображението, в редактора Content:
Отваряме панела Background за да изберем фоново изображение от Media Library. Настройваме фоновото затъмняване на изображението, правим изображението линк и посочваме към какъв ресурс да пренасочва при кликане:
Отказахме се от основния шрифт за заглавие Roboto Slab 700 и избрахме компактния и пестелив на украшения Roboto Condensed за да не отвлича вниманието от изображението:
Въвеждаме текста на бутона и определяме URL адреса, към който да пренасочва при кликане. Възможно е връзките на изображението и на бутона да пренасочват към различни ресурси. Например, кликане върху изображението да води към галерия, а кликане върху бутона - към страница за контакт:
В следващите полета определяме дизайна на бутона:
CTA секцията е копие на същата секция от началната страница, и от страницата Services - добра практика е да има приемственост между елементите на дизайна на различните страници.
Създаване на страница FAQ
FAQ е популярно съкращение от Frequently Аsked Questions (често задавани въпроси).
Като стандарт при създаването на този тип страници се е наложило използването на софтуер от типа Accordion, което обикновено показва само заглавие или въпрос и при кликане върху заглавието или лентата, се отваря панел с информация.
SiteOrigin съдържа widget Accordion, който ще използваме в структурата на нашата страница FAQ:
Готовата структура на страницата е показана на следващото изображение:
Настройки за позициониране в панела Layout:
За създаване на информационния блок от заглавие, текст и бутон ползваме познати widget-и.
Отваряме SiteOrigin Headline и въвеждаме заглавие в полето Text, избираме вида на заглавието в менюто HTML Tag, избираме цвят на заглавието в Color и позиционираме заглавието от менюто Alignment:
В редактора SiteOrigin Editor въвеждаме текста и го подравняваме в центъра:
В SiteOrigin Button създаваме бутона като попълваме заглавие и URL за пренасочване. Често срещана практика е, ако при кликане на бутона посетителя се пренасочва към външен адрес, да се маркира опцията за отваряне в нов прозорец на браузъра (Open in...):
В допълнителните полета избираме позициониране на бутона (Align), тип на бутона (Button theme), цвят на бутона и текста (Button Color & Text Color ), шрифт и големина на текста (Font & Font size), заобляне (Rounding) и разстояние между текста и границата на бутона (Padding):
Сега отваряме SiteOrigin Accordion и в полето Choose Accordion Style избираме дизайна на widget-a:
Ако маркираме опцията Allow to function... всеки елемент ще се отваря и затваря само при кликане на собственото заглавие и по този начин може да бъдат отворени последователно всички панели.
Ако маркираме и втората опция Check if you need... всички елементи ще бъдат отворени при зареждане на страницата.
Когато двете опции са изключени при зареждане на страницата всички панели са затворени. При кликане върху заглавието или лентата се отваря съответния панел и символа на иконата се променя от знак плюс (+) в знак (Х). Ако в момента на кликането има отворен панел, той се затваря и символът на иконата отново се променя в знак плюс (+).
Отделните елементи създаваме/редактираме като кликнем панела Add или кликнем панела със съответното заглавие:
Въвеждаме заглавието в полето Panel Title, а в полето Panel ID въвеждаме идентификатор с уникално име, който да служи за вътрешна връзка към панела (обикновено се използва един и същ стринг с добавени цифри - austinfaq1, austinfaq2...).
По същия начин създаваме всички панели, запазваме промените и може да заредим страницата в браузър:
Създаване на страница Gallery
Галериите са едни от най-посещаваните страници, затова нашият бизнес сайт също включва страница с галерия.
Структурата на страницата включва 'обичайните заподозрени' SiteOrigin Headline widget за заглавие, подзаглавие и разделител, и СТА секция.
Припомняме ви, че може да преименувате редове в SiteOrigin и да им давате описателни имена като посочите иконата със символ гаечен ключ , кликнете Edit Row, кликате надписа Row в горния ляв ъгъл на екрана и въвеждате желаното име:
Галерията в страницата се управлява само от средния ред Галерия.
Дефинираме разстояние между галерията и двете съседни секции от 60 пиксела през панела Layout на widget-a (през линка Edit). Разстоянието от 40 пиксела отдясно и отляво служи за да се създаде еднаква по размер граница между изображенията в галерията:
Накратко ще ви припомним как се създава галерия през текстовия редактор.
Кликаме бутона Add Media:
Кликаме линка Create Gallery:
В панела Create Gallery избираме изображения за галерията и кликаме бутона Create a new gallery:
В следващия панел Edit Gallery посочваме накъде да пренасочва кликането върху изображението от менюто Link To, посочваме броят изображения на ред (Columns), ако маркираме полето Random Order при всяко зареждане на галерията изображенията ще се показват в случаен ред, в менюто Size избираме размер за изображенията (Thumbnails са подходящи само за галерия в странична лента или footer):
Чрез кликане и плъзгане може да разменяме местата на изображенията, а при кликане върху всяко едно изображение се зарежда панел, в който въвеждаме Alt Text и заглавие (Title), малко по-късно ще покажем защо:
Кликаме бутона Insert gallery за да се зареди галерията в редактора и запазваме промените на страницата:
Като заредим галерията и кликнем върху изображение се зарежда Attachment страница с изображението в намален размер, като кликнем върху самото изображение, то се зарежда в цял размер на екрана, и само това.
За да може читателите на сайта да разглеждат изображенията в галерията в реален размер, без да напускат страницата, с възможност да навигират между изображенията или да активират slideshow функционалност (автоматично редуване на изображенията през интервал от време), ще инсталираме допълнителен плъгин Simple Lightbox.
Инсталираме и активираме плъгина през Plugins > Add New > Install > Activate:
Настройките на плъгина може да достъпим през линка Appearance > Lightbox:
или през Plugins > Simple Lightbox > Settings:
В настройките по подразбиране е активирана поддръжката за страници в първата секция Activation - полето след Enable on Pages е маркирано. Но по-важните настройки се намират в панела UI:
Избираме тъмен фон на галерията (Dark), изключваме автоматичното стартиране като махаме отметката пред опцията в секция Start Slideshow Automatically, активираме показването на заглавия Enable default title, в противен случай вместо заглавие се зарежда името на файла без разширението, което не е желателно.
Запазваме промените в настройките като кликаме бутона Save Changes, зареждаме страницата Gallery и кликаме върху произволно изображение.
То се зарежда в отделен панел, ефекта lightbox затъмнява останалата част от екрана, чрез кликане на бутона със символ стрелка пускаме автоматичното slideshow, с кликане върху бутона със символ X или с кликане в празно пространство на екрана затваряме галерията.
Създаване на страница Clients
За създаване на тази страница ще използваме само widget-a Testimonials от плъгина Livemesh SiteOrigin Widgets:
Структурата на страницата не се различава от тази на допълнителните страници - всички те съдържат секции заглавие и CTA, и предоставят съответно съдържание, в тази страница това са мнения на доволни клиенти:
Настройки за позициониране на целия ред:
Настройки за позициониране на widget-a:
Отваряме интерфейса на widget-a като кликнем линка Edit:
За да започнем да създаваме елементите с отделните мнения, ако няма създадени Testimonials, кликаме бутона Add. За да редактираме съществуващ елемент кликаме лентата с името на клиента:
В полето Name въвеждаме името, в полето Author Details въвеждаме информация за клиента - месторабота, длъжност... В полето Image избираме изображение от Media Library, в редактора въвеждаме мнението на клиента.
В панела Settings посочваме колко мнения да има на един ред в полето Testimonials per row, втората и третата настройка редуцират броя на мненията за таблет и смартфон:
Кликаме бутона Preview за да видим как изглеждат елементите преди да запазим промените на страницата. Припомняме, че след създаване на първия елемент може да клонирате следващите и само да редактирате информацията.
Създаване на страница Team
За създаване на страницата Team ще ползваме widget-a Team Members от плъгина Livemesh... :
Следваме познатата структурата на допълнителните страници от сайта:
Настройки за позициониране на реда:
Настройки за позициониране на widget-a:
Отваряме widget-a Team Members като кликнем линка Edit. За да създадем нов профил кликаме бутона Add, за да редактираме съществуващ профил кликаме лентата с името:
В полето Name въвеждаме име, от полето Team member image избираме изображението от Media Library, в полето Position въвеждаме длъжност на лицето от профила, в текстовото поле въвеждаме информация за профила:
В секция Social profile въвеждаме информация в полетата на социалните медии, които желаем да активираме за съответния профил:
В полето Choose Animation Type може да анимираме отделните елементи, ние предпочитаме да не го правим (None):
В панела Settings въвеждаме броя на профилите на един ред със слайдера Team Members per row. Следващите две настройки определят броя на профилите за таблет и смартфон (устройства с по-малки дисплеи и резолюция на екрана):
Зареждаме страницата с готовите профили - при посочване на изображение то се затъмнява и се появяват активираните за профила линкове към социални медии:
Създаване на страница About
За създаване на страницата About използваме само познати widget-и - SiteOrigin Headline и SiteOrigin Editor:
Layout настройки на секция About (Edit Row):
Layout настройки на двата widget-a Галерия и Текст (през линка Edit):
Създаваме галерията в редактора по същия начин както на страницата Gallery:
Създаваме текста в редактора и го форматираме както е показано на изображението:
При кликане на изображение от галерията, то автоматично се зарежда в интерфейса на плъгина Lightbox.
Създаване на страница Partners
В структурата на страница Partners използваме непознат досега widget - SiteOrigin Icon, който ни позволява да поставяме икони на произволни места в страниците.
Създаваме нов ред (преименуваме го на Client Logos), който разделяме на шест равни колони и дефинираме разстояние до съседните редове от 80 пиксела в панела Layout:
В панела Design създаваме фиксирано фоново изображение като избираме изображението в полето Background Image и опцията Fixed в менюто Background Image Display:
Във всяка колона добавяме (с бутона Add Widget) SiteOrigin Icon:
и след това клонираме (през линка Duplicate) всеки widget за да получим структурата на изображението - по два widget-a във всяка колона:
Настройването на иконите е повече от елементарно - избираме иконата (Icon), дефинираме цвят (Color), размер (Size) и позициониране (Alignment). Ако въведем адрес в полето Destination URL иконата ще се превърне в линк, който може да се отваря в нов прозорец на браузъра ако маркираме полето Open in a new window:
Запазваме промените в страницата и я зареждаме в браузъра:
Създаване на страница Resources
Започваме създаването на нашата страница Resources с добавяне на нов ред и го разделяме на две колони както е показано на изображението:
Структурата на готовата страницата може да видите на следващото изображение:
Създаваме първата част от текста в редакторa SiteOrigin Editor и поставяме граница от 40 пиксела между текста и границата (Padding) от панела Layout:
Досега за разделител използвахме SiteOrigin Headline, сега ще ползваме друг widget - Inked Divider, който добавяме с Add Widget:
Настройването на Inked Divider е изключително лесно - от менюто Type избираме типа на линията, в панела Styling посочваме цвят (Color), дебелина (Thickness), дължина (Width), разстояние до съседните елементи (Margin...):
Няма настройка за позициониране ляво, център и дясно - по подразбиране разделителя е центриран. Един от начините да преместим разделителя вляво или вдясно е да създадем собствен CSS клас, чиито стилове въвеждаме в панела Attributes:
Ако отворим инспектора на браузъра и навигираме до въпросния елемент, ще открием създадения от нас CSS клас (pgs-divider-rt) и неговите стилове:
Съответно друг примерен клас:
.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 настройките:
Запазваме съдържанието на страницата и я зареждаме в браузъра:
Създаване на страница Terms
Завършената структура на страница Terms е показана на изображението:
Секция Заглавие
Създаваме текст и заглавие с widget SiteOrigin Hero като кликаме панела Frames и в редактора въвеждаме и форматираме текста и заглавието:
За да намалим разстоянието между текста и заглавието, в текстов режим въвеждаме CSS стил margin-top с отрицателен знак:
Вътрешното разстояние между текста и заглавието като блок, и границите на полето (Padding) определяме в пaнела Layout:
Тъмния фон зад текста и заглавието определяме с настройките:
В панела Design and Layout въвеждаме следните настройки - големина на заглавието (Heading size), цвят (Text color), големина (Text size) и шрифт (Text font) на текста:
Секция Документ
Следващата секция Документ създаваме само с SiteOrigin Editor като въвеждаме разстояние до следващия елемент 45 пиксела (Bottom Margin) и вътрешно разстояние между текста и границата на документа също от 45 пиксела (Padding) в панела Layout:
Форматираме текста в редактора:
Секция CTA Terms
Последната секция CTA Terms е разновидност на CTA секцията в други страници от сайта. Тук реда е разделен на две колони като първата колона съдържа текст, а във втората позиционираме бутона.
Посочваме вътрешно разстояние (Padding) от 45 пиксела в панела Layout:
В панела Headline въвеждаме текста на заглавието, посочваме вида заглавие (H1-H6) в полето HTML Tag и избираме цвят в полето Color:
Големината на шрифта посочваме в полето Font Size, а позиционирането избираме от менюто Alignment:
В дясната колона конфигурираме SiteOrigin Button като въвеждаме текста на бутона в полето Button text и URL адреса (в полето Destination URL), към който кликането на бутона ще пренасочва:
В следващите настройки конфигурираме позиционирането на бутона (Align), типа на бутона (Button theme), цвят на бутона и текста (Button Color & Text Color ), шрифт и големина на текста (Font & Font size), заобляне (Rounding) и разстояние между текста и границата на бутона (Padding):
Запазваме настройките на страницата и я зареждаме в браузър.