لا يوجد منتجات فى سلة التسوق

طريقة اضافة السلايدر المتحرك في قالب المحبة

سوف نتعلم في هذا المقال طريقة اضافة السلايدر المتحرك في واجهة المتجر 

 

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

كما تشاهد اترك خانة العنوان فارغة وبعدها قن بالذهاب إلى الوصف وفي مربع النص اضغط على القائمة tools وبعدها SourceCode وسوف يتم لك مربع الكود حتى يتم وضع كود هتمل فيه كما في الصورة

وبعد يتم نسخ الكود التالي في المربع 

<section id="slider">
<div class="container">
<div id="slider-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#slider-carousel" data-slide-to="0">&nbsp;</li>
<li class="" data-target="#slider-carousel" data-slide-to="1">&nbsp;</li>
<li class="" data-target="#slider-carousel" data-slide-to="2">&nbsp;</li>
<li class="" data-target="#slider-carousel" data-slide-to="3">&nbsp;</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-6">
<h1>قالب الجواهر</h1>
<h2>قالب مصوغ بالجواهر</h2>
<p>&nbsp;قالب مميز يصلح للمهتمين بالمجوهرات والذهب والتزيين والكماليات&nbsp;</p>
<span style="font-family: tahoma, arial, helvetica, sans-serif; color: #ecf0f1;"><button class="btn btn-primary get" type="button"><a style="color: #ecf0f1;" href="https://register.e-mole.net/jawahertheme">احصل عليه الان</a></button></span></div>
<div class="col-sm-6"><img class="girl img-responsive" src="/images/uploaded/Upload/بدون عنوان.png" alt="" width="1000" height="564" /></div>
</div>
<div class="item ">
<h1>قالب التميز</h1>
<h2>قالب متميز وبعدة الوان</h2>
<p>قالب مميز وهادي بعدة الوان جميلة مع امكانية تخصيص الالوان ومجهز ب13 خدمة الكترونية</p>
<h3 class="col-sm-6"><span style="font-family: tahoma, arial, helvetica, sans-serif; color: #ba372a;">قريبا</span></h3>
<div class="col-sm-6"><img class="girl img-responsive" src="/images/uploaded/Upload/tmaioz.jpeg" alt="" width="671" height="1000" /></div>
</div>
<div class="item">
<div class="col-sm-6">&nbsp;</div>
<div class="col-sm-6">&nbsp;</div>
</div>
<div class="item">
<div class="col-sm-6">
<h1>خدمة العروض المفاجئة</h1>
<h2>خدمات التخفيظات والعروض</h2>
<p>خدمة عبارة عن نافذة منبثقة تظهر في الصفحة الرئيسية للاشتراك في القائمة البريدية الخاصة بالعروض</p>
<button class="btn btn-primary get" type="button">احصل عليها الان</button></div>
<div class="col-sm-6"><img class="girl img-responsive" src="https://www.e-mole.net/images/thumbs/0003101_-.png" alt="" width="469" height="279" /></div>
</div>
</div>
<a class="left control-carousel hidden-xs" href="#slider-carousel" data-slide="prev"> </a> <a class="right control-carousel hidden-xs" href="#slider-carousel" data-slide="next"> </a></div>
</div>
</section>

 

ويتم تتغيير فقط الكلمات الموجودة مثل كلمة خدمة العروض المفاجئة تتغير بعنوان المنتج وخدمة التخفيظات باسم القسم وخدمة عبارة بالوصف خاص بالمنتج وبعدها اسفل في هذا الكود 
<img class="girl img-responsive" src="https://www.e-mole.net/images/thumbs/0003101_-.png" alt="" width="469" height="279" /> 
يتم تغيير الكود الموجود بعد الكلمة src=" برابط الصورة مثل هذا 
https://www.e-mole.net/images/thumbs/0003101_-.png 

ويتم عمل نفس الحركة مع الاكواد الموجودة

 

بعدها ننزل اسفل الصفحة في خانة الاسم الكودي نكتب الكلمة EshopperTopSlider

 

و بعدها حفظ وسوف يظهر السلايدر في الصفحة الرئيسية

اترك تعليقا