تتيح لك وحدة تخطيط Divi إمكانية دمج ميزات التصميم القوية في Divi Builder مع محرر الكتل الافتراضي في WordPress (Gutenberg) بطرق عملية متعددة. يُمكّنك هذا من كتابة معظم محتوى مدونتك باستخدام واجهة Gutenberg المألوفة، ثم إضافة تخطيطات Divi عند الحاجة إلى تصميم أو وظائف مخصصة. يمكن لوحدة تخطيط Divi أن تتضمن أي شيء يمكنك إنشاؤه في Divi Builder، وهي مثالية أيضًا لإضافة عناصر بسيطة وأساسية مثل نموذج الاشتراك.
في هذا الدرس التعليمي، سنرى كيفية إضافة نموذج اشتراك إلى منشور مدونة Gutenberg باستخدام كتلة تخطيط Divi.
النتيجة المحتملة
استيراد كتلة تخطيط JSON
قم بتنزيل التخطيط في مكتبة Divi
لاستيراد ملف JSON الذي قمت بتنزيله أعلاه، انتقل إلى مكتبة Divi الخاصة بك في الواجهة الخلفية للوحة تحكم WordPress الخاصة بك وانقر على "استيراد وتصدير".
ثم حدد ملف JSON في مجلد التنزيل وانقر على "استيراد تخطيطات Divi Builder".
أضف كتلة Divi جديدة داخل منشور Gutenberg
بمجرد استيراد التصميم الخاص بك ، يمكنك الوصول إلى رسالة Gutenberg وإضافة كتلة تخطيط Divi جديدة.
استيراد ملف JSON من العروض التقديمية المحفوظة
بعد ذلك، انقر على "تحميل من المكتبة"، ثم انتقل إلى "التخطيطات المحفوظة"، وحدد التخطيط لاستيراد كتلة تخطيط Divi CTA إلى منشور مدونتك. هذا كل شيء!
وهذا كل شيء!
لننتقل إلى الدرس التعليمي، حسناً؟
أضف وحدة بريد إلكتروني Optin إلى منشور مدونة Gutenberg الخاص بك
قم بإنشاء أو تحرير منشور مدونة
للبدء، نحتاج إلى إنشاء منشور مدونة جديد أو تعديل منشور موجود. في هذا المثال، سنضيف محتوىً مؤقتًا إلى عنوان المنشور ومحتواه باستخدام بعض أقسام العناوين والفقرات. ثم نضيف صورة مميزة ونختار "بدون شريط جانبي" للتصميم ضمن إعدادات صفحة Divi.
أضف كتلة تخطيط Divi عبر الإنترنت
بعد الانتهاء من كتابة الجزء الأكبر من المنشور، كل ما علينا فعله هو إضافة قالب تخطيط Divi جديد في أي مكان نريده ضمن محتوى المنشور. يمكننا إضافته في مكان أقرب إلى نهاية المنشور لجذب عميل محتمل مهتم بمحتوى المنشور.
لإضافة خيار البريد الإلكتروني، مرر مؤشر الماوس فوق المنطقة التي ترغب في إضافتها، ثم انقر على أيقونة الزائد الزرقاء لإضافة قسم جديد. من قائمة الأقسام السياقية، حدد قسم "تخطيط Divi".
قم بإنشاء تخطيط جديد في كتلة تخطيط Divi
بعد تحديد كتلة تخطيط Divi، سيظهر لنا خيار "إنشاء تخطيط جديد" أو "تحميل من المكتبة". ولأننا نحتاج إلى إنشاء خيار البريد الإلكتروني من الصفر، اختر خيار "إنشاء تخطيط جديد".
تصميم القسم
في محرر التخطيط، يمكننا البدء بتصميم نموذج الاشتراك عبر البريد الإلكتروني لإدراجه في منشورنا. كل ما نصممه في هذا المحرر سيظهر في منطقة "كتلة تخطيط Divi" الخاصة بالمنشور.
للبدء، افتح إعدادات القسم للقسم الافتراضي الموجود هناك بالفعل.
بالنسبة للتخطيط، سوف نختار تخطيطًا مكونًا من عمودين.
بعد ذلك، سنضيف وحدة الاشتراك عبر البريد الإلكتروني إلى أحد الأعمدة؛ وسأترك لك اختيار العمود.
بعد ذلك، سنقوم بتخصيص خلفية القسم. يمكنك دائمًا تغيير القيم لجعل تصميمك فريدًا. ومع ذلك، فقد استخدمنا القيم التالية:
- الخلفية: #ff6100
- الفاصل العلوي والسفلي: العد الثالث عشر من الأعلى.
- عرض عنصر الفاصل: 40 بكسل (أعلى وأسفل).
سنضيف الآن نصًا إلى العمود المقابل. هنا، ستستخدم نصًا مقنعًا لتشجيع الزائر على الاشتراك.
ستحتاج بعد ذلك إلى إجراء التعديلات المختلفة:
- خط النص: مونتسيرات
- لون الخط: #FFF
- خط النص العنوان الفرعي H2: مونتسيرات
- حجم الترجمة النصية H2: 2.5em
- عنوان النص الفرعي H2 اللون: #FFF
لا تنسَ ضبط إعدادات نظام البريد الإلكتروني الذي ستستخدمه. يجب أن تعلم أن غوتنبرغ متوافق مع MailChimp.
الأفكار النهائية
أصبح إضافة خيار الاشتراك عبر البريد الإلكتروني إلى منشوراتك على Gutenberg في غاية السهولة مع قالب Divi. لا يمكنك فقط إضافة خيار بريد إلكتروني كامل الوظائف (وسهل الاستخدام) في ثوانٍ، بل يمكنك أيضًا استخدام أداة Divi Builder لإضافة تصميم مخصص، وتأثيرات عند تمرير المؤشر، ورسوم متحركة. كل هذا دون الحاجة إلى أي إضافات!