Elementor Page Builder – създаване на landing page от шаблон

Освен възможностите да създаваме персонализирани структурни решения за нашите страници и публикации като вмъкваме widget-и с различни функционалности, Elementor Page Builder ни предоставя възможност да ползваме библиотека (Library) с готови темплейти и блокове, както и възможност да запазваме секции и страници в наша собствена библиотека My Templates.

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

Достъп до Elementor Library

Отваряме WordPress страница в Elementor и кликаме сивия бутон със символ папка и етикет Add Template:

В нов прозорец се зарежда бибиотеката Library и по подразбиране се отваря раздел Pages с линкове към голям брой безплатни и платени (имат етикет PRO) шаблони на сайтове.

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

• символ за търсене - при кликане в целия Library прозорец се зарежда съответния шаблон за разглеждане;
• икона сърце - може да добавим шаблона в раздела Favourites (любими);
• линк Insert - при кликане шаблона се инсталира в нашата страница;

Над шаблоните се намира меню с няколко линка, които служат за сортиране на шаблоните. Който от първите три линка да изберем, безплатните и платените шаблони си остават разбъркани, което затруднява разглеждането.

Затова препоръчаме да отделите няколко минути и да маркирате всички безплатни шаблони като Favourites и по този начин при кликане на линка My Favourites в прозореца ще се зареждат само безплатните шаблони.

Ако при разглеждането харесаме шаблона може да кликнем линка Insert в горния десен ъгъл и директно да импортираме шаблона в страницата. Ако желаем да продължим разглеждането на други шаблони трябва да се върнем в основния панел Pages като кликнем линка Back to Library.

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

Поради тази причина разработчиците на Elementor са предвили възможността за комбиниране на части от различни шаблони и запазването им като напълно отделни персонални шаблони.

За пример ще създадем landing page (рекламна страница) на фиктивна PDF книга за дигитален маркетинг (Digital Marketing Guru, DMG). За целта ще използваме секции от два различни шаблона, ще ги форматираме в един стил и накрая ще ги запазим като нов самостоятелен шаблон на страница. Готовия сайт може да видите на URL адрес:

https://elementor.icn-demo.com/

Първо импортираме шаблона Landing Page - Tourism 1 - page - от него ще използваме следните три секции:

1. Секция header с видео фон:

1. Секция testimonials със свидетелства на доволни купувачи:

1. Секция call-to-action (подкана за действие):

За да може да се свържем с библиотеката за скриптове Elementor Template Library трябва да създадем безплатен акаунт в сайта elementor.com:

да се логнем с коректните данни:

и да свържем акаунта със сайта като кликнем бутона Connect:

Скролваме с мишката до края на страницата и отново отваряме библиотеката на Elementor. Импортираме първия шаблон в панела Landing Page - Hotel - page - от него ще ползваме следните секции:

1. Две features секции (заглавие, текст, бутон и изображение):

1. Секция video:

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

https://elementor.icn-demo.com/dmg-start/

Запазваме страницата като темплейт в случай, че допуснем грешка, да може с един импорт да възстановим съдържанието и да започнем отначало. За целта в лентата на панела с инструменти в Elementor кликаме бутона със символ стрелка и етикет Save Options и в менюто кликаме линка Save as Template:

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

Новият шаблон се запазва в раздела My Templates в библиотеката на Elementor:

Сега трябва да изтрием всички ненужни секции от страницата, за да останат само онези, които описахме по-горе (общо шест на брой):

Преименуваме секциите в Navigator за лесно ориентиране в структурата на страницата:

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

Така трябва да изглежда страницата след премахване на ненужните секции и новото структуриране:

https://elementor.icn-demo.com/dmg-structure/

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

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

Изтриваме иконата и помощното заглавие като кликнем с десния бутон синята икона в горния десен ъгъл и в менюто кликнем Delete:

Над заглавието поставяме от панела с инструменти на Elementor widget-a Text Editor.

Добавяме между заглавието и бутона widget-a Inner Section (с две колони), хващаме с мишката бутона за синята икона и го плъзгаме в едната колона. Кликаме с десния бутон върху бутона и в менюто кликаме Duplicate. Плъзгаме копирания бутон във втората празна колона:

Кликаме текста над заглавието и в раздела Content > Text Editor въвеждаме текста:

В раздела Style центрираме текста (Alignment) и му задаваме бял цвят (Text Color):

В полето Typography определяме шрифта (Family), големината (Size), тежестта (Weight), изписване на символите само с главни букви (Transform: Uppercase) и задаваме разстояние между буквите 4px:

Избиране на подходящ шрифт

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

Библиотеката за безплатни шрифтове Google Fonts предлага към момента около хиляда (977 font families) шрифта от различни типове. Търсенето на подходящ шрифт чрез скролиране е уморително, отнема много време и рядко води до добър краен резултат.

В такива случаи препоръчаме да ползвате полето за търсене на Google и да въведете ключови думи, които описват характеристиките на търсения шрифт. Въведохме digital style fonts и на първа страница Google върна като резултат https://fonts.google.com/specimen/Orbitron:

На същата страница може да проверим с кои други шрифтове си подхожда даден шрифт и за нашия сайт избрахме комбинацията Orbitron за заглавие и Open Sans за текст.

Кликаме върху основното заглавие и в раздела *Content* въвеждаме текста в полето Title, определяме HTML таг, големина и позициониране:

В раздела Style задаваме бял цвят (Text Color) и в Typography задаваме настройките на шрифта, които са показани на изображнието:

Стилизиране на бутоните в header секцията

Кликаме върху синята икона с етикет Edit Button и в раздела Edit Button > Content задаваме текста на бутона (Text), линк за пренасочване (за сега оставяме полето празно), позициониране вдясно (Alignment), големина (Size), избираме икона (Icon), задаваме позиция на иконата спрямо текста (Icon Position) и задаваме разстояние между текста и иконата (Icon Spacing):

В раздела Style задаваме бял цвят (Text Color), цвят на фона (Background Color) и радиус на заобляне на ъглите (Border Radius):

За състояние Hover (при посочване с мишката) избираме светъл хармоничен нюанс за текста без да променяме цвета на фона:

Избор на цветова схема за страницата

Накратко ще покажем как избрахме цветовата гама на сайта. Първо качихме изображение на видеото от header секцията в сайта:

https://www.canva.com/colors/color-palette-generator/

и софтуера ни върна схема с основните цветове в изображението:

След това копирахме основния цвят Dark Slate Blue (#3D2769) в сайта https://www.colorhexa.com/ и получихме няколко таблици с хармонични цветове, от които избрахме цвета на бутоните:

В полето Typography въвеждаме настройките за текста на бутона:

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

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

При проверка на структурата на header секцията в Navigator забелязваме наличието на елемент Spacer, който служи за създаване на разстояние между текста и бутона в оригиналния шаблон:

Нямаме нужда от този елемент, затова го изтриваме.

Така изглежда завършената header секция на страницата:

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

В панела Edit Section > Advanced увеличаваме разстоянието между границата на секцията и заглавието с настройката padding-top:

При създаването на header секцията описахме подробно промените в отделните елементи. За персонализиране на елементите от features секциите ще използваме същите панели за управление на заглавие, текст и бутони.

Заглавие

В панела Edit Headings в раздела Content > Title въвеждаме текста на заглавието, в раздела Style > Text Color задаваме същия цвят като фона на бутона, в Style > Typography въвеждаме настройките на текста:

Текст

В панела Edit Text Editor в раздела Content > Text Editor въвеждаме текста, в раздела Style > Text Color задаваме почти черен цвят #222222 и в Style > Typography въвеждаме шрифта и големината:

Бутон

На практика копираме настройките на бутона от header секцията като променяме само размера на бутона (Medium), големината (Size:18px) и тежестта (Weight:400) на шрифта в панела Edit Button.

Изображение

В features секциите имаме нов елемент - изображение, което се управлява от различен панел, затова първо кликаме синята икона-молив с етикет Edit Image в десния ъгъл на колоната за да отворим панела Edit Image.

В раздела Content > Choose Image избираме изображението от Media Library и задаваме пълния размер (Image Size:Full):

В раздела Style задаваме граница около изображението като за цвят избираме много светъл нюанс на същия зелен цвят като фона на бутона:

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

Завършената секция features изглежда така:

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

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

Форматираме разстоянията около (отгоре и отдолу) секцията със следните настройки:

Създаваме преливащ фон за секцията като в панела Edit Section > Style избираме Background Type (Gradient) и задаваме двата цвята в полетата Color и Second Color:

Форматираме заглавието с познатите настройки в панела Edit Heading:

Използваме познатите вече настройки в панела Edit Text Editor за да форматираме допълнителния текст:

За да отворим панела за управление на видео в Elementor кликаме с десен бутон на мишката синия бутон с етикет Edit Video и в менюто кликаме линка Edit Video:

В раздела Content избираме източника на видео файла - в примера ползваме видео файл от Media Library затова от менюто Source избираме опция Self Hosted:

Ако желаем да ползваме видео от интернет доставчик като YouТube, в менюто Source избираме YouТube и в полето Link поставяме URL адреса на видеото:

В същия панел Edit Video > Content > Video активираме настройката Player Controls.

Затваряме панела Video и отваряме панела Image Overlay - тук посочваме изображение, което да се зарежда когато посетителя не гледа съдържанието на видео файла.

Активираме опцията с включване на бутона Image Overlay, в полето Choose Image избираме изображението от Media Library, задаваме зареждане в пълен размер (Image Size) и включваме бутоните Play Icon и Lightbox:

Настройката Lightbox затъмнява целия екран при разглеждане на видео файла. За да затворим Lightbox кликаме иконата със символ знак 'X' или кликаме в екрана извън видео плейъра:

В панела Edit Video > Style задаваме цвят на иконата върху изображението и добавяме сянка:

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

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

Най-напред трябва от структура с две колони да създадем структура с два реда по три колони. За наша радост Elementor ни предоставя достатъчно прецизни инструменти, с които да изпълним тази задача само с няколко клика.

Кликаме с десния бутон на мишката черната икона с етикет Edit Column в горния ляв ъгъл на колоната и в менюто избираме Duplicate:

Кликаме с десния бутон на мишката бутона Edit Section и в менюто избираме Duplicate за да копираме секцията:

С четири клика създадохме желаната структура:

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

Кликаме в първата колона и в панела Edit Testimonial и раздел Content > Testimonial въвеждаме текста, избираме изображение от Media Library, задаваме размер на изображението, въвеждаме име (Name) и длъжност (Title), задаваме позициониране с Image Position и Alignment:

В раздела Style > Content задаваме цвят и настройки на шрифта:

В полето Style > Image задаваме големина на изображението Image Size:

В панела Style > Name форматираме името:

В Style > Title форматираме текста, посочващ длъжността на лицето:

И сега вместо всички тези настройки да ги повтаряме още пет пъти (за всяка отделна колона), разработчиците на Elementor са измислили начин да копираме тези настройки и да ги поставим (paste) в другите пет колони.

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

Кликаме с десен бутон на мишката в друга колона с неформатирано съдържание и в менюто кликаме линка Paste Style. Автоматично Elementor форматира съдържанието с копираните настройки:

Форматираме пространството на секцията със заглавието (Edit Section):

Форматираме пространството на последната секция (пропускаме междинната секция):

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

Персонализиране на секция call-to-action CTA

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

За секцията ще използваме преливащ фон (Gradient), чиито цветове и настройки създаваме в панела Edit Section > Style:

Въвеждаме текста в панела Edit Heading > Content:

В раздела Edit Heading > Style задаваме настройките на шрифта:

За форматиране на бутона използваме опцията за копиране на CSS стилове, като копираме зеления бутон от header секцията.

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

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

За да завършим страницата имаме нужда от footer секция, но footer шаблоните са достъпни само в платената версия на Elementor. Затова ще създадем секцията с наличните инструменти.

Създаваме нова секция с две колони. В лявата колона поставяме widget Text Editor, а в дясната колона поставяме widget Icon List.

В раздела Content на панела Edit Text Editor въвеждаме стандартна информацията за собствеността и правата на сайта:

В раздела Style задаваме настройките на шрифта:

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

и съответните настройки по подразбиране в панела Edit Icon List > Content:

В полето Layout избираме опцията Inline за да се разположат линковете на един хоризонтален ред, изтриваме два линка като кликаме символа 'Х' и кликаме полето List Item #1:

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

В раздела Style > List задаваме разстояние между линковете (Space Between) и позициониране на менюто (Alignment):

В раздела Style > Icon задаваме цвят на иконите в нормално и Hover състояние, както и големината на иконите:

В раздела Style > Text задаваме цвят на линковете в нормално и Hover състояние, както и големината на шрифта:

Изглед на целият списък с линкове и икони в панела Edit Icon List:

Добавяме разстояние (padding-top) в панела Edit Section > Advanced:

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

Създаване на вътрешни връзки (линкове)

Сега ще покажем как се свързват линкове със секции от сайта. За целта първо ще свържем двата бутона с текст Watch the Video в header и features секциите със секцията video, за да може при кликане на бутоните посетителите да бъдат отведени до video секцията за да прегледат съдържанието на видео файла.

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

Кликаме бутона Edit Section на секция video и в панела Edit Section > Advanced задаваме стойност videobox в полето CSS ID:

Сега кликаме бутона Watch the Video в header секцията и в панела Edit Button в полето Link въвеждаме URL адреса до video секцията като добавяме символа '#' пред ID селектора videobox:

https://elementor.icn-demo.com/#videobox

По абсолютно същия начин въвеждаме URL адреса на video секцията в бутона Watch the Video в секция features.

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

Следвайки същия принцип ще свържем линковете в footer секцията с header секцията за да може посетителите автоматично да се връщат в началото на страницата.

Кликаме бутона Edit Section на header секцията и в панел Edit Section > Advanced въвеждаме име topsection в полето CSS ID:

Скролираме до footer секцията и кликаме в хоризонталното меню за да достъпим панела Edit Icon List. В панела на линка DMG въвеждаме URL до header секцията за да може посетителите чрез кликане на този линк да се върнат в началото на текущата страница:

https://elementor.icn-demo.com/#topsection

В панела на линка DMG Start въвеждаме URL до помощната страница, за която споменахме в началото на статията, и която някои читатели може би желаят да разгледат:

https://elementor.icn-demo.com/dmg-start/

За да се отвори страницата DMG Start в нов прозорец на браузъра (тъй като тя е само работна страница и не съдържа линкове за пренасочване) кликаме иконата със символ зъбно колело и етикет Link Options и в менюто маркираме опцията Open in new window:

По същия начин процедираме и с другия линк DMG Structure, само че го насочваме към URL на структурираната помощна страница:

https://elementor.icn-demo.com/dmg-structure/

Запазваме настройките и кликаме бутона preview в лентата с инструменти за да разгледаме завършения сайт или зареждаме в браузър URL адресa:

https://elementor.icn-demo.com/

и двете помощни страници през линковете в менюто:

https://elementor.icn-demo.com/dmg-start/

https://elementor.icn-demo.com/dmg-structure/

Остана само да запазим готовия сайт в библиотеката My Templates. Кликаме бутона със символ стрелка и етикет Save Options в лентата на панела с инструменти, и в менюто кликаме линка Save as Template. В прозореца въвеждаме име на шаблона и кликаме линка Save.

Надяваме се, че информацията в тази статия ще запали интереса ви към създаване на WordPress сайтове чрез Elementor Page Builder.