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

Elementor Page Builder - работна среда

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

Elementor Page Builder - работна среда

В статията ще направим бърз преглед на панелите и съответните настройки в Elementor Page Builder.

Има няколко начина, по които може да отворим Elementor:

  1. Влизаме в някой от панелите Posts или Pages, посочваме с мишката заглавието на публикация или страница и кликаме линка Edit with Elementor:

Линк Edit with Elementor

  1. Кликаме заглавието на публикация или страница и в панела на редактора кликаме бутона Edit with Elementor:

Бутон Edit with Elementor

  1. Навигираме до страница или публикация, които желаем да редактираме (трябва да сме логнати в WordPress), и кликаме линка Edit with Elementor в лентата с инструменти:

Линк Edit with Elementor в лентата с инструменти

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

Общ изглед на работната среда в Elementor

Панел с настройки

Кликаме иконата със символ три хоризонтални линии (популярна с името hamburger) и се отваря панел с настройки в три секции - Style, Settings и More:

Панел с настройки в Elementor

Style

  • Default Colors - тук може да дефинираме четири основни цвята (primary, secondary, text and accent colors) и имаме възможност за избор между предварително създадени цветови схеми;
  • Default Fonts - тук дефинираме основните шрифтове за заглавия и текст на сайта - primary and secondary headings, body and accent text;

Settings

Global settings > Style - тук може да пренапишем някои от основните настройки на Elementor:

  • Default Generic Fonts - резервен шрифт, ако някой от посочените не се зарежда;
  • Content Width (px) - ширината на съдържанието;
  • Widgets Space (px) - размер на областите, заемани от widgets;
  • Stretched Section Fit To - външна граница на структурните разширения;
  • Page Title Selector - CSS селектор за заглавие на страницата;

Global settings > Lightbox - избираме Yes за да отворяме всички връзки към изображения в изскачащ прозорец, след което може да настроим глобалния цвят на фона на Lightbox (Background Color), цвета на потребителския интерфейс (UI Color) и цвета на курсора на интерфейса (UI Hover Color).

More

  • Preferences - задаваме светъл или тъмен режим на темата на потребителския интерфейс или използваме режим за автоматично разпознаване; активираме или деактивираме дръжките за редактиране, които се появяват при посочване с мишката; с No или Yes де/активираме Lightbox в полето на редактора;
  • Finder - отваря Finder за бързо намиране и навигиране до друга област на сайта;
  • View Page - отваря текущата страница в браузъра;
  • Exit to Dashboard - линк за излизане от Elementor и връщане в WordPress редактора на текущата страница или публикация;

Elements

Кликане на иконата отдясно на етикета Elementor отваря панела Elements.

Тук имаме достъп до всички widgets, за да изграждаме съответни елементи от сайта като заглавия, текст, изображения и т.н. Ако инсталираме допълнителни плъгини за Elementor от други разработчици, те ще се зареждат в този раздел в съответна лента, подобна на Basic, General и WordPress:

Лента Elements с всички Elementor widgets

Global

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

Функция Global в Elementor Pro

Лента с инструменти

В дъното на панела с инструменти имаме достъп до лента със следните инструменти:

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

Settings

Панел Page Settings

В панела Page Settings може да въведем заглавие на страницата/публикацията (Title), да дефинираме статус (Status), да изберем изображение (Featured Image), да покажем/скрием заглавието (Hide Title), да изберем структура от менюто Page Layout - Default, Elementor Canvas или Elementor Full Width.

Кликане върху следващата икона отваря панела Navigator:

Панел Navigator

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

Нашият сайт все още няма съдържание затова панела Navigator е празен, в следващи статии от поредицата за Elementor Page Builder ще го ползваме много често.

History

Следващият инструмент от лентата е History, който съдържа разделите Actions и Revisions:

Инструмент History с раздел Actions (Действия)

Actions (Действия)

Разделът Actions (Действия) регистрира всяко действие в Elementor.

Кликане върху списъка с действия ни позволява да проследим стъпките си назад. Може да се движим напред и назад между действията.

Всеки елемент от списъка Actions включва името на елемента и вида на промяната, независимо дали е създаване на нов елемент или редакция на съществуващ.

Revisions (Ревизии)

В долната част на списъка с действия има панел Editing Started. Ако искаме да се върнем по-назад, кликаме раздела Revisions (Ревизии).

Инструмент History с раздел Revisions (Ревизии)

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

Всеки елемент на ревизия съдържа датата, часа и създателя на ревизията. Кликаме бутона Apply, за да приложим ревизията на текущаста страница. За да се върнете към текущата версия на страницата кликаме линка Discard.

Помощни клавишни комбинации

Може да използваме клавишните комбинации CTRL-Z (Windows) или CMD-Z (Mac), за да отменим последното си действие и CTRL-SHIFT-Z или CMD-SHIFT-Z, за да повторим последното си действие.

Responsive mode

Elementor ни дава възможност да създаваме гъвкав дизайн, който да бъде отзивчив (responsive) по отношение ширината на устройството, през което се зарежда сайта.

За да видим как изглежда сайта в устройства с различна резолюция (desktop, tablet и mobile) кликаме иконата монитор в лентата с инструменти:

Линк Responsive mode

Preview Changes (Преглед на страница)

Може да проверяваме как изглежда страницата, която създаваме/редактираме преди да запазим промените като кликнем иконата с етикет Preview Changes - страницата се зарежда в нов прозорец на браузъра:

Линк Preview Changes (Преглед на страница)

Запазване на промени

Като кликнем бутончето със стрелка имаме възможност да запазим редактираното съдържание като чернова (Save Draft) или като шаблон в Elementor (Save as Template) . Кликане върху бутона Update запазва направените промени:

Бутон за запазване на промени

Основен панел

В средата на основния панел имаме достъп до две икони - първата е със символ знак плюс и етикет Add New Section, а втората е със символ папка и етикет Add Template:

Бутони Add New Section и Add Template в основния панел

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

При кликане на бутона Add New Section се зарежда панел, от който може да избираме структура на страницата:

Блок със структурни елементи Add New Section

Добавяне на нов шаблон

При кликане на бутона Add Template се зарежда библиотека с готови блокове и темплейти, с които ще покажем как се работи в отделни статии:

Библиотека с готови блокове и темплейти

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

Бутон за управление на панела с инструменти