كيفية تصميم أيقونات Blurb كنغمات تصميم للمحتوى في Divi

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

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

دعنا نتعمق!

نظرة خاطفة

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

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

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

تحميل الملف

تنزيل مجاني

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

تحميل

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

الشروع في بناء التصميم من الصفر

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

استخدام عرض مزراب مخصص: نعم
عرض مزراب مخصص: 1

سيؤدي هذا إلى التخلص من أي هوامش مخصصة بين الوحدات.

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

بعد ذلك ، أضف وحدة نصية داخل الصف.

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

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. </p>

تصميم وحدة النص

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

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

• خط العنوان 2: Nunito
• وزن خط العنوان 2: غامق
• نمط خط العنوان 2: TT
• لون نص العنوان 2: # f24a5b
• حجم نص العنوان 2: 42 بكسل (سطح المكتب) ، 32 بكسل (الكمبيوتر اللوحي) ، 22 بكسل (الهاتف)
• العنوان 2 حرف Sp [مسافة: 16 بكسل
• ارتفاع خط العنوان 2: 1.3em

• العرض: 500 بكسل (سطح المكتب) ، 490 بكسل (جهاز لوحي)
• محاذاة الوحدة: مركز
• الحشو المخصص (سطح المكتب): 40 بكسل للأعلى ، 40 بكسل للأسفل ، 50 بكسل لليسار ، 50 بكسل لليمين
• الحشو المخصص (الهاتف): 20 بكسل يسار ، 20 بكسل يمين
• عرض الحدود: 10 بكسل
• لون الحدود: #ffffff

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

position: relative;

ثم اضبط قيمة الفهرس z على 1.

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

إنشاء رمز Blurb

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

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

• لون الأيقونة: # 2ea3f2
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 100 بكسل
• الهامش المخصص: 0 بكسل للأسفل (يأخذ هذا الهامش السفلي الافتراضي بين الوحدات ؛ ليس ضروريًا إذا كنت تستخدم عرض هامش للصف 1)

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

Blurb Image CSS:

margin-bottom: 0px

قم بتكرار رمز Blurb

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

وضع رموز Blurb باستخدام Transform Translate

لوضع أيقونات دعاية مغالى فيها ، سنستخدم خيارات تحويل Divi التي تسمح لنا بوضع وحدة blurb مع الأيقونة في أي مكان نريده على الصفحة.

وضع رمز Blurb # 1

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

• تحويل المحور X للترجمة (سطح المكتب): -242 بكسل
• تحويل المحور ص للترجمة (سطح المكتب): 50 بكسل
• تحويل المحور X للترجمة (الهاتف): -170 بكسل

وضع رمز Blurb # 2

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

ثم ضع أيقونة الدعاية الدعاية عن طريق تحديث خيارات التحويل التالية:

• تحويل المحور X للترجمة (سطح المكتب): 242 بكسل
• تحويل المحور ص للترجمة (سطح المكتب): -100 بكسل
• تحويل المحور X للترجمة (الهاتف): 190 بكسل

إنشاء صف عمودين

لإنشاء العمود التالي ، قم بتكرار الصف الحالي وتغيير تخطيط عمود الصف إلى تخطيط من عمودين (1/2 1/2).

بعد ذلك ، استخدم ميزة التحديد المتعدد لـ Divi لتحديد الوحدات الثلاث في العمود الأيسر ثم انسخها والصقها في العمود الثاني.

بعد ذلك ، احذف رمز الدعاية الدعاية السفلية في العمود الأول.

محاذاة رموز الدعاية في العمود 2

بالنسبة إلى أيقونات Blurb في العمود 2 ، نحتاج إلى تحويل الرمز العلوي إلى اليسار والأيقونة السفلية إلى اليمين. يمكننا القيام بذلك ببساطة عن طريق تغيير قيمة Transform Translate X-axis.

افتح إعدادات وحدة blurb للوحدة النمطية العلوية في العمود 2 وقم بتحديث ما يلي:

• تحويل المحور X للترجمة (سطح المكتب): 242 بكسل
• تحويل المحور X للترجمة (الهاتف): 170 بكسل

كل ما تفعله أساسًا هو تغيير هذه القيم من سلبية إلى إيجابية لتحويلها في الاتجاه المعاكس على طول المحور x.

بعد ذلك ، قم بتحديث قيمة تحويل التحويل للوحدة النمطية السفلية في العمود 2 على النحو التالي:

• تحويل المحور X للترجمة (سطح المكتب): -242 بكسل
• تحويل المحور X للترجمة (الهاتف): -190 بكسل

تحديث أنماط وحدة النص في الصف الثاني

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

قم بتغيير محتوى عنوان h2 لقراءة "الخدمة".

• حجم نص العنوان 2: 28 بكسل (سطح المكتب) ، 22 بكسل (كمبيوتر لوحي) ، 18 بكسل (هاتف)

احفظ التغييرات.

افتح الآن صيغة الإعدادات لوحدة النص في العمود 2 وقم بتحديث ما يلي:

• اتجاه النص: صحيح

ضبط تباعد التخطيط

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

• الهامش المخصص: -100 بكسل للقاع

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

الآن دعونا نلقي نظرة على النتيجة النهائية.

تجربة أيقونات أخرى

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

في نافذة البحث والاستبدال المنبثقة ، قم بتحديث ما يلي:

• ضمن: هذا القسم
• استبدال بـ: [حدد أيقونة جديدة]

بعد ذلك ، انقر فوق زر الاستبدال.

سيؤدي هذا إلى تغيير جميع الدعاية في القسم الخاص بك بأخرى جديدة.

فيما يلي بعض الأمثلة على التخطيط باستخدام رموز مختلفة.

افكار اخيرة

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

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

هتافات!