طراحی یک باکس تبلیغاتی جذاب در المنتور

سلام رفیق! 👋 – طراحی یک باکس تبلیغاتی جذاب در المنتور

صادقانه بهت میگم، توی دنیای شلوغ اینترنت، چشم‌ها خیلی زود خسته میشن و از روی محتوای تکراری سریع رد میشن. اگه می‌خوای نگاه‌ها رو جذب کنی و یه پیام مهم رو واقعا به مخاطبت برسونی، یه “باکس تبلیغاتی” معمولی که با ویجت‌های پیش‌فرض ساخته شده، دیگه اونقدرها که باید، کارساز نیست. 🥱 تو نیاز داری به یه چیزی که متفاوت باشه، یه چیزی که چشم رو بگیره و نگه داره! 💥

تا حالا شده وارد یک سایت بشی و یک باکس تبلیغاتی زیبا و چشم‌نواز نظرت رو جلب کنه؟ همون باکس‌هایی که طراحی حرفه‌ای و متفاوتشون انگار بهت میگن “هی! یه لحظه به من نگاه کن و روی من کلیک کن!” 😍 این باکس‌ها تصادفی جذاب نشدن، پشتشون فکر و خلاقیته!

شاید فکر کنی ساختن یه همچین “باکس تبلیغاتی” کار سختیه و تو نمیتونی انجامش بدی؟ 🤔 اصلا و ابدا! من امروز اومدم بهت یاد بدم چطور با ابزار قدرتمند المنتور و یه ذره چاشنی کد، یه باکس بسازی که نه تنها توجه کاربرو جلب کنه، بلکه نرخ کلیک (CTR) سایتت رو هم حسابی ببره بالا😎 آماده‌ای برای این آموزش جذاب؟ پس تا پایان این آموزش هیجان‌انگیز همراه من باش! یالا بریم!

چرا باکس تبلیغاتی سفارشی توی المنتور؟

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

×

جادوی طراحی: ساخت کارت‌ با گوشه درخشان در المنتور

مطالعه

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

یه باکس تبلیغاتی خوب مثل یه ویترین قشنگه که کاربرا رو جذب می‌کنه. این باکس می‌تونه برای تبلیغ محصول، معرفی دوره آموزشی، یا حتی یه پیشنهاد ویژه باشه. اگه درست طراحی بشه، نرخ کلیک (CTR) سایتت حسابی بالا می‌ره و کاربرا بیشتر با محتوات ارتباط برقرار می‌کنن. 😊

آموزش ساخت باکس تبلیغاتی در المنتور 🛠️

خب رفیق، دیگه مقدمه چینی کافیه، وقتشه بریم سراغ قسمت هیجان‌انگیز و شیرین ماجرا! 🎉 جایی که قراره با هم آستین‌ها رو بالا بزنیم و این “باکس تبلیغاتی” جذاب رو بسازیم که قولشو بهت دادم. آماده‌ای؟ پس فقط کافیه مراحل زیر رو قدم به قدم با دقت دنبال کنی و پیش بری: 👇

۱. اضافه کردن ویجت HTML به صفحه

صفحه‌ای که می‌خوای باکس رو بهش اضافه کنی توی المنتور باز کن. حالا از قسمت ویجت‌ها، ویجت HTML رو پیدا کن و بکش بذار توی هر قسمتی از صفحه که دلت می‌خواد “باکس تبلیغاتی” ات نمایش داده بشه.

×

آموزش ساخت فیلد جستجوی دراپ داون در المنتور

مطالعه

خب، حالا که ویجت HTML رو اضافه کردی، یه بخش باز میشه که می‌تونی کدهات رو توش بذاری. اولین قدم اینه که ساختار “باکس تبلیغاتی” رو با کد HTML بسازیم. کدی که باید کپی کنی و توی اون کادر بچسبونی رو برات پایین گذاشتم:

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

تحلیل کد HTML (بالا):

نگران نباش، الان بهت میگم هر تیکه از این کد چی میگه و چیکار می‌کنه:

×

تغییر استایل محصولات ناموجود فروشگاه ووکامرس

مطالعه

🔒

محتوای VIP+

این محتوا فقط برای اعضای ویژه قابل مشاهده است. برای دسترسی به تمام آموزش‌های اختصاصی رایا وردپرس، عضو ویژه شوید.

🙂عضو ویژه شوید

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

همین! با این کد ساده، ساختار اصلی “باکس تبلیغاتی” ات رو چیدی. حالا بریم سراغ مرحله جذاب‌تر: خوشگل کردنش با CSS! 😍

 2. اضافه کردن کد CSS جهت استایل دادن به باکس

خب، کدهای HTML رو گذاشتی. حالا برای اینکه این باکس شکل و شمایل جذاب بگیره، باید کدهای CSS رو اضافه کنی. اما کجا؟ 🤔 خیلی مهمه که این کد رو جای درستش بذاری تا فقط روی همین باکس اثر بذاره و بقیه المان‌های سایتت رو به هم نریزه. (البته چون من کلاس ها و ایدی ها رو تا حد ممکن یونیک در نظر گرفتم قسمت استایل قالبتم قرار بدی فک نمیکنم مشکلی پیش بیاد)

روی ویجت HTML که اضافه کردی کلیک کن تا تنظیماتش باز بشه. برو به تب پیشرفته (Advanced). اونجا یه بخشی هست به اسم کاستوم CSS (Custom CSS). همونجاییه که باید کدهای CSS رو بذاری. 👍

×

جادوی طراحی: ساخت کارت‌ با گوشه درخشان در المنتور

مطالعه

این کدهایی هست که باید کپی کنی و توی بخش Custom CSS ویجت HTML بچسبونی:

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

تغییر رنگ‌ها: اون بالا یه قسمتی بود به اسم :root 😉 می‌تونی مقدارهای جلوی متغیرها رو اونجا عوض کنی.

• --rayawp-native-content-background-color: رنگ پس‌زمینه اصلی باکس.
• --rayawp-native-content-border-color: رنگ حاشیه‌های باکس.
• --rayawp-native-content-background-color-btn: رنگ پس‌زمینه اصلی دکمه. (البته یه جای دیگه توی کد CSS رنگ دکمه قرمز شده بود #e74c3c، اگه می‌خوای با متغیر کنترلش کنی باید اون خط رو پاک کنی یا کامنتش کنی و از متغیر استفاده کنی.)
• رنگ قرمز دکمه که توی کد CSS هست #e74c3c هست. می‌تونی این کد رنگ رو هم مستقیماً توی CSS عوض کنی.

عالی شد رفیق! 😎 ببین چه “باکس تبلیغاتی” جذابی با هم ساختیم! این خروجی نهایی کارمونه که حالا آماده‌ست تا ازش برای معرفی دوره‌های آموزشی خفنت، فروش محصولاتت یا هر چیز دیگه‌ای که داری استفاده کنی و حسابی توجه‌ها رو بهش جلب کنی و کلیک بگیری! ✨

×

ایجاد دارک مود (Dark Mode) در وردپرس و المنتور بدون افزونه

مطالعه

مرسی که با نگاه قشنگت منو تا پایان این آموزش همراهی کردی. اگه مطلب رو دوس داشتی و مفید بود با دوستانت به اشتراک بزار و هر جا هم مشکل خوردی داخل کامنت ها بگو تا راهنمایی ات کنم 🙂

×

ساخت هاور افکت ترسیم خطوط حاشیه دکمه یا باکس در المنتور

مطالعه