كيفية إضافة كتلة تخطيط Divi CTA مضمنة ومتحركة إلى منشور مدونة Gutenberg الخاص بك

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

دعنا نذهب اليها.

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل The Inline & Animated Divi CTA Layout Block مجانًا

لتضع يديك على أقسام البطل المجانية ، ستحتاج أولاً إلى تنزيلها باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني 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. انتقل إلى المنشور وقم بتنزيل ملفات JSON لحزمة منشئ السمات هذه.

انتقل إلى Divi Theme Builder

بمجرد تنزيل حزمة منشئ السمات الثالثة ، يمكنك الانتقال إلى Divi Theme Builder.

تحميل قالب المنشور

قم بتحميل قالب منشور حزمة منشئ السمات من خلال النقر على الرمز في الزاوية اليمنى العليا.

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

افتح Gutenberg Post الموجود أو أنشئ منشورًا جديدًا

تتمثل الخطوة التالية في إضافة كتلة تخطيط Divi CTA إلى منشور Gutenberg الخاص بنا. للقيام بذلك ، افتح منشورًا موجودًا أو أنشئ منشورًا جديدًا.

أضف كتلة Divi مضمنة جديدة

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

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

بعد ذلك ، ستحصل على خيارين. حدد خيار "إنشاء مخطط جديد".

إعدادات القسم

تباعد

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

• الهامش الأعلى: 50 بكسل
• الهامش السفلي: 50 بكسل
• الهامش الأيسر: -10٪
• الهامش الأيمن: -10٪

أضف الصف رقم 1

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

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

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

أضف الحاجز رقم 1 إلى العمود

الرؤية

حان الوقت لإضافة الوحدات ، بدءًا من وحدة Divider. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

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

• لون الخط: # fc526e
• نمط الخط: صلب
• موقف الخط: الأعلى

تحجيم

قم بتعديل إعدادات التحجيم أيضًا.

• وزن الحاجز: 3 بكسل
• العرض: 30٪
• محاذاة الوحدة: صحيح
• الارتفاع: 3 بكسل

حيوية

وقم بتعديل إعدادات الرسوم المتحركة وفقًا لذلك:

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: يسار
• مدة الرسوم المتحركة: 2000 مللي ثانية
• تأخير الرسوم المتحركة: 500 مللي ثانية
• كثافة الرسوم المتحركة: 100٪
• بدء تعتيم الرسوم المتحركة: 100٪

أضف الحاجز رقم 2 إلى العمود

الرؤية

إلى وحدة Divider التالية. مرة أخرى ، تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

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

• لون الخط: # e1e3e8
• نمط الخط: صلب
• موقف الخط: الأعلى

تحجيم

قم بتعديل إعدادات تحجيم الوحدة بعد ذلك.

• وزن الحاجز: 3 بكسل
• الارتفاع: 3 بكسل

تباعد

أضف بعض قيم التباعد المخصصة أيضًا.

• الهامش الأيسر: 10٪
• الهامش الأيمن: -20٪

حيوية

وأكمل إعدادات الوحدة بتعديل إعدادات الرسوم المتحركة على النحو التالي:

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: يسار
• مدة الرسوم المتحركة: 2000 مللي ثانية
• تأخير الرسوم المتحركة: 500 مللي ثانية
• كثافة الرسوم المتحركة: 100٪
• بدء تعتيم الرسوم المتحركة: 100٪

أضف الحاجز رقم 3 إلى العمود

الرؤية

إلى وحدة Divider التالية والأخيرة التي نحتاجها في هذا الصف. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

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

• لون الخط: # fc526e
• نمط الخط: صلب
• موقف الخط: الأعلى

تحجيم

تعديل حجم الوحدة أيضا.

• وزن الحاجز: 3 بكسل
• الارتفاع: 3 بكسل

تباعد

جنبا إلى جنب مع إعدادات التباعد.

• الهامش السفلي: 100 بكسل
• الهامش الأيسر: -20٪
• الهامش الأيمن: 10٪

حيوية

وأكمل إعدادات الوحدة عن طريق تغيير إعدادات الرسوم المتحركة.

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: صحيح
• مدة الرسوم المتحركة: 2000 مللي ثانية
• كثافة الرسوم المتحركة: 100٪
• بدء تعتيم الرسوم المتحركة: 100٪

أضف الصف رقم 2

هيكل العمود

أضف صفًا آخر إلى القسم باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم على النحو التالي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 70٪
• محاذاة الصف: الوسط

أضف وحدة نصية # 1 إلى العمود

أضف محتوى H2

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

إعدادات نص H2

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

• لون نص العنوان 2: # fc526e
• حجم نص العنوان 2: 28 بكسل

تباعد

أضف بعض قيم الحشو المخصصة بعد ذلك.

• الحشوة العلوية: 50 بكسل
• الحشو السفلي: 50 بكسل
• الحشو الأيسر: 50 بكسل

الحدود

نحن نستخدم الحد الأيسر أيضًا.

• عرض الحد الأيسر: 2 بكسل
• لون الحد الأيسر: # fc526e

حيوية

وأكمل إعدادات الوحدة بإضافة رسم متحرك مخصص.

• نمط الرسوم المتحركة: قلب
• اتجاه الرسوم المتحركة: المركز
• تأخير الرسوم المتحركة: 1500 مللي ثانية

أضف وحدة نصية رقم 2 إلى العمود

إضافة محتوى

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

تباعد

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

• الحشوة العلوية: 50 بكسل
• الحشو السفلي: 50 بكسل
• الحشوة اليمنى: 50 بكسل

الحدود

أضف الحدود العلوية واليمنى بعد ذلك.

• الأعلى والحد الأيمن: 2 بكسل
• لون الحد العلوي والأيمن: # fc526e

حيوية

وأكمل إعدادات الوحدة بتعديل إعدادات الرسوم المتحركة على النحو التالي:

• نمط الرسوم المتحركة: قلب
• اتجاه الرسوم المتحركة: المركز
• تأخير الرسوم المتحركة: 1700 مللي ثانية

أضف وحدة الزر إلى العمود

أضف نسخة

الوحدة التالية والأخيرة التي نحتاجها في هذا الصف هي وحدة الأزرار. أضف نسخة من اختيارك.

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 13 بكسل
• لون نص الزر: #ffffff
• لون التدرج 1: # ff5b84
• لون التدرج 2: # f94857
• نوع التدرج: خطي
• اتجاه التدرج: 165 درجة
• عرض حد الزر: 0 بكسل

• نصف قطر حدود الزر: 0 بكسل
• تباعد حرف الزر: 1 بكسل
• زر الخط: مونتسيرات
• وزن خط الزر: شبه عريض
• نمط خط الزر: أحرف كبيرة

تباعد

أضف بعض المساحة المتروكة العلوية والسفلية المخصصة بعد ذلك.

• الحشوة العلوية: 16 بكسل
• الحشو السفلي: 16 بكسل

حيوية

وأكمل إعدادات الوحدة بإضافة الرسوم المتحركة التالية:

• نمط الرسوم المتحركة: قلب
• تأخير الرسوم المتحركة: 1900 مللي ثانية

استنساخ الصف رقم 1 ووضعه في الجزء السفلي من القسم

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

تغيير ترتيب الفاصل

تبديل الأماكن للوحدات النمطية الأولى والأخيرة.

تغيير تباعد الحاجز # 1

بعد ذلك ، افتح أول وحدة Divider Module في صفك وقم بتعديل إعدادات التباعد.

• الهامش الأعلى: 100 بكسل
• الهامش الأيسر: 10٪
• الهامش الأيمن: -20٪

تغيير تباعد الحاجز # 2

قم بتغيير إعدادات التباعد الخاصة بـ Divider Module الثانية أيضًا.

• الهامش الأيسر: -20٪
• الهامش الأيمن: 10٪

تغيير حجم الحاجز # 3

ثم افتح وحدة Divider الثالثة واستخدم محاذاة الوحدة اليسرى في إعدادات التحجيم.

• محاذاة الوحدة: يسار

قم بإزالة Divider # 3 Animation Delay

قم بإزالة تأخير الرسوم المتحركة لوحدة Divider الثالثة أيضًا وستكون جاهزًا! بمجرد الانتهاء من كتلة تخطيط Divi CTA ، تأكد من حفظ التغييرات وتحديث منشورك.

• تأخير الرسوم المتحركة: 0 مللي ثانية

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

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