آموزش طراحی نوار اعلان با المنتور به صورت داینامیک (همراه افزونه ACF)

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
طراحی نوار اعلان با المنتور
پخش ویدیو

در بسیاری از سایت ها برای نمایش اطلاعیه ها از روش های مختلفی استفاده می کنند. نوار اعلان، پاپ آپ و …

استفاده از پاپ آپ در المنتور به راحتی قابل انجام است ولی برای اجرای نوار اعلان اونم به صورت داینامیک گزینه ای وجود ندارد.

در این آموزش با استفاده از افزونه ACF و صفحه ساز المنتور، نحوه طراحی یک نوار اعلان داینامیک با قابلیت تغییر متن و رنگ را با همدیگه یاد میگیریم.

طراحی نوار اعلان با المنتور

آموزش طراحی نوار اعلان با المنتور به صورت داینامیک

نصب افزونه ACF و ایجاد پنل تنظیمات

برای شروع کار باید حتما افزونه ACF را داخل وردپرس خودتان نصب کنید.

بعد از نصب این افزونه، از پیشخوان وردپرس از تب نمایش، گزینه ویرایشگر پوسته را بزنید. حالا از ستون سمت چپ، فایل توابع پوسته یا function.php را پیدا کنید. بعد از کلیک روی این گزینه، کد زیر را در انتهای تمامی کد ها قرار دهید.

طراحی نوار اعلان با المنتور

این کد پنل تنظیمات نوار اعلان المنتور را به پیشخوان وردپرس اضافه می کند.

if( function_exists('acf_add_options_page') ) { 
acf_add_options_page(array( 
'page_title' 	=> 'تنظیمات نوار اعلان',
'menu_title'	=> 'نوار اعلان المنتور',
'menu_slug' 	=> 'elementorfa-alert-dynamic',
'capability'	=> 'edit_posts',
'redirect'		=> false
));
}

بعد از اضافه کردن این کد، فایل را ذخیره کرده و به پیشخوان وردپرس بروید.

گزینه نوار اعلان المنتور اضافه شده است.

طراحی نوار اعلان با المنتور

تا اینجای کار، پنل تنظیمات نوار اعلان را ایجاد کردیم. حالا از پیشخوان وردپرس، تب زمینه های سفارشی را بزنید.

ایجاد فیلد های سفارشی

در اینجا نیازه که چند زمینه سفارشی برای طرح داینامیک نوار اعلان ایجاد کنیم. روی دکمه افزودن کلیک کنید و یک نام برای زمینه قرار بدید.

طراحی نوار اعلان با المنتور

حالا باید 3 زمینه در اینجا ایجاد کنیم.

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

طراحی نوار اعلان با المنتور

زمینه دوم مربوط به متن اعلان داخل سایت می باشد.

نام زمینه را متن اعلان قرار داده و نوع زمینه را روی متن قراردهید.

طراحی نوار اعلان با المنتور

زمینه سوم رنگ متن اعلان می باشد.

مجدد یک زمینه با نام رنگ متن اعلان ایجاد کرده و نوع زمینه را روی انتخاب کننده رنگ قرار دهید.

طراحی نوار اعلان با المنتور

حالا که هر 3 زمینه ایجاد شد،باید این زمینه های سفارشی را به برگه تنظیمات نوار اعلان المنتور که بالاتر در فایل function قرار دادیم، اختصاص دهیم.

در همین صفحه ایجاد فیلد های سفارشی، کمی به پایین اسکرول کرده و در تب مکان قسمت اول را روی برگه تنظیمات قرار دهید.

با انتخاب این گزینه، تنها برگه تنظیماتی که با استفاده از کد ایجاد کردیم نمایش داده می شود.

طراحی نوار اعلان با المنتور

حالا زمینه سفارشی را منتشر کرده و به تب نوار اعلان المنتور در پیشخوان وردپرس برید.

همانطور که مشاهده می کنید، فیلد های سفارشی ایجاد شده داخل این صفحه قرار گرفته اند.

طراحی نوار اعلان با المنتور

خب تا این مرحله، کار با افزونه ACF تمام شد. حالا باید وارد طراحی با المنتور شویم.

طراحی نوار اعلان در المنتور

از پیشخوان وردپرس، از تب قالب ها، وارد قالب های ذخیره شده بشید و سربرگی که با المنتور طراحی کردید را ویرایش کنید.

در اینجا با زدن دکمه افزودن بخش جدید، یک سکشن بالای هدر سایت اضافه کنید.

طراحی نوار اعلان با المنتور

بعد از ایجاد Section در بالای هدر، در تنظیمات، عرض محتوا را روی تمام عرض قرار داده و حتما فاصله بین ستون ها روی گزینه بدون فاصله باشد.

طراحی نوار اعلان با المنتور

حالا ویجت هشدار را از بین ابزارک های المنتور جستجو کرده و داخل بخش اضافه شده قرار دهید.

طراحی نوار اعلان با المنتور

در این مرحله می خواهیم زمینه های سفارشی که بالاتر ایجاد کردیم را به ویجت هشدار اختصاص دهیم.

با این کار مقادیر ویجت توسط پنل تنظیمات پر شده و دیگر نیازی به تغییرات در المنتور نیست.

خب در قسمت عنوان بر روی آیکون برچسب های پویا کلیک کرده و در بین لیست، گزینه فیلد ACF را انتخاب کنید.

طراحی نوار اعلان با المنتور

بعد از انتخاب روی آیکون آچار کلیک کرده و در قسمت کلید، گزینه متن اعلان را انتخاب کنید.

طراحی نوار اعلان با المنتور

 

کادر توضیحات ویجت هشداررا خالی کرده تا هیچ متنی داخل این قسمت نباشد.طراحی نوار اعلان با المنتور

حالا به تب استایل ویجت هشدار برید.

آیکون رچسب پویا رنگ پس زمینه را زده و از بین لیست گزینه فیلد انتخاب کننده رنگ ACF را انتخاب کنید.

طراحی نوار اعلان با المنتور

 

بعد از انتخاب، روی آیکون آچار کلیک کرده و در قسمت کلید، گزینه پس زمینه اعلان را انتخاب کنید.

طراحی نوار اعلان با المنتور

این دو مرحله را نیز برای گزینه رنگ حاشیه هم تکرار کرده تا رنگ پس زمینه را برای حاشیه اعلان قرار دهیم.

حالا به تب عنوان رفته و مجدد روی آیکون برچسب های پویا کلیک کنید.

در بین لیست گزینه فیلد انتخاب کننده رنگ ACF را انتخاب کنید.

طراحی نوار اعلان با المنتور

در مرحله بعد، کلید فیلد سفارشی را روی گزینه رنگ متن اعلان قرار دهید.

طراحی نوار اعلان با المنتور

بررسی صحت نوار اعلان

حالا سربرگ را ذخیره کرده و وارد پیشخوان وردپرس شوید.

وارد تب نوار اعلان المنتور شده و مقادیر رنگ و متن را پر کنید.

طراحی نوار اعلان با المنتور

بعد از بروزرسانی برگه تنظیمات، وارد صفحه اصلی سایت بشید.

همانطور که مشاهده می کنید، رنگ و متنی که در برگه تنظیمات اعمال کردیم داخل صفحه سایت نمایش داده می شود.

طراحی نوار اعلان با المنتور

توجه: هنگامی که مقدار متن اعلان در تنظیمات خالی باشد، نوار اعلان در سایت نمایش داده نخواهد شد.

متن وسط چین نوار اعلان

متاسفانه برای وسط چین کردن متن نوار اعلان، در المنتور گزینه ای وجود ندارد.

ولی می توانید از قسمت CSS سفارشی ویجت هشدار کد زیر را قرار دهید تا متن نوار اعلان وسط چین شود.

selector .elementor-alert.elementor-alert-info { 
text-align: center; 
}

بعد از قرار دادن کد، نوار اعلان به شکل زیر نمایش داده خواهد شد.

طراحی نوار اعلان با المنتور

تغییر رنگ دکمه بستن

همچنین دکمه بستن نوار اعلان به صورت پیش فرض به رنگ مشکی بوده و تنظیماتی برای تغییر این گزینه وجود ندارد.

مجدد می توانید از بخش CSS سفارشی ویجت هشدار، کد زیر را قرار داده تا به رنگ سفید در بیاید. می توانید کد رنگی دلخواه خود را نیز جایگزین کد زیر کنید.

selector .elementor-alert button.elementor-alert-dismiss {
color: #fff;
}

در نهایت می توانید با تغییر مقادر نوار اعلان را سفارشی سازی کنید:

امیدواریم که از این آموزش هم به خوبی استفاده کرده باشید. هر مشکلی در اجرای این آموزش داشتید از بخش نظرات سوالات خود را مطرح کنید.

045-microphone

مدرس :
محمدرضا احمدزاده

013-globe

سطح آموزش :
پیشرفته

035-essay

زمان آموزش :
9 دقیقه

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

آخرین محصولات

آخرین محصولات دیجیتال

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=48105

فهرست مطالب

Avatar
مسعود خدائی در 20:43

سلام و خسته نباشید
ممنون از زحمتی که برای علاقه‌مندان وردپرس و خصوصا کاربران افزونه المنتور می‌کشید
یه سوال داشتم. چطور میشه ClassName ویجت‌های مختلف (منظورم selector .elementor-alert button.elementor-alert-dismiss هست) رو بدست آورد تا بتونیم از طریق Custom CSS ویژگی‌هاشون رو تغییر بدیم؟
مثلا ClassNameهای افزونه WooCommerce Page Builder رو از کجا بدست بیاریم؟

پاسخ
المنتور فارسی
المنتور فارسی در 20:48

با سلام
خواهش میکنم.
برای به دست آوردن کلاس های المان های استفاده در صفحه کافیه دکمه F12 در مرورگر کروم را زده و از سمت چپ آیکون مواس را بزنید تا بتونید کلاس های داخل صفحه را مشاهده کنید.
نمونه انتخابگر کلاس به حالت زیر است:
http://prntscr.com/sl6w1i

پاسخ
Avatar
نادر در 20:40

سلام، چطور میشه در وسط یک هدر (که یک جمله است) یک کلمه را رنگی کرد.

مثلاً عنوان هدر این باشد:

سلام، من ایران را دوست دارم.

بعد مثلاً کلمه «ایران» را در جمله بالا به رنگ سبز درآوریم، ولی کلمات قبل و بعد به رنگ مشکی باشند؟

پاسخ
المنتور فارسی
المنتور فارسی در 20:45

با سلام
این کار توسط CSS انجام میشه.
برای مثال جمله بالا رو اگر به این صورت بنویسید:
سلام، من ایران را دوست دارم.
کلیمه ایران را بین span قرار دهید.
< span style="color:000 > ایران < / span >
با این کار، کلمه ایران با رنگ مشکلی میشه.
حالا می تونید کد رنگی #000 را به هر رنگ دیگری تغییر بدید.

پاسخ
سید عطا
سید عطا در 09:10

سلام
ممنون از آموزش خوبتون
فقط اگر ممکنه این مورد رو شخصی سازی تر کنید و امکاناتی از قبیل افزودن دکمه قابل کلیک، تایمر و رنگ زمینه گرادینت بهش اضافه کنید.

سپاس از شما

پاسخ
المنتور فارسی
المنتور فارسی در 13:11

با سلام
متاسفانه ویجت هشدار قابلیت اضافی در اختیار ما قرار نمیده تا مواردی که فرمودید رو اضافه کنیم.
ولی حتما سعی میشه آموزش های عملی دیگه ای ارائه بشه.

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

نیاز به کمک دارید؟ پیام دهید