مُحرّر الكتل في ووردبريس، المعروف أيضاً باسم غوتنبرغ، تصميم الصفحات والمقالات دون الحاجة إلى كتابة أي كود برمجي. ومن أبرز ميزاته الكتل المتداخلة، وهي كتل تُوضع داخل كتل أخرى لإنشاء تصميمات منظمة ومرنة.
إذا واجهت صعوبة في محاذاة النصوص والصور والأزرار في قسم واحد، فإن الكتل المتداخلة تُسهّل عليك هذه العملية. فهي تتيح لك تجميع المحتوى معًا ونقله كوحدة واحدة.
سيرشدك هذا الدليل خلال الأساسيات، والتعليمات خطوة بخطوة، ونصائح التخصيص، وأفضل الممارسات لاستخدام الكتل المتداخلة في ووردبريس.
نظرة عامة على الكتل في ووردبريس
عن محرر الكتل في ووردبريس طريق تقسيم المحتوى إلى كتل فردية يسهل التحكم بها. كل كتلة مستقلة بذاتها، ولها إعداداتها وخيارات تنسيقها ووظائفها الخاصة. هذه البنية تُسهّل تصميم المحتوى وتنظيمه وتحديثه دون الحاجة إلى كتابة سطر واحد من التعليمات البرمجية.
سواء كنتَ تُنشئ منشورًا لمدونة أو تُصمّم صفحة هبوط، يُمكنك دمج أنواع مختلفة من القوالب لإنشاء تصميم مُخصّص. دعونا نستكشف بعضًا من أكثر القوالب شيوعًا التي ستستخدمها.
فقرة لإضافة محتوى نصي
يُعدّ مربع الفقرة النوع الافتراضي للمربعات. وهو المكان الذي تُضيف فيه محتوى النص الرئيسي وتُنسّقه. يمكنك تعديل محاذاة النص وحجم الخط ولونه مباشرةً من إعدادات المربع.
كتلة صور لعرض العناصر المرئية
تتيح لك خاصية عرض الصور تحميل الصور أو اختيارها من مكتبة الوسائط الخاصة بك. يمكنك تعديل حجم الصورة ومحاذاتها، وإضافة تعليقات توضيحية، وحتى ربطها بصفحة أخرى أو رابط URL.
قسم العناوين لتنظيم محتواك
استخدم قسم العناوين لإنشاء عناوين الأقسام والعناوين الفرعية. هذا لا يُسهّل فقط تصفح المحتوى، بل يُحسّن أيضًا من ظهوره في محركات البحث من خلال تزويدها ببنية محتوى واضحة.
كتلة أزرار لتوجيه إجراءات المستخدم
يُعدّ قسم الأزرار مثاليًا لدعوات اتخاذ الإجراءات مثل "اعرف المزيد" أو "اشتر الآن". يمكنك تخصيص ألوان الأزرار والنصوص والروابط لتتناسب مع تصميم موقعك.
قائمة لتنظيم المعلومات
تساعدك قائمة العناصر على عرض المعلومات في شكل نقاط أو قوائم مرقمة. وهذا يجعل المحتوى أكثر قابلية للقراءة وأسهل في المتابعة.
بفهمك لأنواع الكتل الأساسية هذه، ستمتلك أساسًا متينًا لإنشاء صفحات جذابة ومنظمة جيدًا في ووردبريس. ومن هنا، يمكنك البدء بتجربة الكتل المتداخلة لتطوير تصميماتك بشكل أكبر.
أيهما أفضل: محرر الكتل في ووردبريس أم أدوات إنشاء الصفحات
احصل على موقع ووردبريس عالي الأداء
دعنا نبني لك الموقع الإلكتروني الذي طالما حلمت به. استكشف خدماتنا لمعرفة المزيد.
فهم فئات الكتل
في ووردبريس، لا تُعتبر القوالب مجرد أدوات متناثرة، بل هي مُنظمة في فئات. هذا يُسهّل العثور على ما تحتاجه واختيار القالب المناسب للغرض المطلوب.
من خلال فهم هذه الفئات، يمكنك تخطيط تصميماتك بشكل أكثر كفاءة والحفاظ على اتساق تصميمك.
- قوالب التخطيط لهيكلة صفحتك: تساعدك قوالب التخطيط على ترتيب المحتوى بصريًا. ومن أمثلتها قوالب المجموعات والأعمدة والفواصل. فهي تُنشئ إطارًا لتصميمك، مما يسمح لك بوضع العناصر في المكان الذي تريده بالضبط.
- أقسام المحتوى لعرض معلوماتك: أقسام المحتوى هي المكان الذي يُعرض فيه محتواك الرئيسي. وتشمل هذه الأقسام فقرات وصورًا ومقاطع فيديو. وهي تحتوي على النصوص والصور والوسائط التي يتفاعل معها الزوار.
- وحدات الأدوات لإضافة ميزات وظيفية: تُضفي وحدات الأدوات وظائف إضافية على صفحتك، مثل البحث والتقويم وأحدث المقالات. وهي تُسهّل على الزوار تصفح موقعك والتفاعل معه.
تعرّف على: ما هو محرر ووردبريس
ما هي الكتل المتداخلة؟
في ووردبريس، تُعرف الكتل المتداخلة بأنها كتل موضوعة داخل كتلة أخرى تُسمى الكتلة الأصلية. يتيح لك هذا الهيكل دمج عناصر متعددة داخل حاوية واحدة، مما يجعل التصميمات أكثر تنظيمًا وجاذبية بصرية.
من خلال تداخل الكتل، يمكنك إنشاء أقسام يسهل نقلها وتنسيقها وصيانتها.
إليك سبب وجوب استخدامك للكتل المتداخلة:
- للحفاظ على المحتوى ذي الصلة معًا للحفاظ على بنية محتوى منطقية.
- لنقل عناصر متعددة في وقت واحد لتوفير الوقت أثناء التحرير.
- من أجل تطبيق تصميم متناسق وتغيير الألوان أو الخطوط أو المسافات لجميع الكتل الداخلية بتعديل واحد.
مثال: كتلة مجموعة تحتوي على عناصر متعددة
يمكن أن تحتوي كتلة المجموعة على عنوان وفقرة وزر معًا. هذا يحافظ على المحتوى ذي الصلة في مكان واحد ويسهل تطبيق أنماط مشتركة، مثل لون الخلفية أو المسافة الداخلية.
مثال: كتلة الأعمدة للتخطيطات المتجاورة
باستخدام قسم الأعمدة، يمكنك وضع صورة على اليسار ونص على اليمين. هذه الطريقة مثالية لأقسام الميزات، أو شهادات العملاء، أو المقارنات جنبًا إلى جنب.
دليلإنشاء قوالب مخصصة في ووردبريس
كيفية استخدام الكتل المتداخلة في ووردبريس (خطوة بخطوة)
قد يبدو استخدام الكتل المتداخلة في ووردبريس معقدًا في البداية، لكن العملية تصبح سهلة بمجرد فهم الخطوات. الهدف هو وضع كتل أصغر داخل كتلة رئيسية لإنشاء تصميم منظم ومرن. اتبع هذه الخطوات للبدء.
الخطوة 1: افتح محرر الكتل
أولاً، افتح الصفحة أو المنشور الذي تريد العمل عليه. انقر على زر "+" في المحرر لإضافة كتلة جديدة. هنا ستُدرج الكتلة الرئيسية.
الخطوة الثانية: إضافة كتلة رئيسية
بعد ذلك، اختر مجموعة أو كتلة أعمدة. هذه هي الكتل الرئيسية الأكثر شيوعًا للتداخل. وهي تعمل كحاويات تجمع الكتل الداخلية معًا.
الخطوة 3: إدخال الكتل الداخلية
داخل الكتلة الرئيسية، انقر على زر "+" مرة أخرى. الآن، يمكنك إضافة أي نوع من الكتل، مثل فقرة أو صورة أو زر، لإنشاء محتواك.
الخطوة الرابعة: إعادة ترتيب الكتل الداخلية
لتعديل الترتيب، استخدم مقبض السحب والإفلات أو الأسهم لأعلى/لأسفل في شريط أدوات الكتلة. يتيح لك هذا إعادة تنظيم تخطيطك بسرعة دون الحاجة إلى البدء من جديد.
الخطوة 5: تخصيص الأنماط
أخيرًا، حدد العنصر الرئيسي لتطبيق التنسيق. غيّر لون الخلفية، ولون النص، والتباعد، أو الحدود حسب الحاجة. ستُطبّق جميع التغييرات تلقائيًا على العناصر الداخلية، مما يضمن تصميمًا متناسقًا.
تتجلى ميزة التخصيص في الوحدات المتداخلة. يمكنك:
- قم بتطبيق خلفية مشتركة على جميع العناصر الداخلية.
- اضبط الحشو والهوامش لتحسين التباعد.
- أضف فئات CSS مخصصة لتصميم متقدم.
- ضبط سلوك الاستجابة لشاشات الجوال.
نصيحة: تحقق دائمًا من كيفية ظهور الكتل المتداخلة على الهاتف المحمول عن طريق التبديل إلى معاينة الهاتف المحمول في المحرر.
باتباع هذه الخطوات، يمكنك إنشاء تخطيطات كتل متداخلة جذابة بصريًا، سهلة التعديل، ومثالية للتصميم المتجاوب. بمجرد إتقان هذه الأساسيات، يمكنك استكشاف تقنيات تخصيص أكثر تقدمًا.
كيفية ضبط إعدادات الكتل المتداخلة في ووردبريس؟
بمجرد إنشاء الكتل المتداخلة، يمكنك ضبطها بدقة للحصول على تصميم أكثر دقة واتساقًا.
يوفر ووردبريس العديد من الإعدادات التي تتيح لك التحكم في مظهر ووظائف كل من الكتل الرئيسية والداخلية. يساعدك ضبط هذه الخيارات في الحفاظ على مظهر متناسق في جميع أنحاء موقعك.
- حدد الكتلة الرئيسية لإجراء تغييرات شاملة: لإجراء تعديلات تؤثر على جميع الكتل الداخلية دفعة واحدة، حدد أولاً الكتلة الرئيسية. من هنا، يمكنك ضبط ألوان الخلفية والتباعد والمحاذاة وإعدادات النمط الأخرى التي ستنطبق على كل كتلة متداخلة في الداخل.
- استخدم الإعدادات المتقدمة لتخصيص CSS: إذا كنت بحاجة إلى مزيد من التحكم، فافتح لوحة الإعدادات المتقدمة. هنا، يمكنك تعيين فئات CSS مخصصة للكتلة. يتيح لك هذا تخصيص تصميم المحتوى بما يتجاوز خيارات المحرر الافتراضية.
- استكشف أنماط الكتل لإجراء تعديلات سريعة على التصميم: يوفر ووردبريس أنماط الكتل، وهي عبارة عن تصميمات متنوعة مُعدة مسبقًا. تُتيح لك هذه الأنماط تغيير مظهر كتلتك فورًا دون الحاجة إلى تعديلات يدوية، مما يُسهّل عليك تجربة خيارات بصرية مختلفة.
يضمن ضبط هذه الإعدادات أن تكون الكتل المتداخلة ليست وظيفية فحسب، بل متناسقة بصريًا أيضًا عبر موقعك الإلكتروني.
استكشف: أفضل قوالب ووردبريس
خطوات إنشاء تصميمات معقدة باستخدام كتل متداخلة
تُعدّ الكتل المتداخلة طريقة فعّالة لبناء تصميمات احترافية متعددة الأقسام دون الحاجة إلى كتابة أكواد برمجية.
من خلال دمج أنواع مختلفة من الكتل داخل كتلة رئيسية، يمكنك تصميم صفحات ذات مظهر أنيق وسهلة التعديل. وهي مناسبة بشكل خاص للتخطيطات متعددة الأعمدة، وأقسام الصفحات الرئيسية، وقوائم الميزات.
الخطوة 1: إضافة كتلة أعمدة
ابدأ بإدراج كتلة أعمدة في صفحتك. في هذا المثال، اختر خيار تخطيط الأعمدة الثلاثة. ستعمل هذه الكتلة كحاوية رئيسية لقسم الميزات.
الخطوة الثانية: إدراج المحتوى في كل عمود
أضف داخل كل عمود قسمًا للصور في الأعلى لعرض العناصر المرئية. أسفل الصورة، ضع قسمًا للعنوان، يليه قسم للفقرة لوصف الموضوع. هذا يُنشئ بنية متناسقة في جميع الأعمدة.
الخطوة 3: تصميم الكتلة الرئيسية
حدد كتلة الأعمدة (الكتلة الرئيسية) واضبط التباعد ولون الخلفية والمحاذاة للحصول على مظهر متناسق. يمكنك أيضًا إضافة مساحة داخلية لضمان وجود مساحة كافية للمحتوى.
باتباع هذه الطريقة، يمكنك إنشاء تصميمات جذابة ومنظمة بشكل جيد تعزز كلاً من سهولة الاستخدام والتصميم.
اقرأ أيضاً: كيفية إنشاء وحدات بناء باستخدام بينتو في ووردبريس
كيفية استخدام الكتل داخل كتل أخرى؟
على الرغم من أن كتل المجموعات والأعمدة هي الكتل الرئيسية الأكثر شيوعًا في ووردبريس، إلا أن هناك العديد من الكتل الأخرى التي تسمح بالتداخل. تتيح لك هذه الكتل الخاصة دمج عناصر متعددة بطرق إبداعية، مما يمنحك مرونة أكبر في تصميم صفحاتك.
- مربع الغلاف: نص أو أزرار فوق صورة: يتيح لك مربع الغلاف وضع نص أو عناوين أو أزرار فوق صورة خلفية أو لون. يُعد هذا مثاليًا للبنرات الرئيسية أو عناوين الأقسام التي تحتاج إلى تأثير بصري. يمكنك أيضًا ضبط شفافية الطبقة الشفافة لتحسين سهولة القراءة.
- كتلة الوسائط والنصوص: محتوى متجاور: صُممت كتلة الوسائط والنصوص للتصميمات التي تظهر فيها صورة أو مقطع فيديو بجانب نص. يمكنك اختيار الجانب الذي تظهر عليه الوسائط، مما يجعلها مثالية لوصف الميزات أو تسليط الضوء على الخدمات.
- قسم الأزرار: روابط متعددة معًا: يتيح لك قسم الأزرار إضافة رابطين أو أكثر من روابط الأزرار جنبًا إلى جنب. وهذا مفيد لتوفير عدة دعوات لاتخاذ إجراء في قسم واحد، مثل "التسجيل" و"معرفة المزيد".
يؤدي استخدام أنواع الكتل هذه إلى توسيع خيارات التصميم الخاصة بك، مما يسمح لك بتضمين العناصر ودمجها بطرق جذابة بصريًا.
تعرف على المزيد: ما هي أنماط كتل ووردبريس؟
نصائح لإتقان استخدام الكتل المتداخلة في ووردبريس
تُتيح لك الكتل المتداخلة الارتقاء بتصميمات ووردبريس الخاصة بك من مستوى أساسي إلى مستوى احترافي. بمجرد أن تُتقن إضافتها وتخصيصها، يمكنك البدء في استكشاف التقنيات المتقدمة وأفضل الممارسات وتحسينات الإضافات لإنشاء تصميمات أكثر احترافية.
إن إتقان هذه النصائح سيساعدك على توفير الوقت، والحفاظ على الاتساق، وإطلاق العنان للإمكانيات الكاملة لمحرر الكتل.
تقنيات متقدمة باستخدام الكتل المتداخلة
بعد تعلم الأساسيات، يمكنك تطوير الكتل المتداخلة باستخدام استراتيجيات تخطيط متقدمة. على سبيل المثال:
- التداخل متعدد المستويات: بالنسبة للأقسام ذات البنية المعقدة، ضع الكتل المتداخلة داخل كتل متداخلة أخرى. على سبيل المثال، يمكنك إنشاء كتلة "مجموعة" تحتوي على عدة كتل "أعمدة"، لكل منها محتواها الداخلي الخاص.
- قوالب قابلة لإعادة الاستخدام: حوّل التخطيطات المتداخلة المستخدمة بكثرة إلى قوالب قابلة لإعادة الاستخدام لتتمكن من إدراجها في صفحات متعددة. يُعدّ هذا مفيدًا بشكل خاص لعناصر مثل شهادات العملاء، وجداول الأسعار، وأقسام دعوة المستخدمين لاتخاذ إجراء.
- تنسيق CSS مخصص: أضف فئات مخصصة إلى الكتلة الرئيسية واكتب قواعد CSS للتحكم في التباعد أو الألوان أو الرسوم المتحركة بدقة أكبر.
تتيح لك هذه التقنيات إنشاء تصميمات فريدة بصريًا وسهلة الإدارة عبر موقعك.
دليل المبتدئين: تحرير الموقع بالكامل على ووردبريس
إنشاء المحتوى باستخدام الكتل المتداخلة
لا تقتصر فائدة الكتل المتداخلة على التصميم فحسب، بل إنها تجعل إنشاء المحتوى أكثر تنظيمًا وكفاءة. إليك الطريقة:
- تجميع المحتوى ذي الصلة: احتفظ بالعناوين والنصوص والصور الخاصة بقسم واحد معًا حتى تظل محاذاتها عند نقلها.
- تخطيطات قابلة لإعادة الاستخدام لأنواع المحتوى: للحفاظ على الاتساق، استخدم نفس بنية الكتلة المتداخلة لجميع مقدمات منشورات المدونة أو أوصاف الخدمات.
- تحديثات أسرع: عند تغيير المحتوى، يمكنك تعديل كتلة رئيسية واحدة وتطبيق التحديثات على الفور على جميع الكتل الداخلية.
باستخدام هذه الأساليب، يمكنك إنتاج تصميمات محتوى ذات مظهر احترافي بسرعة، دون الحاجة إلى إعادة بناء الأقسام من الصفر.
موضوع ذو صلة: كيفية إخفاء أو إظهار المحتوى المحظور في ووردبريس
إضافات الكتل والتطوير
إذا كنت ترغب في تجاوز الخيارات الافتراضية، ففكر في استخدام إضافات ووردبريس الخاصة بالكتل. توفر العديد من هذه الإضافات إمكانيات محسّنة لتنسيق وتصميم الكتل المتداخلة.
- برنامج Kadence Blocks تخطيطات صفوف متقدمة، ومسافات مخصصة، وعناصر تحكم سريعة الاستجابة.
- GenerateBlocks بخفة وزنها وهي مثالية لبناء تصميمات متداخلة قابلة للتخصيص بدرجة عالية.
- Stackable أنماط كتل جاهزة تستخدم هياكل متداخلة.
بالنسبة للمطورين، يوفر ووردبريس واجهة برمجة تطبيقات الكتل (Block API) ومكون InnerBlocks لإنشاء أنواع كتل مخصصة. يتيح لك هذا إنشاء مجموعات فريدة من الكتل الرئيسية والفرعية، وتجميعها كإضافات، وإعادة استخدامها في مختلف المشاريع.
سواء كنت تستخدم إضافات جاهزة أو تقوم بتطوير إضافاتك الخاصة، فإن هذه الأدوات يمكن أن توسع بشكل كبير من مرونة التصميم لديك.
اقرأ أيضاً: كيفية إنشاء نماذج أولية لمواقع ووردبريس
أفضل الممارسات لاستخدام الكتل المتداخلة
على الرغم من قوة الكتل المتداخلة، من المهم استخدامها بشكل استراتيجي. اتبع أفضل الممارسات التالية للحفاظ على تصميماتك نظيفة وسهلة الإدارة:
- اجعل الأمر بسيطاً: تجنب التداخل غير الضروري، لأن كثرة الطبقات قد تجعل التحرير بطيئاً ومربكاً.
- خطط لتصميمك: ارسم تخطيطًا أوليًا لأقسامك قبل إنشائها في المحرر. هذا يقلل من الحاجة إلى عمليات إعادة ترتيب كبيرة لاحقًا.
- الحفاظ على الاتساق: قم بتطبيق حشوات وهوامش وأنظمة ألوان متسقة عبر الأقسام المتشابهة للحصول على تصميم متماسك.
- اختبار الاستجابة: قم دائمًا بمعاينة الكتل المتداخلة على شاشات الجوال والأجهزة اللوحية للتأكد من أنها تتكيف بشكل جيد مع الشاشات الأصغر.
- استخدم أنماط العناصر الأصلية بحكمة: قم بإجراء التغييرات على مستوى الكتلة الأصلية كلما أمكن ذلك لضمان تطابق جميع الكتل الداخلية مع النمط المقصود.
باتباع هذه النصائح، يمكنك ضمان بقاء الكتل المتداخلة لديك فعالة وجذابة بصريًا وسهلة الاستخدام.
الدليل الشامل: تحويل Elementor إلى Gutenberg
في ملخص
تتيح الكتل المتداخلة في ووردبريس للمبتدئين إمكانية إنشاء تصميمات احترافية ومرنة دون الحاجة إلى كتابة أكواد برمجية. من خلال فهم الكتل الرئيسية والداخلية، واستخدام المجموعات والأعمدة بفعالية، وتخصيص الأنماط، يمكنك تصميم صفحات جذابة بصريًا وسهلة الصيانة.
سواء كنت تقوم بإنشاء تخطيط لمنشور مدونة أو صفحة هبوط كاملة، فإن الكتل المتداخلة تتيح لك تنظيم المحتوى بشكل نظيف، وتطبيق تصميم متسق، وإجراء تحديثات سريعة في المستقبل.
لذا، ابدأ بالتجربة اليوم، وستجد أنها واحدة من أكثر الأدوات فائدة في محرر الكتل في ووردبريس.
الأسئلة الشائعة حول الكتل المتداخلة في ووردبريس
لماذا يُعد فهم الكتل المتداخلة أمراً مهماً؟
يساعدك فهم الكتل المتداخلة على بناء تصميمات جذابة بصريًا، وإدارة العناصر الفردية بكفاءة، وتبسيط سير عمل محرر الموقع الخاص بك للحصول على تجربة أفضل لموقع ووردبريس.
كيف يتم دمج الكتل في ووردبريس؟
في محرر غوتنبرغ، يمكنك دمج الكتل بإضافة كتلة مجموعة أو كتلة عمود ككتلة رئيسية واحدة، ثم إدراج كتل داخلية مثل كتل الفقرات أو كتل الصور أو كتل الأزرار. هذا يُنشئ محتوى متداخلًا لتصميمات أكثر جاذبية وتنظيمًا.
ماذا يعني وجود عمود متداخل في ووردبريس؟
يعني العمود المتداخل وضع كتلة عمود داخل عمود آخر، مما يسمح بوجود كتل متعددة أو كتل فرعية داخل نفس القسم للتخطيطات الديناميكية وإنشاء تصميمات معقدة بدون استخدام التعليمات البرمجية المخصصة.
كيف يتم ترتيب الكتل في ووردبريس؟
يمكنك ترتيب الكتل الفردية باستخدام مقبض السحب والإفلات أو الأسهم لأعلى/لأسفل في شريط الأدوات الموجود في الزاوية العلوية اليسرى من الكتلة. هذه الميزة تعمل مع الكتل الفردية الموجودة مسبقًا والكتل الجديدة التي تضيفها.
كيف تستخدم كتل المحتوى في ووردبريس؟
لاستخدام كتل المحتوى، انقر فوق رمز إضافة كتلة، واختر من بين كتل العناوين، أو كتل الفقرات، أو كتل الصور، أو كتل الأزرار، وأدرجها في تصميمك لإنشاء محتوى يتناسب مع قالب ووردبريس.
ما هي إعدادات الكتلة الرئيسية؟
تتحكم إعدادات الكتلة الرئيسية في تصميم جميع الكتل داخل الحاوية. ويؤدي تغيير إعداد واحد إلى تحديث كل كتلة على حدة داخل بنية الكتلة الواحدة.
هل يمكن أن تساعد إضافات الكتل في التعامل مع الكتل المتداخلة؟
نعم. يمكن لمكون إضافي للكتلة إضافة كتل مخصصة، وتحسين الأداء، وتوفير المزيد من عناصر التحكم في مكونات التحرير لعملية إنشاء المحتوى.
