آموزش وردپرس

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

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

به احتمال خیلی زیاد در برخی وب سایت ها مشاهده کرده اید که یک باکس در یکی از گوشه های سایت ( معمولاً سمت چپ یا راست در پایین ) قرار گرفته است . به خاطر اینکه این باکس ها شناور هستند با جابجایی کاربر در بخش های مختلف صفحه همچنان در موقعیت خود که گوشه وب سایت است نمایش داده می شوند . مدیران وب سایت ها از این باکس ها برای ارائه پیشنهادی مانند مشاوره رایگان ، مشاوره قبل از خرید ، پشتیبانی و … به کاربران و مشتریان خود استفاده می کنند . در تصویر زیر خروجی کدهای این مقاله را مشاهده می کنید .

در این مطلب از آموزشگاه وردپرس wpjoomla می خواهیم به شما روش ایجاد این نوع باکس ها را به صورت بسیار ساده نشان دهیم .

ابتدا به کد های HTML برای ساختار این باکس نیاز داریم . از کد زیر استفاده کنید .

پس از ایجاد ساختار باید بوسیله کدهای css به ساختار کدهای بالا استایل دهی کنیم . برای اینکار از کدهای css زیر استفاده کنید .

اگر می خواهید موقعیت باکس را از راست به چپ ببرید کافیست مقدار right: 10px; را به left: 10px; تغییر دهید .

نتیجه اجرای کدهای بالا را در بخش زیر مشاهده می کنید . دقت داشته باشید که می توانید کدهای مورد نظر خود را با کلیک روی تب مربوطه در بخش زیر تغییر دهید و نتیجه را به صورت زنده مشاهده کنید و در نهایت کد مورد نظر را برای خود کپی کنید . به عنوان مثال برای تغییر رنگ بخش های مختلف روی تب CSS کلیک کنید و کدها را تغییر دهید .


1

آموزش وردپرس

نوشته های مشابه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
بستن