Настройки на Responsive Utilities
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (1 модула), моля влезте или се регистрирайте.
Ключови настройки за адаптивен дизайн в Elementor
В този урок научаваме как да настроим Responsive Utilities в Elementor - една от най-важните части при създаването на уебсайт. Адаптивният (responsive) дизайн осигурява правилно визуализиране на сайта на различни устройства - от мобилни телефони и таблети до 4K монитори. Важно е да разберем, че responsive дизайнът не се отнася само за мобилната версия, а за цялостната адаптивност на сайта към всички видове екрани.
Стъпки за настройване на адаптивността в Elementor
Отворете Elementor редактора и намерете бутона "Режим на адаптивност" между бутоните за обновяване и преглед на промените
След активиране ще се появи допълнителна навигационна лента в горната част на екрана, която позволява превключване между различни изгледи:
- Десктоп (стандартен изглед)
- Таблет (до 1024 пиксела)
- Мобилен (до 767 пиксела)
За по-детайлна настройка, кликнете върху иконата с настройки в края на лентата и активирайте допълнителни breakpoints:
- Мобилно устройство EXTRA
- Таблет EXTRA
- Лаптоп
- Широк екран
След активиране на допълнителните breakpoints, натиснете "Обновяване" и след това "Reload Now"
Сега имате достъп до 6 различни breakpoints, които можете да използвате за прецизна настройка на вашия сайт за всички видове устройства
Полезни функции в режима на адаптивност
Режим на адаптивност
- Бутон за активиране на responsive настройкитеРезолюция за визуализатора
- Позволява въвеждане на конкретна ширина в пиксели (напр. 480px)Zoom in/out
- Функции за увеличаване и намаляване на изгледаАктивни разделителни точки
- Настройка за включване на допълнителни breakpointsBreakpoint стойности
- Възможност за персонализиране на пикселите за всеки breakpoint