Настройки на Responsive Utilities

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

В този урок научаваме как да настроим Responsive Utilities в Elementor - една от най-важните части при създаването на уебсайт. Адаптивният (responsive) дизайн осигурява правилно визуализиране на сайта на различни устройства - от мобилни телефони и таблети до 4K монитори. Важно е да разберем, че responsive дизайнът не се отнася само за мобилната версия, а за цялостната адаптивност на сайта към всички видове екрани.

Стъпки за настройване на адаптивността в Elementor

1. Отворете Elementor редактора и намерете бутона "Режим на адаптивност" между бутоните за обновяване и преглед на промените

2. След активиране ще се появи допълнителна навигационна лента в горната част на екрана, която позволява превключване между различни изгледи:

   • Десктоп (стандартен изглед)
   • Таблет (до 1024 пиксела)
   • Мобилен (до 767 пиксела)

3. За по-детайлна настройка, кликнете върху иконата с настройки в края на лентата и активирайте допълнителни breakpoints:

   • Мобилно устройство EXTRA
   • Таблет EXTRA
   • Лаптоп
   • Широк екран

4. След активиране на допълнителните breakpoints, натиснете "Обновяване" и след това "Reload Now"

5. Сега имате достъп до 6 различни breakpoints, които можете да използвате за прецизна настройка на вашия сайт за всички видове устройства

Полезни функции в режима на адаптивност

• Режим на адаптивност - Бутон за активиране на responsive настройките
• Резолюция за визуализатора - Позволява въвеждане на конкретна ширина в пиксели (напр. 480px)
• Zoom in/out - Функции за увеличаване и намаляване на изгледа
• Активни разделителни точки - Настройка за включване на допълнителни breakpoints
• Breakpoint стойности - Възможност за персонализиране на пикселите за всеки breakpoint