كيفية إنشاء مربعات محتوى منمقة في Divi للحصول على نصائح ومعلومات وتحذيرات والمزيد (تنزيل مجاني)

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

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

هيا بنا نبدأ!

نظرة خاطفة

اليوم ، سنقوم ببناء تصميمات مربعات المحتوى الرئيسية الثلاثة هذه في Divi.

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

فيما يلي 36 مثالًا نقوم بإدراجها في التنزيل المجاني أدناه.

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

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

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

إنشاء تصاميم مربع المحتوى في Divi

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

تصميم مربع المحتوى # 1

لإنشاء أول مربع محتوى ، أضف وحدة دعاية دعاية إلى العمود.

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

• استخدام الأيقونة: نعم
• الرمز: انظر لقطة الشاشة
• لون الخلفية: #ffffff
• لون الخلفية المتدرج الأيسر: # 00529b
• تدرج الخلفية اللون الصحيح: # bde5f8
• اتجاه التدرج: 90 درجة
• موقف البداية: 3em
• موقف النهاية: 0٪

ضمن علامة تبويب التصميم ، قم بتحديث نمط الرمز كما يلي:

• لون الأيقونة: #ffffff
• محاذاة الصورة / الرمز: يسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 2em

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

• لون نص العنوان: # 00529b
• حجم نص العنوان: 1.5em
• ارتفاع خط العنوان: 2em
• لون نص النص: # bde5f8
• حجم النص الأساسي: 1em
• ارتفاع خط الجسم: 2em

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

• عرض المحتوى: 100٪
• العرض الأقصى: 700 بكسل
• محاذاة الوحدة: المركز
• الحشو: 2em أعلى ، 2em أسفل ، 5em يسار ، 2em يمين

ثم أضف مربع ظل رقيقًا إلى الدعاية الدعاية على النحو التالي:

• Box Shadow: انظر لقطة الشاشة
• مربع الظل الوضع الرأسي: 0 بكسل
• قوة مربع الظل الضبابية: 88 بكسل
• قوة انتشار الظل المربع: -10 بكسل
• لون الظل: rgba (0،0،0،0.17)

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

لإضافة النمط المخصص ، الصق كود CSS التالي في مربع Blurb Image CSS:

position:absolute;
margin-bottom: 0px;
border: 0.5em solid #00529b !important;
border-radius:50%;
background: #00529b;
transform: translateX(-3.75em);

ملاحظة: عند تغيير نظام ألوان مربع المحتوى (أو الوحدة النمطية للدعاية) ، سنحتاج أيضًا إلى تحديث الألوان المستخدمة في Blurb Image CSS للحدود وخلفية الرمز.

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

تصميم مربع المحتوى # 2

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

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

ضمن علامة تبويب التصميم ، استبدل Blurb Image CSS بما يلي:

margin-bottom: 0px;

ثم أضف CSS التالي إلى مربع Blurb Content CSS:

display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 5em auto;
grid-gap: 2em;

يتم تعيين عرض العمود الأيسر في الشبكة (الذي يحمل الرمز) على 5em ، ويتم تعيين العمود الأيمن الذي يحتوي على العنوان والنص الأساسي على تلقائي . نحتاج إلى مطابقة عرض لون التدرج الأيسر مع عمود شبكة بعرض 5em يحمل الرمز. للقيام بذلك ، قم بتحديث ما يلي:

• موقف البداية: 5em

ضمن علامة تبويب التصميم ، قم بتحديث محاذاة الرمز وحجمه:

• محاذاة الصورة / الرمز: المركز
• حجم خط الأيقونة: 3em

الآن لسنا بحاجة إلى الحشو الأيسر ، لذا أخرجه.

الآن يجب أن يصطف كل شيء بشكل جيد. تحقق من النتيجة النهائية.

تصميم مربع المحتوى # 3

لإنشاء تصميم مربع المحتوى الثالث ، قم بتكرار الوحدة النمطية الثانية (مربع المحتوى) التي انتهينا منها للتو.

بمجرد تكرار الدعاية الدعاية الثانية ، افتح إعدادات الدعاية المكررة.

ضمن علامة التبويب "تصميم" ، قم بتغيير لون الرمز:

• لون الأيقونة: rgba (255،255،255،0.3)

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

لإضافة التسمية ، الصق CSS التالي في المربع Before CSS:

content: 'key tip';
bottom:50%;
font-size: 1em;
line-height: 1em;
letter-spacing: 0.4em;
position:absolute;
transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important;
transform-origin: bottom left;
color: #fff;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
z-index:1;

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

margin-bottom: 0px;
transform: rotateZ(-90deg);

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

تحديث التصميم

قم بتحديث حجم عناصر مربع المحتوى عن طريق تغيير حجم النص الأساسي

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

تحديث ألوان CSS المخصصة

بالنسبة لتصميم مربع المحتوى رقم 1 ، أضفنا خلفية مخصصة ولون حد إلى الرمز باستخدام CSS مخصص. تأكد من تحديث الألوان المستخدمة لخاصية الحدود والخلفية لتتناسب مع نظام الألوان الخاص بتصميمك.

تحديث نص التسمية

بالنسبة لتصميم مربع المحتوى رقم 3 ، أضفنا تسمية باستخدام CSS مخصص على العنصر الزائف السابق . لتحديث النص ، ما عليك سوى تغيير قيمة خاصية المحتوى في المربع Before CSS.

جعل مربعات المحتوى قابلة لإعادة الاستخدام في Divi

احفظ الوحدة في مكتبة Divi

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

بمجرد حفظ العنصر في المكتبة ، يمكنك العثور عليه في مكتبة Divi عند إضافة عنصر جديد إلى الصفحة.

استخدم الإعدادات المسبقة العامة

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

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

قم بتسمية الإعداد المسبق الجديد بكل ما تريد وحفظه.

كرر هذه الخطوات لكل إعداد مسبق لوحدة دعاية وإعلان تريد إنشاءه.

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

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

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

وهنا 36 تصميمًا ستتمكن من إجرائها باستخدام بعض التخصيصات السهلة التي نقوم بتضمينها في التنزيل المجاني أعلاه.

افكار اخيرة

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

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

هتافات!