كيفية تغيير حجم الكتل في ووردبريس

يمنح محرر Gutenberg Block ، الذي تم تقديمه رسميًا في WordPress 5.0 ، للمستخدمين الفرصة لتخصيص محتوى WordPress ومواقعهم بالكامل. لم يعد مقيدًا بالحاجة إلى الإنشاء في أداة WYSIWYG مثل محرر TinyMCE Classic ، يوفر Gutenberg كتلًا فردية لكل عنصر من عناصر محتوى المنشور أو الصفحة. من خلال التحكم في إعدادات كل كتلة محددة ، يمكن للمستخدمين تصميم محتوى WordPress بسهولة أكبر من أي وقت مضى. وإحدى أبسط الطرق لإبراز التصميمات هو تجاوزها لإعداداتها الافتراضية. لذلك سننظر في كيفية تغيير حجم الكتل في WordPress بحيث يمكنك البدء في التفكير (والتصميم) خارج الصندوق.

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

كيفية تغيير حجم الكتل في المحرر

تحتوي بعض - وليس كل - الكتل على خيارات تغيير حجم مضمنة. هذه هي أسهلها لتغيير الحجم لأسباب واضحة. اعتمادًا على الكتلة ، ستكون خيارات تغيير الحجم في أماكن مختلفة.

المثال الأول: كتلة الصورة

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

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

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

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

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

سوف تقوم ببساطة بالنقر والسحب على أي من نقاط الارتساء لتوسيع نطاق الصورة. سيؤدي القيام بذلك إلى ضبط الحجم في حقلي الارتفاع والعرض في قائمة إعدادات الكتلة.

المثال الثاني: كتلة الحدث

بالنسبة إلى Event Block ، تكون إعدادات تغيير الحجم موجودة فقط في قائمة السياق في المحرر نفسه. (يعد Event Block مكونًا إضافيًا منفصلاً بواسطة Automattic ستقوم بتثبيته ، وهو ليس جزءًا من محرر Gutenberg الأساسي.)

مثل بعض خيارات كتلة الصورة ، فإن خيارات تغيير الحجم هنا هي خيارات تباعد تقنيًا. لكن الخيارين هما Align Center و Wide Width. يمكنك اختيار واحد ليتم توسيطه في الحاوية أو ليكون العرض الكامل عبر الشاشة.

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

إنه حل أقل من مثالي. لكنها سريعة وتعمل في ظروف قليلة - خاصة بالنظر إلى عدم وجود خيار تعديل ارتفاع حقيقي لـ Event Block.

مثال 3 #: استخدام الأعمدة لتغيير حجم الكتل في WordPress

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

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

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

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

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

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

هل تحتاج إلى مزيد من خيارات التحجيم؟ فكر في أداة إنشاء صفحات أكثر تقدمًا

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

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

كيفية تغيير حجم الكتل في WordPress باستخدام CSS

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

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

بغض النظر ، سوف تقوم ببساطة بإدخال الفصل في حقل النص. لا تقم بتضمين الفترة / النقطة الموجودة أمام اسم الفئة في هذا الحقل .

الآن ، يجب عليك الانتقال إلى Appearance - Customize والعثور على قسم CSS الإضافي في الأسفل. اكتب أو الصق كود CSS لتغيير حجم الكتلة حسب رغبتك.

نقترح تجنب استخدام القياسات بالبكسل (px) لأنها مطلقة. على نحو مفضل ، ستستخدم إما vw (عرض منفذ العرض) أو vh (ارتفاع منفذ العرض) أو ٪ (النسبة المئوية) لضبط الكتلة. سيكون كل مقياس يشير إلى الجهاز و / أو محتوى آخر حوله.

.block-1 {
	height:35vh;
	max-height:50vh;
}

.block-2 {
	width: 100vw;
}

.block-3 {
	max-width:80vw;
}

ضع في اعتبارك أن ٪ و vw / vh مختلفان أيضًا ، على الرغم من أنهما يعملان بشكل مشابه. تعمل جميعها على أساس النسب المئوية ، لكنها مرتبطة بنسب مختلفة.

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

ومع ذلك ، فإن استخدام vh / vw سيكون مرتبطًا بمنفذ عرض الجهاز نفسه ، وليس عناصر الموقع. باستخدام الارتفاع: 80vh ، يمكنك دائمًا التأكد من أن هذه الكتلة تشغل 80٪ من ارتفاع الشاشة ، بغض النظر عما إذا كانت تظهر على جهاز محمول أو سطح مكتب أو كمبيوتر لوحي.

استنتاج

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

ما هي بعض النصائح والحيل التي يمكنك مشاركتها حول تغيير حجم الكتل في WordPress؟

صورة مميزة للمقال بواسطة 3rieart / shutterstock.com