يمكن أن يمنح استخدام رموز العروض التقديمية كلسات جمالية تخطيطك تصميمًا فريدًا ربما لم تفكر فيه من قبل. بالإضافة إلى وضع رمز وحدة العرض التقديمي لتغطية وحدة نصية ، يمكنك استخدام خلفية وحدود وحدة النص لتصميم الرمز. هذا يخلق لهجة تصميم جميلة تؤطر المحتوى مع إعطاء أيقوناتك تصميمًا فريدًا تمامًا.
في هذا البرنامج التعليمي ، سأوضح لك كيفية تبسيط أيقونات العرض التقديمي كلكنات تصميم للمحتوى الخاص بك في Divi.
مسح
فيما يلي بعض الأمثلة على التصميم الذي سنبنيه في هذا البرنامج التعليمي.
قم بتنزيل نماذج المخططات لهذا البرنامج التعليمي
للحصول على تصميم نمط تمييز وحدة بلورب المجاني، عليك أولاً تنزيله باستخدام الزر أدناه. للوصول إلى التنزيل، عليك الاشتراك في قائمتنا البريدية اليومية Divi باستخدام النموذج أدناه. كمشترك جديد، ستتلقى المزيد من منتجات Divi الرائعة وحزمة تصميم Divi مجانية كل اثنين! إذا كنت مشتركًا بالفعل في القائمة، فأدخل بريدك الإلكتروني أدناه وانقر على "تنزيل". لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.
تحميل
ابدأ بالتصميم من الصفر
للبدء ، قم بإنشاء صفحة جديدة وقم بتسمية صفحتك بعنوان. بعد ذلك ، انشر Divi builder على نظام الجزء العام. أضف قسمًا عاديًا بصف من عمود واحد. قبل إضافة الوحدة الأولى ، قم بتحديث إعدادات الصف بما يلي:
استخدم عرض الحضيض المخصص: نعم
عرض مزراب مخصص: 1
سيؤدي ذلك إلى إزالة أي هوامش مخصصة بين الوحدات النمطية.
إنشاء وحدة النص
ثم أضف وحدة نصية داخل السطر.
قم بتحديث الوحدة النمطية للنص بنص التعبئة التالي:
خدماتنا يعرض هذا القسم قائمة الخدمات المختلفة التي نقدمها لعملائنا.
أسلب وحدة النص
الآن ، قم بتحديث باقي معلمة وحدة النص كما يلي:
- لون الخلفية: #ffffff
- العنوان 2 الخط: Nunito
- العنوان 2 وزن الخط: غامق
- العنوان 2 نمط الخط: TT
- العنوان 2 لون النص: #f24a5b
- العنوان 2 حجم النص: 42 بكسل (سطح المكتب) ، 32 بكسل (لوحي) ، 22 بكسل (هاتف)
- العنوان 2 تباعد الأحرف: 16px
- العنوان 2 ارتفاع الخط: 1.3em
- العرض: 500px (سطح المكتب) ، 490px (الكمبيوتر اللوحي)
- محاذاة الوحدة: المركز
- الحشوة المخصصة (سطح المكتب): 40px في الأعلى ، 40px في الأسفل ، 50px في اليسار ، 50px في اليمين
- الحشوة المخصصة (الهاتف): 20px على اليسار ، 20px على اليمين
- عرض الحد: 10px
- لون الحدود: # fffff
نظرًا لأننا سنقوم بتداخل وحدة النص مع أيقونات العرض التقديمي ، فنحن بحاجة إلى التأكد من أن وحدة النص تقع فوق الرموز بترتيب z-space. للقيام بذلك ، نحتاج أولاً إلى إضافة مقتطف CSS التالي في منطقة CSS للعنصر الرئيسي لوحدة Text:
الموقف: نسبي ؛
ثم قم بتعيين قيمة الفهرس z على 1.
الآن ، سيتم وضع هذه الوحدة النصية أعلى أي وحدات أخرى تتداخل ، وهذا أمر مهم للتصميم.
قم بإنشاء رمز Blurb
الآن أصبحنا جاهزين لإنشاء أيقونة الملخص الأولى. للقيام بذلك، نضيف وحدة الملخص ونسحبها إلى أعلى وحدة النص. ثم نحذف المحتوى البديل (نص العنوان والنص الأساسي) وننقر لاستخدام أيقونة بدلاً من صورة للملخص.
ثم قم بتحديث معلمات التصميم التالية:
- لون الرمز: # 2ea3f2
- استخدام حجم خط الأيقونة: نعم
- حجم خط الأيقونة: 100 بكسل
- الهامش المخصص: 0px في الجزء السفلي (يؤدي ذلك إلى إزالة الهامش السفلي الافتراضي بين الوحدات النمطية ، ليس ضروريًا إذا كنت تستخدم عرض هامش التوثيق 1)
بعد ذلك ، نظرًا لأننا لا نستخدم أي نص مع الوحدة (الرمز فقط) ، يمكننا إزالة الهامش السفلي الافتراضي أسفل أيقونة التخطيط. للقيام بذلك ، أضف كود CSS المخصص التالي إلى منطقة Blurb Image CSS:
Blurb Image CSS:
الهامش السفلي: 0 بكسل
قم بتكرار رمز Blurb
قبل أن نبدأ في وضع الدعاية المغلوطة ، دعنا نمضي قدمًا ، ونكرر وحدة الدعاية الدعاية واسحبها أسفل وحدة النص. يجب أن يكون لديك الآن رمز عرض أعلى وأسفل وحدة النص.
وضع رموز العرض التقديمي باستخدام ترجمة التحويل
لوضع أيقونات العرض التقديمي ، سوف نستخدم خيارات تحويل Divi ، والتي تسمح لنا بوضع وحدة العرض التقديمي مع الرمز في أي مكان على الصفحة.
وضع أيقونة Blurb #1
لوضع أيقونة blurb العلوية ، افتح إعدادات وحدة blurb وقم بتحديث ما يلي:
- تحويل ترجمة محور X (سطح المكتب): -242px
- تحويل ترجمة المحور ص (سطح المكتب): 50 بكسل
- تحويل ترجمة محور X (الهاتف): -170px
ومع ذلك ، يمكنك إضافة هذا وفقًا للإعدادات التي قمت بإعدادها.
وضع أيقونة Blurb # 2
قبل وضع رمز العرض التقديمي هذا ، دعنا نجعله أكبر. للقيام بذلك ، افتح إعدادات وحدة Blurb وقم بتغيير حجم خط الرمز إلى 150 بكسل.
ثم ضع رمز العرض التقديمي عن طريق تحديث خيارات التحويل التالية:
- تحويل ترجمة محور X (سطح المكتب): 242px
- تحويل ترجمة المحور ص (سطح المكتب): -100 بكسل
- تحويل ترجمة المحور السيني (الهاتف): 190px
إنشاء قسم آخر
من الآن فصاعدًا ، يمكننا أن نستلهم ما فعلناه لإنشاء منطقة أخرى بترتيب مختلف. كل ما عليك فعله هو إنشاء عمود جديد ونسخ الوحدات النمطية السابقة. لإجراء نسخ متعددة ، مرر الماوس فوق كل وحدة أثناء الضغط باستمرار على مفتاح CTRL على لوحة المفاتيح.
نتيجة نهائية
الآن دعونا نرى النتيجة النهائية.
الأفكار النهائية
إضافة أيقونات العرض التقديمي كعناصر تصميمية مميزة لمحتواك مثال على كيفية دمج وحدتين لإنشاء تصميم فريد تمامًا. في هذه الحالة، تُشكّل خلفية وحدود وحدة النص طبقة جزئية للأيقونات المحيطة. النتيجة فريدة وتفتح المجال لاستكشاف تنوعات تصميمية متعددة. لا تتردد في استكشاف أيقونات ومجموعات ألوان مختلفة لإنشاء تصميم يناسب احتياجاتك.
آمل أن أسمع منك في التعليقات.