همه چیز درباره ویرایشگر جدید المنتور نسخه ۴

ویرایشگر جدید المنتور نسخه ۴ از راه رسید!

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

اما رفیق، اون روزا تموم شد! المنتور با نسخه ۴ یه گرد و خاک اساسی به پا کرده و ویرایشگر جدید المنتور چیزی نیست جز یه انقلاب واقعی! این فقط یه آپدیت ساده با چندتا قابلیت جدید نیست؛ صحبت از یه بازنویسی کامل و تغییرات اساسیه! 🔥

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

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

×

اگر این علائم رو تو وردپرس دیدین، یعنی سایت شما هک شده!

مطالعه

ویرایشگر جدید المنتور نسخه ۴ چیه؟ 🤔

ویرایشگر جدید المنتور نسخه ۴ (یا همون Editor V4) یه نسخه کاملاً بازطراحی شده و پیشرفته از المنتوره که اومده تا تجربه طراحی وب رو حسابی متحول کنه.

این ویرایشگر با یه رویکرد کاملاً جدید، یعنی CSS-first، کار می‌کنه. یعنی چی؟ یعنی بهت این امکان رو می‌ده که با استفاده از کلاس‌ها و متغیرها، طراحی‌هایی فوق‌العاده منسجم و حرفه‌ای بسازی که قبلاً شاید فکرشم نمی‌کردی امکان پذیر باشه! 🤩

المنتور که الان روی بیش از ۱۸ میلیون سایت فعاله، داره این تغییر بزرگ رو به‌صورت تدریجی ارائه می‌ده تا تو بتونی قدم به قدم باهاش آشنا بشی و بهترین استفاده رو ازش ببری. خبر خوب اینه که نسخه آلفای اولیه همین حالا در دسترسه! و می‌تونی امتحانش کنی و خودت ببینی که چقدر خفن تر شده! 🛠️

چطوری نسخه جدید ویرایشگر المنتور (نسخه ۴) رو فعال کنیم؟

حتماً دلت می‌خواد بدونی چطوری می‌تونی فعالش کنی و خودت تجربه‌اش کنی، درسته؟ 🤔

×

CSS چیست؟ آشنایی با سلاح مخفی طراحان وب

مطالعه

فعال‌سازی این نسخه جدید خیلی راحته، اما چون هنوز در فاز آلفا هست، یه نکته مهم رو باید حتماً یادت باشه:

⚠️ ویرایشگر المنتور ۴ (Editor V4) رو فقط روی سایت‌های تستی یا آزمایشی فعال کن، نه روی سایت اصلی و در حال استفاده چون این ویرایشگر هنوز در مراحل اولیه توسعه هست و ممکنه باگ‌هایی داشته باشه که به سایت اصلیت آسیب بزنه. پس حواست به این نکته باشه!

برای فعال کردنش، مراحل زیر رو دنبال کن:

1. المنتور رو به‌روزرسانی کن: مطمئن شو که هم نسخه رایگان المنتور و هم المنتور پرو (اگه داری) به آخرین نسخه آپدیت شدن.
2. برو به تنظیمات المنتور: از داشبورد وردپرست، برو به بخش Elementor و بعد Settings (تنظیمات).
3. تب “Editor V4” رو پیدا کن: اونجا یه تب جدید به اسم “Editor V4” رو می‌بینی. روش کلیک کن.
4. فعال‌سازی رو بزن: حالا می‌تونی دکمه فعال‌سازی رو بزنی و مراحل تأیید رو دنبال کنی.

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

×

چطور ساب دامین بسازیم؟ آموزش سریع در سی پنل و دایرکت ادمین

مطالعه

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

معرفی قابلیت های ویرایشگر جدید المنتور (V4)

۱. عملکرد یا پرفورمنس بهتر (Performance) 🚀

یکی از مهم‌ترین و هیجان‌انگیزترین تغییرات تو ویرایشگر جدید المنتور، عملکرد فوق‌العاده و بهینه شده اونه. المنتور تو این نسخه، کُد خروجی رو به شکل چشمگیری بهینه کرده. یعنی چی؟

به زبان ساده، المنتور حالا از تنها یک “div” اصلی (single div wrapper) و کمترین میزان ممکن CSS استفاده می‌کنه. نتیجه این کار چیه؟ سرعت و عملکرد بهتر نسبت به قبل!

امتیاز Core Web Vitals سایتت سر به فلک می‌کشه! این موضوع برای گوگل خیلی مهمه و تأثیر مستقیمی روی سئوی سایتت داره. هرچی امتیازت بالاتر باشه، گوگل بیشتر دوستت داره و رتبه بهتری تو نتایج جستجو پیدا می‌کنی. ✨

×

اگر این علائم رو تو وردپرس دیدین، یعنی سایت شما هک شده!

مطالعه

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

۲. کامپوننت‌های اتمیک (Atomic Components): ماژولار و منعطف 🎨

ممکنه اصطلاح “کامپوننت‌های اتمیک” یه کم پیچیده به نظر برسه، ولی نگران نباش، خیلی ساده بهت توضیح میدم تا کاملا برات جا بیافته موضوع 🙂

تصور کن داری با لِگو بازی می‌کنی. قبلاً تو المنتور، انگار هر ویجت یه قطعه لگوی بزرگ و از پیش‌ساخته بود؛ مثلاً یه خونه لگویی کامل یا یه ماشین لگویی آماده. اگه می‌خواستی یه تغییر کوچیک توش بدی، باید کل قطعه رو عوض می‌کردی یا خیلی سخت دستکاری می‌کردی.

حالا تو ویرایشگر جدید المنتور، به جای اون قطعات بزرگ، بلوک‌های خیلی کوچک‌تر و پایه‌ای‌تر بهت داده می‌شه؛ مثل یه دکمه لگویی، یه سقف لگویی، یا یه دیوار لگویی. این بلوک‌های کوچیک رو بهشون می‌گیم “Atom” (اتم).

×

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

مطالعه

حالا با این اتم‌ها چیکار می‌کنی؟

• می‌تونی این اتم‌های کوچیک (مثل دکمه، تیتر، پاراگراف و…) رو خودت کنار هم بذاری و یه قطعه بزرگ‌تر و دلخواه بسازی. مثلاً خودت یه “بخش تماس با ما” درست کنی که شامل یه تیتر، یه پاراگراف، و چندتا دکمه باشه.
• وقتی این قطعه جدید رو ساختی (مثلاً همون بخش تماس با ما)، می‌تونی اون رو ذخیره کنی و به عنوان یک “کامپوننت” استفاده کنی.
• حالا بهترین بخش ماجرا اینجاست: اگه خواستی همون بخش تماس با ما رو توی ۱۰ صفحه دیگه سایتت هم بذاری، دیگه لازم نیست از اول بسازیش! فقط کافیه اون “کامپوننت” رو که ساختی، تو اون صفحات کپی کنی. 🥳
• حالا فرض کن بعداً تصمیم گرفتی رنگ دکمه‌های اون بخش تماس با ما رو عوض کنی. اگه از این روش کامپوننت‌های اتمیک استفاده کرده باشی، کافیه فقط یک بار اون کامپوننت اصلی رو ویرایش کنی، تا تغییرات توی همه ۱۰ صفحه‌ای که استفاده کردی، اعمال بشه! این یعنی کلی صرفه‌جویی تو وقت و انرژی! ⏳

مزیت اصلی این رویکرد چیه؟

• انعطاف‌پذیری فوق‌العاده: می‌تونی المان‌های منحصر به فرد خودت رو بسازی.
• صرفه‌جویی در زمان: دیگه لازم نیست کارهای تکراری انجام بدی.
• ثبات در طراحی: کل سایتت از یه زبان طراحی واحد پیروی می‌کنه.

۳. Variables، Classes و States: قدرت واقعی CSS در دستان تو! 💪

بخش “Variables، Classes و States” در ویرایشگر جدید المنتور (Editor V4)، دقیقاً همون چیزیه که قدرت واقعی CSS رو بدون نیاز به کدنویسی، تو دستای تو قرار می‌ده. شاید اسمشون یه کم فنی به نظر برسه، اما کاربردشون خیلی ساده و فوق‌العاده کاربردیه:

Variables (متغیرها): یکبار تنظیم کن تا همه‌جا اعمال بشه! 🎨

فرض کن تصمیم داری همه دکمه‌های آبی سایتت رو به یه رنگ دیگه مثلا قرمز تغییر بدی🤔 قبلاً باید می‌رفتی سراغ تک‌تک دکمه‌ها و دونه‌دونه رنگشون رو تغییر می‌دادی! 😩 واقعاً هم وقت‌گیر بود هم کلافه‌کننده.

×

CSS چیست؟ آشنایی با سلاح مخفی طراحان وب

مطالعه

اما حالا با Variables (متغیرها)، این کابوس تموم شده! ✨ تو می‌تونی فونت‌ها، رنگ‌ها، اندازه‌ها، فاصله‌ها و هر ویژگی دیگه‌ای رو فقط یک بار (مثلاً تو تنظیمات کلی المنتور) تعریف کنی. مثل این می‌مونه که به المنتور بگی: “رنگ اصلی دکمه های من همیشه از این متغیر تبعیت کنه.”

حالا اگه بعداً نظرت عوض شد و خواستی این “رنگ اصلی” رو از آبی به قرمز تغییر بدی، دیگه نیازی نیست کل سایت رو زیر و رو کنی! کافیه فقط همون متغیر رو ویرایش کنی. به محض اینکه اون رو قرمز تغییر بدی، کل سایتت — بله، کل سایتت! — به صورت خودکار با رنگ جدید آپدیت می‌شه! 🚀 این یعنی هم تو وقتت فوق‌العاده صرفه‌جویی می‌شه، هم طراحی سایتت همیشه یکدست و حرفه‌ای می‌مونه.

Classes (کلاس‌ها): استایل‌های آماده، کپی‌پیست آسان! 📋

فرض کن تو سایتت ۱۰ تا دکمه داری که همشون باید یه استایل خاص (مثلاً پس‌زمینه قرمز، متن سفید، گوشه‌های گرد و سایه) داشته باشن. قبلاً باید می‌رفتی سراغ هر ۱۰ تا دکمه و این استایل‌ها رو دونه دونه براشون تنظیم می‌کردی. 🤯

با Classes (کلاس‌ها)، می‌تونی این مجموعه استایل رو به عنوان یک “کلاس” تعریف کنی. مثلاً یه کلاس به اسم “main-button” بسازی و تمام اون استایل‌ها رو بهش بدی. حالا هر جا که خواستی اون استایل‌ها رو به یه المنت اعمال کنی، فقط کافیه کلاس “main-button” رو بهش اضافه کنی! دیگه نیازی به تنظیم‌های دوباره نیست.

×

هر آنچه که باید در مورد پسوندهای دامنه بدانید

مطالعه

این قابلیت وقتی که تعداد زیادی المان با استایل‌های مشابه داری، مثل یه جادو عمل می‌کنه و روند طراحی رو به شدت سریع‌تر و منظم‌تر می‌کنه.

States (حالات): واکنش‌های دینامیک، بدون کدنویسی! ✨

تا حالا شده بخوای وقتی کاربر ماوس رو روی یه دکمه می‌بره (حالت Hover)، رنگ دکمه عوض بشه؟ یا وقتی روی یه فیلد کلیک می‌کنه (حالت Focus)، یه تغییر ظاهری پیدا کنه؟

States (حالات) دقیقاً برای همین کارن! بدون اینکه حتی یک خط کد CSS بنویسی، می‌تونی این حالات مختلف (مثل (Hover)، (Focus)، (Active) و…) رو برای المان‌هات مدیریت کنی.

یعنی به راحتی می‌تونی تعیین کنی که وقتی کاربر با المانت تعامل می‌کنه، چه اتفاقی از نظر بصری بیفته. این کار باعث می‌شه سایتت پویاتر و جذاب‌تر به نظر برسه.

×

برای سئو، ساب‌ دامین بهتره یا ساب‌ فولدر؟

مطالعه

در مجموع، این سه قابلیت یعنی Variables، Classes و States، قدرت CSS رو به صورت بصری و کاربرپسند در اختیارت می‌ذارن و بهت کمک می‌کنن تا طراحی‌های حرفه‌ای‌تر، منسجم‌تر و با سرعت بالاتری رو تو المنتور بسازی. دیگه لازم نیست برای کارهای ساده، سراغ کدنویسی بری یا زمان زیادی رو صرف تکرار تنظیمات کنی!

۴. One Style Tab: همه چیز تو یه تب! 🛠️

یکی از تغییرات واقعاً کاربردی و راحت تو ویرایشگر جدید المنتور، حذف سردرگمی بین تب‌های مختلف برای استایل‌دهیه. قبلاً وقتی می‌خواستی یه المان رو استایل بدی، مجبور بودی بین تب‌های “Layout” (چینش)، “Style” (استایل) و “Advanced” (پیشرفته) جابه‌جا بشی. 😩

اما حالا، المنتور همه چیز رو برات ساده‌تر کرده! ✨ با قابلیت “One Style Tab”، کافیه فقط آبجکت (مثلاً یه دکمه یا یه تیتر) رو انتخاب کنی. به محض انتخاب، تمام تنظیمات مربوط به استایل اون المان رو فقط تو “یک تب” می‌بینی!

این تنظیمات شامل:

×

افزایش امنیت وردپرس در سال 2024: راهنمای جامع برای وبمستران

مطالعه

• Layout (چینش): برای تنظیمات مربوط به موقعیت و اندازه
• Spacing (فاصله‌گذاری): برای تنظیم Margin و Padding
• Typography (تایپوگرافی): برای فونت، اندازه متن و…
• Background (پس‌زمینه): برای رنگ و تصویر پس‌زمینه
• Border (کادر): برای خط دور و شعاع گوشه‌ها
• Effects (افکت‌ها): برای سایه، ترنزیشن و…

نتیجه چیه؟ این روش جدید یعنی سرعت و دقت خیلی بیشتر تو استایل‌دهی! دیگه لازم نیست مدام بین تب‌ها بپری و وقتت رو از دست بدی. همه چیز دم دسته و می‌تونی سریع‌تر به اون نتیجه دلخواهت برسی. 🚀

۵. انعطاف بیشتر در ریسپانسیو کردن: طراحی برای همه صفحه‌نمایش‌ ها! 📱💻

تو دنیای امروز، سایتی موفقه که روی هر دستگاهی، از موبایل کوچیک گرفته تا مانیتورهای بزرگ، عالی به نظر برسه. ریسپانسیو بودن دیگه یه آپشن نیست، یه ضرورته!

ویرایشگر جدید المنتور (نسخه ۴) این موضوع رو به اوج خودش رسونده و بهت کنترل بی‌نظیری روی طراحی ریسپانسیو می‌ده. قبلاً شاید فقط می‌تونستی اندازه و موقعیت بعضی المان‌ها رو برای موبایل یا تبلت تنظیم کنی.

اما حالا، این امکان رو داری که هر ویژگی استایل رو برای موبایل، تبلت و دسکتاپ به صورت جداگانه و دقیق تنظیم کنی! یعنی چی؟ یعنی:

×

آموزش استفاده صحیح از تگ های عنوان (H1 تا H6) | Heading Tag

مطالعه

• فونت: می‌تونی بگی روی دسکتاپ این عنوان ۲۰ پیکسل باشه، روی تبلت ۱۸ پیکسل و روی موبایل ۱۴ پیکسل. 🔡
• رنگ: حتی می‌تونی برای یه المان خاص، روی دسکتاپ یه رنگ داشته باشی و روی موبایل یه رنگ دیگه! 🎨
• فاصله، پس‌زمینه، کادر، افکت‌ها و…: دیگه فقط محدود به اندازه و موقعیت نیستی! هر چیزی که فکرشو بکنی، می‌تونی برای هر دستگاه شخصی‌سازی کنی.

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

فازبندی و آپدیت مداوم: از Foundation تا Alpha ⏳

المنتور الان روی حدود ۱۸ میلیون سایت فعاله! 🤯 با این حجم عظیم از کاربر و سایت، طبیعیه که المنتور نمی‌تونه یهو همه چیز رو با یه آپدیت بزرگ تغییر بده و همه‌رو غافلگیر کنه. به همین خاطر، آپدیت به نسخه ۴ رو به صورت مرحله به مرحله و با برنامه‌ریزی دقیق منتشر کرده تا همه بتونن به تدریج باهاش آشنا بشن و مشکلی پیش نیاد:

• V4 Foundation (پایه V4): این مرحله اولیه بود که المنتور زیرساخت‌های لازم برای نسخه جدید رو فراهم کرد.
• Pre-MVP (نسخه ابتدایی پیش از عرضه): در این فاز، ویژگی‌های اولیه ویرایشگر جدید به صورت داخلی تست شد.
• Alpha (آلفا): ما الان در این مرحله هستیم! 🥳 این یعنی ویرایشگر جدید آماده‌ست تا توسط شما تست بشه و بازخوردهاتون رو برای المنتور بفرستید.
• Continuous Updates (آپدیت‌های مداوم): المنتور با توجه به بازخوردها و تست‌هایی که انجام می‌شه، به طور مداوم این نسخه رو بهبود می‌ده تا کاملاً پایدار بشه.

یه نکته خیلی مهم که باید یادت باشه:

چون المنتور ۴ هنوز در مرحله “آلفا” قرار داره و به طور کامل پایدار نشده، به هیچ عنوان اون رو روی سایت‌های اصلی و در حال استفاده نصب یا فعال نکن! ⚠️

×

پرامپت چیست؟ بهترین پرامپت‌ های آماده برای هوش مصنوعی در تمام حوزه‌ ها

مطالعه

همیشه اول این نسخه رو روی محیط‌های تست امتحان کن. اینجوری اگه باگی یا مشکلی وجود داشت، به سایت اصلیت آسیبی نمی‌رسه و می‌تونی با خیال راحت تجربه کنی. 😉

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

×

هر آنچه که باید در مورد پسوندهای دامنه بدانید

مطالعه