كيفية إزالة Divi Sidebar Border

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

الشريط الجانبي الافتراضي Divi

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

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

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

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

إزالة أو تصميم حدود الشريط الجانبي لديفي بالكود

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

ستحتاج إلى إضافة بعض CSS إلى حقل Divi Theme Options Custom CSS . للوصول إلى حقل CSS المخصص ، انتقل إلى Divi > Theme Options في قائمة لوحة معلومات WordPress. البقاء في علامة التبويب عام ثم التمرير إلى أسفل إعدادات للصق التعليمات البرمجية.

إليك CSS التي ستحتاجها:

#main-content .container:before {
width:0;
}
.et_pb_widget_area_right { border-left:0 !important; }
.et_pb_widget_area_left { border-right:0 !important; }

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

الصق الكود في حقل CSS المخصص واحفظ التغييرات.

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

كيفية استخدام Divi Theme Builder لإزالة Divi Sidebar Border بدون رمز

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

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

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

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

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

وحدة ديفي الشريط الجانبي

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

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

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

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

الخيار الثاني في قسم Layout هو تبديل يسمى Show Border Separator . هذا يسمح لك بتعطيل أو تمكين الحدود. يتم تمكينه افتراضيًا. ببساطة انقر فوق زر التبديل. تمت الآن إزالة الحد من الشريط الجانبي. احفظ التخطيط واخرج من المحرر. انه من السهل.

أخيرًا ، حدد حفظ التغييرات قبل مغادرة Divi Theme Builder. يعرض الآن نصًا مخصصًا لصفحة المدونة.

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

إنشاء حدود Divi الجانبية المخصصة

إذا كنت لا ترغب في استخدام سمة Divi لإزالة حدود الشريط الجانبي ، ولكن لا تريد حدود WordPress القياسية ، يمكنك إنشاء حد شريط جانبي مخصص باستخدام وحدة Divi الجانبية.

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

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

تعرض صفحة مدونتي الآن حدود الشريط الجانبي المخصص لـ Divi.

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

هذا هو تصميمي النهائي مع الحد المنقط. يمتزج الشريط الجانبي جيدًا مع تصميم المدونة.

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

استنتاج

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

نريد أن نسمع منك. هل قمت بإزالة حدود الشريط الجانبي لـ Divi باستخدام أي من هاتين الطريقتين؟ أخبرنا عن تجربتك في التعليقات أدناه.

صورة مميزة عبر Andrew Rybalko / shutterstock.com