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

В статията ще покажем как с помощта на програмата за изграждане на сайтове SiteOrigin може да превърнем примерния сайт http://highline.packs.siteorigin.com/ в бизнес сайт\ https://austin.icn-demo.com/.

Тъй като примерния сайт също е изграден с SiteOrigin може би някой читател ще се запита защо изтеглихме и инсталирахме highline.packs.siteorigin.com?

SiteOrigin е програма за изграждане на страници и няма инструменти за създаване и управление на навигационно меню и footer секция (обикновено е последната секция в сайта). А footer секциите обикновено се управляват с инсталиране на плъгини в интерфейса на WordPress.

Затова имаме нужда от WordPress тема с меню, което можем да персонализираме през WordPress Customizer. Именно менюто в highline.packs.siteorigin.com беше причина да изберем този примерен сайт, а не заглавието, съдържанието или графиката на сайта.

В статията Създаване на WordPress бизнес сайт -- персонализиране на настройки през WP Customizer показахме откъде се променят настройките на навигацията, a главните особености на менюто са:

опцията sticky 'залепва' менюто за горния край на екрана и посетителите винаги да имат достъп до линковете в менюто;
опцията shrink намалява височината на навигационната лента и логото при скролиране за да отнема по-малка площ от екрана;
лесни настройки за цвят на долната граница, големината и форматирането на шрифта, разстоянието между линковете;

Продължаваме със същинското съдържание на секциите в SiteOrigin.

При инсталацията настройките на началната страница бяха променени да зареждат статична страница с името Home Page. Може да достъпим тази страница през Pages > Home Page --- Front Page, SiteOrigin Page Builder (описанието се добавя при инсталацията) или да кликнем линка Appearance > Home Page:

Зарежда се структурата на сайта, генерирана от SiteOrigin. Виждате, че това са познатите инструменти за управление на редове, widgets и инсталиране на примерен код Layouts, които разгледахме в предишната статия Създаване на WordPress бизнес сайт -- SiteOrigin Page Builder.

Искаме да напомним още веднъж разликата в достъпа до управлението на целия ред (row) и на отделния елемент (widget) в SiteOrigin:

Достъп до управлението на ред (row):

Достъп до управлението на елемент (widget):

Lorem Ipsum генератор

Почти неизменна практика при разработване на уеб сайт, e ползване на примерен текст за визуално уточняване на шрифта, размера и позиционирането на текста преди въвеждане на официалното съдържание на сайта. Такъв е добре познатият латински текст Lorem ipsum dolor sit amet.

За нуждите на сайта използваме следния Lorem ipsum генератор (https://jipsum.com):

Програмата предоставя възможност за генериране на определен брой думи (Wörter), копирането им в клипборда на паметта (Kopieren), показване на цял текстов блок (Einfach), показване на параграфи (Doppelt), показване на HTML параграфи (HTML) и опресняване на текста при кликане на бутона Mischen.

SiteOrigin Hero

Започваме с персонализиране на изображенията и текста в слайдера на началната страница. Кликаме линка Edit в полето на SiteOrigin Hero (запазваме умишлено името на widget-а).

Ако няма създаден фрейм, кликаме бутона Add, и след това кликаме в лентата Frame за да редактираме съответния елемент:

Въвеждаме текста на слайдера в редактора и го форматираме като заглавие, може да добавим под-заглавие от по-нисък ред (h1-h6) или текстово описание като параграф, избираме местоположение (ляво, център, дясно) и цвят на текста.

При кликане на бутона Text влизаме в текстов режим на редактора и виждате, че сме добавили CSS код (padding-top: 310px;), с който преместваме надписа 310 пиксела надолу за да не е върху лицето на изображението.

Кликаме в лентата на панела READ MORE за да отворим панела за настройване на бутона:

В полето Button text въвеждаме текста на бутона, в полето Destination URL може да въведем адрес към страница или публикация като кликнем бутона Select Content, или към външен URL адрес като го въведем в полето. Ако маркираме полето Open in a new window след кликане на бутона страницата ще се зареди в нов прозорец на браузъра.

Може да добавим икона в бутона като кликнем лентата Icon и след това изберем икона и цвят като кликнем бутоните Icon и Icon color. От бутона Image icon може да изберем наша икона от Media Library, от Icon Placement избираме мястото на иконата в бутона:

Може да избираме икони от няколко доставчика:

и три различни стила икони:

По всяко време може да кликнем бутона Preview в дъното на панела за да видим как изглежда елемента, който редактираме:

Кликаме отново лентата READ MORE защото приключихме с настройките на бутона.

Кликаме лентата Background за да изберем настройки за изображението на фрейма:

Избираме изображение от Media Library като кликнем бутона Background image или зареждаме изображение от външен адрес, който въвеждаме в полето External URL.

От падащото меню Image size избираме размера на изображението (Full), от Background image type избираме Cover за да заеме изображението целия екран.

Стойността на параметъра Background image opacity показва степента на прозрачност на затъмнението (цвета избираме от Background color), което създаваме върху изображението за да се концентрира вниманието на посетителя върху текста на заглавието.

Може да направим изображението линк към съдържание от сайта или външен URL адрес по същия начин, който показахме за бутона.

Ако желаем може да включим видео клип за фон като кликнем лентата Video в панела Background videos.

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

Най-лесният начин за създаване на следващите фреймове е като клонираме вече създадения фрейм чрез кликане на средния от трите бутона от дясната страна на лентата frame и само редактираме различните елементи.

В последните два панела Slider Controls и Design and Layout имаме достъп до управлението на слайдера като елемент:

Animation speed посочва скоростта на смяна на изображенията, Timeout посочва времето на показване на отделен фрейм (8 секунди), следващите три настройки дефинират цвета, стила и размера на навигацията на слайдера.

Маркираме опциите да се показва навигацията на мобилни устройства (Always...) и фреймовете да се сменят чрез плъзгане по екрана (Swipe...).

В Design and Layout панела имаме достъп до настройки по дизайна и разположението на елементите в слайдера:

Height - посочва височината на изображението;
Heading font - може да изберем различен шрифт на заглавието от този, който вече дефинирахме в WP Customizer;
Heading color - цвят на заглавието (бял, #ffffff);
Heading size - размер на заглавието (60 px);

Тъй като във фреймовете нямаме текст, нито линкове, пропускаме настройките Text и Link.

Препоръчаме винаги да използвате бутона Preview за да преглеждате елементите преди да запазите промените в тях.

С това завършихме подробното представяне на всички настройки на widget-a SiteOrigin Hero. Повечето widget-и в SiteOritin ползват този стил на управление затова при описание на следващите секции от сайта няма да се спираме подробно на тях отново.

Създаване на секция с SiteOrigin Features

За създаване на следващата секция от началната страница ще използваме widget-a SiteOrigin Features, който може да достъпим като кликнем бутона Add Widgets и в менюто на панела Add New Widget кликнем линка Widgets Bundle:

Както обикновено, най-напред дефинираме външното позициониране на секцията като кликнем линка Edit Row и в панела Layout въведем стойностите от изображението.

Bottom Margin определя разстоянието между долната граница на секцията и следващия ред, а с Padding определяме вътрешното разстояние между съдържанието и горния и долния край на панела (единичната синя удебелена линия показва за кое разстояние се отнася настройката, те са подредени по посока на часовниковата стрелка: горе, дясно, долу и ляво):

Тъй като това е секция от примерния сайт, само трябва да променим някои настройки:

В панела Features са подредени създадените елементи. Кликаме панела с името на елемента за да достъпим неговите настройки. Избираме цвят на контейнера на иконата през бутона Icon container color. Ако сега кликнем линка Preview няма да видим иконата на черен фон защото има още една настройка, с която се активира дизайна на фона и на която ще обърнем внимание допълнително.

Избираме позиция на иконата от Icon container position, избираме самата икона и нейния цвят по описания вече начин:

Определяме размера на иконата от падащото меню Icon image size. В полето Title text въвеждаме заглавието на текста (може да се ползват HTML тагове), а в редактора Text въвеждаме самия текст:

В полето More link text записваме текста на линка, а в полето More link URL посочваме адреса на страницата, към която посетителя да бъде пренасочен при кликане:

Затваряме панела на конкретния елемент и кликаме лентата Font Design за да отворим панел с допълнителни настройки Title, Text и More Link:

И трите под-панела съдържат по три идентични настройки за заглавието, текста и линка под текста: Font (шрифт), Size (големина) и Color (цвят).

Посочваме стойност за големина на заглавието в полето Size - 1.3 em. Обърнете внимание, че тук не използваме пиксели. Ако искате да ползвате пиксели, трябва от падащото меню да изберете px и да посочите стойност 21:

В панела Text не правим никакви промени - за текста в елементите важат глобалните настройки за текст.

В панела More Link избираме цвят за линковете в полето Color:

Може да затворим панела Font Design.

Стигаме до няколко заключителни, но много важни настройки за изгледа на иконите и броя на елементите на един ред.

От настройката Icon container shape зависи дали ще се показва фона на иконата, чиито цвят дефинирахме в началото. При стойност none фона е изключен, а от падащото меню може да изберем от няколко предефинирани възможности. Стойността Icon container size определя големината на фона, а стойността Icon size определя големината на иконата:

Кликаме бутона Preview и виждаме как изглежда иконата на черен фон:

Последните две важни настройки Features per row и маркиране на Responsive layout определят броя на елементите на всеки ред и дали елементите да следват Responsive правилата за позициониране в зависимост от резолюцията на устройството, на което се зарежда сайта.

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

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

Секция с фиксирано фоново изображение

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

При фиксирания фон изображението е напълно статично, докато при паралакс ефекта фона и текста се преместват при скролиране с различна скорост. За нашия сайт избрахме ефекта със статичния фон, но SiteOrigin Page Builder предоставя възможност и за създаване на класически паралакс ефект.

За да създадем тази секция се нуждаем само от двата widget-a SiteOrigin Editor и SiteOrigin Button (редактор на текст и интерфейс за създаване на бутон), а фоновото изображение ще въведем като фон (background) на целия ред:

Oтваряме настройките на реда като кликаме линка Edit Row и разделяме реда на две колони както е показано на изображението:

Въвеждаме следните настройки за позициониране на реда в панела Layout (обърнете внимание на настройката Row Layout - Full Width, която разтяга изображението на цял екран):

В панела Design избираме изображението от Media Library, a чрез стойността на настройката Background Image Display избираме единия от двата, описани по-горе ефекта - Fixed или Paralax:

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

Затваряме редактора и отваряме widget-a за създаване на бутон. Въвеждаме текста на бутона в полето Button text и избираме страница за пренасочване от бутона Select Content в края на реда Destination URL:

В панела Design and Layout позиционираме бутона в ляво oт менюто Align, избираме типа на бутона от менюто Button theme, избираме цвят на бутона и на текста, активираме Hover ефект при посочване с мишката като маркираме полето Use hover effects:

В следващата част от интерфейса може да изберем различен шрифт (Font), различна големина на текста (Font Size), закръгление на бутона (Rounding) и разстояние между текста и края на бутона (Padding):

Запазваме настройките и зареждаме началната страница в браузъра за да преценим кой от двата ефекта - Fixed или Paralax, ни харесва повече.

Създаване на секция Services

Определяме разстоянието до съседните секции чрез настройките в Layout панела:

Всеки елемент се състои от изображение, заглавие текст и линк, които се създават в два widget-a.

Отваряме за редактиране SiteOrigin Image, избираме изображението от Media Library и от менюто Image size посочваме Full:

В панела има много настройки за заглавие на изображението, ако то е част от галерия, например. В такъв случай може да се използват HTML тагове в полето Title text и да се позиционира заглавието (над или под изображението) от Title position:

<h3 style="color: green;">Work Discussion</h3>

Ние предпочитаме да създадем заглавието, текста и линка в редактора, затова тук само въвеждаме ALT текст и правим изображението линк, който насочваме към друга страница от сайта:

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

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

Секция Call-To-Action (CTA)

Секциите Call-To-Action (буквално: призив за действие) изпълняват две задачи едновременно - служат за разделител между секции с текстово съдържание и съдържат мотивиращо послание към читателя с цел предприемане на действие(кликане на бутона/линка).

Създаваме нашата CTA секция като ползваме същия widget, с който създадохме елементите на слайдера в началото - SiteOrigin Hero.

Първо позиционираме секцията с Layout настройките:

Обърнете внимание на настройката Row Layout - Full Width Stretched. Разликата с настройката Full Width е, че ако въведем много дълъг текст той няма да се форматира в границите на сайта, а ще заеме цялата ширина на монитора. Затова ние ще центрираме нашия текст за да може разширяването да се отнася само за фоновото изображение.

Отваряме SiteOrigin Hero, въвеждаме в редактора текстовото съдържание съдържание и го форматираме:

В панела Background избираме фоновото изображение и маркираме пълния размер Full в менюто Image size, в менюто Background Image type избираме Cover. Настройваме фоновото затъмнение (overlay) като избираме тъмен цвят от Background color и даваме стойност 40 на Background Image opacity:

Тъй като ползваме само един фрейм, няма да променяме нищо в Slider Controls панела. В панела Design and Layout само дефинираме размера на заглавието (Heading size - 65px) и текста (Text size - 32px).

Затваряме SiteOrigin Hero и запазваме промените в началната страница.

Следващата секция от сайта също може да се разглежда като CTA, но нейното по-важно значение е свързано с дизайна на началната страница - да раздели двете тъмни секции CTA и footer. Затова поставяме по-малко текст за да няма конфликт с посланието в предишната CTA секция.