هنگام استفاده از هوش مصنوعی المنتور حتما متوجه شده اید که نوشتن پرامپت یا دستورات مناسب تا چه اندازه در ارائه نتیجه نزدیکتر به خواسته شما اهمیت دارد. اگر تجربه و دانشی در زمینه کدنویسی ندارید؛ هوش مصنوعی در این زمینه بسیار مفید عمل می کند؛ البته به شرطی که پرامپت مناسب را بدانید. در ادامه تعدادی از پرامپت های پرکاربرد هوش مصنوعی مخصوص به کارگیری کدهای css و جاوااسکریپت با صفحه ساز المنتور را به شما معرفی می کنیم.
لیست پرامپت های هوش مصنوعی برای تولید کد css و جاوااسکریپت در المنتور
1. پرامپت هوش مصنوعی برای نمایش ویجت ویدیو المنتور با هاور
با کمک پرامپت هوش مصنوعی زیر اسکرپیتی به زبان jQuery خواهید داشت که اجرای فیلم در ویجت ویدیو با شناسه my-video را کنترل می کند. زمانی که اشاره گر ماوس را روی کانتینر حاوی ویدیو قرار دهید؛ ویدیو شروع به پخش شدن می کند. اگر ماوس از محدوده ویدیو خارج شود؛ ویدیو در حالت توقف یا pause قرار می گیرد. در انتهای پرامپت هم اشاره شده که کد فقط حاوی کد جاوااسکریپت و بدون تگ های اضافه html باشد (چون قرار است این کد را در المنتور استفاده کنیم و عملا نیازی به تگ های اضافی نیست). برای استفاده از کد پرامپت زیر مواردی که در ادامه گفته می شود را رعایت کنید:
- مطمئن شوید که فایل استفاده شد در ویجت ویدیو المنتور از داخل رسانه های وردپرس آپلود شده باشد.
- از طریق تب advanced در ویجت ویدیو المنتور، شناسه my-video را به ویجت اختصاص دهید.
- کد تولید شده را در بخش کدهای سفارشی المنتور قرار دهید و در display conditions همه سایت را انتخاب کنید (البته اگر می خواهید این کد در کل وبسایت قابل اجرا باشد).
“I’m inserting the following code in the <head> of the website. Write a script using jQuery to control the playback of a video element with the ID ‘my-video‘, without creating a var, just with ‘this’ keyword. Ensure the ‘video’ element inside the ‘#my-video‘ container is selected explicitly within the mouseout event handler. When the mouse is over the video, it should start playing, and when the mouse leaves the video, it should pause. Ensure the generated code is streamlined, containing only the script and library call without any additional HTML structure such as <html>, <head>, <body>, <video>, etc.”
2. پرامپت هوش مصنوعی برای ایجاد دکمه بازگشت جذاب با جاوااسکریپت در المنتور
کد جاوااسکریپتی که با دستور زیر در هوش مصنوعی ایجاد می شود؛ برای ایجاد دکمه بازگشت جذاب مناسب است.
برای استفاده از کد تولید شده از دستور زیر مواردی که در ادامه گفته شده را رعایت کنید:
- در تب پیشرفته ویجت دکمه شناسه my_back_btn را به دکمه اختصاص دهید.
- کد جاوااسکریپت تولید شده را در بخش پیشخوان> المنتور> کدهای سفارشی قرار دهید.
” I’m inserting the following code in the <head> of the website. Write a JavaScript code to go back on class “my_back_btn”. Ensure the generated code is streamlined, containing only the script without any additional HTML structure such as <html>, <head>, <body>, etc.”
3. پرامپت هوش مصنوعی برای ریزش کاغذ رنگی در کل صفحه
اگر برای صفحات رونمایی از محصولات و خدمات به جلوه گرافیکی کاغذ رنگی احتیاج دارید؛ این پرامپت را استفاده کنید. کد جاوااسکریپتی که با پرامپت زیر در اختیار شما قرار میگیرد؛ تکه های کاغذرنگی مثل باران به آرامی از بالا به پایین کل صفحه حرکت می کنند. رنگ و اندازه تکه های کاغذرنگی به صورت تصادفی و رندوم خواهدبود. کد جاوااسکریپت تولید شده را در بخش کدهای سفارشی در زیرمنوی المنتور در پیشخوان قرار دهید و در بخش display conditions شرط نمایش را روی صفحه ای که میخواهید کاغذ رنگی ها نمایش داده شوند قرار دهید.
” Insert the following code in the <head> of the website. Generate concise JavaScript code for a falling confetti animation on a fixed HTML5 canvas of full viewport size width and height. Ensure the animation does not disrupt the layout of the page and that the confetti particles fall smoothly from the top to the bottom like a rain. Consider optimizing the code and CSS styles to prevent interference with other page elements. Make the canvas above all elements but links (z-index: 1000). Randomize confetti properties like size, color, and rotation for visual appeal. Make each particle falling in another time and speed. Make the pointer-events to none. Do not hidden the overflow.”
4. پرامپت هوش مصنوعی برای ایجاد 2 پس زمینه گرادیان متحرک در المنتور
دستور زیر در هوش مصنوعی کد ایجاد دو پس زمینه گرادیان متحرک را به شما می دهد که در 5 ثانیه اتفاق میفتد.
” Create a 2 colors animated background. From #F8C3D0 to #FFFFFF in 5 seconds and infinity. Make it smooth.”
5. پرامپت هوش مصنوعی برای نمایش شرطی فیلدهای فرم المنتور
با پرامپت زیر کد جاوااسکریپتی خواهید داشت که فیلد ایمیل را در ابتدا مخفی می کند و با انتخاب subject فیلد ایمیل مرتبط را نمایش می دهد. برای استفاده از کد پرامپت زیر مواردی که در ادامه گفته شده را انجام دهید:
- form-field-email شناسه فیلدی است که قرار است نمایش آن وابسته به انتخاب فیلد دیگر به شناسه form-field-subject باشد.
- در هر یک از فیلدهای فرم المنتور به تب پیشرفته بروید و شناسه های گفته شده را جایگزین کنید.
- ویجت html را در صفحه در بالای همه ویجت ها قرار دهید و کد تولید شده را داخل ویجت html قرار دهید.
- نتیجه را در حالت پیش نمایش چک کنید.
” Wrap the provided JavaScript code with a <script> tag. This code should run after the webpage finishes loading. At the beginning, hide the field with the ID form-field-email along with its label. Then, add a listener to check if the field with the ID form-field-subject has any content. If it does, show the form-field-email field; if not, keep it hidden along with its label. Put only JavaScript code and not HTML. “
6. پرامپت هوش مصنوعی برای نمایش حاشیه و سایه اطراف فیلد فعال در فرم
کدی که با نوشتن پرامپت زیر در هوش مصنوعی دریافت می کنید؛ جلوه گرافیکی جذابی به فیلدهای فعال شما می دهد. با دریافت فوکوس هر فیلد، حاشیه و سایه رنگی اطراف فیلد ایجاد می شود.
” Add a border of 1px #000000 and slight white shadow of 15px to the fields on focus mode.”
7. پرامپت هوش مصنوعی برای ایجاد انیمیشن حرکت به راست و چپ المان با css
با کمک پرامپت زیر هوش مصنوعی کد css مناسبی برای افکت slide-left و slide-right یا حرکت به راست و چپ یک المان را تولید می کند. این انیمیشن در حالت هاور ماوس روی ویجت متوقف خواهدشد.
” Add a continuously and smoothly effect on the icon. The animation should be slide left and slide right, infinity, with css. The animation stops when the mouse hover on it.”
8. پرامپت برای ایجاد انیمیشن پالس روی المان با css
انیمیشن پالس یا حالت zoom in و zoom out پیوسته، جلوه حرکتی است که توجه کاربر را به خوبی جلب می کند. با پرامپت زیر کد css برای ایجاد این جلوه حرکتی زیبا را پیدا کنید.
” Add a continuously and smoothly effect on the icon. The animation should be zoom in and zoom out, infinity, with css. The animation stops when the mouse hover on it.”
9. پرامپت هوش مصنوعی برای ایجاد پس زمینه گرادیان به صورت انیمیشن برای دکمه
دستور زیر در هوش مصنوعی به شما کد css تحویل می دهد که درمدت 5 ثانیه پس زمینه دکمه را به سه رنگ به صورت گرادیان تغییر می دهد.
” Create a three color animated background on class .elementor-button. 45deg from #ff0909 to #ffc3a0 to #ffd8b1, in 5 seconds and infinity. Make it smooth.”
10. پرامپت هوش مصنوعی برای چرخش آیکن دکمه در هنگام هاور
پرامپت زیر در هوش مصنوعی کد css به شما ارائه می دهد که باعث چرخش آیکن روی دکمه در هنگام هاور ماوس و حرکت متن دکمه می شود. این کد را برای جذاب تر شدن طراحی خود استفاده کنید.
“Make a smooth rotate transform of 360deg with a transition of 0.8s on the button icon when hovering on the entire button. At the same time move the position of the button text 5px to the right, with a transition of 0.8s when hovering on the entire button. Add a smooth transition after removing the hover state.”
11. دستورهوش مصنوعی برای زوم شدن متن و آیکن دکمه در هاور
با کمک این پرامپت هوش مصنوعی برای شما کد css تولید می کند که موقع هاور روی دکمه، آیکن روی دکمه مقداری بزرگ شده و متن هم به سمت راست حرکت می کند. بعد از حرکت ماوس به سمت خارج دکمه استایل دکمه به نرمی به حالت قبل باز میگردد.
“Make a smooth scale transform of 1.5 with a transition of 0.5s on the button icon when hovering on the entire button. At the same time move the position of the button text 8px to the right, with a transition of 0.5s when hovering on the entire button. Add a smooth transition after removing the hover state.”
12. پرامپت هوش مصنوعی برای تولید کد css تغییر خودکار بک گراند به صورت انیمیشن
دستور زیر در هوش مصنوعی کدی ایجاد می کند که باعث تغییر پس زمینه صفحه شما در هر دو ثانیه به صورت نرم و انیمیشنی می شود.
“Create a three solid color background animation. Start with background color #fc8e4e, then background color #ffc3a0 and then background color #ffafbd. Stay 2 seconds on each color. Make it smooth with fade effect.”
- دستور هوش مصنوعی برای ایجاد پس زمینه گرادیان متحرک
با این دستور کدی خواهیدداشت که بکگراند را با سایه روشن متحرک می پوشاند. انیمیشن تغییر رنگ گرادیان بین سه کد رنگ به آرامی انجام می شود.
“Create a three color animated background. From #ff0909 to #ffc3a0 to #ffd8b1, in 5 seconds and infinity. Make it smooth.”
14. پرامپت هوش مصنوعی برای قراردادن پس زمینه سایه روشن برای متن
متن مورد نظر که میخواهید پس زمینه گرادیان داشته باشد را داخل تگ باز و بسته span قرا دهید. و با استفاده از کدی که با دستور زیر از هوش مصنوعی دریافت می کنید؛ یک عبارت متمایز در داخل یک پاراگراف داشته باشید.
“Add a gradient background under the text in span tag of this title. The gradient should be from #CE00A1 to #C81111.”
15. پرامپت هوش مصنوعی برای تغییر چک باکس موافقت با قوانین در فرم المنتور
برای اینکه به کادرعلامت یا چک باکس مخصوص به موافقت با قوانین در فرم های خود ظاهری جذاب تر بدهید؛ از کد css که با پرامپت زیر ایجاد می شود استفاده کنید.
“Transform the checkbox input with the class .elementor-acceptance-field to look better visually. Give to the checkbox a width and height of 25 pixels, vertical alignment to middle, change accent-color property to black and give space of 8 pixels on the right.”
16. پرامپت هوش مصنوعی برای استفاده از دو نوع فونت در یک تیتر در المنتور
متنی از هدر که می خواهید تحت تاثیر کد css پرامپت زیر باشد را داخل تگ <span></span> قرار دهید.
” Change font family to “Playfair Display” for words wrapped with span. “
17. پرامپت هوش مصنوعی برای کد css انیمیشن بالا به پایین آیکن
اگر برای آیکن فلش رو به پایین در اسلایدر سایت خود به دنبال یک انیمیشن جذاب هستید از پرامپت زیر استفاده کنید. با این دستور در هوش مصنوعی کد css در اختیار خواهیدداشت که حرکت بالا به پایین نرم و یکدستی برای آیکن ایجاد می کند.
” Add a continuous and smooth effect to the icon. The animation should slide down and then slide up infinitely using CSS. The animation should stop when the mouse hovers over it. “
18. پرامپت هوش مصنوعی برای دیزاین جذاب دکمه های رادیویی در فرم المنتور
با کمک دستور هوش مصنوعی زیر کدی css خواهیدداشت که ظاهر دکمه های رادیویی فرم را به صورت ستاره ای تبدیل می کند.
” Transform only radio input type into button-like elements. Ensure that radio input’s text is preceded by a Font Awesome star icon. Set the ‘display’ property of radio input type to none. Set the ‘display’ property of class .elementor-field-subgroup to bock to make them aligned horizontally. “
19. پرامپت هوش مصنوعی برای استایل دادن به بخش آپلود فایل در فرم های المنتور
با کد css که از طریق دستور زیر دریافت می کنید؛ ظاهر بخش آپلود فایل در فرم المنتور با بک گراند رنگی و حاشیه خط تیره استایل می شود.
” Styling the upload file input in elementor form. Add a black border dashed of 1 pixels, border radius of 5 pixels, background color of azure and padding of 20 pixels. “
20. پرامپت هوش مصنوعی برای قراردادن چک باکس فرم المنتور در انتهای فرم
در حالت پیش فرض آخرین آیتم فرم دکمه submit است اما با کمک کد ایجاد شده توسط پرامپت زیر چک باکس موافقت با قوانین در انتهای فرم المنتور قرار میگیرد. این پرامپت از کلاس .elementor-field-type-acceptance در نوع فیلد پذیرش در فرم المنتور استفاده می کند.
” Change only the order inputs of this form. Order of input with class .elementor-field-type-acceptance should be the last field, after of all the form fields included the submit button. “
جمع بندی
اگر همیشه بعد از کمک گرفتن از هوش مصنوعی به نتیجه دلخواه نمی رسید و یا هیچ یک از کدها و دستوراتی که هوش مصنوعی به شما می دهد در پروژه کار نمیکند؛ علت آن پرامپت یا دستور نامفهوم است. در این نوشته پرکاربردترین پرامپت ها برای تولید کدهای css و جاوااسکریپت مورد استفاده در المنتور جمع آوری شده. این دستورات هم برای مبتدیان و هم برای طراحان حرفه ای جهت افزایش سرعت کدنویسی مفید خواهدبود.
