كيفية إنشاء تصاميم نصية منحنية في Divi

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

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

هيا بنا نبدأ.

نظرة خاطفة

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

قم بتنزيل نماذج تصميم الرسوم المتحركة للرسالة مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

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

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

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

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

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

ابدء

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

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

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

إنشاء القسم والصف

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

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

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

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

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

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

ثم أضف CSS المخصص التالي إلى Column Main Element للتأكد من أن جميع وحدات النص ستبقى في المنتصف أفقيًا:

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

display:flex;
justify-content:center;

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

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

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

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

• أصل التحويل: 100٪ (أو أسفل)

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

position: absolute !important;

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

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

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

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

• المحتوى: i
• تحويل المحور z: 45deg

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

وحدة النص 3

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

وحدة النص 4

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

وحدة النص 5

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

وحدة النص 6

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

وحدة النص 7

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

وحدة النص 8

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

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

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

ضبط حجم النص ودرجة الدوران للنص الأطول

إذا كنت تريد ضبط النص المنحني للحصول على خيارات تصميم نص أكبر ، يمكنك تغيير حجم النص وتحويل الدوران لكل وحدة نصية.

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

ضمن إعدادات العنصر ، قم بتغيير حجم نص النص إلى 40 بكسل على سطح المكتب.

احفظ الإعدادات ثم افتح الإعدادات لكل من الوحدات النصية وقم بتحديث الحروف والتناوب لكل منها. اترك وحدة النص الأولى باستدارة 0deg ثم قم بزيادة دوران المحور z بمقدار 10 درجات لكل وحدة نصية تالية. ثم قم بتكرار وحدة النص لمزيد من الأحرف حسب الحاجة. في هذا المثال ، سأقوم بتهجئة "Elegant.themes".

فيما يلي تفصيل حرف المحتوى والدوران اللازمين لكل وحدة نصية.

• وحدة النص 1
  • المحتوى: ه
  • تحويل المحور z: 0deg
• وحدة النص 2
  • المحتوى: ل
  • تحويل المحور z: 10deg
• وحدة النص 3
  • المحتوى: ه
  • تحويل المحور z: 20deg
• وحدة النص 4
  • المحتوى: ز
  • دوران تحويل المحور z: 30deg
• وحدة النص 5
  • المحتوى: أ
  • تحويل المحور z: 40deg
• وحدة النص 6
  • المحتوى: n
  • تحويل المحور z: 50deg
• وحدة النص 7
  • المحتوى: ت
  • تحويل المحور z: 60deg
• وحدة النص 8
  • المحتوى: .
  • دوران تحويل المحور z: 70deg
• وحدة النص 9
  • المحتوى: ت
  • تحويل المحور z: 80deg
• وحدة النص 10
  • المحتوى: ح
  • دوران تحويل المحور z: 90deg
• وحدة النص 10
  • المحتوى: ه
  • دوران تحويل المحور z: 100deg
• وحدة النص 11
  • المحتوى: م
  • تحويل محور z: 110deg
• وحدة النص 12
  • المحتوى: ه
  • دوران تحويل المحور z: 120deg
• وحدة النص 13
  • محتويات
  • دوران تحويل المحور z: 130deg

ها هي النتيجة حتى الآن.

من الطرق السهلة لضبط استدارة النص بأكمله تطبيق تحويل استدارة على الصف. افتح إعدادات الصف واستخدم قرص التحكم z-index لوضع النص المنحني في المكان الذي تريده.

ها هو التصميم النهائي.

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

افكار اخيرة

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

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

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

هتافات!