كيفية إضافة اقتباسات مميزة مبنية من Divi في جميع أنحاء Gutenberg Post

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

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

معاينة

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

مثال 1

سطح المكتب

متحرك

المثال رقم 2

سطح المكتب

متحرك

قم بتنزيل تخطيطات عروض الأسعار المميزة المبنية من Divi مجانًا

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

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

تنزيل مجاني

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

تحميل

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

https://youtu.be/zScpa4-I7-8

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

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

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

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

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

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

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

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

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

خطوات عامة

استخدم قالب منشور مدونة بسيط وصديق لتجربة المستخدم

تحميل النموذج

لتحديد نمط هذا البرنامج التعليمي ، سنستخدم قالب منشور لمنشور سابق. انتقل إلى هذا المنشور وقم بتنزيل النموذج.

انتقل إلى Divi Theme Builder

بعد ذلك ، انتقل إلى Divi Theme Builder.

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

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

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

بمجرد تعيين قالب منشور ، يمكنك إنشاء منشور Gutenberg جديد أو فتح منشور موجود.

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

أضف كتلة Divi جديدة في مكان ما داخل منشورك.

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

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

أعد إنشاء المثال رقم 1

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

تباعد

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

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

الحدود

أضف حدًا أيسر إلى القسم التالي.

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

حيوية

واستخدم إعدادات الرسوم المتحركة التالية:

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

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

افتح إعدادات الصف وقم بتغيير إعدادات التحجيم وفقًا لذلك:

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

حيوية

أكمل إعدادات الصف عن طريق تغيير إعدادات الرسوم المتحركة على النحو التالي:

• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 1500 مللي ثانية
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج

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

أدخل محتوى H3

الوحدة الوحيدة التي نحتاجها هي وحدة نصية. أدخل محتوى الاقتباس المميز H3.

إعدادات نص H3

أكمل إعدادات الوحدة عن طريق تعديل إعدادات نص H3 كما يلي:

• نمط الخط H3: مائل
• حجم نص H3: 2.1rem (سطح المكتب) ، 1.5rem (جهاز لوحي) ، 1.3rem (هاتف)
• ارتفاع الخط H3: 1.5em

أعد إنشاء المثال رقم 2

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

تباعد

هل تريد إعادة إنشاء مثال التصميم الثاني بدلاً من ذلك؟ افتح إعدادات القسم وقم بتعديل قيم التباعد كما يلي:

• الهامش الأعلى: 50 بكسل
• الهامش السفلي: 50 بكسل
• الهامش الأيسر: -5٪
• الهامش الأيمن: -5٪
• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف صفًا جديدًا

هيكل العمود

بعد ذلك ، أضف صفًا جديدًا باستخدام بنية العمود التالية:

تحجيم

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

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

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: عرض Playfair
• لون النص: #eaeaea
• حجم النص: 500 بكسل
• ارتفاع خط النص: 0em

تباعد

نحن نضيف بعض الهامش العلوي أيضًا.

• الهامش الأعلى: 150 بكسل

حيوية

بعد ذلك ، سنقوم بتغيير إعدادات الرسوم المتحركة.

• نمط الرسوم المتحركة: قلب
• اتجاه الرسوم المتحركة: المركز
• تأخير الرسوم المتحركة: 500 مللي ثانية
• كثافة الرسوم المتحركة: 200٪
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج

موقع

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

• الموقف: مطلق
• الموقع: أعلى اليسار

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

أضف محتوى H3

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

إعدادات نص H3

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

• نمط خط العنوان 3: مائل
• حجم نص العنوان 3: 2.6rem (سطح المكتب) ، 1.7rem (جهاز لوحي) ، 1.3rem (هاتف)
• ارتفاع سطر العنوان 3: 1.4em

تباعد

أضف بعض قيم الهامش المخصصة عبر أحجام الشاشات المختلفة أيضًا.

• الهامش الأعلى: 150 بكسل
• الهامش السفلي: 150 بكسل
• الهامش الأيسر: 150 بكسل (سطح المكتب) ، 70 بكسل (جهاز لوحي) ، 30 بكسل (هاتف)
• الهامش الأيمن: 150 بكسل (سطح المكتب) ، 70 بكسل (جهاز لوحي) ، 30 بكسل (هاتف)

حيوية

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

• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 2000 مللي ثانية
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: عرض Playfair
• لون النص: #eaeaea
• حجم النص: 500 بكسل
• ارتفاع خط النص: 0em
• محاذاة النص: صحيح

حيوية

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

• نمط الرسوم المتحركة: قلب
• اتجاه الرسوم المتحركة: المركز
• تأخير الرسوم المتحركة: 1000 مللي ثانية
• كثافة الرسوم المتحركة: 200٪
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج

موقع

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

• الموقف: مطلق
• الموقع: أسفل اليمين

حفظ تخطيطات اقتباس في مكتبة Divi لإعادة استخدامها

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

معاينة

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

مثال 1

سطح المكتب

متحرك

المثال رقم 2

سطح المكتب

متحرك

افكار اخيرة

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

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