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/ на смартфон, таблет и десктоп):

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В раздела Style можем да дефинираме ширина (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):

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

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

Visibility

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

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

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

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

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

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

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

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

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

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

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