Допълнения към урока
Учебна програма Wordpress Elementor
4. Responsive Utilities

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (1 модула), моля влезте или се регистрирайте.


Ключови настройки за адаптивен дизайн в 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