Начало > Помощен център > Апликации > WordPress > Elementor Page Builder - създаване на адаптивен (responsive) уеб дизайн

Elementor Page Builder - създаване на адаптивен (responsive) уеб дизайн

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

Elementor Page Builder - създаване на адаптивен (responsive) уеб дизайн

Огромен брой статии са написани по темата за Responsive Web Design (RWD) след 2010 година, когато Ethan Marcotte публикува своята популярна статия в сайта A List Apart (https://alistapart.com/article/responsive-web-design/).

В българското уеб пространство терминът Responsive се превежда по различни начини, предпочитаме значението адаптивен, тъй като дизайна на сайта се адаптира към резолюцията на екрана на устройството, на което се зарежда сайта (на изображението показваме как се зарежда сайта https://github.com/ на смартфон, таблет и десктоп):

Адаптивен дизайн на сайта github.com

Резолюциите (ширината) на дисплея, при които се променя структурата на страницата се наричат breakpoints. Няма унифициран стандарт за breakpoints - това е решение, което взима разработчика на сайта според избраната структура.

Адаптивни режими на Elementor Page Builder

Сайтовете, изградени с Elementor Page Builder, работят в три адаптивни режима - Mobile, Tablet и Desktop, като стойностите на съответните breakpoints може да се персонализират в настройките на програмата в Elementor > Settings > Style:

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

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

В лентата с инструменти на помощния панел през иконата с етикет Responsive Mode може да променяме адаптивния режим, за който създаваме текущия дизайн:

Меню Responsive Mode в Elementor

Настройките, които запазваме в панела, се отнасят само за резолюции над 1024 пиксела (Desktop):

Изглед на сайт в Desktop резолюция в Elementor

Можем да променяме адаптивния режим и през всяка настройка, която съдържа икона с мобилно устройство след името си като кликнем линка и в менюто изберем типа на устройството, за който желаем да променим съответната настройка:

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

При преминаване в режим Tablet виждаме, че нашият дизайн се нуждае от корекции:

Изглед на сайта в режим Tablet

Същото, дори в по-голяма степен, се отнася и до визуализирането в режим Mobile:

Изглед на сайта в режим Mobile

Настройките, през които може да променяме адаптивния режим, не се ограничават само до margin и padding, а до много различни CSS настройки, както в следващия пример с border-radius, които имат икона с мобилно устройство след името си:

Икона за промяна на адаптивния режим през настройката border-radius

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

Адаптивни настройки на секция header

Започваме промените по сайта в режим Desktop за началната секция header Edit Section > Advanced > Advanced:

Desktop настройки на header секция

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

Превключваме в режим Tablet, въвеждаме необходимите корекции и ги запазваме:

Настройки на header секция за Tablet

Повтаряме процедурата и за Mobile режим:

Настройки на header секция за Mobile

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

Адаптивни настройки на допълнителния текст

В панела Typography може да променяме настройките за големина (Size), височина на линията (Line-Height) и разстояние между буквите (Letter Spacing). Въвеждаме стойностите за режим Desktop:

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

Настройки на помощното заглавие в режим Tablet:

Настройки на помощното заглавие за Tablet

Настройки на помощното заглавие в режим Mobile:

Настройки на помощното заглавие за Mobile

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

Използваме същите полета за настройки както при помощното заглавие - Size, Line-Height и Letter Spacing и въвеждаме стойностите за Desktop режим:

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

Настройки на основното заглавие за Tablet:

Настройки на основното заглавие за Tablet

Настройки на основното заглавие за Mobile:

Настройки на основното заглавие за Mobile

Припомняме, че ако променим настройка, срещу която няма икона за промяна на адаптивния режим, стойността на тази настройка ще се приложи за всички три режима. Например, ако променим тежестта на текста (Weight), който придава дебелина на буквите, тази стойност ще се приложи за всички три режима за съответния елемент.

Адаптивни настройки на бутоните

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

Настройки за Desktop:

Адаптивни настройки на бутони за Desktop

Настройки за Tablet:

Адаптивни настройки на бутони за Tablet

Настройки за Mobile:

Адаптивни настройки на бутони за Mobile

Повтаряме още веднъж същите настройки за втория бутон и запазваме настройките:

Изглед на header в Tablet режим

Адаптивни настройки на фона за режим Mobile

Обичайна практика е за устройствата с най-ниска резолюция (смартфони, Mobile) да се изключват ефекти като carousel и видео фон, например, които работят с няколко големи изображения или големи файлове и забавят твърде много работата на сайтовете в тези устройства.

Затова в нашия сайт за режим Mobile активираме изображение за фон вместо оригиналния видео фон за другите два режима. Това става като за режим Mobile посочим изображение от Media Library в полето Image, както е показано по-долу:

Избор на изображение за фон на секция в режим Mobile

Сега като заредим сайта в смартфон или намалим резолюцията на браузъра ръчно, при ширина под 768 пиксела се зарежда статичното изображение, докато в режимите Tablet и Desktop се зарежда оригиналния видео фон:

Изглед на header в Mobile режим

Адаптивни настройки на изображение и граница

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

В секция features имаме нов елемент - изображения, и само ще покажем кои са CSS елементите, които ни позволяват да дефинираме адаптивни стойности според адаптивния режим (в статии за RWD на английски със сигурност ще срещнете термина viewport, който означава същото нещо - ширината на екрана, на който се зарежда страницата).

Отваряме панела Edit Image като кликнем с десния бутон на мишката синия бутон в десния ъгъл на колоната с изображението и в менюто кликнем линка Edit Image:

Изглед на панел Edit Image

В раздела Content може да позиционираме изображението - обичайна практика е при малка резолюция (Mobile) изображението да се постави в центъра.

В раздела Style можем да дефинираме ширина (Width) и максимална шинирина (Max Width):

Задаване на параметри Width и Max-Width

Другите две адаптивни настройки ни позволяват да променяме ширината на границата (Width) и ъгълa на заобляне (Border Radius):

Настройване ширината на граница и ъгъла на заобляне

Специфични адаптивни настройки в Elementor

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

Reverse Columns

Elementor ни дава възможност да променяме този ред ако това се налага и ние се възползваме от опциите Reverse Columns (Tablet) и Reverse Columns (Mobile) в панела Edit Section > Advanced.

Кликаме секция footer, отваряме Edit Section и включваме опцията Reverse Columns (Mobile):

Опция Reverse Columns (Mobile)

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

Променен ред на зареждане на колоните в footer

Ако изключим същата настройка, колоните се зареждат в реда по подразбиране:

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

Visibility

Настройката Visibility (видимост) ни дава възможност да показваме или скриваме елементи в зависимост от адаптивния режим.

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

Изглед на два бутона в колона

Кликаме върху бутона Desktop и в панела Edit Button включваме опцията Hide on Mobile (скрий в режим Mobile):

Включена опция Hide on Mobile

Бутона Mobile променя цвета си в сив за да ни подскаже, че при преглед на страницата този бутон няма да се зарежда.

Кликаме бутона Mobile и включваме настройката Hide on Desktop (скрий в режим Desktop):

Включена опция Hide on Desktop

Ако сменим режима от лентата с инструменти, ще видим че в режим Mobile бутона Desktop е променил цвета си в сив:

Променен цвят на бутон Desktop в режим Mobile

Кликаме Preview бутона и при Desktop резолюция (над 1024 пиксела) в колоната се зарежда само бутона Desktop:

Зареждане само на бутона Desktop

Намаляме ръчно резолюцията на браузъра под 768 пиксела и в режим Mobile в колоната се зарежда само бутона Mobile:

Зареждане само на бутона Mobile

Ако променим ръчно резолюцията в режим Tablet (768px < Tablet < 1024px) в колоната се зареждат и двата бутона, тъй като не сме въвели ограничения за режима Tablet в настройките Visibility:

Зареждане на двата бутона в режим Tablet

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

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