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

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

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي بعض الأمثلة على تصميمات النص الممكنة باستخدام هذه التقنية:

ابدء

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

تصميم رقم 1: نص مقطوع مع تمييز متدرج

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

إعدادات القسم

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

تدرج الخلفية اللون الأيسر: rgba (124،218،36،0.66)
تدرج الخلفية اللون الأيمن: rgba (0،106،193،0.61)

العرض: 80٪
محاذاة القسم: المركز

نمط الفاصل العلوي: انظر الصورة
لون الحاجز العلوي: #ffffff
ارتفاع الحاجز العلوي: 1.8vw
تكرار الحاجز العلوي الأفقي: 3x
ترتيب الفاصل العلوي: فوق محتوى القسم

نمط الحاجز السفلي: انظر الصورة
لون الحاجز السفلي: #ffffff
ارتفاع الحاجز السفلي: 1.8vw
تكرار المقسم السفلي الأفقي: 3x
ترتيب الحاجز السفلي: فوق محتوى القسم

الهامش المخصص: 5vw Top، 5vw Bottom
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

إعدادات الصف

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

العرض المخصص: 100٪
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

إعدادات وحدة النص

الآن يمكننا أخيرًا إضافة وحدة النص إلى صف العمود الواحد. داخل الصف ، أضف وحدة نصية تحتوي على محتوى "عملنا". ثم قم بتحديث إعدادات التصميم على النحو التالي:

خط النص: أوزوالد
نمط خط النص: TT
لون نص النص: # 0c71c3
حجم نص النص: 10vw
ارتفاع خط النص: 1em
اتجاه النص: الوسط
الهامش المخصص: -5vw أعلى ، -4 vw أسفل
الحشو المخصص: 2vw Top ، 2vw Bottom

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

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

تصميم النص رقم 2: نص ذو نسيج خط عمودي

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

إعدادات النص

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

خط النص: بوبينز
وزن خط النص: غامق للغاية
حجم خط النص: 8vw
ارتفاع خط النص: 1em
اتجاه النص: الوسط
الهامش المخصص: 0 بكسل للأعلى و 0 بكسل للأسفل

إعدادات الصف

ستكون إعدادات الصف مماثلة لمثال التصميم الأول ، لذا يمكنك نسخ أنماط الصف ولصقها في هذا الصف. أو قم فقط بتحديث إعدادات الصف كما يلي:

العرض المخصص: 100٪
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

إعدادات القسم

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

العرض: 70٪

نمط الفاصل العلوي: انظر الصورة
لون الحاجز العلوي: #ffffff
ارتفاع الحاجز العلوي: 8vw
تكرار الحاجز العلوي الأفقي: 150x
ترتيب الفاصل العلوي: فوق محتوى القسم

نمط الحاجز السفلي: انظر الصورة
لون الحاجز السفلي: #ffffff
ارتفاع الحاجز السفلي: 8vw
تكرار المقسم السفلي الأفقي: 150x
الوجه الفاصل السفلي: عمودي
ترتيب الحاجز السفلي: فوق محتوى القسم

الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

مفتاح هذا التصميم هو خيار Divider Horizontal Repeat. يؤدي تعيين تكرار المقسم الأفقي إلى 150x بارتفاع يساوي ارتفاع النص إلى إنشاء سلسلة من الأسطر الرأسية المتداخلة التي تمتد من أعلى القسم وأسفله. لا تنس ضبط "الحاجز السفلي" على الوجه الرأسي بحيث تمتد "الخطوط" لأعلى.

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

تصميم رقم 3: نص مع نسيج جزئي في الأعلى والأسفل

لتسريع عملية هذا التصميم التالي ، امض قدمًا وقم بتكرار القسم الذي أنشأته للتو في مثال التصميم الثاني أعلاه.

تحديث إعدادات القسم

لون الخلفية: # e02b20

نمط الفاصل العلوي: انظر الصورة
لون الحاجز العلوي: # e02b20
ارتفاع الحاجز العلوي: 3vw
تكرار الحاجز العلوي الأفقي: 30x

نمط الحاجز السفلي: انظر الصورة
لون الحاجز السفلي: # e02b20
ارتفاع الحاجز السفلي: 3vw
تكرار المقسم السفلي الأفقي: 30x

المفتاح هنا هو التأكد من تطابق لون الفاصل مع لون خلفية القسم بحيث تكون الفواصل مرئية فقط حيث تتداخل مع النص.

تحديث إعدادات النص

الآن كل ما تبقى هو تحديث لون نص النص:

لون نص النص: #ffffff

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

بديل تصميم ممتع للتصميم رقم 3

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

خلفية متدرجة اللون الأيسر: # 68a4d8 (السماء)
تدرج الخلفية اللون الصحيح: # 1c7503 (العشب)
موقف البداية: 82٪
موقف النهاية: 0٪
الحشو المخصص: أعلى 5vw
نمط الحاجز العلوي: السحب (أو الفقاعات؟)
لون الحاجز السفلي: # 1c7503

ثم قم بتحديث لون النص إلى # 000835

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

ماذا عن الجوال؟

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

افكار اخيرة

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

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

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

هتافات!