كيفية إنشاء 3 تصميمات خطوط مذهلة أحادية المسافة في Divi

تعد الخطوط أحادية المسافة أحد الأصول الرائعة لتصميم الويب. إنها مفيدة بشكل خاص لإنشاء تصميمات ذات تناسق وتوازن جميل. يتكون الخط أحادي المسافة من أحرف وأحرف يكون لكل منها نفس العرض (أو مسافة أفقية). على هذا النحو ، فإنها توفر بنية متسقة وأنيقة لعرض النص. تستخدم الخطوط أحادية المسافة على نطاق واسع في الترميز لهذا السبب.

في هذا البرنامج التعليمي ، سنقوم بإنشاء ثلاثة تصميمات خطوط أحادية المسافة مذهلة في Divi. سننتقل إلى كيفية تخصيص وحدات النص بشكل صحيح لوضع وتصميم الخطوط أحادية المسافة ببعض الطرق الفريدة جدًا ، وأكثر من ذلك بكثير.

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة سريعة على التصميمات التي سنقوم ببنائها في هذا البرنامج التعليمي.

تصميم الخط أحادي المسافة رقم 1: نمط الشعار

ابدأ تصميم المبنى رقم 1

تصميم الخط أحادي المسافة رقم 2: كتل أحرف كبيرة

ابدأ تصميم المبنى رقم 2

تصميم الخط أحادي المسافة رقم 3: لغز الكلمات المتقاطعة

ابدأ تصميم المبنى رقم 3

قم بتنزيل تخطيط تصميمات الخط أحادي المسافة مجانًا

لتضع يديك على التصميمات من هذا البرنامج التعليمي ، ستحتاج أولاً إلى تنزيلها باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.

قم بتنزيل الملفات

تنزيل مجاني

انضم إلى رسالة Divi الإخبارية وسنرسل لك نسخة من حزمة Divi Landing Page Layout النهائية ، بالإضافة إلى الكثير من موارد ونصائح وحيل Divi المذهلة والمجانية الأخرى. تابع معنا وستكون سيد Divi في أي وقت من الأوقات. إذا كنت مشتركًا بالفعل ، فاكتب ببساطة عنوان بريدك الإلكتروني أدناه وانقر فوق تنزيل للوصول إلى حزمة التخطيط.

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

اشترك في قناتنا على اليوتيوب

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme المثبت (أو البرنامج المساعد Divi Builder إذا لم تكن تستخدم Divi Theme).
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. قم بتحميل بعض الصور الوهمية إلى مكتبة الوسائط لاستخدامها في البرنامج التعليمي. سنستخدم شعار صورة 200 بكسل × 200 بكسل من حزمة تخطيط HVAC ، وصورتي خلفية (بعرض 1920 بكسل على الأقل) مأخوذة من Cake Maker Layout Pack و Home Improvement Layout Pack.

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

تصميم الخط أحادي المسافة رقم 1: نمط الشعار

لنبدأ بتصميم خط بسيط أحادي المسافة يبرز التوازن المتماثل للحروف. نظرًا لأن الأحرف متباعدة بشكل متساوٍ ، فإن الخطوط أحادية المسافة رائعة للرسومات والشعارات. فيما يلي مثال سريع على كيفية دمج الخط أحادي المسافة مع أيقونة صورة بسيطة لإنشاء رسم جميل.

أولاً ، قم بإنشاء قسم عادي بصف من عمود واحد.

قبل أن نضيف وحدة النص ، سنضيف خلفية إلى القسم. ستتكون الخلفية من صورة رمز مركزية بخلفية رمادية داكنة. صورة الرمز التي سنستخدمها مأخوذة من حزمة تخطيط HVAC. تأكد من أن رمز الصورة يبلغ حوالي 200 بكسل × 200 بكسل لأننا سنستخدم الحجم الفعلي كصورة الخلفية.

افتح إعدادات القسم وقم بتحديث ما يلي:

• لون الخلفية: # 121212
• صورة الخلفية: [أدخل رمز صورة 200 بكسل × 200 بكسل]
• حجم صورة الخلفية: الحجم الفعلي
• موقف صورة الخلفية: المركز

أضف وحدة النص

بمجرد الانتهاء من القسم ، أضف وحدة نصية إلى صف العمود الواحد.

هذا هو المكان الذي نضيف فيه النص بخط أحادي المسافة. الجانب الملائم للأحرف أحادية المسافة هو أنه نظرًا لأن كل حرف له نفس العرض ، يمكنك بسهولة توسيط الحرف الأوسط من النص على الصفحة. هذا سيجعل من السهل الاصطفاف مع أيقونة صورة الخلفية التي أضفناها إلى القسم.

افتح إعدادات وحدة النص وحدّث محتوى النص بكلمة "أنيق". في الواقع ، يمكنك استخدام أي كلمة تحتوي على عدد فردي من الأحرف بحيث يكون لدينا حرف مركزي لتداخل رمز صورة الخلفية بشكل جيد.

إضافة تصميم الخط أحادي المسافة

يحتوي Divi على حوالي 12 خطًا أحادي المسافة مختلفة مدرجة في Divi builder يمكننا الاختيار من بينها. لرؤيتها ، يمكننا النقر لتحديد خط نص وإدخال "أحادي" في شريط البحث. سيعرض هذا قائمة الخطوط أحادية المسافة المتوفرة.

ثم قم بتحديث إعدادات التصميم على النحو التالي:

• خط النص: Droid Sans Mono
• حجم نص النص: 5vw
• تباعد حروف النص: 1.3em
• ارتفاع خط النص: 1em

هذه المجموعة من وحدة طول vw لحجم النص ووحدة طول em لتباعد الأحرف وارتفاع السطر ستضمن أن النص يستجيب تمامًا لجميع أحجام المتصفح.

تباعد

بعد أن يصبح الخط جاهزًا ، أضف بعض المسافات إلى وحدة النص للتأكد من توسيط النص بشكل مثالي. يمكننا أن نرى أن النص بعيد عن المركز قليلاً بسبب تباعد الأحرف. يمكننا إصلاح ذلك بسهولة عن طريق إضافة مساحة يسرى مساوية للقيمة التي أضفناها لتباعد الأحرف.

قم بتحديث ما يلي:

• الهامش: 0 بكسل للأسفل
• الحشوة: 2em أعلى ، 2em أسفل ، 1.3em اليسار

تغيير لون الحرف المركزي

تتمثل إحدى الطرق البسيطة لتغيير لون حرف واحد في Divi في استخدام خيارات النمط المضمنة عند استخدام المنشئ في الواجهة الأمامية.

ما عليك سوى تحديد الحرف الذي تريد تغييره والنقر فوق رمز لون النص في شريط القائمة.

ثم أضف رمز اللون التالي: rgba (248، 142، 96، 0.54)

هذا كل شيء!

جعل العرض الكامل للصف

نحتاج إلى توفير بعض المساحة للنص الذي سيتم إضافته ، لذا تابع واجعل الصف كامل العرض عن طريق فتح إعدادات الصف وتحديث ما يلي:

• العرض: 100٪
• العرض الأقصى: 100٪

النتيجة النهائية

هنا هو النتيجة النهائية.

وإذا أردت ، يمكنك إضافة مسافة للحرف المركزي في النص لاستخدام أيقونة صورة الخلفية للمساحة الفارغة. إليك ما سيبدو عليه ذلك.

تصميم الخط أحادي المسافة رقم 2: كتل أحرف كبيرة

يعرض هذا التصميم التالي بنية الخط التي تشبه الكتلة والتي يمكن استخدامها مع الخطوط أحادية المسافة. على عكس الخطوط العادية (متغيرة العرض) ، تتراكم الخطوط أحادية المسافة فوق بعضها البعض لتصميم متوازن يكون حديثًا وممتعًا للعين.

هيريس كيفية القيام بذلك.

قم بإنشاء قسم عادي جديد بصف من عمود واحد.

قبل إضافة أي وحدة ، قم بتحديث القسم بتصميم الخلفية على النحو التالي:

• لون الخلفية المتدرج الأيسر: # fcd1e5
• تدرج الخلفية اللون الأيمن: rgba (255،255،255،0)
• اتجاه التدرج: 135 درجة
• موقف البداية: 50٪
• موضع النهاية: 76٪

ثم أضف صورة خلفية. أنا أستخدم واحدًا من Cake Maker Layout Pack.

أضف عرض الصف

بعد ذلك ، قم بتحديث عرض الصف كما يلي:

• العرض: 100٪
• العرض الأقصى: 100٪

أضف وحدة النص

بمجرد حصولك على صف كامل العرض ، أضف وحدة نصية إلى الصف.

ثم قم بتحديث محتوى الجسم بما يلي:

<p>dividesign<a href="#">learnmore</a></p>

ثم قم بنمط نص الفقرة على النحو التالي:

• خط النص: ممر علوي أحادي
• نمط خط النص: TT
• لون نص النص: # 2e298f
• حجم نص النص: 15vw
• تباعد الحروف النصية: 0.16em
• ارتفاع خط النص: 1em

سنضيف نمطًا مختلفًا إلى نص الرابط على النحو التالي:

• نمط خط الارتباط: تسطير
• لون نص الرابط: # 2e298f
• حجم نص الرابط: 3.5vw
• تباعد حروف الارتباط: 0em

تباعد

بعد أن يتم تحديد نمط النص ، قم بتحديث التباعد كما يلي:

• الهامش: 0 بكسل للأسفل
• الحشو: 0.16em يسار ، 3em يمين

بعد ذلك ، احفظ الإعدادات. ثم استخدم خيارات النمط المضمنة لتغيير لون الحروف كما فعلنا في مثال التصميم الأول سابقًا في المنشور.

للقيام بذلك ، قم بتمييز الأحرف الأربعة الأولى وقم بتغيير اللون إلى الأبيض.

قم بتغيير لون الحرف الثاني إلى ما يلي: # f34a43

أخيرًا ، قم بتمييز الأحرف الخمسة الأولى في نص الرابط ("Learn") وقم بتحديث اللون إلى ما يلي: # f34a43.

تصميم نهائي

الآن دعنا نتحقق من النتيجة النهائية على صفحة مباشرة.

تصميم الخط أحادي المسافة رقم 3: لغز الكلمات المتقاطعة

يستفيد هذا التصميم الأخير من الخطوط أحادية المسافة لإنشاء تخطيط نوع لغز الكلمات المتقاطعة للنص الخاص بك. هيريس كيفية القيام بذلك.

أولاً ، قم بإنشاء قسم عادي جديد بصف من عمود واحد.

قبل إضافة أي وحدات نمطية ، افتح إعدادات القسم وأضف صورة خلفية متدرجة كما يلي:

• صورة الخلفية: [إدراج الصورة]
• لون يسار متدرج للخلفية:
• لون خلفية متدرج لليمين:
• اتجاه التدرج: 90 درجة
• موقف البداية: 25٪
• موقف النهاية: 0٪
• وضع التدرج فوق صورة الخلفية: نعم

إعدادات الصف

بمجرد الانتهاء من خلفية القسم ، افتح إعدادات الصف بعرض جديد وبعض التباعد.

• العرض: 100٪
• العرض الأقصى: 100٪
• الحشوة: 22vw top ، 5vw left

أضف وحدة نصية

بعد تحديث الصف ، أضف وحدة نصية جديدة إلى الصف مع كلمة "أحادية" كمحتوى أساسي.

ثم قم بتحديث تصميم وحدة النص كما يلي:

• خط النص: Rubik Mono One
• لون نص النص: # faac00
• حجم نص النص: 8vw
• تباعد الحروف النصية: 0.15em
• ارتفاع خط النص: 1em

قم بتكرار وحدة النص

لتسريع تصميم الكتلتين التاليتين من النص ، دعنا نكرر وحدة النص التي صممناها للتو مرتين بحيث يكون لديك إجمالي ثلاث وحدات نصية مكدسة فوق بعضها البعض.

تحديث وحدة النص # 2

بعد أن قمنا بتكرار وحدة النص ، افتح إعدادات وحدة النص الثانية (الوسطى) وقم بتغيير النص الأساسي إلى كلمة "الخطوط".

ثم قم بتحديث ما يلي:

• Body: "الخطوط"
• لون الخلفية: #dddddd
• لون نص النص: # 930565
• العرض: 0.86em
• الهامش: -3em أعلى ، 2em اليسار

لاحظ كيف يؤدي تغيير عرض وحدة النص إلى عرض النص عموديًا. ولأنه خط أحادي المسافة ، فإنه يتراكم بشكل متساوٍ. وباستخدام عرض يساوي حجم كل مجموعة أحرف ، يمكننا تحريك وحدة النص بزيادات قدرها 1em. لذا فإن الهامش العلوي -3em سيجلب النص إلى 3 كتل أحرف بالضبط. وسينقل الهامش الأيسر 2em وحدة النص على كتلتين من الأحرف بالضبط إلى اليمين. هذا يجعل من السهل وضع العناصر في تخطيط الكلمات المتقاطعة مثل هذا.

مربع الظل

دعنا نضيف ظل مربع لزيادة حجم الخلفية خلف وحدة النص.

• Box Shadow: انظر لقطة الشاشة
• مربع الظل الوضع الرأسي: 0 بكسل
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 0.08em
• لون الظل: #dddddd (نفس لون الخلفية)

فهرس Z.

للتأكد من بقاء كتلة النص هذه فوق وحدات النص الأخرى ، قم بتحديث الفهرس z على النحو التالي:

• الفهرس Z: 11

تحديث وحدة النص # 3

بمجرد اكتمال وحدة النص رقم 2 ، افتح إعدادات وحدة النص الثالثة وقم بتغيير النص الأساسي إلى كلمة "متباعدة".

ثم انقل الوحدة في مكانها باستخدام قيم هامش em السحرية الخاصة بنا:

• الهامش: -1em أعلى ، 2em اليسار

تصميم نهائي

متحرك

نظرًا لأن هذه التصميمات مبنية باستخدام وحدتي طول vw و em ، فسيظل التصميم متسقًا مع جميع أحجام المتصفح. إليك ما يبدو عليه التصميم على شاشة الكمبيوتر اللوحي والهاتف.

ملاحظة: العنصر الوحيد الذي لا يستجيب هو رمز صورة الخلفية في التصميم الأول. ومع ذلك ، يمكنك بسهولة إضافة صورة خلفية أصغر على الجهاز اللوحي والهاتف لإصلاح ذلك.

افكار اخيرة

ربما يكون أفضل شيء في إنشاء تصميمات خطوط أحادية المسافة في Divi هو تعدد استخدامات أنماط الخطوط. فقط بضع لمسات بسيطة يمكن أن تحدث فرقًا كبيرًا. بالإضافة إلى أن التطبيقات عملية تمامًا لأي موقع ويب.

أي واحد من هذه الأمثلة الثلاثة وجدته واعدًا أكثر؟

أتطلع إلى الاستماع منك في التعليقات.

هتافات!