ایجاد باکس شناور در گوشه سایت وردپرس بدون افزونه

ایجاد باکس شناور در گوشه سایت وردپرس بدون افزونه
به احتمال خیلی زیاد در برخی وب سایت ها مشاهده کرده اید که یک باکس در یکی از گوشه های سایت ( معمولاً سمت چپ یا راست در پایین ) قرار گرفته است . به خاطر اینکه این باکس ها شناور هستند با جابجایی کاربر در بخش های مختلف صفحه همچنان در موقعیت خود که گوشه وب سایت است نمایش داده می شوند . مدیران وب سایت ها از این باکس ها برای ارائه پیشنهادی مانند مشاوره رایگان ، مشاوره قبل از خرید ، پشتیبانی و … به کاربران و مشتریان خود استفاده می کنند . در تصویر زیر خروجی کدهای این مقاله را مشاهده می کنید .
در این مطلب از آموزشگاه وردپرس wpjoomla می خواهیم به شما روش ایجاد این نوع باکس ها را به صورت بسیار ساده نشان دهیم .
ابتدا به کد های HTML برای ساختار این باکس نیاز داریم . از کد زیر استفاده کنید .
<div class=”fixedbox”>
<div class=”reldiv”>
<h6>آیا به مشاوره نیاز دارید؟</h6>
<p>تماس بگیرید<span class=”number”>0933-399-9033</span>(مشاوره رایگان)</p>
</div>
<div class=”call-telegram”><a href=”https://t.me/iebrahimitelegram” target=”_blank” rel=”nofollow”><i class=”fa fa-paper-plane-o” aria-hidden=”true”></i>ارسال پیام در تلگرام</a></div>
</div>
|
<div class=“fixedbox”> <div class=“reldiv”> <h6>آیا به مشاوره نیاز دارید؟</h6> <p>تماس بگیرید<span class=“number”>0933–399–9033</span>(مشاوره رایگان)</p> </div> <div class=“call-telegram”><a href=“https://t.me/iebrahimitelegram” target=“_blank” rel=“nofollow”><i class=“fa fa-paper-plane-o” aria–hidden=“true”></i>ارسال پیام در تلگرام</a></div> </div>
|
پس از ایجاد ساختار باید بوسیله کدهای css به ساختار کدهای بالا استایل دهی کنیم . برای اینکار از کدهای css زیر استفاده کنید .
.fixedbox {
font-family: tahoma;
background: #ffffff;
border-radius: 5px;
position: fixed;
right: 10px;
bottom: 10px;
width: 220px;
border: 1px solid #D9DEE1;
z-index: 100;
width:auto;
}
.fixedbox .reldiv {
padding: 20px;
}
.fixedbox .call-telegram {
background: #f6f9fc;
padding: 20px;
text-align: center;
}
.fixedbox .call-telegram a {
background: #0088cc;
padding: 5px 18px;
display: inline-block;
cursor: pointer;
border-radius: 3px;
margin: 0 auto;
color: #ffffff;
font: 300 15px/30px Tahoma;
text-decoration:none;
}
.fixedbox p .number {
color: #f13a56;
font: 500 19px/38px tahoma;
display: block;
}
.fixedbox h6 {
font: 500 12pt/18px tahoma;
border-bottom: 1px solid #D9DEE1;
color: #526066;
padding: 0 0 15px 0;
margin: 0;
text-align: center;
}
.fixedbox p {
color: #333;
font: 500 11pt/18px tahoma;
margin: 20px 0 0px 0;
text-align: center;
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
|
.fixedbox { font–family: tahoma; background: #ffffff; border–radius: 5px; position: fixed; right: 10px; bottom: 10px; width: 220px; border: 1px solid #D9DEE1; z–index: 100; width:auto; } .fixedbox .reldiv { padding: 20px; } .fixedbox .call–telegram { background: #f6f9fc; padding: 20px; text–align: center; } .fixedbox .call–telegram a { background: #0088cc; padding: 5px 18px; display: inline–block; cursor: pointer; border–radius: 3px; margin: 0 auto; color: #ffffff; font: 300 15px/30px Tahoma; text–decoration:none; } .fixedbox p .number { color: #f13a56; font: 500 19px/38px tahoma; display: block; } .fixedbox h6 { font: 500 12pt/18px tahoma; border–bottom: 1px solid #D9DEE1; color: #526066; padding: 0 0 15px 0; margin: 0; text–align: center; } .fixedbox p { color: #333; font: 500 11pt/18px tahoma; margin: 20px 0 0px 0; text–align: center; }
|
اگر می خواهید موقعیت باکس را از راست به چپ ببرید کافیست مقدار right: 10px; را به left: 10px; تغییر دهید .
نتیجه اجرای کدهای بالا را در بخش زیر مشاهده می کنید . دقت داشته باشید که می توانید کدهای مورد نظر خود را با کلیک روی تب مربوطه در بخش زیر تغییر دهید و نتیجه را به صورت زنده مشاهده کنید و در نهایت کد مورد نظر را برای خود کپی کنید . به عنوان مثال برای تغییر رنگ بخش های مختلف روی تب CSS کلیک کنید و کدها را تغییر دهید .
1