احجام الخطوط
الهدف من الدرس :
مميزات هذا الأسلوب :
أحجام العناوين قابلة للتدرج من سطح المكتب إلى الجوال تلقائيًا، دون الحاجة لتعديلها يدويًا في وضع التابلت.
جميع القيم تستخدم وحدة
REM، وهي أفضل من حيث قابلية الوصول (Accessibility).يُفضل تعيينها من خلال إعدادات الخطوط العامة (Global Fonts) داخل Elementor.
يجب إدخال أكواد
clamp()في خيار “الوحدة المخصصة” (Custom Unit) داخل Elementor.
⚠️ تنبيه مهم:
لا تضع هذه القيم مباشرة في عناصر H1 إلى H6 في إعدادات “الخطوط” ضمن إعدادات الموقع، لأن ذلك يؤثر سلبًا على تحسين محركات البحث (SEO) ويقيد عدد مستويات العناوين إلى 6 فقط.
طريقة التركيب :
📝 أحجام العناوين (Titles):
Title 1
clamp(3rem, 2.5385rem + 2.0513vw, 4rem)Title 2
clamp(2.4rem, 2.1231rem + 1.2308vw, 3rem)Title 3
clamp(2.1rem, 1.9154rem + 0.8205vw, 2.5rem)Title 4
clamp(1.8rem, 1.7077rem + 0.4103vw, 2rem)Title 5
clamp(1.6rem, 1.5308rem + 0.3077vw, 1.75rem)Title 6
clamp(1.4rem, 1.3538rem + 0.2051vw, 1.5rem)Title 7
clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem)
📝 النصوص الأخرى (Text Styles):
Subheading (العنوان الفرعي)
1.2remBody (النص الأساسي)
1remBody Bold (النص العريض)
1remBody Big (النص الكبير)
1.125remBody Small (النص الصغير)
0.875rem