كيفية إزالة الشريط الجانبي من Divi

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

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

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

هيا بنا نبدأ!

إزالة الأشرطة الجانبية على الصفحات باستخدام إعدادات صفحة Divi

تغيير تخطيط الشريط الجانبي الأيمن الافتراضي للمنشورات الفردية أو الصفحات

بالنسبة للصفحة أو المنشورات التي لا تستخدم Divi Builder ، فإن تخطيط الصفحة الافتراضي يتضمن شريطًا جانبيًا يمينًا يشبه ما يلي:

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

سيؤدي هذا إلى إخراج الشريط الجانبي لهذا المنشور أو الصفحة المعينة.

إزالة الأشرطة الجانبية في صفحة متجر WooCommerce وصفحة الفئة وصفحات المنتج باستخدام خيارات سمة Divi

إذا كان لديك WooCommerce مثبتًا ، فيمكنك العثور على خيارين ضمن خيارات Divi Theme لتغيير تخطيط صفحة WC Shop والفئة وصفحات المنتج.

لإزالة الشريط الجانبي في صفحات WC Shop و Category ، انتقل إلى Divi> Theme Options. ضمن علامة التبويب "عام" ، ابحث عن الخيار المسمى "Shop Page & Category Page Layout for WooCommerce" وقم بتغيير التنسيق إلى "No Sidebar" أو "Fullwidth".

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

إزالة الأشرطة الجانبية عن طريق إنشاء قوالب مخصصة باستخدام منشئ القوالب

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

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

إنشاء قالب منشور مدونة Fullwidth باستخدام Divi Builder

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

فيما يلي مثال سريع على كيفية القيام بذلك:

أولاً ، أنشئ نموذجًا جديدًا وقم بتعيين القالب لكل المنشورات.

ثم أضف نصًا مخصصًا إلى النموذج.

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

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

يمكنك استخدام وحدة صورة لسحب الصورة المميزة كمحتوى ديناميكي.

أو استخدم سلسلة من الوحدات النمطية التي تسحب بيانات وصفية محددة كمحتوى ديناميكي مثل مؤلف المنشور والسيرة الذاتية لمؤلف المنشور وفئات النشر وتاريخ نشر المنشور وعدد التعليقات.

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

بمجرد إنشاء القالب ، يمكنك بسهولة إنشاء منشور مدونة جديد باستخدام محرر منشور WordPress الافتراضي وجعل منشور المدونة هذا يرث تصميم قالب منشور المدونة الذي أنشأته باستخدام Divi Theme Builder.

لمزيد من المعلومات ، تحقق من منشورنا حول كيفية تصميم قالب منشور مدونة باستخدام Divi's Theme Builder.

إنشاء قالب صفحة منتج WooCommerce كامل العرض باستخدام Divi Builder

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

للقيام بذلك ، ما عليك سوى إنشاء نموذج جديد وتعيين النموذج إلى "جميع المنتجات".

ثم أضف نصًا مخصصًا إلى القالب وانقر لإنشاء تخطيط الجسم باستخدام محرر القالب.

ثم استخدم Divi Builder لتضمين وحدات Woo الديناميكية لتصميم قالب صفحة المنتج.

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

لمزيد من المعلومات ، تحقق من منشورنا حول كيفية إنشاء قالب صفحة منتج woo على مستوى الموقع.

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

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

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

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

للحصول على جولة كاملة ، تحقق من منشورنا حول كيفية إنشاء قالب صفحة فئة لمدونتك باستخدام Divi Theme Builder.

إنشاء قالب صفحة 404 Fullwidth باستخدام Divi Builder

يُسهل Theme Builder أيضًا تصميم قالب 404 صفحة لموقع ويب Divi الخاص بك بدون الشريط الجانبي الافتراضي. لا تعتمد صفحة 404 بالضرورة على أي محتوى ديناميكي ، لذا لا تتردد في تصميم أي شيء تريده باستخدام Divi Builder.

للحصول على جولة كاملة ، تحقق من منشورنا حول كيفية إنشاء قالب صفحة 404 باستخدام Divi Theme Builder.

إنشاء قالب صفحة بحث بعرض كامل باستخدام Divi Builder

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

1: عنوان منشور / أرشيف كمحتوى ديناميكي

2: وحدة المدونة لعرض منشورات الصفحة الحالية.

3: وحدة بحث للسماح للمستخدمين بمواصلة البحث حسب الحاجة.

للحصول على جولة كاملة ، تحقق من منشورنا حول كيفية إنشاء قالب صفحة نتائج البحث لموقع الويب الخاص بك باستخدام Divi Theme Builder.

لا تقم بإنشاء قالب نص كامل العرض لجميع الصفحات ما لم يكن لديك سبب محدد

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

لمزيد من المعلومات تحقق من الوثائق الخاصة ببناء قالب هيكل عالمي.

إخراج الشريط الجانبي الافتراضي باستخدام CSS المخصص

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

انتقل إلى Divi> Theme Options. ضمن علامة التبويب "عام" ، الصق التعليمة البرمجية التالية في مربع CSS المخصص أسفل الصفحة:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Hide Sidebar ***/
#sidebar {display:none;}
 
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

افكار اخيرة

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

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

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

هتافات!