كيفية تدوير النص لتصميمات التخطيط الفريدة في Divi (برنامج تعليمي + تنزيل تخطيط مجاني)

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

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

هيا بنا نبدأ.

نظرة خاطفة

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

قم بتنزيل التخطيط الكامل من هذا البرنامج التعليمي مجانًا

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

قم بتنزيل التخطيط

تنزيل مجاني

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

تحميل

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

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

الآن دعنا نعود إلى البرنامج التعليمي.

أشياء يجب وضعها في الاعتبار عند تدوير النص

أي اتجاه يجب تدوير النص؟

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

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

مشكلة التعتيم

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

الجزء 1: بناء الرأس بنص عمودي

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

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

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

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

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

• صورة الخلفية: [أضف صورة بعرض 1920 بكسل على الأقل]
• لون خلفية العمود 1: # 121212

• العرض المخصص: 100٪
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• الحشو المخصص (سطح المكتب): 0 بكسل أعلى ، 0 بكسل أسفل
• الحشو المخصص (الجهاز اللوحي): يسار 40٪
• الحشو المخصص (الهاتف): 30٪ صحيح
• مساحة العمود 1 المخصصة (سطح المكتب): 200 بكسل للأعلى و 200 بكسل للأسفل
• مساحة العمود 1 المخصصة (الكمبيوتر اللوحي): 150 بكسل للأعلى و 150 بكسل للأسفل

• Box Shadow: انظر لقطة الشاشة
• مربع الظل الوضع الأفقي: 0 بكسل
• مربع الظل الوضع الرأسي: -100 بكسل
• لون الظل: # f6454e

إنشاء الوحدة النمطية Blurb

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

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

• العنوان: ديفي ديزاين
• المحتوى: المحتوى الخاص بك يذهب هنا.
• استخدام الأيقونة: نعم
• الرمز: مصباح

• لون الأيقونة: # f6454e
• حجم خط الأيقونة: 32 بكسل
• اتجاه النص: الوسط
• مستوى عنوان العنوان: H1 (لأنه العنوان الرئيسي للصفحة)
• خط العنوان: Muli
• نمط خط العنوان: TT
• لون نص العنوان: #ffffff
• حجم نص العنوان: 70 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 36 بكسل (هاتف)
• لون النص الأساسي: #cccccc
• تباعد حروف الجسم: 4 بكسل
• العرض: 500 بكسل
• محاذاة الوحدة: مركز

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

تدوير الوحدة النمطية Blurb باستخدام خيارات التحويل

لتدوير وحدة blurb (وجميع محتوياتها) ، قم بتحديث خيارات التحويل التالية:

• تحويل تدوير المحور X: -90deg

سيكون عليك إدخال قيمة -90deg يدويًا. سيعطيك هذا محاذاة رأسية من الأسفل إلى الأعلى للمحتوى.

قد تلاحظ أن النص ضبابي بعض الشيء إذا كنت تستخدم Chrome أو Safari. يمكن أن يحدث هذا أحيانًا عند استخدام خاصية التحويل: تدوير. لإصلاح ذلك ، يمكنك ضبط Transform Origin قليلاً على النحو التالي:

• المحور ص لأصل التحويل: 51٪

قد تضطر إلى تعديل هذه القيمة قليلاً حتى يصبح النص واضحًا. على سبيل المثال ، قد تبدو نسبة 52٪ واضحة في بعض التصميمات.

إنشاء زر عمودي

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

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

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

• لون الخلفية: # f6454e
• العرض المخصص: 100٪
• عرض الحضيض: 1

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

• محاذاة الزر: المركز
• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 16 بكسل
• لون نص الزر: #ffffff
• عرض حد الزر: 0 بكسل
• تباعد حرف الزر: 9 بكسل
• وزن الخط: خفيف
• نمط الخط: TT
• رمز الزر: السهم الأيمن

تدوير ووضع الزر

لتدوير الزر ووضعه ، سنستخدم مزيجًا من الهوامش وتحويل التدوير على النحو التالي:

• الهامش المخصص (سطح المكتب): -50 بكسل للأعلى ، و 50 بكسل للأسفل ، و -50 بكسل لليسار
• الهامش المخصص (الكمبيوتر اللوحي): 0 بكسل متبقي
• تحويل تدوير المحور X: 90 درجة

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

الجزء 2: تدوير وحدات النص لإنشاء تسميات قطرية

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

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

قم بإنشاء قسم عادي جديد بصف من ثلاثة أعمدة. ثم أضف وحدة دعاية مغالى فيها إلى العمود الأول.

اختر استخدام رمز المصباح بدلاً من الصورة الافتراضية.

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

• لون الأيقونة: # f6454e
• حجم خط الأيقونة: 32 بكسل
• الحشو المخصص: 3vw bottom ، 3vw left ، 3vw right

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

• لون خلفية العمود 1: #eeeeee
• لون خلفية العمود 2: #eeeeee
• لون خلفية العمود 3: #eeeeee
• معادلة ارتفاعات العمود: نعم

هذه الخطوة التالية مهمة عندما نضيف تصميم ملصق وحدة النص المستدير. نريد إخفاء تجاوز وحدة النص خارج العمود. للتأكد من حدوث ذلك ، نحتاج إلى إضافة خاصية "overflow: hidden" إلى كل عمود من الأعمدة كـ CSS مخصص.

ضمن علامة التبويب خيارات متقدمة ، أضف CSS المخصص التالي:

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

overflow: hidden;

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

overflow: hidden;

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

overflow: hidden;

إضافة وتدوير وحدة النص كتسمية

بعد ذلك ، أضف وحدة نصية أعلى وحدة دعاية مغالى فيها مباشرةً في العمود 1.

قم بتحديث محتوى النص بكلمة "مميز".

ثم نمط وحدة النص على النحو التالي:

• لون الخلفية: # f6454e
• خط النص: مولي
• وزن خط النص: شبه عريض
• لون نص النص: #ffffff
• تباعد حروف النص: 3 بكسل
• ارتفاع خط النص: 2.5em
• اتجاه النص: الوسط

الآن امنح وحدة النص عرضًا مخصصًا على النحو التالي:

• العرض: 180 بكسل
• وحدة المحاذاة: اليسار

بعد ذلك ، ضع وحدة النص في الزاوية اليسرى العليا من العمود باستخدام خيارات التحويل التالية:

• تحويل المحور السيني للترجمة: -25٪
• تحويل المحور ص للترجمة: 70٪

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

تحويل تدوير المحور X: -45deg

لاحظ أن تجاوز وحدة النص مخفي خارج العمود لإكمال التصميم.

كل ما تبقى لنا هو نسخ الوحدات في العمود الأول ولصقها في العمود 2 والعمود 3.

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

الجزء 3: إنشاء عناوين عمودية للمحتوى الخاص بك

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

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

أنشئ قسمًا عاديًا جديدًا بصف عمود واحد.

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

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

• وضع الصورة / الدعاية: يسار
• الهامش المخصص (سطح المكتب): 200 بكسل متبقية
• الهامش المخصص (الهاتف): 0 بكسل متبقي
• الحشو المخصص: 100 بكسل للأعلى ، 100 بكسل للأسفل

يُنشئ الهامش الأيسر المساحة التي سنحتاجها لوحدة النص الرأسي التي سنضيفها.

ثم أضف حدًا إلى وحدة blurb كما يلي:

• عرض الحدود: 2 بكسل
• لون الحدود: #eeeeee

إنشاء وحدة النص

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

بعد ذلك ، أضف html التالي في مربع المحتوى (تأكد من تحديد علامة تبويب النص):

<ol>
  <li><h5>Design</h5>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
  </li>
</ol>

هذا html يستخدم قائمة مرتبة (ol) وعلامة h5 وقائمة غير مرتبة (ul). يتيح لنا ذلك تخصيص كل عنصر من عناصر القائمة و h5 بشكل منفصل باستخدام خيارات التصميم المضمنة في Divi داخل وحدة النص.

يمكن استخدام هذه التقنية لإنشاء بعض تصميمات القائمة المذهلة.

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

• خط قائمة غير مرتبة: Muli
• وزن خط القائمة غير المرتبة: خفيف
• حجم نص القائمة غير المرتبة: 15 بكسل
• نوع نمط قائمة غير مرتبة: لا شيء
• المسافة البادئة لعنصر القائمة غير المرتبة: 0.01 بكسل

• خط القائمة المطلوبة: Abril Fatface
• لون نص القائمة المطلوبة:
• حجم نص القائمة المطلوبة: 40 بكسل
• قائمة تباعد الأحرف المطلوبة: 4 بكسل
• ارتفاع سطر القائمة المطلوبة: 1.3em
• نوع نمط القائمة المرتبة: عشري يؤدي إلى الصفر

• خط العنوان 5: مولي
• وزن خط العنوان 5: خفيف للغاية
• نمط خط العنوان 5: TT
• حجم نص العنوان 5: 62 بكسل

تحجيم وحدة النص وتدويرها وتحديد موضعها

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

• العرض المخصص: 300 بكسل
• وحدة المحاذاة: اليسار

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

• تحويل المحور X: -90deg (سطح المكتب) ، 0deg (الهاتف)

نحتاج إلى إعادة ضبط الدوران إلى 0deg لعرض الهاتف.

قم بعد ذلك بتحديث خيار Transform Translate:

• تحويل المحور السيني للترجمة: -10٪ (سطح المكتب) ، 0٪ (الهاتف)
• تحويل المحور ص للترجمة: 50٪ (سطح المكتب) ، 0٪ (الهاتف)

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

• الهامش المخصص (سطح المكتب): -150 بكسل للأسفل
• الهامش المخصص (الهاتف): 0 بكسل أسفل

كرر المقطع وقم بتحديث رقم بدء القائمة المطلوبة

لإنشاء المزيد من أقسام هذا التخطيط ، يمكنك تكرار القسم. سيظل رقم القائمة المرتب "1". لتغيير هذا ، تحتاج إلى استبدال علامة القائمة (ol) بترتيب الفتح بما يلي:

<ol start="2">

سيسمح هذا للقائمة بالبدء بالرقم 2 بدلاً من 1.

هذا كل شيء. كلنا انتهينا!

التصميم النهائي للتخطيط مع تصميمات نصية مستديرة

سطح المكتب

الجهاز اللوحي والهاتف

افكار اخيرة

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

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

هتافات!