كيفية إضافة Divi Email Optin إلى منشور مدونة Gutenberg الخاص بك

يفتح Divi Layout Block الباب للعديد من الطرق المريحة لجلب ميزات التصميم القوية لـ Divi Builder إلى محرر القوالب الافتراضي لـ WordPress (Gutenberg). يتيح لك ذلك كتابة الجزء الأكبر من محتوى منشور المدونة الخاص بك باستخدام واجهة كتلة Gutenberg المألوفة ثم حقن Divi Layouts حيث يلزم التصميم أو الوظائف المخصصة. يمكن أن تتضمن كتلة Divi Layout أي شيء يمكنك إنشاؤه داخل Divi Builder ، ولكنها أيضًا رائعة لتضمين شيء بسيط وأساسي مثل Email Optin.

في هذا البرنامج التعليمي ، سنغطي كيفية إضافة Divi Email Optin الجميل إلى منشور مدونة Gutenberg باستخدام Divi Layout Block.

هيا بنا نبدأ!

نظرة خاطفة

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

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

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

تنزيل مجاني

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

تحميل

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

استيراد تنسيق JSON بلوك

تحميل التخطيط إلى مكتبة Divi

لاستيراد ملف JSON الذي كنت قادرًا على تنزيله أعلاه ، انتقل إلى مكتبة Divi في الواجهة الخلفية للوحة معلومات WordPress الخاصة بك وانقر فوق "استيراد وتصدير".

بعد ذلك ، حدد ملف JSON داخل مجلد التنزيل الخاص بك وانقر فوق "استيراد تخطيطات Divi Builder".

أضف كتلة ديفي جديدة داخل جوتنبرج بوست

بمجرد استيراد التصميم الخاص بك ، يمكنك الانتقال إلى منشور Gutenberg الخاص بك وإضافة كتلة تخطيط Divi جديدة.

استيراد ملف JSON من التخطيطات المحفوظة

ثم ، انقر فوق "تحميل من المكتبة" ، وانتقل إلى "التخطيطات المحفوظة الخاصة بك" وحدد التخطيط لاستيراد قالب Divi CTA Layout إلى منشور المدونة الخاص بك. هذا كل شيء!

وهذا كل شيء!

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

إضافة Divi Email Optin إلى منشور مدونة Gutenberg الخاص بك

إنشاء أو تحرير منشور مدونة

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

أضف كتلة تخطيط Divi المضمنة

بمجرد إنشاء الجزء الأكبر من المنشور ، كل ما نحتاج إلى القيام به هو إضافة قالب Divi Layout جديد في أي مكان نريده داخل منطقة محتوى المنشور. يمكننا إضافته في مكان ما أقرب إلى نهاية المنشور لالتقاط عميل متوقع مؤهل مهتم بشكل واضح بمحتوى المنشور.

لإضافته ، قم بالتمرير فوق المنطقة التي تريد إضافة خيار البريد الإلكتروني إليها ، ثم انقر فوق أيقونة علامة الجمع الزرقاء لإضافة كتلة جديدة. في قائمة الحظر المنبثقة ، حدد مجموعة Divi Layout.

بناء تخطيط جديد داخل كتلة تخطيط Divi

بمجرد تحديد Divi Layout Block ، سيكون لدينا خيار إما "إنشاء تخطيط جديد" أو "تحميل من المكتبة". نظرًا لأننا نحتاج إلى إنشاء خيار اختيار البريد الإلكتروني من البداية ، حدد الخيار "إنشاء مخطط جديد".

تصميم القسم

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

للبدء ، افتح إعدادات القسم الخاصة بالقسم الافتراضي الموجودة بالفعل.

تدرج الخلفية

ثم أضف تدرجًا للخلفية كما يلي:

• اللون الأيسر لتدرج الخلفية: # ff9945
• تدرج الخلفية اللون الأيمن: # f86a4c

المقسمات

بعد ذلك ، انتقل إلى علامة تبويب التصميم والمقسم العلوي والسفلي كما يلي:

• نمط الفاصل العلوي: انظر الصورة
• لون الفاصل العلوي # f86a4c
• تكرار الحاجز العلوي الأفقي: 0.8x

• نمط الحاجز السفلي: انظر الصورة
• لون الحاجز السفلي: # ff9945
• تكرار المقسم السفلي الأفقي: 0.8x
• الفاصل السفلي: أفقي ورأسي

الهامش والحدود

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

• الهامش: 20 بكسل للأعلى و 20 بكسل للأسفل
• الزوايا الدائرية: 30 بكسل
• عرض الحدود: 2 بكسل
• لون الحد: # ff9945
• نمط الرسوم المتحركة: قلب

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

الآن وقد اكتمل القسم ، أضف هيكلًا من عمود واحد إلى الصف.

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

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

بناء البريد الإلكتروني Optin

أضف وحدة البريد الإلكتروني Optin Module

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

محتوى البريد الإلكتروني Optin

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

• العنوان: "احصل على نصائح مجانية كل أسبوع!"
• النص الأساسي: [احتفظ بالمحتوى الافتراضي الوهمي]
• قائمة قرد البريد: [أضف قائمة]
• استخدم حقل الاسم الفردي: نعم
• استخدام لون الخلفية: NO

تصميم البريد الإلكتروني

مجالات

انتقل إلى علامة تبويب التصميم وصمم حقول اختيار البريد الإلكتروني عن طريق تحديث ما يلي:

• التخطيط: الجسم على اليمين ، النموذج على اليسار
• لون خلفية الحقول: # f86a4c
• لون نص الحقول: #ffffff
• خط الحقول: IBM Plex Sans
• حجم نص الحقول: 18 بكسل
• تباعد حروف الحقول: 2 بكسل
• ارتفاع خط الحقول: 2em

عنوان

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

• خط العنوان: IBM Plex Sans Condensed
• وزن خط العنوان: شبه عريض
• لون نص العنوان: #ffffff
• حجم نص العنوان: 60 بكسل (سطح المكتب) ، 30 بكسل (هاتف)
• ارتفاع خط العنوان: 1.2em (سطح المكتب) ، 1.6 (هاتف)

زر

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

• استخدام الأنماط المخصصة للزر: نعم
• لون نص الزر: # ff9945
• لون خلفية متدرج للزر الأيسر: # ff9945
• لون خلفية الزر متدرج لليمين: #ffffff
• اتجاه التدرج: 90 درجة
• موضع النهاية: 34٪
• عرض حد الزر: 0 بكسل
• تباعد حرف الزر: 2 بكسل
• خط الزر: IBM Plex Sans
• وزن خط الزر: غامق
• نمط خط الزر: TT
• مساحة الزر: 15 بكسل للأعلى ، 15 بكسل للأسفل

حشوة

وللمسة أخيرة ، أضف الحشوة التالية:

• الحشو: يسار 5٪ ، يمين 5٪

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

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

إليك الرسوم المتحركة البسيطة لاختيار البريد الإلكتروني أثناء التمرير لأسفل في المنشور.

افكار اخيرة

أصبحت إضافة بريد إلكتروني إلى منشور Gutenberg الخاص بك أمرًا بسيطًا بشكل مذهل مع Divi Layout Block. لا يمكنك فقط إضافة خيار بريد إلكتروني كامل الوظائف (وسهل الاستخدام) في ثوانٍ ، ولكن يمكنك أيضًا استخدام Divi Builder لإضافة تصميم مخصص وتأثيرات التمرير والرسوم المتحركة. كل هذا دون الحاجة إلى استخدام البرنامج المساعد!

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

هتافات!