كيف تصبح مبدعًا مع خلفية أيقونة Blurb في Divi

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

دعنا نذهب اليها.

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على نتيجة جميع الأمثلة الثلاثة عبر أحجام الشاشات المختلفة.

مثال 1

سطح المكتب

متحرك

المثال رقم 2

سطح المكتب

متحرك

المثال رقم 3

سطح المكتب

متحرك

قم بتنزيل أمثلة لخلفية رمز Blurb مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

خطوات عامة

إضافة قسم جديد

خلفية

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

• لون الخلفية: # f7f7f7

تباعد

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

• الحشوة العلوية والسفلية: 120 بكسل

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

قبل إضافة أي وحدات نمطية ، اضبط حجم الصف.

• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

ثم اضبط المساحة المتروكة في إعدادات التباعد.

• الحشو العلوي: 8vw
• الحشو السفلي: 15vw
• الحشوة اليسرى واليمنى: 12vw

العمود 1

بمجرد الانتهاء من تعديل إعدادات الصف ، قم بإجراء بعض التغييرات على العمود الأول.

خلفية

أولاً ، أضف خلفية بيضاء.

• لون الخلفية: أبيض #ffffff

الحدود

ثم أضف بعض نصف قطر الحد.

• الزوايا الدائرية: 2vw في جميع الزوايا الأربع

مربع الظل

أخيرًا ، أضف مربع الظل.

• Box-Shadow: الخيار الأول
• قوة Box-Shadow Blur: 47 بكسل

صف استنساخ مرتين

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

أعد إنشاء المثال رقم 1

أضف الوحدة النمطية للدعاية إلى العمود 1

محو المحتوى الافتراضي

الآن بعد أن أعددنا صفوفنا وأعمدتنا ، يمكننا البدء في إضافة وحدات نمطية إلى العمود 1 من الصف الأول. أولاً ، أضف وحدة دعاية مغالى فيها وامسح كل العنوان الافتراضي والنص الأساسي.

اختر الرمز

ثم اختر رمزًا بدلاً من صورة.

• الرمز: الارتباط

خلفية

أضف لون خلفية أسود إلى وحدة blurb.

• لون الخلفية: أسود # 000000

إعدادات الرمز

بعد ذلك ، قم بتغيير إعدادات الرمز.

• لون الأيقونة: أصفر # edf000
• وضع الرمز: الأعلى
• حجم خط الرمز:
  • سطح المكتب: 3vw
  • الجهاز اللوحي: 11vw
  • هاتف: 13vw

تحجيم

تابع عن طريق ضبط حجم الوحدة.

• عرض المحتوى: 100٪
• عرض:
  • سطح المكتب: 11vw
  • الجهاز اللوحي: 19vw
  • هاتف: 22vw

تباعد

أضف بعض قيم التباعد أيضًا.

• الهامش العلوي: -5vw
• الهامش السفلي: 0vw
• الهامش الأيسر: -1vw
• الحشو العلوي والحشو السفلي: 4vw

الحدود

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

• الزوايا الدائرية: 50vw ، 0vw في الزاوية اليسرى السفلية.

مربع الظل

أخيرًا ، أضف ظل الصندوق.

• Box-Shadow: الخيار الأول
• قوة Box-Shadow Blur: 50 بكسل

لغة تنسيق ويب حسب الطلب

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

• صورة دعاية: margin-bottom: 0px ؛

margin-bottom: 0px;

أضف وحدة نصية إلى العمود 1

أضف محتوى H3

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

خلفية

انتقل إلى إعدادات الخلفية وأضف خلفية متدرجة.

• الخلفية: التدرج
• لون واحد: شفاف
• اللون الثاني: أصفر # edf000
• اتجاه التدرج: 180 درجة
• موقف البداية والنهاية: 74٪

نص العنوان

ثم ، نمط نص H3.

• مستوى عنوان نص العنوان: H3
• خط H3: Josefin Sans
• محاذاة H3: الوسط
• لون خط H3: أسود #oooooo
• حجم نص H3:
  • سطح المكتب: 2.4vw
  • الجهاز اللوحي: 3.4vw
  • الهاتف: 4.8vw
• تباعد الأحرف H3: 0em

تحجيم

في إعدادات التحجيم ، اضبط عرض الجهاز اللوحي والهاتف.

• عرض:
  • الجهاز اللوحي: 50٪
  • الهاتف: 60٪

تباعد

تابع بالانتقال إلى إعدادات التباعد وضبط قيم الهامش.

• الهامش الأيمن والأيسر: 5vw
• الحشوة العلوية: 1vw

تحول

أخيرًا ، قم بتدوير الوحدة النمطية باستخدام خيارات التحويل.

• ترجمة التحويل:
  • المحور السيني: -20vw
  • المحور ص: 13vw
• تدوير التحويل: الخيار الأول ، 280 درجة

إضافة وحدة دعوة إلى العمل إلى العمود 1

إزالة محتوى العنوان الافتراضي وإضافة زر ومحتوى نصي

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

إضافة رابط

أضف ارتباطًا ذا صلة بالزر.

خلفية

تأكد من عدم وجود لون للخلفية.

نص أساسي

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص الأساسي.

• خط الجسم: نص قرمزي
• محاذاة النص الأساسي: يسار
• لون النص الأساسي: رمادي غامق # 666666
• حجم النص الأساسي:
  • سطح المكتب: 1.2vw
  • الجهاز اللوحي: 2.6vw
  • الهاتف: 3.1vw
• ارتفاع خط الجسم: 1.8em

زر

تعديل أنماط الزر أيضا.

• حجم نص الزر:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 3vw
• لون نص الزر: رمادي غامق جدا # 3f3f3f
• لون حدود الزر: رمادي غامق جدا # 3f3f3f
• خط الزر: Josefin Sans
• هامش الزر: 3vw
• الزر العلوي والسفلي: 1vw
• زر الحشو الأيسر والأيمن: 3vw

تباعد

أكمل إعدادات الوحدة بإضافة بعض المساحة المتروكة اليمنى واليسرى.

• الحشوة اليسرى واليمنى: 7vw

احذف العمود الثاني والعمود المستنسخ 1

اضبط الإعدادات في العمود 2

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

الوحدة النمطية Blurb

ابدأ بتغيير لون رمز وحدة blurb.

• لون الأيقونة: أكوا # 00ffd4

وحدة النص

قم بتغيير الخلفية المتدرجة وانسخ وحدة النص بعد ذلك.

• لون الخلفية: أكوا # 00ffd4
• تغيير المحتوى

أعد إنشاء المثال رقم 2

أضف الوحدة النمطية للدعاية إلى العمود 1

حذف المحتوى الافتراضي

إلى المثال الثاني! أضف وحدة دعاية دعاية إلى العمود 1 واحذف كل المحتوى الافتراضي.

اختر الرمز

ثم اختر رمزًا.

خلفية

الآن ، أضف لون خلفية أصفر.

• لون الخلفية: أصفر # edf000

أيقونة

تابع عن طريق تعديل إعدادات الرمز في علامة تبويب التصميم.

• لون الرمز: أبيض #ffffff
• وضع الرمز: الأعلى
• حجم خط الرمز:
  • سطح المكتب: 3vw
  • الجهاز اللوحي: 11vw
  • هاتف: 12vw

تحجيم

بمجرد تصميم اللون والخلفية ، اضبط حجم الوحدة.

• عرض المحتوى: 100٪

تباعد

قم بتعديل إعدادات التباعد أيضًا.

• الهامش السفلي: 0vw
• الهامش الأيمن والأيسر: 3vw
• الحشوة العلوية والسفلية: 2vw

الحدود

أضف بعض نصف قطر الحد إلى كل زاوية تالية.

• الزوايا الدائرية: 2vw في جميع الزوايا الأربع

مربع الظل

أكمل تصميم الوحدة بإضافة ظل مربع دقيق.

• Box-Shadow: الخيار الأول

قم بإزالة ظل الصندوق ولون الخلفية للعمود 1

افتح إعدادات العمود 1 بعد ذلك وقم بإزالة لون الخلفية وظل الصندوق.

لغة تنسيق ويب حسب الطلب

قم بإزالة الهامش السفلي الافتراضي المطبق على أيقونة الدعاية الدعاية عن طريق إضافة سطر واحد من كود CSS إلى علامة التبويب المتقدمة.

• صورة دعاية: margin-bottom: 0px ؛

margin-bottom: 0px;

إضافة وحدة دعوة إلى العمل إلى العمود 1

أضف محتوى العنوان ومحتوى الجسم ومحتوى الزر

أسفل وحدة blurb ، أضف وحدة دعوة إلى العمل وأدخل بعض المحتوى الذي تختاره.

إضافة رابط

أضف ارتباطًا إلى الزر التالي.

خلفية

تواصل بإضافة خلفية بيضاء.

• لون الخلفية: أبيض #ffffff

نص العنوان

في علامة تبويب التصميم ، حدد نمط نص عنوان H3.

• مستوى عنوان العنوان: H3
• خط H3: Josefin Sans
• لون خط H3: رمادي غامق جدًا # 3f3f3f
• حجم H3:
  • سطح المكتب: 2vw
  • الجهاز اللوحي: 4vw
  • الهاتف: 6vw
• ارتفاع الخط H3: 2.3em

نص أساسي

ثم ، نمط النص الأساسي.

• خط الجسم: نص قرمزي
• محاذاة النص الأساسي: يسار
• لون النص الأساسي: رمادي غامق # 666666
• حجم النص الأساسي:
  • سطح المكتب: 1.1vw
  • الجهاز اللوحي: 2.2vw
  • الهاتف: 3.1vw
• ارتفاع خط الجسم: 1.8em

زر

انتقل إلى إعدادات الزر وحدد نمط الزر على النحو التالي:

• حجم نص الزر:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 3vw
• لون نص الزر: رمادي غامق جدا # 3f3f3f
• خط الزر: Josefin Sans
• عرض حد الزر: 2-x
• لون حدود الزر: رمادي غامق جدا # 3f3f3f
• الزر العلوي والسفلي الهامش: 3vw
• الزر العلوي والسفلي: 1vw
• زر الحشو الأيسر والأيمن: 3vw

تباعد

الآن ، اضبط التباعد.

• الهامش السفلي: -1vw
• الحشوة العلوية: 6vw
• الحشوة اليسرى واليمنى: 7vw

الحدود

ثم قم بتدوير الزوايا في إعدادات الحدود.

• زوايا مدورة: 2vw

مربع الظل

أخيرًا ، أضف ظل الصندوق.

• Box-Shadow: الخيار الأول
• قوة Box-Shadow Blur: 50 بكسل

احذف العمود الثاني والعمود المستنسخ 1

اضبط الإعدادات في العمود 2

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

الوحدة النمطية Blurb

قم بتغيير خلفية الوحدة النمطية من اللون الأصفر إلى اللون الأزرق المائي.

• لون أيقونة الخلفية: أكوا # 00ffd4

وحدة الدعوة إلى العمل

قم بتغيير محتوى وحدة الدعوة إلى العمل والارتباط أيضًا.

• تغيير محتوى العنوان
• تغيير الارتباط

أعد إنشاء المثال رقم 3

أضف الوحدة النمطية للدعاية إلى العمود 1

حذف المحتوى الافتراضي

إلى المثال التالي والأخير! أضف وحدة دعاية مغالى فيها إلى العمود 1 وامسح المحتوى الافتراضي.

اختر الرمز

اختر رمزا.

خلفية

أضف خلفية صفراء زاهية للوحدة.

• لون الخلفية: أصفر # f7f426

أيقونة

اجعل الأيقونة سوداء واضبط موضعها

• لون الأيقونة: أسود # 000000
• وضع الرمز: اليسار
• حجم خط الرمز:
  • سطح المكتب: 3vw
  • الجهاز اللوحي + الهاتف: 8vw

تحجيم

تابع عن طريق تعديل عرض الوحدة وارتفاعها.

• عرض المحتوى: 100٪
• الارتفاع: 23vw

تباعد

علاوة على ذلك ، اضبط إعدادات التباعد.

• الهامش الأيسر: 3vw
• الهامش الأيمن: 25vw
• الحشوة العلوية: 2vw
• الحشوة اليسرى: 1vw

الحدود

أضف بعض نصف قطر الحدود أيضًا.

• الزوايا الدائرية: 2vw في جميع الزوايا

مربع الظل

ثم أضف ظل الصندوق.

• Box-Shadow: الخيار الأول

تحول

أخيرًا ، قم بتغيير موضع الوحدة النمطية باستخدام قيم ترجمة التحويل المخصصة.

• المحور السيني: -6vw
• المحور ص: 1vw

قم بإزالة لون الخلفية وظل الصندوق من العمود 1

انتقل إلى إعدادات العمود 1 وقم بإزالة لون الخلفية وظل الصندوق.

إضافة وحدة دعوة إلى العمل إلى العمود 1

أضف عنوانًا ونصًا ومحتوى الزر

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

إضافة رابط

ثم قم بإضافة ارتباط إلى الزر.

خلفية

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

• لون الخلفية: أسود #oooooo

نص العنوان

اضبط إعدادات نص H3 بعد ذلك.

• مستوى عنوان العنوان: H3
• خط H3: Josefin Sans
• لون خط H3: أصفر ساطع # f7f426
• حجم خط H3:
  • سطح المكتب: 2vw
  • الجهاز اللوحي: 4vw
  • الهاتف: 6vw
• ارتفاع الخط H3: 2.3em

نص أساسي

قم بتغيير إعدادات النص الأساسي أيضًا.

• خط الجسم: نص قرمزي
• محاذاة النص الأساسي: يسار
• لون النص الأساسي: أبيض # 000000
• حجم النص الأساسي:
  • سطح المكتب: 1.2vw
  • الجهاز اللوحي: 2.2vw
  • الهاتف: 3.1vw
• ارتفاع خط الجسم: 1.8em

زر

بعد ذلك ، قم بتصميم الزر على النحو التالي.

• حجم نص الزر:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 3vw
• لون نص الزر: أكوا # 00ffd4
• لون حدود الزر: أكوا # 00ffd4
• خط الزر: Josefin Sans
• الهامش العلوي والسفلي للزر: 3vw
• الزر العلوي والسفلي: 1vw
• زر الحشو الأيسر والأيمن: 3vw

تحجيم

انتقل إلى إعدادات التحجيم وقم بإجراء بعض التغييرات.

• العرض: 90٪
• محاذاة الوحدة: المركز

تباعد

قم بتعديل إعدادات التباعد أيضًا.

• الهامش العلوي: -9vw
• الحشوة العلوية: 5vw
• الحشوة اليسرى واليمنى: 7vw

الحدود

افتح إعدادات الحدود بعد ذلك وأضف بعض نصف قطر الحد لكل زاوية.

• زوايا مدورة: 2vw

مربع الظل

نحن نستخدم ظل الصندوق الخفيف أيضًا.

• ظل المربع: الخيار الأول

تحويل الترجمة

أخيرًا ، قم بتغيير موضع وحدة الدعوة إلى العمل عن طريق تعديل إعدادات ترجمة التحويل.

• المحور ص: -18vw

احذف العمود الثاني والعمود المستنسخ 1

اضبط الإعدادات في العمود 2

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

الوحدة النمطية Blurb

في إعدادات الوحدة النمطية للدعاية الإعلامية ، قم بتغيير الخلفية من الأصفر إلى اللون الأزرق المائي.

• لون أيقونة الخلفية: أكوا # 00ffd4

وحدة الدعوة إلى العمل

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

• لون نص العنوان: أكوا # 00ffd4
• المحتوى
• لون الزر: # 00ffd4

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

مثال 1

سطح المكتب

متحرك

المثال رقم 2

سطح المكتب

متحرك

المثال رقم 3

سطح المكتب

متحرك

استنتاج

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