Начало > Помощен център > Апликации > WordPress > Elementor Page Builder – създаване на landing page от шаблон

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

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

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

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

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

Достъп до Elementor Library

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

Бутон Add Template

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

Изглед на панела Elementor Library

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

Линкове при посочване на темплейт

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

Зареждане на темплейт в Elementor Library

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

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

Mеню за сортиране на темплейти

Ако при разглеждането харесаме шаблона може да кликнем линка 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 с видео фон:

Секция header в темплейт

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

Секция testimonials в темплейт

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

Секция call-to-action в темплейт

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

Свързване с Elementor Template Library

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

Логване в безплатен Elementor акаунт

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

Бутон Connect за свързване с Elementor Template Library

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

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

Секции features в темплейт

  1. Секция video:

Секция video в темплейт

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

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

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

Линк Save as Template в меню Save Options

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

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

Раздел My Templates в Elementor Template Library

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

Изтриване на ненужните секции

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

Преименуване на секциите в Navigator

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

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

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

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

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

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

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

Меню за изтриване в Elementor

Секция header без изтритите елементи

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

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

Създаване на структура с два хоризонтални бутона

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

Въвеждане на текст в Text Editor

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

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

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

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

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

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

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

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

Спецификация на шрифт Orbitron в Google Fonts

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

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

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

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

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

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

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

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

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

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

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

Настройване цвят на текст за състояние Hover

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

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

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

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

Основни цветове в изображение

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

Схеми с таблици на хармонични цветове

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

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

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

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

Настройки padding за разстояние в раздел Edit Section Advanced

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

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

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

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

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

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

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

Настройка padding-top в панела Edit Section Advanced

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

Заглавие

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

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

Текст

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

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

Бутон

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

Изображение

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

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

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

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

Създаване на граница около изображение

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

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

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

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

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

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

Форматиране на разстояние около секция

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

Създаване на преливащ фон Gradient

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

Форматиране на заглавие в панела Edit Heading Style

Форматиране на заглавие в панела Edit Heading Advanced

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

Форматиране на текст в панела Edit Text Editor Style

Форматиране на текст в панела Edit Text Editor Advanced

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

Линк Edit Video в меню

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

Избиране на видео файл в панела Edit Video Source

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

Избиране на видео от YouТube

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

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

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

Създаване на изображение Image Overlay

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

Видео плейър в Lightbox

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

Форматиране бутон на video плейър в Edit Video Style

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

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

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

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

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

Копиране на колона с Duplicate в меню Edit Column

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

Копиране на секция с Duplicate в меню Edit Section

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

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

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

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

Въвеждане на съдържание в панела Edit Testimonial Content

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

Настройки на шрифт в панела Style Content

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

Настройки за големина на изображение в панела Style Image

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

Форматиране на име в панел Style Name

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

Форматиране на текст в панела Style Title

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

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

Копиране на CSS стилове в меню

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

Поставяне на настройки с Paste Style

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

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

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

Форматиране на празно пространство в секция

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

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

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

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

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

Настройки за фон Gradient в Edit Section Style

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

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

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

Настройки на шрифт в панела Edit Heading Style

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

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

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

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

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

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

Въвеждане на служебна информация в Edit Text Editor

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

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

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

Изглед на Icon List по подразбиране

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

Изглед на панела Edit Icon List Content

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

Настройки по подразбиране в панела Edit Icon List

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

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

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

Позициониране на менюто в раздела Style List

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

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

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

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

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

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

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

Добавяне на разстояние в Edit Section Advanced

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

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

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

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

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

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

Задаване на CSS ID videobox

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

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

Въвеждане на URL адрес за пренасочване в панела Edit Button

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

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

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

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

Задаване на CSS ID topsection

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

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

Въвеждане на URL адрес за пренасочване към CSS ID topsection

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

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

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

Опция Open in new window в Link Options

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

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

Въвеждане на линк към 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.