كيفية إنشاء انزلاق دفع الشريط الجانبي في Divi

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

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

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

دعنا نذهب اليها!

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

قم بتنزيل Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

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

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. حدد الخيار "اختيار تخطيط Premade".
   
4. اختر حزمة تخطيط الحدث وانقر لاستخدام تخطيط الصفحة الرئيسية للحدث.
   

كيفية إنشاء انزلاق دفع الشريط الجانبي في Divi

لإنشاء الشريط الجانبي Sliding Push ، سنحتاج إلى استخدام قسم عادي جديد. سنقوم بتحديد حجم القسم ووضعه ليصبح شريطًا جانبيًا ثابتًا يفتح عند النقر فوق زر ، والضغط (والضغط) على منطقة المحتوى الرئيسية على اليمين لإفساح المجال للشريط الجانبي.

بناء القسم

أولاً ، دعنا نضيف قسمًا عاديًا جديدًا إلى الصفحة.

ثم انقل القسم الموجود أعلى الصفحة.

إعدادات القسم

افتح إعدادات القسم وقم بتحديث الوضع ليتم إصلاحه على النحو التالي:

• المركز: ثابت
• الفهرس Z: 9999

ضمن علامة تبويب التصميم ، قم بتحديث الحجم والتباعد كما يلي:

• العرض: 350 بكسل (سطح المكتب والجهاز اللوحي) ، 100٪ (الهاتف)
• ارتفاع: 100٪
• المساحة المتروكة: 100 بكسل للأعلى و 0 بكسل للأسفل

الحشو هو إفساح المجال للرأس في أعلى الصفحة.

بعد ذلك ، ضمن علامة التبويب خيارات متقدمة ، امنح القسم فئة CSS:

• فئة CSS: et-push-sidebar

بمجرد وضع فئة css في مكانها ، امنح القسم لون الخلفية:

• لون الخلفية: # 1a1e36

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

• عرض الحد الأيمن: 2 بكسل
• لون الحد الأيمن: #eeeeee

هذا يعتني بالقسم الذي يعد بمثابة الحاوية الرئيسية لشريطنا الجانبي. حان الوقت الآن لبدء إنشاء الزرين اللذين سنستخدمهما للتبديل بين فتح الشريط الجانبي ثم إغلاقه.

إنشاء أزرار تبديل الشريط الجانبي

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

دعنا نذهب اليها.

إنشاء صف للأزرار

أنشئ صفًا جديدًا من عمود واحد داخل القسم / الشريط الجانبي.

افتح إعدادات الصف وقم بتحديث ما يلي:

• عرض الحضيض: 1
• العرض: 100٪
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

ضمن علامة التبويب خيارات متقدمة ، قم بتحديث خيارات المركز على النحو التالي:

• الموقف: مطلق
• الفهرس Z: 1

إنشاء رمز إغلاق "X"

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

المحتوى

ثم افتح إعدادات دعاية مغالى فيها. ضمن علامة تبويب المحتوى ، أخرج العنوان ومحتوى النص وأضف الرمز X إلى دعاية مغالى فيها.

• استخدام الأيقونة: نعم
• الرمز: x (انظر لقطة الشاشة)

تصميم

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• لون الأيقونة: #eeeeee
• وضع أيقونة الصورة: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 40 بكسل
• العرض: 50 بكسل

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

• تحويل الترجمة X: 100 بكسل
• تحويل الترجمة Y: -10 بكسل

متقدم

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

• تعطيل على: الجهاز اللوحي وسطح المكتب

ثم أضف فئة CSS إلى الدعاية الدعاية ومنحها موضعًا ثابتًا بحيث تظل مرئية عند التمرير عبر محتوى الشريط الجانبي على شاشة الهاتف.

• فئة CSS: et-slide-push-close
• المركز: ثابت
• الموقع: أعلى اليمين

هذا يعتني بزر إغلاق الرمز "X".

إنشاء زر تبديل الشريط الجانبي الرئيسي

لإنشاء زر تبديل الشريط الجانبي الرئيسي ، قم بإضافة وحدة دعاية دعاية تحت دعاية رمز "X" الحالية.

المحتوى

قم بتحديث العنوان وانقر لاستخدام رمز السهم لأسفل.

• العنوان: معلومات الحدث
• استخدام الأيقونة: نعم
• الرمز: سهم لأسفل (انظر لقطة الشاشة)

بعد ذلك ، أضف لون الخلفية إلى الدعاية المغلوطة.

• لون الخلفية: #eeeeee

تصميم

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• لون الأيقونة: # 1a1e36
• وضع الصورة / الرمز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 25 بكسل
• خط العنوان: ممر علوي
• وزن خط العنوان: غامق
• نمط خط العنوان: TT
• لون نص العنوان: # 1a1e36
• تباعد حروف العنوان: 2 بكسل
• ارتفاع خط العنوان: 1.2em
• الحشو: 0.6em أعلى ، 1em يسار ، 1em يمين
• الزوايا الدائرية: 5 بكسل في الزاويتين السفليتين

لوضع إعلان دعاية مغالى فيه وتدويره خارج القسم ، استخدم خيارات التحويل كما يلي:

• تحويل الترجمة Y: 100 بكسل
• استدارة تحويل Z: -90 درجة
• أصل التحويل: أعلى اليمين

متقدم

ضمن علامة التبويب خيارات متقدمة ، قم بتحديث ما يلي:

• فئة CSS: et-slide-push-toggle
• الموقف: مطلق
• الموقع: يسار الوسط

إضافة كود مخصص بوحدة كود

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

لإضافة الرمز ، قم أولاً بإضافة وحدة رمز نمطية إلى نفس العمود.

ثم قم بلصق التعليمة البرمجية التالية في وحدة التعليمات البرمجية.

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

إنشاء صف محتوى الشريط الجانبي

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

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

إعدادات الصف

افتح إعدادات الصف الجديد وقم بتحديث ما يلي:

• العرض: 100٪
• ارتفاع: 100٪
• الحشو: 5٪ لأعلى ، 5٪ أسفل ، 5٪ يسار ، 5٪ يمين

ضمن علامة التبويب خيارات متقدمة ، قم بتحديث خيارات التجاوز كما يلي:

• التدفق الأفقي: التمرير (سطح المكتب والجهاز اللوحي) ، تلقائي (الهاتف)
• تجاوز عمودي: التمرير (سطح المكتب والجهاز اللوحي) ، تلقائي (الهاتف)

ملء الشريط الجانبي بالمحتوى / الوحدات

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

النتيجة النهائية

تحقق من النتيجة النهائية على الصفحة المباشرة.

إضافة الشريط الجانبي Sliding Push إلى قالب الصفحة

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

حفظ تخطيط القسم في مكتبة Divi

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

قم بإنشاء قالب صفحة جديد

بعد ذلك ، انتقل إلى منشئ القوالب وأنشئ قالبًا جديدًا وقم بتعيين هذا القالب لجميع الصفحات.

إضافة الشريط الجانبي المنزلق إلى قالب الصفحة

بعد ذلك ، انقر لتحرير قالب الصفحة.

داخل محرر تخطيط القالب ، أضف قسم عرض كامل جديد.

ثم أدخل وحدة Fullwidth Post Content في القسم.

انقر بعد ذلك على. قم بإنشاء قسم جديد فوق قسم العرض الكامل. ثم انقر فوق علامة التبويب Add from Library (إضافة من المكتبة) وحدد تخطيط قسم Sliding Push Sidebar من المكتبة.

بمجرد الانتهاء من ذلك ، يمكنك تحرير الشريط الجانبي ولكنك تحتاج إلى استخدام محرر تخطيط الجسم.

حفظ إعدادات Theme Builder

تأكد من حفظ التغييرات في منشئ السمات.

الآن ستحتوي جميع صفحاتك على الشريط الجانبي.

افكار اخيرة

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

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

هتافات!