Начало > Помощен център > Споделен Хостинг Linux > SiteBuilder – създаване на целеви страници

SiteBuilder – създаване на целеви страници

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

SiteBuilder – създаване на целеви страници

Предварителна подготовка

Преди да започнете изграждането на целевата страница трябва да изберете основните й настройки като:

  • графика - лого, икона на сайта, хедър изображение, допълнителни изображения, медийни файлове;
  • цветова схема - изключително интересни и уникални цветови решения, базирани на професионални фотографии, може да намерите на сайта https://colorpalettes.net/. Запишете си във файл HEX и RGB кода на всеки цвят с описание: #251c1c - dark brown - rgb(37,28,28);
  • шрифт - изключително важно решение - препоръчаме да прочетете няколко статии като потърсите в google.com публикации с ключова фраза popular google font pairings, например (https://www.pagecloud.com/blog/best-google-fonts-pairings);

Списък с необходимите изображения, цветове и шрифтове за пресъздаване на сайта от примера ще намерите в края на статията.

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

Инсталиране на шаблон

Избрахме точно този шаблон за нашата страница заради менюто и хедър секцията. Целевата страница ще бъде изградена като one-page-site и при кликане на линк в менюто страницата плавно ще скролира до съответната секция със съдържание. Освен това менюто е фиксирано в горната част на екрана и читателя винаги има достъп до линковете ако пожелае да се върне към определена секция.

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

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

Изглед на началната страница на шаблона

Редактиране на меню

След като сте избрали секциите на страницата, сега трябва да ги създадете и да добавите линкове към тях в менюто.

Кликнете с десния бутон на мишката в областта на менюто и изберете линка Редактирайте меню:

Линк Редактирайте меню

В панела Редактирай Меню Елемент може да промените имената на съществуващите линкове в менюто и може да създадете нови линкове / секции през линка + Нов елемент:

Изглед на панела Редактирай Меню Елемент

В следващия панел въведете име на линка в полето Име на елемент:

Поле за въвеждане име на линк

и може да посочите в менюто коя от съществуващите страници на шаблона да бъде копирана като нова секция (Копирайте оформление от):

Изглед на меню Копирайте оформление от

Тъй като в нашия сайт няма да ползваме дизайна на страниците Относно и Контакти, изтрийте и двата линка в менюто на шаблона - кликнете символа Х, който се повявява срещу линка, при посочване с мишката.

Кликнете отново с десен бутон в менюто и изберете Нов меню елемент:

Линк Нов меню елемент

Въведете име на линка и кликнете бутона Приложи:

Създаване име на нов линк

По абсолютно същия начин създайте всички линкове в менюто и го публикувайте:

Изглед на началната страница с новото меню

Стилизиране на главното меню

SiteBuilder предоставя всички необходими инструменти за превръщане на менюто от шаблона в менюто от следващото изображение:

Изглед на менюто на новия сайт

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

Структура на меню в навигационната лента

В раздел Общ на панела Свойства в секция Фон посочете цвета на фона:

Избиране цвят на фона на лентата

В раздел опции посочете височината (80 пиксела) на лентата:

Избиране височина на лентата

Сега трябва да промените стила на самите линкове затова кликнете с десен бутон на мишката върху линк и в менюто изберете Свойства. В първия раздел Меню Стил няма да променяте нищо.

Изглед на раздел Меню Стил

В раздел Меню Елемент Стил изберете семейството (Шрифт), размера и декорацията (Промени текст) на шрифта. В раздел Елемент изберете основния цвят на линковете в неутрално състояние (не са избрани или посочени с мишката):

Изглед на раздел Меню Елемент Стил

В раздел Обект: Над обекта изберете дизайна на линковете при посочване с мишката:

Настройки в раздел Обект: Над обекта

В раздел Елемент: активен изберете как ще изглежда линка на активната страница:

Настройки в раздел Елемент: активен

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

За да промените заглавието на компанията отворете текстовия редактор по един от трите начина:

  • кликнете два пъти върху текста;
  • кликнете иконата със символ молив в десния ъгъл на полето и в менюто изберете Редактирайте текст;
  • кликнете с десен бутон на мишката в полето на заглавието и в менюто изберете Редактирайте текст;

Редактиране заглавието на компанията в текстов редактор

В секция Блокови стилове изберете стил на форматиране (Sub Title), за да промените цвета на целия текст или на част от текста трябва да го маркирате и през иконата със символ А и етикет Цвят на текста да изберете цвят.

За да промените изображението на логото кликнете с десен бутон върху съществуващото изображение и в менюто изберете Свойства. В панела Свойства кликнете иконата със символ молив за да се отвори галерията с изображения Изберете медия:

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

Изглед на панел Изберете медия

Друг начин да промените изображението е като кликнете с десен бутон върху него и в менюто изберете първия линк Промени изображение. Отваря се същия панел с името Промени изображение.

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

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

Кликнете иконата със символ молив в горния десен ъгъл на изображението или кликнете с десен бутон на мишката в изображението (извън областите на текста) и в менюто изберете Свойства:

Линк Свойства в меню

В секция Изображение кликнете иконата със символ молив за да влезете в режим на редактиране:

Линк за редактиране на изображение

В панела Изберете медия през бутона Качете нов файл качете от вашия компютър приготвеното хедър изображение и кликнете бутона Избери:

Избиране на изображение в панела Изберете медия

Избраното изображение се зарежда в секция Изображение. Кликнете бутона Приложи и новото изображение се зарежда като фон на страницата:

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

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

Кликнете иконата със символ молив на външната област и изберете Свойства:

Линк за редактиране на област

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

Настройване на прозрачност в секция Фон

Белият фон изчезна и сега текста (изглежда) е разположен директно върху изображението:

Текст върху прозрачна област

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

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

Накрая центрирайте двете области като ползвате зелените индикатори докато местите с мишката областта на текста и публикувайте страницата:

Центриране на текст върху изображение с помощта на индикатори

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

Следващата секция се състои от заглавие, подзаглавие и три области, познати като карти, всяка от които съдържа заглавие, изображение и текст (в друг тип сайт вероятно и бутон).

Ако сте създали секциите в сайта като нов елемент, в момента разполагате само с празно пространтво. Ако сте копирали някоя от страниците на шаблона и при зареждане на линка About Us има изображение или текст - изтрийте всичко като кликнете с десен бутон върху елемента и в менюто изберете Премахни.

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

Преди да започнете да създавате елементите на страницата трябва да й зададете фон и да увеличите ширината за да може да работите удобно с елементите. Кликнете в секцията и изберете Свойства от менюто:

Линк Свойства в меню

В секция изображение изберете файла за фон по познатия вече начин за работа с изображения. Уверете се, че в секция Повтори са маркирани и двете опции Хоризонтално и Вертикално за да се попълни цялото пространство на секцията ако файлът е с по-малък размер. Въведете стойност 400 пиксела за настройката Долно разстояние..., която ще отвори секцията (накрая тази настройка трябва да бъде възстановена на стойност нула за да няма празно пространство в сайта):

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

Заглавие в SiteBuilder създавате като изтеглите с мишката иконата със символ А и етикет Текст от лентата с инструменти в работната област - зарежда се панел с няколко форматирани шаблона на заглавия и текст. Изберете онова, което считате за най-подходящо:

Предварително форматирани шаблони със заглавия и текстове

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

Сега трябва да създадете контейнер за заглавието, текста и изображението на елемента карти. Кликнете в менюто с инструменти иконата с етикет Форма и в панела Добави елемент изберете правоъгълника, посочен на изображението:

Избиране на контейнер в панела Добави елемент

Кликнете с десен бутон в полето, изберете Свойства, в раздела Общ създайте прозрачен фон, в раздела Опции задайте размери на полето 300 Х 500 пиксела:

Задаване размери на полето

Повторете стъпките по създаване на заглавието и подзаглавието, но сега ги позиционирайте в картата. Добавете изображение като кликнете иконата с етикет Картина и в панела Добави елемент изберете правоъгълното изображение:

Избор на тип изображение в панела Добави елемент

Изберете изображението в панела Промени изображение. Променете размерите на изображението като кликнете с десен бутон върху него, изберете Свойства и в раздела Опции > Размер въведете в полето Широчина 300, кликнете в полето Височина и SiteBuilder автоматично ще попълни стойността, запазвайки оригиналното съотношение:

Оригинални размери на изображение

Променени размери със запазено съотношение широчина/височина

Използвайте настройките в панела Стилове за да форматирате заглавието и текста и ги центрирайте в контейнера с помощта на зелените маркери. Коригирайте размера на изображението като задържите натиснат клавиша Shift за да се запази оригиналното съотношение ширина/височина.

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

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

Изглед на заглавие, подзаглавие и изображение в карта

Маркирайте контейнера и всички елементи в него като изтеглите с мишката през него докато се появят символите за управление на всички елементи. Кликнете с десен бутон в празна област на контейнера и в менюто изберете Копирай:

Селектиране и копиране на елементи в контейнер

Кликнете от ляво на контейнера с десен бутон и в менюто изберете Постави > Постави елемент:

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

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

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

След като приложите CSS стиловете за форматиране на заглавията и текста, тази част от секцията About Us трябва да изглежда така:

Изглед на завършената секция About Us

SiteBuilder предоставя и много полезна система за прецизно позициониране на елементите, която показва разстоянията между тях, когато посочим елемент с мишката - в примера разстоянието между средната карта и крайните трябва да е 100 пиксела, а между страничните карти и границите на сайта - 50 пиксела:

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

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

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

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

Създаването на секцията е изключително лесно и вече сме описали работата с необходимите инструменти. Новост е само форматирането на изображение като кръг.

Структура на елементите в секция с цитати

Първо създавате контейнер с височина 320 пиксела, които дефинирате в Свойства > Опции:

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

а в раздела Общ избирате цвят на фона - разбира се трябва да ползвате хармонични цветове от схемата на сайта.

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

Вмъкване на изображение във форма на кръг

CSS настройката, която определя дали ъглите на изображението да са заоблени, се нарича border-radius и се дефинира в проценти. Вие определяте нейната стойност в секция Заоблени ъгли:

Настройване на Заоблени ъгли

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

Елементите в секцията са разновидност на картите, които създадохте в секция About Us. Тук също има заглавие и подзаглавие и се създават по абсолютно същия начин.

Блокът с елементи под заглавията всъщност са три вертикално разположени контейнера, които съдържат изображение и текст. Както в секция About Us, първо създайте фон на секцията като използвате файлът със същата текстура:

Структура на елементи в контейнер

Увеличете височината на секцията (Долно разстояние на основната част) за да имате достатъчно място за работа - накрая тази настройка трябва да се върне на стойност нула за да не остане голямо празно пространство под блока с елементи.

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

Задаване размери на контейнер

Вмъкнете изображение с размери 400 Х 250 пиксела (половината ширина на контейнера):

Размери на изображение

В другата половина вмъкнете текст и го форматирайте.

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

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

Общ изглед на секция Brands

Надяваме се, че вече сте много по-уверени в работата с инструментите на SiteBuilder (кликане с десен бутон и избиране на Свойства в менюто) и създавате отделните структурни елементи много по-лесно, отколкото в началото.

Следващата секция Services е абсолютно копие на секция About Us по отношение на дизайна, структурата и форматирането на елементите за да се постигне постоянство в използваните елементи (цветове, шрифтове...).

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

За създаването на секцията ще ползвате един много полезен инструмент в SiteBuilder - Blocks (блокове), който предлага достъп до форматирани блокове с текст и изображения, които може да ползвате в дизайна на вашите страници.

Секцията съдържа познатите вече елементи заглавие, подзаглавие и фон с изображение (texture), които използвахте при създаването на предишните секции.

Кликнете иконата с етикет Blocks и в панела скролирайте надолу докато стигнете блок teams3, показан на изображението:

Шалблон teams3 за секция Testimonials

На изображението виждате отделните елементи, от които се състои всеки блок:

Структура на елемент от шаблона

Изтрийте (десен бутон > Премахни) двойната линия, качете ваше изображение и форматирайте името и текста:

Редактиране на изображение, име и текст

Готовата секция Testimonials в примерния сайт изглежда така:

Изглед на секция Testimonials

Стремете се при избор на елементите на дизайна да следвате едни и същи решения в целия сайт, например портретите на хора в примерния сайт (цитати и testimonials) са кръгли и в черно-бял формат.

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

Всички секции в примерния сайт са важни и служат на единствената цел да убедят читателите, че продукта е от високо качество, превъзхожда конкурентните продукти и е на изгодна цена. Резултата от въздействето на съдържанието се разбира по броя кликания на бутона в секция CTA (call-to-action, призив за действие).

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

Структура на елементите в секция CTA

Има една особеност при създаване на неподвижен фон - ако създадете фон с изображение директно в секцията нямате достъп до настройката която фиксира самото изображение:

Настройване фон на секция

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

Настройка Не премествай фона

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

Дефиниране на цвят и прозрачност

В раздел Опции определяте размера на областта и с помощта на зелените маркери я позиционирате в средата на секцията:

Дефиниране размер на прозрачната област

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

Създаване на бутон в SiteBuilder

Изтеглете в работната област на секцията иконата с етикет Бутон:

Вмъкване на икона с етикет Бутон

Зарежда се панел с форматирани по различен начин бутони - изберете този, който считате за най-подходящ:

Панел с предварително форматирани бутони

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

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

Продължаваме с настройките на бутона от секцията на сайта. Кликаме с десния бутон и избираме Свойства. Въвеждаме текста на бутона (Текст), избираме шрифт, въвеждаме URL адрес за пренасочване и определяме ъгъла на заобляне:

Настройки на бутон в панел Свойства

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

Основен изглед на бутона с настройките По подразбиране

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

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

Изглед на бутон при посочване с мишката

В раздел Активен определяме как изглежда бутона при кликане:

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

Изглед на бутон при кликане

Готовата секция в сайта изглежда както на изображението:

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

Използване на Google карти

Използването на карти в SiteBuilder е идентично на конфигурирането на всеки други инструмент - вмъквате иконата с етикет Карти в работната област:

Вмъкване на икона Карти в работната област

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

Шаблони с опции за Google карти

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

Настройване на API и координати на обект в Google карти

В сайта сме заменили реалната Google карта с изображение на карта по разбираеми причини.

Най-напрад създайте правоъгълна област, която да покрива цялата секция (припомнете си работата с инструмента Форма):

Структура на елементите в секция Footer

В секция Фон на панела Свойства изберете цвят за фон, изберете и изображение и му задайте непрозрачност (6%):

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

Създайте двете заглавия и двата блока в секция Contact като вмъкнете иконата с етикет Текст и форматирате текста.

Новият елемент в SiteBuilder, който не сте ползвали досега, е създаване на имейл формуляр. Поставете в работната област иконата с етикет Формуляр:

Вмъкване на икона с етикет Формуляр в работната област

В познатия панел Добави елемент маркирайте формуляра Form5:

Избиране на шаблон Form5

В раздел Полета на панела Свойства изберете полетата на формуляра и въведете текста на бутона:

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

В раздел Настройки E-mail въведете необходимите имейл адреси, текста на темата и текста на съобщението:

Настройки в раздел Настройки E-mail

Въведете SMTP настройките в следващия раздел:

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

В раздел Настройки може да активирате Google reCaptcha (трябва да имате безплатна регистрация) за превенция срещу автоматични регистрации от ботове:

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

В раздел Опции може да определите размера и позиционирането на формуляра:

Настройки в раздел Опции

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

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

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

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

Настройки в панел Връзка към свойства

Форматирайте дизайна на линковете като отворите в менюто с инструменти Настройки > Стилове и изберете коректния стил (в примера Custom 18):

Форматиране дизайна на връзките

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

Настройки в раздел Връзки

Запазете промените през бутона Приложи и публикувайте готовата целева страница.

Списък с файлове, цветове и шрифтове

За да пресъздадете сайта от примера трябва да приготвите изображения със следните размери:

  • header - 1280 Х 700 px (1);
  • background texture - 300 X 120 px (1), може и произволен размер, тъй като файлът се копира хоризонтално и вертикално докато запълни контейнера;
  • background footer - 400 X 300 px (1), може и произволен размер;
  • лого - 240 X 209 px (1) - използва се и като икона на сайта, и в footer - секцията;
  • цитати - 122 X 122 px (3);
  • about us - 640 X 427 px (3);
  • brands - 640 X 427 px (3);
  • services - 640 X 427 px (3);
  • testimonials - 311 X 311 px (4);
  • google map - 1280 X 440 (1);

Цветова схема:

  • #d13939 - redish - rgb(209,57,57)
  • #ded6be - beige - rgb(222,214,190)
  • #251c1c - dark brown - rgb(37,28,28)
  • #f3f2f0 - white - rgb(243,242,240)

Шрифтове:

  • Roboto Slab (serif) - заглавия;
  • Roboto Condensed (sans serif) - меню;
  • Work Sans - (sans serif) - подзаглавия и текстове;

Може да достъпите целевата страница от примера като създадете следния запис в hosts файла на вашия компютър:

91.215.216.119 coffeetime.club

и въведете URL адреса http://coffeetime.club в браузър.