تكديس الطباعة لإنشاء 5 تصميمات عناوين فريدة في Divi

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

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

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة خاطفة على التصميمات الخمسة.

التصميم رقم 1

التصميم رقم 2

التصميم رقم 3

التصميم رقم 4

التصميم رقم 5

ابدء

سنقوم ببناء هذه التصاميم من الصفر. لذلك للبدء ، قم بإنشاء صفحة جديدة ، وقم بتسمية صفحتك بعنوان ، وانشر Visual Builder. حدد الخيار "Build from Scratch" وستكون جاهزًا لبدء البناء.

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

تصميم العنوان رقم 1

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

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

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

أضف صورة خلفية (بعرض 1920 بكسل على الأقل)
لون الخلفية المتدرج الأيسر: #ffffff
تدرج الخلفية اللون الأيمن: rgba (255،255،255،0)
وضع التدرج فوق صورة الخلفية: نعم

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

تدرج الخلفية اللون الأيسر: rgba (255،255،255،0)
تدرج الخلفية اللون الصحيح: #ffffff
العرض المخصص: 100٪
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

استبدل المحتوى الوهمي في مربع المحتوى برأس h2 يقرأ "التصميم" على النحو التالي:

<h2>design</h2>

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

خط العنوان 2: القاهرة
وزن خط العنوان 2: عادي
نمط خط العنوان 2: الأحرف الكبيرة (TT)
حجم نص العنوان 2: 8vw
العرض: 58٪ (كمبيوتر مكتبي) ، 16٪ (كمبيوتر لوحي) ، 18٪ (هاتف ذكي)
محاذاة الوحدة: المركز
الهامش المخصص: -10vw أعلى ، -10vw أسفل

قيم العرض المخصصة جنبًا إلى جنب مع حجم نص العنوان 8vw هي المفتاح لعمل هذا التصميم. يضغط العرض المخصص على النص بحيث يتراكم كل حرف فوق الآخر. تتغير قيمة النسبة المئوية للعرض بشكل كبير على الجهاز اللوحي لأن حجم العمود الذي يحتوي على وحدة النص ينتقل من 1/3 إلى عرض كامل. سيسمح تعيين نص العنوان على وحدة طول vw (عرض منفذ العرض) على تغيير حجم النص بشكل مثالي مع حجم نافذة المتصفح.

أخيرًا ، لننهي التصميم بحد على الجانب الأيمن والأيسر.

عرض الحد الأيمن: 4 بكسل
عرض الحد الأيسر: 4 بكسل

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

تصميم العنوان رقم 2

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

في مربع المحتوى ، أضف عنوان h3 التالي:

<h3>our process</h3>

ثم أضف خلفية بيضاء للوحدة:

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

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

حجم نص العنوان 2: 10vw
العرض: 100٪ (كمبيوتر مكتبي) ، 32٪ (كمبيوتر لوحي) ، 33٪ (هاتف ذكي)
خط العنوان 3: Ubuntu Condensed
العنوان 3 محاذاة النص: الوسط
حجم نص العنوان 3: 32 بكسل (سطح المكتب) ، 20 بكسل (الكمبيوتر اللوحي) ، 16 بكسل (الهاتف الذكي)

ثم قم بتحديث التباعد للوحدة النصية لجعلها أكثر استجابة على الهاتف المحمول:

الهامش المخصص (الكمبيوتر اللوحي): -5vw أعلى ، -10vw
الهامش المخصص (الهاتف الذكي): -5vw أعلى ، -12vw

الآن أخرج تدرج الخلفية في القسم والصف.

ثم أضف القليل من المساحة المتروكة إلى صفك عن طريق تحديث إعداد الصف التالي:

الحشو المخصص (سطح المكتب): 5vw Top ، 5vw Bottom
الحشو المخصص (الكمبيوتر اللوحي): 0vw أعلى ، 0vw أسفل

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

تصميم العنوان رقم 3

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

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

قم أولاً بحذف عنوان h3 في مربع المحتوى.

خط العنوان 2: Ubunto Condensed
حجم نص العنوان 2: 6vw
العرض: 54٪ (كمبيوتر مكتبي) ، 16.4٪ (كمبيوتر لوحي) ، 17.5٪ (هاتف ذكي)
محاذاة الوحدة: يسار (افتراضي)

لضبط الأجهزة المحمولة ، قم بتحديث التباعد التالي:

الهامش المخصص (الكمبيوتر اللوحي): -15vw أسفل
الهامش المخصص (الهاتف الذكي): -17vw أسفل

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

الحشو المخصص: 2vw Top ، 2vw Bottom ، 10vw Left

ثم أضف حدًا إلى الصف لتكمل حد الوحدة النمطية.

عرض الحد العلوي: 4 بكسل
عرض الحد السفلي: 4 بكسل

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

تحقق من النتيجة النهائية.

تصميم العنوان رقم 4

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

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

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

لون الخلفية: # 5b7796
لون النص: فاتح
خط العنوان 2: القاهرة
نمط خط العنوان 2: افتراضي
حجم نص العنوان 2: 10vw

حجم نص النص: 5vw
الحشو المخصص: 2vw Top ، 2vw Bottom ، 4vw left ، 4vw right

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

العرض الأيمن للحدود: 0.2em
لون الحد الأيمن: #ffffff

عرض الحد السفلي: 0.2em
لون الحد الأيمن: #ffffff

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

الآن لنمنحه ظل مربع للحصول على تأثير شبكة مكسور لطيف.

Box Shadow: انظر لقطة الشاشة
مربع الظل الأفقي: 20 بكسل
مربع الظل الرأسي: 20 بكسل
لون الظل: # 5b7796
موضع ظل المربع: الظل الخارجي

ثم قم بتحديث حجم الوحدة للجوال.

العرض: 50٪ (كمبيوتر مكتبي) ، 13٪ (كمبيوتر لوحي) ، 16٪ (هاتف ذكي)

لخطوة أخيرة ، قم بإزالة المساحة المتروكة وحدود الصف.

ثم تحقق من النتيجة النهائية.

تصميم العنوان رقم 5

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

أولاً ، افتح وحدة النص وأضف النص التالي أسفل عنوان h2 الخاص بك:

<h3>our process</h3>

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

نمط خط العنوان 2: الأحرف الكبيرة (TT)
العرض: 94٪ (كمبيوتر مكتبي) ، 29٪ (كمبيوتر لوحي) ، 29٪ (هاتف ذكي)

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

الهامش المخصص: -8vw أعلى ، -5vw أسفل
الحشو المخصص: 4vw Top ، 4vw Bottom

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

متجاوب

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

افكار اخيرة

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

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

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

هتافات!