تخطيطات WordPress Boxed: كيفية إنشاء تخطيط محاصر في WordPress

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

تعد نماذج الصندوق جزءًا من مصطلحات التصميم والتخطيط في CSS. يتم تغليف عناصر HTML في مربع في CSS. يتكون التصميم من أربعة أجزاء: الهوامش ، والحدود ، والحشو ، والمحتوى الفعلي.

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

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

ما هو تنسيق Boxed Layout في WordPress؟

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

القالب ذو العرض الكامل مثالي لأي شخص يستخدم أداة إنشاء صفحات WordPress!

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

ما هو Boxed Layout Divi؟

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

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

كيف يمكنني تغيير التخطيط في موضوع Divi؟

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

هل ديفي سحب وإسقاط؟

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

ما هو التخطيط في ووردبريس؟

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

سيتغير التخطيط الذي تقوم بإنشائه في WP إلى الأبد. يمكنك حفظ ، وحفظ في المجلد المفضل لديك ، وحفظ العديد من التخطيطات كما تريد في مكان واحد عن طريق النقر فوق زر. يعمل هذا المكون الإضافي مع محرر كتلة WooCommerce (Gutenberg) و Divi Builder (مكون إضافي لموضوع WordPress و Elementor و Beaver Builder). باستخدام حساب WP Layouts المجاني ، يمكنك تصميم أكثر من 20 مخططًا. يمكنك حفظ التخطيطات التي قمت بإنشائها أو شراؤها باستخدام مكتبة Divi. يستغرق التحميل بضع دقائق فقط ، ويمكن استخدامه مرارًا وتكرارًا. هذا يرجع إلى حقيقة أن التخطيط الخاص بك لا يتبعك من موقع إلى آخر.

يمكنك استيراد / تصدير التخطيطات وإدارة التخطيطات الخاصة بك وحفظها باستخدام WP Layouts. يجب أن تكون هذه التخطيطات متاحة لأي شخص يقوم بإنشاء موقع ويب. إذا كنت تستخدمه لمدة أسبوعين (هيك ، حتى ليوم واحد) ، فلن تتمكن من تخيل العودة إلى الماضي. أنت مسؤول عما يلي: تحميل المكون الإضافي إلى دليل محتوى / ملحقات WordPress هو أبسط طريقة للقيام بذلك. يمكن استخدام أي تصميم مدرج في WP Layouts على موقع العميل دون مقابل. تم تصميم WP Layouts لتثبيت WordPress متعدد المواقع. يمكن دمج التصميم في حجم يصل إلى 25 ميغابايت (محتوى ، صور ، وما إلى ذلك).

إذا كنت تريد إزالة تخطيط من مجموعاتك ، فانتقل إلى WP Layouts -. لحذف النموذج ، انقر فوقه. انقر فوق الزر حذف لحذف حسابك. برنامج WP Layouts مفتوح المصدر هو برنامج مجاني ومفتوح المصدر. تم إتاحة هذا المكون الإضافي للجمهور من قبل مجموعة متنوعة من المساهمين. قمنا بتجميع قائمة بجميع المراجعات الأربعة لهذا المكون الإضافي. إذا كنت ترغب في تغيير عنوان بريدك الإلكتروني ، يرجى الاتصال بنا على [email protected]

يمكن استخدام هذا لإنشاء Beaver Builder مع هذا البرنامج. لقد مرت عدة أسابيع منذ أن تلقيت ردًا من الدعم. الوقت المدخر لا يصدق.

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

كيفية استخدام تخطيطات صفحة WordPress

في محرر WordPress ، ستستخدم تخطيطات الصفحات. تخطيط الصفحة هو صفحة مصممة مسبقًا بها محتوى نائب يمكنك تغييره بنصك أو صورتك. يمكنك تغيير المحتوى أو إضافة المزيد من الكتل إلى التخطيط باستخدام الكتل في محرر الكتلة. يمكنك إنشاء أول تخطيط مخصص لك بالانتقال إلى كافة الصفحات. انتقل إلى لوحة معلومات WordPress الخاصة بك وأضف علامة تبويب جديدة. ستتمكن من تحديد مُنشئ الصفحات في محرر النصوص الخاص بك. سيفتح هذا الخيار علامة تبويب مُنشئ الصفحة ، والتي يمكنك الوصول إليها بالنقر عليها. هناك العديد من خيارات القالب المتاحة هنا. يمكن الوصول إلى خيار التخصيص من خلال Appearance> Customize على لوحة معلومات WordPress الخاصة بك. سيعرض Customizer جميع أجزاء السمة التي يمكنك تغييرها على الجانب الأيسر ، بالإضافة إلى معاينة حية لتغييراتك. تسمح لك ميزة السحب والإفلات بتخصيص مظهر التخطيط الخاص بك. يمكن إضافة الكتل أو إزالتها من خلال النقر على الرموز الموجودة على الجانب الأيمن من أداة التخصيص. يمكنك تغيير ترتيب الكتل بالنقر فوق السهمين لأعلى ولأسفل بجوار أسماء الكتل.

تخطيط محاصر Css

يشير التخطيط المعبأ في CSS إلى نوع معين من تخطيط CSS المستخدم لإنشاء حد حول عنصر على صفحة الويب. يمكن إنشاء هذا الحد باستخدام خاصية CSS border.

كانت الجداول وسيلة شائعة بالنسبة لنا لتخطيط صفحاتنا قبل العام الماضي. قام النموذج الصندوقي بمعظم العمل في معظم الأوقات. مع نمو الويب في سنوات المراهقة ، تطلبت أساليب أكثر تعقيدًا لتقديم المحتوى. يتم استخدام Flexbox ، وهو كائن في المتصفح ، لتوضيح للمستخدم كيفية عرض جزء معين من المحتوى. تم نشر مسودة العمل الخاصة بمواصفات CSS3 في 22 مارس 2011. يوضح هذا المستند نموذج الصندوق والأعمدة والقوالب والعوامات الموضوعة ومفاهيم الشبكة. على الرغم من دمج مناطق Adobe في المزيج ، لا يوجد متصفح يدعمها حتى الآن.

يمكن استخدام نموذج flexbox لاستبدال نموذج الصندوق ، ويحدد W3C أن تطبيقات الويب تحتاج إلى نموذج تخطيط أكثر كفاءة. نظرًا لأن عنصر flexbox يتطلب طريقة عرض مضبوطة على طريقة الصندوق ، فغالبًا ما تحتاج إلى div أو اثنين إضافي إذا كنت تستخدم flexbox. عندما تتقن CSS ، فإن عنصر div الإضافي الذي يحتوي على الموضوع يمثل مصدر إزعاج بسيط. لنبدأ البرمجة على الفور بأخذ نفس عميق. Box-flex هي الخاصية التي تحدد كيفية معالجة عرض المربع بواسطة مستعرض الويب. في الرسم التوضيحي الخاص بنا ، كان كل جانب 320 بكسل × 20 بكسل ، وهو ما يمثل 20 مربعًا من الحشو على اليسار واليمين. حصلنا على إجمالي 360 بكسل ، والذي كان 1080 بكسل لثلاثة عناصر.

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

تُستخدم هذه الخصائص لتحديد العناصر التي تظهر في HTML بترتيب قيمها. يمكن نقل المقالة التي تحتوي على class = "sticky" إلى أعلى القائمة دون الحاجة إلى هزها بواسطة الواجهة الأمامية أو النهاية الخلفية. يسمح لنا توجيه الصندوق بمحاذاة العناصر بشكل عمودي على المحاور التي توجد عليها. العبوة العلوية هي جزء آخر من المعلومات التي تساعد في المحاذاة. تم وضع الصندوق أفقيًا بالفعل ، لذلك يمكن استخدامه لتوسيطه أفقيًا. بالإضافة إلى قيم البداية والنهاية والتبرير ، هناك ثلاثة قيم أخرى. من أجل الدقة ، هناك بعض الحقيقة في القول بأن الخواص الأخيرة محدودة و / أو تفتقر إلى دعم المتصفح.

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

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

إنه مكون إضافي HTML بسيط يسمح لك باستخدام Flexie.js في HTML الخاص بك. ستتمكن من تغيير مظهر IE من خلال البحث عن ملفات CSS. على الرغم من أن المغلفات تتطلب الدفع ، إلا أن هذا نموذج مربع مرن قد يكون مثاليًا لإنشاء موقع ويب أو فكرة تجريبية. ستكون بعض المشكلات التي سيتم تناولها في الإصدارات المستقبلية من Firefox موجودة في الأشهر القليلة الأولى. ستكون المواصفات مثيرة للاهتمام لمعرفة كيفية تطويرها ، وكذلك كيف سيتم مشاركة المزايا الأخرى من قبل مجتمع التصميم.

ما المقصود بـ Box Properties Css؟

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

الأنواع المختلفة لمحاذاة النص

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

ما هو Box Border في Css؟

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

أنواع ظل الصندوق

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

ما هو تخطيط مربع التدفق العادي في Css؟

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

لماذا تعتبر تخطيطات التدفق هي أفضل طريقة لترتيب الأزرار

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

موقع تخطيط محاصر

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

فوائد موقع الويب الكامل العرض

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

تخطيط محاصر العنصر

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

بدلاً من التخطيط المعبأ ، يجب أن يكون لصفحة التذييل التي تحتوي على Elementor عرض كامل. في حاوية منشئ الصفحة ، التي لها عرض كامل ، تركت إطارات بيضاء على الجانبين الأيسر والأيمن. ماذا يمكن أن يعني أن يكون لديك مذكرة حقوق التأليف والنشر GP؟ لقد قمت بتخصيص حقل النص المخصص عن طريق إدراج عنصر * span> لأنه إذا كان فارغًا ، فسيظل يعرض الرسالة.

كيفية تغيير حجم الصناديق ونقلها في Elemento

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