كيفية تصميم تأملات للصور والنص في Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

قم بتنزيل تخطيط انعكاسات النص والصورة مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

ما تحتاجه للبدء

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

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

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

تتضمن الفكرة الأساسية وراء إنشاء تصميمات انعكاس في Divi ثلاث خطوات:

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

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

كيفية إنشاء انعكاس الصورة

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

ثم أضف وحدة صورة إلى الصف.

قم بتحميل الصورة التي تريدها من معرض الوسائط إلى وحدة الصورة. ثم قم بتحديث إعدادات الصورة التالية:

العرض الأقصى: 600 بكسل
محاذاة الوحدة: مركز
الهامش المخصص: 0 بكسل للأسفل

قم بإنشاء صورة معكوسة

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

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

العتامة: 40٪
مقياس تحويل المحور X: -100٪

خاصية مقياس التحويل هي ما يقلب الصورة بشكل سحري رأسيًا وأفقيًا لإنشاء نسخة معكوسة من الصورة.

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

أضف تراكب متدرج باستخدام وحدة نصية

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

انطلق وأنشئ وحدة نصية أسفل الصورة السفلية.

احذف المحتوى الافتراضي بحيث تكون وحدة النص فارغة.

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

تدرج الخلفية اللون الأيسر: rgba (255،255،255،0)
تدرج الخلفية اللون الصحيح: #ffffff

العرض: 100٪
ارتفاع: 50٪

ثم أضف CSS المخصص التالي إلى العنصر الرئيسي:

position: absolute !important;
top: 50%;

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

دعنا نتحقق من شكل التصميم حتى الآن.

إضافة لون الخلفية

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

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

لون الخلفية: # 000000
العرض: 100٪:
عرض max: 100٪؛
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

الآن دعنا نتحقق من النتيجة.

إضافة نص إلى تراكب وحدة النص

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

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

المحتوى: "انعكاس الصورة"
لون نص النص: #ffffff
حجم نص النص: 30 بكسل
اتجاه النص: الوسط

تصميم نهائي

هذا هو التصميم النهائي لانعكاس الصورة.

خلق انعكاس النص في Divi

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

إليك كيفية القيام بذلك.

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

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

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

خط النص: أوزوالد
نمط خط النص: TT
لون نص النص: # 333333
حجم نص النص: 10vw
ارتفاع سطر النص: .9em
اتجاه النص: الوسط
الهامش المخصص: 0 بكسل للأسفل
الحشو المخصص: 4vw top

قم بتحديث إعدادات الصف

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

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

صورة الخلفية: إدراج صورة الخلفية
عرض الحضيض: 1
العرض: 100٪
العرض الأقصى: 100٪
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

هذا ما يبدو عليه التصميم حتى الآن.

إنشاء صف انعكاس النص

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

قم بتكرار الصف وتحديث ما يلي:

مقياس التحويل Y محور: -100٪

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

أضف تراكب متدرج باستخدام وحدة نصية

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

انطلق وأنشئ وحدة نصية جديدة ضمن وحدة النص في الصف السفلي.

افتح إعدادات وحدة النص الجديدة واحذف المحتوى بحيث تكون وحدة النص فارغة.

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

لون الخلفية المتدرج الأيسر: #ffffff
تدرج الخلفية اللون الأيمن: rgba (255،255،255،0.13)
موقف البداية: 38٪

العرض: 100٪
ارتفاع: 100٪

ثم أضف CSS المخصص التالي إلى العنصر الرئيسي:

position: absolute !important;
top: 0;

هذا كل شيء!

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

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

هنا نفس التصميم بدون أي صور خلفية.

افكار اخيرة

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

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

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

هتافات!