اضافة خطط الاسعار في موقعك بواسطة بوتستراب
اليوم شرح جديد لكيفية اضافة اداة خطط الأسعار في موقعك بواسطة مكتبة بوتستراب المكتبة الأشهر في العالم وسنشرح اليوم اضافة خطط الأسعار بالبوتستراب بدون اضافة أي اضافات نهائيا ، الأمر يتطلب منك فقط خبرة بسيطة جدا في التعامل في الأكواد ونحن سنحاول تبسيط أي امر معقد سيواجهنا في الموضوع .
شرح اضافة أكواد بوتستراب في موقغك
قبل الدخول في شرح الموضوع يجب أن تقوم باضافة أكواد مكتبة البوتستراب داخل موقعك وان كان موقعك به هذه الأكواد فلاداعي لاضافتها مرة اخرى علما بان هذه الأكواد يتم اضافتها مرة واحدة فقط قم بالدخول في الموقع الرسمي لبوتستراب في صفحة التقديم ثم قم باضافة الاكواد الموجودة داخل الصفحة اسفل وسم <head> في موقعك وسنجد هذا الوسم في الووردبريس عن طريق الدخول الي لوحة الادارة ثم المظهر ثم محرر القوالب ثم header.php وستجد هذا الكود بداخله .
شرح اضافة خطط الاسعار في موقعك
اول شيء سنقوم باضافته هذا الكود في موقعك بين وسمي head :-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
#price-section {
background-color: #fafafa;
}
.pricing .pricing-head {
position: relative;
background: rgb(158, 188, 133);
color: #ffffff;
text-align: center;
font-weight: bold;
}
.pricing .price {
display: inline-block;
position: relative;
}
.pricing .price sup {
position: absolute;
top: 50px;
left: -10px;
font-size: 24px;
}
.pricing .price .price-amount {
font-size: 108px;
letter-spacing: -4px;
}
.pricing .price small {
position: relative;
left: -10px;
font-size: 18px;
}
.pricing ul {
list-style: none;
margin: 0;
background: #eee;
text-align: center;
padding-left: 0px;
}
.pricing ul li {
border-bottom: solid 1px #e1e1e1;
padding-top: 20px;
padding-bottom: 20px;
}
.pricing .pricing-grab {
display: block;
text-align: center;
font-size: 20px;
font-weight: bold;
padding: 20px 12px;
color: #ffffff;
background: rgb(211, 123, 123);
}
</style>ثم قم بحفظ الاعدادات وبهذه الطريقة ستكون قد اضفت أكواد التصميم الخاصة بالاداة (خطة الأسعار ) نأتي للشرح الأبسط ، قم باضافة كود ال HTML داخل نص صفحتك
<div class="row row main-low-margin">
<!-- Details for Plan 1 -->
<div class="col-md-4 col-sm-4">
<div class="pricing">
<div class="pricing-head">
<span class="price">
<sup>$</sup>
<span class="price-amount">12 </span>
<small>per month</small>
</span>
</div>
<ul>
<li><strong>BASIC PLAN</strong></li>
<li><strong>1 GB </strong> Data</li>
<li>10 <strong>Emails</strong></li>
<li>Limit Of <strong>10</strong> Users</li>
<li><strong>24x7</strong> Support</li>
<li><strong>Online</strong> Access Available</li>
<li><strong>Online</strong> Management Tool</li>
</ul>
<a href="#" class="pricing-grab">GET IT NOW</a>
</div>
</div>
<!-- Details for Plan 2 -->
<div class="col-md-4 col-sm-4">
<div class="pricing">
<div class="pricing-head">
<span class="price">
<sup>$</sup>
<span class="price-amount">15 </span>
<small>per month</small>
</span>
</div>
<ul>
<li><strong>MEDIUM PLAN</strong></li>
<li><strong>5 GB </strong> Data</li>
<li>15 <strong>Emails</strong></li>
<li>Limit Of <strong>15</strong> Users</li>
<li><strong>24x7</strong> Support</li>
<li><strong>Online</strong> Access Available</li>
<li><strong>Online</strong> Management Tool</li>
</ul>
<a href="#" class="pricing-grab">GET IT NOW</a>
</div>
</div>
<!-- Details for Plan 3 -->
<div class="col-md-4 col-sm-4">
<div class="pricing">
<div class="pricing-head">
<span class="price">
<sup>$</sup>
<span class="price-amount">18 </span>
<small>per month</small>
</span>
</div>
<ul>
<li><strong>ADVANCE PLAN</strong></li>
<li><strong>10 GB </strong> Data</li>
<li>20 <strong>Emails</strong></li>
<li>Limit Of <strong>20</strong> Users</li>
<li><strong>24x7</strong> Support</li>
<li><strong>Online</strong> Access Available</li>
<li><strong>Online</strong> Management Tool</li>
</ul>
<a href="#" class="pricing-grab">GET IT NOW</a>
</div>
</div>
</div>بعدها قم بتعديل البيانات بالبيانات التي تناسبك وبعدها قم بحفظ الصفحة وستجد الاضافة تعمل معك بدون أي مشاكل , اذا كنت محترف في التعامل مع الأكواد يمكنك التعديل علي الوان وتصميم هذه الأداه من خلال اكواد CSS الموجودة أعلى المقال
لمعاينة الأداة علي codepen , هذا كان موضوع اليوم وأفضل اضافات ووكومرس اتمني ان يكون المقال أفادكم ولاتنسوا مشاركة المقال للافادة ولاتنسي الاطلاع علي شهادات الموقع واذا كان لديك أي استفسار اتركه في تعليق
