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

نشرت: 2020-02-16

يمكن استخدام Divi's Layout Block ككتلة تخطيط صور قابلة لإعادة الاستخدام لإضافة صور على غرار Divi إلى منشورات مدونة Gutenberg. يجمع هذا بين خيارات التصميم القوية ووظائف Divi (لإنشاء صور جميلة) مع سهولة كتابة المنشورات (وإضافة الكتل) مع Gutenberg.

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

هيا بنا نبدأ!

نظرة خاطفة

قم بتنزيل كتل تخطيط الصور القابلة لإعادة الاستخدام مجانًا

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

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

تنزيل مجاني

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

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

كيفية استخدام التنزيل لاستيراد كتل التخطيط هذه على موقعك

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

انتقل لتحرير منشور باستخدام المحرر الافتراضي (Gutenberg). افتح قائمة "المزيد من الأدوات والخيارات" في الجزء العلوي الأيمن من الصفحة وحدد "إدارة جميع الكتل القابلة لإعادة الاستخدام".

ثم انقر فوق الزر استيراد من JSON. اختر أحد ملفات JSON من مجلد التنزيل وانقر على زر الاستيراد.

كرر هذه العملية لاستيراد جميع ملفات JSON الثلاثة.

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

هذا كل شيء!

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

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

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

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

بعد ذلك ، نحن على استعداد للبدء.

الجزء 1: إنشاء صورة بعرض كامل مع تسمية توضيحية قابلة لإعادة الاستخدام كتلة تخطيط Divi

إضافة كتلة تخطيط ديفي

للبدء ، أضف قالب Divi Layout إلى منشورك.

ثم انقر فوق "إنشاء تخطيط جديد".

تصميم تخطيط صورة Divi

في Layout Block Editor ، ابدأ في تصميم التخطيط عن طريق إضافة صف من عمود واحد.

وحدة الصورة

أضف وحدة صورة إلى الصف.

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

  • فتح في Lightbox: نعم

سيسمح هذا لصورتنا بالظهور في Lightbox عند النقر.

  • تراكب الصور: تشغيل
  • لون أيقونة التراكب: #ffffff
  • تحوم لون التراكب: rgba (120،47،130،0.57)

لإنشاء مساحة حول صورتنا ، قم بتحديث إعدادات الصف على النحو التالي:

  • استخدام عرض مزراب مخصص: نعم
  • عرض الحضيض: 1
  • العرض: 90٪
  • العرض الأقصى: 90٪
  • الحشو: 5٪ أعلى ، 5٪ أسفل

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

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

  • خلفية متدرجة اللون الأيسر: # 782f82
  • خلفية متدرجة اللون الصحيح: # fe756b
  • اتجاه التدرج: 90 درجة

لجعل الصورة تمتد إلى ما بعد حاوية محتوى منشور المدونة قليلاً ، يمكننا منح القسم عرضًا مخصصًا على النحو التالي:

  • العرض: 110٪
  • العرض الأقصى: 100٪
  • الهامش: -5٪ متبقي
  • المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

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

  • Box Shadow: انظر لقطة الشاشة
  • مربع الظل الأفقي: 5vw
  • مربع الظل الوضع الرأسي: 5vw
  • لون الظل: rgba (255،255،255،0.7)

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

ثم أضف بعض محتوى الحشو ليكون بمثابة نص التسمية التوضيحية.

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

  • خط النص: مونتسيرات
  • وزن خط النص: شبه عريض
  • لون نص النص: #ffffff
  • العرض: 80٪
  • محاذاة الوحدة: صحيح
  • الهامش: 5٪ أعلى

عند الانتهاء ، تأكد من حفظ التخطيط باستخدام Ctrl + S أو افتح شريط الإعدادات في الأسفل وانقر على "حفظ وخروج".

إضافة تخطيط الصورة إلى الكتل التي يعاد استخدامها

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

أعط اسمًا للكتلة القابلة لإعادة الاستخدام وانقر على "حفظ".

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

لا تنس تحديث / حفظ المنشور لحفظ التغييرات.

الجزء 2: إنشاء الصورة اليسرى مع تسمية توضيحية قابلة لإعادة الاستخدام كتلة تخطيط Divi

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

تحويل الكتلة القابلة لإعادة الاستخدام إلى الكتلة العادية

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

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

تحديث التخطيط

بمجرد أن تصبح الكتلة منتظمة ، انقر فوق الزر تحرير التخطيط أعلى الكتلة.

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

  • العرض: تلقائي
  • العرض الأقصى: 500 بكسل

هذا كل ما نحتاج إلى القيام به داخل محرر التخطيط. تأكد من حفظ والخروج من التخطيط.

مع تحديد الكتلة ، افتح الشريط الجانبي للإعدادات الرئيسية وحدد علامة تبويب الحظر لإظهار إعدادات الحظر. ضمن التبديل المتقدم ، أضف الفئة التالية:

  • إضافة فئة CSS: alignleft

هذه الفئة هي أصلية في WordPress وسوف تطفو الكتلة إلى اليسار والتي ستطفو أيضًا صورتنا على يسار المحتوى داخل منشورنا.

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

أعط اسمًا للكتلة التي يمكن إعادة استخدامها (مثل "الصورة اليسرى مع التسمية التوضيحية") وانقر فوق حفظ.

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

الجزء 3: إنشاء قالب Divi Layout القابل لإعادة الاستخدام "الصورة الصحيحة مع التسمية التوضيحية"

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

تحويل الكتلة القابلة لإعادة الاستخدام إلى الكتلة العادية

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

تحديث التخطيط

بمجرد أن تكون الكتلة عبارة عن كتلة تخطيط عادية ، انقر لتحرير التخطيط.

ثم افتح إعدادات القسم وأخرج الهامش الأيسر.

احفظ واخرج من محرر التخطيط.

ثم قم بتحديث فئة CSS الإضافية للكتلة بما يلي:

  • فئة CSS إضافية: alignright

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

وقم بتسمية الكتلة القابلة لإعادة الاستخدام (أي "الصورة الصحيحة مع التسمية التوضيحية") واحفظها.

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

الجزء 4: استخدام كتل تخطيط الصورة القابلة لإعادة الاستخدام على منشور.

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

هيريس كيفية القيام بذلك.

الخطوة 1: أضف قالب التخطيط القابل لإعادة الاستخدام

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

الخطوة 2: قم بتحويله إلى قالب عادي

افتح قائمة "المزيد من الخيارات" وحدد "تحويل إلى كتلة عادية".

الخطوة 3: قم بتحرير قالب التخطيط باستخدام صورة وتعليق جديد

بمجرد أن تصبح الكتلة منتظمة ، انقر لتعديل التخطيط.

قم بتحديث التخطيط بصورة من اختيارك.

ثم قم بتحديث نص التسمية التوضيحية داخل وحدة النص.

الخطوة 4: احفظ قالب التخطيط

بمجرد الانتهاء ، احفظ واخرج من محرر التخطيط.

استمر في هذه العملية نفسها لإضافة تخطيطي الصور الآخرين إلى المنشور.

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

افكار اخيرة

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

نأمل أن يوفر هذا بعض الإلهام لنقل صور مدونتك إلى مستوى جديد تمامًا.

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

هتافات!