Начало > Помощен център > Апликации > WordPress > Elementor Page Builder – секции и колони

Elementor Page Builder – секции и колони

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

Elementor Page Builder – секции и колони

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

В статията ще покажем как се създават и управляват в Elementor Page Builder основните структурни елементи на всеки уебсайт - секции и колони чрез съответните CSS настройки.

За да може да се възполвате в максимална степен от възможностите на Elementor трябва да имате поне минимални познания по CSS - идентификатори и класове, селектори, позициониране, списъци, линкове, изображения, фон, шрифтове, текст, цветове и т.н.

Препоръчаме да си отбележите следния адрес: https://www.w3schools.com/Css/ - на сайта ще намерите подробна информация за CSS командите заедно с интерактивна среда за тестване на примерите.

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

Зареждаме WordPress страница в Elementor и кликаме бутона със символ знка плюс и етикет Add New Section:

Бутон Add New Section

От следващия панел Select Your Structure избираме структура с една колона:

Панел за избиране на структура

Така изглежда създадената нова секция в Elementor. Всяка секция е оградена с плътна синя граница с три бутона в средата на горния край.

При кликане на бутона със знак плюс и етикет Add Section създаваме нова секция над текущата:

Бутон Add Section

Добавена нова секция

При кликане на бутона със символ знак X и етикет Delete Section изтриваме текущата секция без предупреждение. Разбира се, може да я възстановим веднага от линка History в лентата с инструменти в долния край на панела с инструменти:

Бутон Delete Section за изтиване на секция

При кликане на средния бутон с етикет Edit Section в панела с инструменти се зарежда панел Edit Section с три раздела за настройки - Layout, Style и Advanced:

Бутон Edit Section

Панел Edit Section - раздел Layout

Панел Edit Section - раздел Layout

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

  • Stretch Section - 'разтягаме' секцията да заеме цялата ширина на страницата;
  • Content Width (ширина на съдържанието) - задаваме ширината на съдържанието да бъде Boxed (фиксирана) или Full Width (пълната ширина на дисплея). Когато изберем Boxed може да ползваме плъзгача, за да зададем точната ширина;
  • Columns Gap - задаваме разстоянието между колоните в секцията когато са повече от две;
  • Height (Височина): избираме между настройките в менюто между Fit to Screen (секция ще запълни екрана) и Min Height - задаваме минимална височина и използваме плъзгача, за да зададем височината на секцията;
  • Vertical Align (Вертикално подравняване) - задаваме вертикалното подравняване на съдържанието в секцията;
  • HTML Tag (HTML маркер) - задаваме HTML маркер за секцията (обикновено се ползва section);

Панел Edit Section - раздел Style

Панел Edit Section - раздел Style

В раздел Style имаме достъп до следните настройки:

  • Background (фон) - задаваме настройки за състоянията Normal и Hover (при посочване с мишката) като избираме между фон в един цвят (Classic), градиент (преливане на цветове, Gradient) и видео (Video Background).
  • Background Overlay - затъмняващ слой върху изображение с цел акцентиране върху текст, отново за състоянията Normal и Hover, като е добавено меню с допълнителни филтри Blend Mode.
  • Border (граница) - за Normal и Hover състояния, задаване на тип граница, заобляне на ъглите (Border Radius) и добавяне на сянка (Box Shadow).
  • Shape Divider (разделител) - меню с филтри с настройки за цвят, ширина, височина и др.
  • Typography (шрифт) - дефиниране на цвят и подравняване на шрифтове за заглавие, текст и линкове в секцията (тези настройки не работят ако са дефинирани цветове по подразбиране).

Панел Edit Section - раздел Advanced

Панел Edit Section - раздел Advanced

В раздел Advanced имаме достъп до следните настройки:

  • Advanced (разширени настройки) - задаваме външно (margin)и вътрешно (padding) позициониране на елементите в секцията, определяме индекс на видимост на слоевете (Z-index), може да дефинираме идентификатор или клас за секцията.
  • Motion Effects - избираме динамичен ефект (с настройки за бързина на преместване и забавен старт) от меню за елементите в секцията;
  • Responsive (настройки за различни устройства) - може да променяме реда на зареждане на колоните според устройството, както и видимостта на секцията в различните устройства;
  • Custom CSS (Pro only) - настройката е налична само в платената версия на Elementor.

Нашата секция все още няма никакво съдържание и ако я заредим в браузър ще видим само бял екран. Добавяне на различни типове съдържание в Elementor става с помощта на плъзгане на widget-и от раздела Elements (който отваряме като кликнем квадратната икона в десния ъгъл на панела с инструменти).

Добавяне на заглавие в секция

За пример ще поставим заглавие в нашата секция. Кликаме widget-a Heading и го плъзгаме в секцията. Преди да го пуснем, по цялата дължина на секцията се появява плътна синя лента, която ни показва къде ще бъде поставен widget-a.

Widget Heading в панела Elements

Кликаме в полето на заглавието или кликаме черната икона в левия ъгъл на колоната и в панела с инструменти се зарежда панел за редактиране на заглавие Edit Heading:

Поставяне на widget Heading в секция

Като използваме наличните инструменти в трите раздела - Content, Style и Advanced, може да променим всичко в заглавието - текста, шрифта, цвета, големината, разположението в секцията, разстоянието между заглавието и границите на секцията, разстоянието между отделните букви, да добавим сянка...

Използвахме оригиналните цветове от сайта на elementor.com за да създадем преливащ фон (gradient), променихме шрифта и големината на текста и го позиционирахме в средата на секцията:

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

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

Най-лесният начин за създаване на секция с колони е като изберем подходяща структура от панела Select Your Structure:

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

Elementor предоставя и други начини за създаване на колони. Нека създадем нова секция с една колона и в нея да вмъкнем widget-а Image Box:

Създаване на секция с една колона и widget Image Box

В панела за настройки се зарежда панел Edit Image Box с три раздела с инструменти - Content, Style и Advanced, през които може да персонализираме всички елементи на Image Box - изображението, заглавието и текста.

В раздел Content избираме изображение от Media Library, редактираме заглавието и текста, може също да променим типа на заглавието (H1-H6) както и позиционирането на изображението (ляво, център, дясно).

В раздел Style > Image даваме пълна ширина (Width) на изображението, а в Style > Content променяме цвета, големината и шрифта на заглавието и текста.

В раздел Advanced > Advanced увеличаваме разстоянието между текста и долната граница с настройката padding-bottom като кликаме иконата-линк за да променим само една, а не всички padding стойности. В Advanced > Border добавихме лека сянка (box shaddow) за състояние Normal, и малко увеличихме сянката за състояние Hover, когато панела бъде посочен с мишката.

Общ изглед на Image Box

Кликаме черната икона Edit Column в горния ляв ъгъл на Image Box и от падащото меню избираме линка Duplicate:

Линк Duplicate в менюто Edit Column

Автоматично Elementor създава второ копие на колоната с цялото съдържание:

Клониране на колона с нейното съдържание

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

Панел за редактиране на изображение и заглавие

Сега ще създадем копие на новата колона по различен начин. Кликаме с десния бутон на мишката черната икона Edit Column и кликаме линка Add New Column:

Линк Add New Column

Elementor създава нова празна колона. Кликаме на произволно място в колоната (но не бутона Edit Column) и в менюто кликаме линка Duplicate:

Клониране на Image Box в същата колона

Сега Elementor създава копие на Image Box, но в същата колона. Преместваме копието в празната колона като кликнем иконата със символ молив и етикет Edit Image Box и плъзнем копието в празната колона когато се появи плътната синя линия в колоната:

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

Редактираме изображението и заглавието на новата колона. Обърнете внимание, че средната колона има малко по интензивна сянка, която се появява при посочване с мишката, поради настройките за състояние Hover:

Общ изглед на секцията с трите колони

Управление на структура през Navigator

Кликаме с десен бутон в произволна област в Elementor и в менюто кликаме линка Navigator:

Линк Navigator в меню

Панел Navigator със секции и колони

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

При кликане на елемент в Navigator в панела с инструменти автоматично се зареждат инструментите за управление на съответната секция или колона.

Също така може да преименуваме етикетите на секциите и колоните в Navigator за още по-лесно навигиране в структурата на страницата:

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

Променяме реда на зареждане на елементите като кликнем елемент в Navigator и го плъзнем в новата позиция:

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

В примера разменихме през Navigator местата на секциите HEADING и COLUMNS в нашата тестова страница:

Променен ред на зареждане на секциите

Създаване на структура с вътрешни секции

Elementor ни дава възможност да създаваме сложни и ефектни структурни решения с помощта на widget-a Inner Section. Създаваме нова секция с една колона, даваме й име INNER и в нея вмъкваме Inner Section:

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

По подразбиране Inner Section създава вътрешна секция с две колони, които може да управляваме както обикновените колони.

Добавяме нова колона във вътрешната секция с опцията Duplicate за да имаме три колони. Кликаме с десен бутон на мишката бутона за управление на секция с шест точки и в менюто кликаме линка Duplicate - по този начин копираме текущата секция:

Копиране на секция

Добавяме още една колона във втората вътрешна секция (за да имаме четири колони) и променяме ширината (Width) на външните две колони на 15%, а на вътрешните - съответно 35%. Копираме (с Duplicate) втората вътрешна секция. Добавяме заглавие, текст, разделител и икони и получаваме следната секция:

Общ изглед на новата секция и вътрешните секции

Структура на секцията и вътрешните секции в Navigator

В статията разгледахме как създаваме нова секция в Elementor, как се копира, редактира и изтрива секция, как се поставя widget в секция, как се създават колони в секция, как се създават сложни структури с добавяне на вътрешни секции.

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