5 تصاميم وحدة Divi Blurb الإبداعية

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

دعنا نمرح!

نظرة خاطفة

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

5 تصاميم وحدة Divi Blurb الإبداعية

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

ابدء

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

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

1. دعاية منبثقة مع قوائم الميزات

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

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

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

لون الخلفية: # 2e3858
اجعل هذا الصف بعرض كامل: نعم
استخدام عرض مزراب مخصص: نعم
عرض الحضيض: 1
معادلة ارتفاعات العمود: نعم
الهامش المخصص: 5vw Top، 5vw Bottom
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

ثم في العمود الأول ، أضف أول وحدة دعاية مغالى فيها.

احذف الجملة الأخيرة في مربع المحتوى لتقصير مقدار النص قليلاً. ثم حدد استخدام رمز بدلاً من صورة واختر رمزًا (سيفعله أي شخص).

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

لون الخلفية: # df4570
لون الأيقونة: #ffffff
اتجاه النص: الوسط
خط العنوان: تشفير بلا شبه مكثف
نمط خط العنوان: TT
تباعد حروف العنوان: 2 بكسل
الهامش المخصص (سطح المكتب): -5vw أعلى ، -5vw أسفل
الهامش المخصص (الجهاز اللوحي): 0 بكسل للأعلى و 0 بكسل للأسفل
الحشو المخصص: 5vw Top ، 5vw Bottom ، 3vw Left ، 3vw Right
Box Shadow: انظر لقطة الشاشة
مربع قوة طمس الظل: 80 بكسل

باستخدام خيار قائمة النقر بزر الماوس الأيمن أو المفاتيح المختصرة cmd + c و cmd + v ، انسخ الوحدة التي أنشأتها للتو والصقها في العمود 3. ثم قم بتحديث إعدادات الوحدة النمطية الجديدة بلون خلفية ساطع (ولكن مجاني):

لون الخلفية: # 24c4a3

حان الوقت الآن لإضافة دلالات عنصر القائمة بجوار الدعاية المنبثقة التي أنشأناها للتو.

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

لون الأيقونة: # df4570
وضع الصورة / الرمز: اليسار
خط العنوان: تشفير بلا شبه مكثف
الحشو المخصص: 20 بكسل أعلى ، 20 بكسل أسفل ، 3vw يسار ، 3vw يمين

قم بتكرار الدعاية المغطاة مرتين حتى تحصل على ثلاث دلالات قائمة إجمالية في العمود. ثم استخدم ميزة Divi Multiselect لتحديد جميع الدلالات الثلاث ثم انسخها والصقها في العمود 4.

يمكنك أيضًا استخدام التحديد المتعدد لتحديد جميع الدلالات الثلاث في العمود 4 وتعديل إعدادات العنصر بشكل مجمّع لتغيير لون الأيقونة الثلاثة إلى # 24c4a3.

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

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

2. دعاية ترويجية مع صورة خلفية مخصصة.

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

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

قم بتحديث نص العنوان وأخرج الجملة الأخيرة من المحتوى الوهمي لتقليل مقدار النص. ثم حدِّث صورتك بصورة كتاب (أو صورة لمنتجك). ستعمل أيضًا أيقونة كتاب أو شيء ما.

أنا أستخدم أصول الصور من Travel Blog Layout Pack لذا لا تتردد في بدء التصميم من خلال التقاط تلك الصور.

تلميح: يمكنك أيضًا إضافة عنوان URL لرابط الوحدة النمطية إلى هذه الوحدة لجعل الوحدة بأكملها قابلة للنقر لأنها يمكن أن تكون بمثابة ترويج.

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

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

تدرج الخلفية باللون الأيسر: rgba (255،255،255،0.8)
تدرج الخلفية اللون الأيمن: rgba (255،255،255،0)
اتجاه التدرج: 90 درجة
موقف البداية: 40٪
موضع النهاية: 70٪
وضع التدرج فوق صورة الخلفية: نعم

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

ظل مربع الصورة: انظر الصورة
خط العنوان: Noto Serif
حجم نص العنوان: 26 بكسل
خط الجسم: Noto Sans
حجم النص الأساسي: 16 بكسل
عرض الصورة: 150 بكسل
عرض المحتوى (سطح المكتب): 60٪
عرض المحتوى: (هاتف ذكي): 80٪
الحشو المخصص: 2vw أسفل ، 2vw يسار ، 2vw يمين

تتمثل تقنية التصميم الرئيسية هنا في منح كل من الصورة والمحتوى عرضًا مخصصًا بحيث يمكن وضع المحتوى على اليسار لاحقًا.

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

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: 0 بكسل
مربع الظل الوضع الرأسي: 50 بكسل
لون الظل: #ffffff

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

margin-left: 0;

الآن تحقق من النتيجة!

نصيحة: لا تنس خيارات التمرير المتوفرة. حاول إعطاء صورة الكتاب حدًا عند التمرير لتجعل الأشياء تنبض بالحياة!

3. دائرة نمط دعاية باستخدام تدرج الخلفية

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

ابدأ بإضافة قسم عادي جديد بهيكل صفوف ثلاثة أعمدة.

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

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

ثم أضف تدرج الخلفية لإنشاء خلفية الدائرة على النحو التالي:

اللون الأيسر متدرج للخلفية: # fa7f28
تدرج الخلفية اللون الأيمن: rgba (255،255،255،0)
نوع التدرج: شعاعي
موقف البداية: 60٪
موقف النهاية: 0٪
وضع التدرج فوق صورة الخلفية: نعم

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

اتجاه النص: الوسط
خط العنوان: أوزوالد
نمط خط العنوان: TT
تباعد حروف العنوان: 1 بكسل
خط الجسم: Robot
وزن خط الجسم: خفيف
حجم النص الأساسي: 16 بكسل
العرض (الكمبيوتر اللوحي): 80٪
محاذاة الوحدة: المركز
الحشو المخصص (سطح المكتب): 20٪ علوي ، 25٪ سفلي ، 20٪ يسار ، 20٪ يمين
الحشو المخصص (الهاتف الذكي): 20٪ علوي ، 25٪ سفلي ، 10٪ يسار ، 10٪ يمين

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

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

ثم قم بتحديث إعدادات الصف بحيث يكون لها عرض مخصص 80٪ وعرض مزراب 1.

لإكمال التصميم ، يمكنك إضافة صورة خلفية وتدرج إلى القسم الخاص بك على النحو التالي:

أضف صورة الخلفية
تدرج الخلفية ، لون اليسار: rgba (2،076،0.51)
تدرج الخلفية اللون الأيمن: rgba (2،076،0.84)
وضع التدرج فوق صورة الخلفية: نعم

هذا كل شيء! تحقق من التصميم النهائي!

للحصول على مساحة إضافية ، يمكنك دائمًا تقليل حجم رمز الدعاية المغلوطة إلى ما يقرب من 50 بكسل من أجل منع الدوائر من الاصطدام عند عرض المتصفح الأصغر. عند إجراء التعديلات ، لا تنس الاستفادة من ميزة Divi Multiselect لإجراء تعديلات جماعية على جميع الوحدات مرة واحدة.

نصيحة إضافية: جعل وحدة Blurb النمطية بأكملها دائرة باستخدام CSS مخصص

إذا كنت تتطلع إلى تحويل الوحدة النمطية بأكملها إلى دائرة (بدلاً من استخدام تدرج الخلفية) ، فاستبدل التدرج اللوني بلون الخلفية العادي وأضف CSS المخصص هذا ضمن علامة التبويب Advanced في إعدادات الوحدة النمطية blurb:

في مربع العنصر الرئيسي:

height: 300px;
width: 300px;
border-radius: 100%;
border: 5px solid #ffffff;
padding: 5% !important;
display: flex;

في مربع محتوى الدعاية:

margin: auto;

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

سيبدو مثل هذا إذا تم تطبيقه على الوحدات الثلاث.

4. دعاية مؤطرة مع حدود وظلال مربع

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

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

أضف صورة إلى دعاية مغالى فيها. ثم امنح الصورة الدسمة حدًا ومربعًا من خلال تحديث إعدادات التصميم على النحو التالي:

عرض الحد العلوي للصورة: 8 بكسل
لون الحد العلوي للصورة: # 2f3854
عرض الحد الأيسر للصورة: 8 بكسل
لون الحد الأيسر للصورة: # 2f3854

ظل مربع الصورة: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: -20 بكسل
الوضع الرأسي للظل المربع: -30 بكسل
لون الظل: # f89da9

ثم قم بتحديث خط العنوان والجسم والتباعد كما يلي:

خط العنوان: Yeseva One
خط الجسم: مونتسيرات
الهامش المخصص: 50 بكسل للأسفل
الحشو المخصص: أسفل 2vw

أخيرًا ، امنح الوحدة النمطية الخاصة بك حدًا مخصصًا وظل مربعًا لموازنة تصميم الإطار على النحو التالي:

عرض الحد الأيمن: 15 بكسل
لون الحد الأيمن: # 2f3854
عرض الحد السفلي: 15 بكسل
لون الحد السفلي: # 2f3854

ظل مربع الصورة: انظر لقطة الشاشة
مربع الظل الأفقي: 20 بكسل
مربع الظل الرأسي: 35 بكسل
لون الظل: #dddddd

الآن انسخ والصق الوحدة النمطية في العمود 2 و 3 وقم بتحديث الصور الدعاية لإنهاء التصميم.

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

5. تصميم دعاية كقائمة منحنية

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

أولاً ، أضف قسمًا عاديًا جديدًا بهيكل صف من عمودين.

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

العرض المخصص: 700 بكسل
عرض المزراب: 2

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

لون الأيقونة: # 96a6bd
حجم خط الرمز (سطح المكتب): 400 بكسل
حجم خط الرمز (الهاتف الذكي): 200 بكسل

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

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

لون الخلفية: # bb7860
لون الأيقونة: #ffffff
وضع الصورة / الرمز: اليسار
استخدام حجم خط الأيقونة: نعم
حجم خط الأيقونة: 30 بكسل
خط العنوان: Raleway
لون نص العنوان: #ffffff
حجم نص العنوان: 20 بكسل
ارتفاع خط العنوان: 1.5em
الهامش المخصص: 5٪ قاع
حشوة مخصصة: 3٪ أعلى ، 10٪ يسار ، 2٪ يمين

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

ثم امنح الدعاية الثانية لونًا جديدًا ، وهوامش مخصصة لدفعها إلى اليمين ، وزوايا مستديرة إبداعية على النحو التالي:

لون الخلفية: # 393e56
الهامش المخصص (سطح المكتب): 10٪ يسار ، -10٪ يمين
الهامش المخصص (الكمبيوتر اللوحي): 0٪ يسار ، 0٪ يمين
الزوايا الدائرية: 50 بكسل أعلى اليمين ، 50 بكسل أسفل اليسار

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

ثم احفظ إعدادات الدعاية الدعاية وانقر بزر الماوس الأيمن على أول وحدة (أعلى) قمت بإنشائها والصق نمط الزوايا الدائرية الوحدة.

الآن دعنا نستمر في تحديث الوحدات الثلاث الأخيرة بالألوان المناسبة والتباعد وتصميمات الزوايا المستديرة.

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

لون الخلفية: # 96a6bd
الهامش المخصص (سطح المكتب): 20٪ يسار ، -20٪ يمين
الهامش المخصص (الكمبيوتر اللوحي): 0٪ يسار ، 0٪ يمين
الزوايا الدائرية: 50 بكسل أعلى اليمين ، 50 بكسل أسفل اليمين

بالنسبة للدعاية الدعائية الرابعة ، قم بتحديث ما يلي:

لون الخلفية: # 393e56
الهامش المخصص (سطح المكتب): 10٪ يسار ، -10٪ يمين
الهامش المخصص (الكمبيوتر اللوحي): 0٪ يسار ، 0٪ يمين
الزوايا الدائرية: 50 بكسل أعلى اليسار ، 50 بكسل أسفل اليمين

بالنسبة للدعاية الدعائية الخامسة ، ما عليك سوى نسخ الزوايا الدائرية في الإعلان الدعائي الرابع والصقها.

هذا كل شيء! دعنا نتحقق من التصميم النهائي.

المزيد من إلهام أسلوب الدعاية

إذا كنت مهتمًا باستكشاف المزيد من تصميمات الوحدة النمطية الممتعة ، فراجع الروابط أدناه:

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

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

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

هتافات!