Размери и големина

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

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

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

1. Превключете в респонсив режим, като изберете иконата за мобилно устройство
2. Изберете текстовия елемент, който искате да промените
3. Отидете в раздел "Стил" и след това в "Типография"
4. Забележете индикаторите за респонсив версия до опциите за размер, височина на реда и разредка
5. Променете размера на шрифта според нуждите на мобилната версия
6. За промяна на подравняването на текста в мобилен изглед, използвайте индикатора до опцията за подравняване
7. Проверете как изглежда дизайнът в различните режими, като превключвате между десктоп и мобилна версия

Важни функции за респонсив дизайн в Elementor

• Респонсив индикатор - малка икона до настройките, която показва, че свойството може да се променя отделно за различните устройства
• Типография - секция, където можете да настроите размер, височина на реда и разредка за различни устройства
• Подравняване - опция с респонсив индикатор, позволяваща различно подравняване на текста на мобилни устройства
• Padding/Margin - отстояния, които също могат да се настройват различно за всяко устройство

Практическа задача

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