طراحی باکس‌ شیک و کاربرپسند در المنتور

سلام به رفیق رایا وردپرسی خودم! 👋 حالت چطوره؟ آماده‌ای، گوشه‌ای از سایتت رو به یه باکس شیک و چشم‌نواز مجهز کنی که کاربرا رو محو خودش کنه؟

تو دنیای پرهیاهوی وب، اولین چیزی که کاربر می‌بینه ظاهر صفحه‌ته. هر چی طراحی تمیزتر و خلاقانه‌تر باشه، حس حرفه‌ای‌بودن به مخاطب منتقل می‌شه و زمان موندنش تو سایتت بیشتر می‌شه. یکی از مهم‌ترین ابزارهای این کار، باکس‌های محتوا هستن؛ اگه یکنواخت باشن، عملاً هیچ اثری ندارن؛ اما اگه بتونی یه باکس شیک و منحصربه‌فرد خلق کنی، کاربر کنجکاو می‌شه کلیک کنه و بیشتر درگیر محتوای تو بشه! 👍

معمولاً توی المنتور، ویجت‌های آماده‌ای برای ساخت باکس خدمات یا معرفی محصول داری، ولی خب اونا یه سری محدودیت‌ها دارن و شاید نتونی اون طرح دقیقی که توی ذهنته رو پیاده کنی. اینجا جاییه که پای کدنویسی میاد وسط! نترس، قرار نیست برنامه‌نویس بشی! 😉 فقط کافیه بدونی چطور از ویجت HTML المنتور استفاده کنی و کدهای آماده‌ای مثل همین کدی که قراره با هم بررسی کنیم رو به کار ببری تا یه باکس شیک و کاملاً شخصی‌سازی شده برای خودت داشته باشی. آماده‌ای بریم سراغ اصل مطلب؟ 🚀

🔥آموزش طراحی باکس شیک و کاربرپسند در المنتور

برای اینکه یه باکس شیک بسازی، نیاز داری از المنتور و ویجت HTML استفاده کنی. من کدهای HTML و CSS رو برات آماده کردم و توی بخش‌های جداگانه گذاشتم تا راحت بتونی کپی کنی و استفاده کنی. فقط کافیه این مراحل رو دنبال کنی:

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

برای اینکه یه باکس شیک بسازی، نیاز داری از المنتور و ویجت HTML استفاده کنی. من کدهای HTML و CSS رو برات آماده کردم و توی بخش‌های جداگونه گذاشتم تا راحت بتونی کپی کنی و استفاده کنی. فقط کافیه این مراحل رو دنبال کنی!

گام 1: ویجت HTML رو توی المنتور اضافه کن

• برو توی صفحه‌ای که می‌خوای باکس رو طراحی کنی و المنتور رو باز کن.
• یه بخش جدید بساز و از بین ویجت‌ها، HTML رو انتخاب کن.
• ویجت رو بکش و توی بخش مورد نظرت بنداز.

گام 2: کد HTML رو اضافه کن

این کد HTML ساختار باکس شیک رو می‌سازه. شامل یه آیکون، عنوان، توضیحات و یه دکمه خوشگله. فقط کافیه اینو توی ویجت HTML بذاری:

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗   ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║   ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

درباره کد HTML بالا:

• تگ‌های (div) و (button) اسکلت و ساختار باکست رو می‌سازن.
• rayawp-service-item: کانتینر اصلی باکسمون هست.
• rayawp-service-front-content: قسمتیه که محتوای اصلی باکس (آیکون، عنوان، توضیحات، دکمه) داخلش قرار می‌گیره.
• rayawp-top-shape: اون شکل هندسی خاص بالای باکسمونه.
• rayawp-service-icon: محل قرارگیری آیکونه.
• rayawp-service-title: عنوان باکسه.
• rayawp-service-description: توضیحات باکسه.
• rayawp-service-button: دکمه پایین باکسه.

چطوری شخصی‌سازیش کنی؟ خیلی آسونه! 😉

• تغییر متن‌ها و آیکون: توی قسمت HTML، کافیه متن‌هایی مثل “رایا وردپرس”، “ترفندهای خاص طراحی وب رو اینجا یاد بگیر” و “کلیک کن” رو پیدا کنی و با متن‌های خودت جایگزین کنی. برای آیکون هم تگ <i class="fas fa-smile"></i> رو پیدا کن و کلاس آیکون (fas fa-smile) رو عوض کن.

گام 3: کد CSS رو اضافه کن

این کد CSS ظاهر باکس رو قشنگ‌تر می‌کنه. از رنگ‌های گرادیانت، انیمیشن و افکت‌های hover استفاده شده که باکست رو خاص کنه. این کد رو میتونی در قسمت CSS سفارشی خود ویجت المنتور که از طریق تب پیشرفته قابل دسترسی هست بزاری :

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗   ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║   ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

نکته مهم

بعد از اینکه CSS رو توی بخش مربوطه قرار دادی، باکس‌ت اوکی میشه. اما اگه بخوای مثلاً تو یه ردیف ۳ تا (یا هر تعداد دلخواه) باکس داشته باشی، کافیه روی همون ستون مورد نظر کلیک کنی، گزینه‌ی تکثیر (Duplicate) رو بزنی، و بعد هر نسخه‌ی جدید رو با متن و استایل دلخواهت شخصی‌سازی کنی. 😎✨ به همین راحتی!

پایان: وقتشه دست به کار بشی!

خب، حالا دیگه کار تمومهههه! 🎉 با این آموزش تونستی یه باکس شیک و حرفه‌ای توی المنتورت طراحی کنی. خلاقیتت رو به کار بنداز و باکس‌های خاص خودت رو بساز. اگه سوالی داشتی، توی کامنت‌ها بپرس که سریع جوابت رو بدم. موفق باشی، ستاره باش و در تاریکی مسیرو نشون بده!🌟

آموزش ایجاد روبان روی عکس در المنتور

مطالعه

با این افکت خفن، عناوین سایت خود را جذاب کنید

مطالعه

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

مطالعه