كيفية إضافة نص منحني على ديفي

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

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

دعونا نبدأ.

مسح

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

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

الفكرة الأساسية وراء إنشاء نص منحني في Divi

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

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

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

وإليك مثال على الوحدات النمطية للنص نفسها التي يتم تدويرها بزيادة قدرها 20.

إبدأ الآن

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

إنشاء تصميم نص منحنى

إنشاء القسم والخط

ابدأ بإنشاء قسم منتظم مع صف من العمود.

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

• التدرج الخلفي الأيسر: #1e003d
• خلفية متدرجة لليمين - اللون: # 121212
• نوع التدرج: شعاعي

• صورة الخلفية: [أدخل صورة الشعار حوالي 100 بكسل × 100 بكسل]
• حجم صورة الخلفية: الحجم الفعلي

احفظ الإعدادات ، ثم غير الإعدادات إلى السطر وقم بتحديث ما يلي:

• عرض مزراب: 1
• العرض: 100٪
• الحد الأدنى للارتفاع: 400px
• الارتفاع: 40vw
• أقصى ارتفاع: 600px
• حشوة مخصصة: 0px عالية ، 0px لأسفل

ثم أضف كود CSS المخصص التالي إلى العنصر الرئيسي للعمود للتأكد من أن جميع الوحدات النصية ستظل في المنتصف أفقيًا:

CSS Element العمود الرئيسي:

عرض المرن. تبرير-سعيد: المركز؛

إنشاء وحدات نصية لكل حرف

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

• المحتوى: د (الحرف فقط)
• خط النص: Ubuntu Mono (أي خط أحادي المسافات سيفي بالغرض)
• لون نص النص: #ffffff
• حجم النص: 5vw (سطح المكتب) ، 40px (الهاتف)
• اتجاه النص: المركز
• الحد الأدنى للارتفاع: 200px
• الارتفاع: 20vw
• أقصى ارتفاع: 300px

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

• أصل التحول: 100٪ (أو أقل)

ثم قم بإضافة CSS المخصص التالي إلى العنصر الرئيسي لمنح وحدة النص وضعًا مطلقًا.

إنشاء وتدوير وحدات النص الأخرى

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

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

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

• المحتويات: أنا
• محور دوران التحويل: 45 درجة

استمر في عملية تكرار وحدة النص ، ثم قم بتحديث وحدة النص بحرف جديد وقم بزيادة دوران التحويل بمقدار 45 درجة. فيما يلي قائمة بالتحديثات الستة المتبقية لوحدة النص:

وحدة النص 3

• المحتوى: الخامس
• محور دوران التحويل: 90 درجة

وحدة النص 4

• المحتوى:
• تحول دوران المحور z: 135deg

وحدة النص 5

• المحتوى: د
• تحويل دوران المحور z: 180deg

وحدة النص 6

• المحتوى:
• تحول دوران المحور z: 225deg

وحدة النص 7

• المحتوى: الخامس
• تحويل دوران المحور z: 270deg

وحدة النص 8

• المحتوى:
• تحويل دوران المحور z: 315deg

هذا كل شيئ! الآن تحقق من النتيجة النهائية.

نتيجة نهائية

الأفكار النهائية

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