معرفی المنتور نسخه ۳.۰

[button size=”medium” style=”alert” text=”دریافت افزونه المنتور پرو” link=”https://www.wpcity.ir/product/elementor-pro/” target=”_blank”]

المنتور نسخه ۳.۰ سرانجام منتشر شد و کلی ویژگی و راه های جدید برای طراحی سایت را با خود آورده است.

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

المنتور نسخه ۱.۰ در سال ۲۰۱۶ رویکرد کاملاً جدیدی را به طراحی ظاهری وردپرس وارد کرد.

المنتور نسخه ۲.۰ در سال ۲۰۱۸ شامل یک انقلاب در حوزه سازنده صفحات برای قالب ها بود.

و حالا در سال ۲۰۲۰، از المنتور نسخه ۳.۰ رونمایی شده که سه ویژگی مختلف سیستم طراحی ، تم ساز جدید و پیشرفت های چشمگیر در عملکرد را معرفی می کند.

ورژن ۳.۰ معمولی و حرفه ای هر دو شامل پیشرفت های اصلی است و یک روش کاملاً جدید برای ساخت وب سایتها را ارائه کردند. در ادامه با ویژگی های جدید این نسخه آشنا می شویم، پس با ما همراه باشید.

ویژگی های سیستم طراحی

سیستم طراحی سایت خود را از یک مکان مدیریت کنید

چگونه برندهای معتبری مانندSpotify ، Apple یا Nike موفق به ارائه یک تجربه ثابت در همه پلتفرم ها می شوند؟

مهم نیست که صفحه فرود، صفحه وب سایت یا بنر را می بینید. آنها همان شکل و قیافه را حفظ می کنند. این به لطف چیزی به نام سیستم طراحی است.

اما اگر به شما بگوییم که سازندگان وب مانند شما اکنون می توانند همان نوع سازگاری برندهای بزرگ را به مشتریان خود ارائه دهند، چه می کنید؟

معرفی ویژگی های سیستم طراحی در یک جمله. یک سیستم طراحی پیاده سازی کنید، جریان کاری خود را متحول کنید و تمام تیم خود را در مورد یک زبان طراحی ثابت نگه دارید.

سیستم طراحی چیست؟

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

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

تمام اجزای طراحی وب سایت شما به صورت داخلی انجام شده است بنابراین کل تیم همگام سازی شده و وب سایت شما همیشه ۱۰۰٪ سازگار است.

ویژگی های سیستم طراحی المنتور شامل موارد زیر است:

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

بیایید هر یک از این ویژگی ها را بررسی کنیم و ببینیم که چگونه به شما در ایجاد وب سایت های حرفه ای تر کمک می کنند.

ویژگی سیستم طراحی شماره #۱

تنظیمات سایت

تعریف تنظیمات اساسی یک وب سایت می تواند بسیار زمانبر باشد. انجام تردستی هایی مانند کدهای قالب، سفارشی سازی، فایل functions.php و غیره را فراموش کنید.

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

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

داخل پنل تنظیمات عمومی تنظیمات زیر را یافت می کنید :

• هویت سایت: هویت سایت خود که شامل لوگو، عنوان، شعار سایت و حتی فاوآیکون را می توانید در تمام سایت سفارشی سازی کنید.
• چیدمان: تنظیمات پیش فرض چیدمان Elementor مانند عرض محتوای پیش فرض یا چیدمان صفحه پیش فرض را تعیین کنید.
• لایت باکس: تمام استایل پیش فرض لایت باکس های المنتور را تنظیم کنید.
• استایل قالب: عناصر HTML غیر المنتوری (معمولاً توسط قالب تنظیم می شود) را برای تایپوگرافی، دکمه ها، تصاویر و قسمتهای فرم سفارشی کنید.

رنگ و فونت های عمومی که در ادامه به توضیح آن می پردازیم.

ویژگی سیستم طراحی شماره #۲

رنگ های عمومی

ورژن ۳.۰ روش جدیدی برای کار با رنگ سایت ارائه می دهد: Global Colors.

رنگ های عمومی این امکان را برای شما فراهم می کند تا رنگ را در یک مکان تغییر دهید و آن رنگ را در هر جایی که قرار دادید به روز باشد.

با انتخاب چهار رنگ عمومی سایت خود شروع کنید. سپس به هر سبک رنگی در Elementor بروید و آن را یکی از چهار رنگ قرار دهید. می توانید همچنین هر تعداد رنگ سفارشی به لیست عمومی اضافه کنید و هر طور که دوست دارید آنها را نام گذاری کنید.

حالا جادوی متغیرهای CSS وارد می شود. به رنگ های عمومی برگردید و یکی از رنگ ها را تغییر دهید. رنگ شمای کل سایت نسبت به رنگ جدید عمومی تغییر می کند. ترکیب و مطابقت رنگ ها در طول روند طراحی از این آسان تر نبوده است.

شما همچنین قادر خواهید بود تا رنگ های عمومی مختلفی را با کنترل یا ایجاد یک رنگ جدید عمومی اختصاص دهید.

این ویژگی عالی برای ایجاد تغییرات رنگ شمای کلی وب سایت شما بدون نیاز به اینکه به تمام صفحات و مطالب بروید و هر کدام را جداگانه ویرایش کنید انجام می گیرد. از حالا به بعد می توانید هر رنگی را از یک مکان با چند کلیک ویرایش، حذف یا تنظیم کنید.

ویژگی سیستم طراحی #۳

فونت های عمومی

رنگ ها و تایپوگرافی عناصر سازنده هر وب سایت هستند. با فونت ها، تمام تنظیمات تایپوگرافی می توانند به صورت عمومی تنظیم شوند. اکنون می توانید تمام تنظیمات تایپوگرافی سایت خود را بصورت عمومی پیکربندی کنید، از جمله:Font Family ، Font Size & Scale، Font Weight،Font Transform ، Font Style، Font Decoration ، Line Height، Letter Spacing و تنظیمات ریسپانسیو.

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

هنگامی که تایپوگرافی سایت خود را تنظیم می کنید، قادر خواهید بود تغییراتی ایجاد کنید که بر تمام قسمت های متنی که با Global Fonts تنظیم کرده اید تأثیر بگذارد.

همچنین می توانید دقیقاً مشاهده کنید که از کدام فونت های عمومی استفاده شده است.

سازنده قالب جدید

کل سایت در یک مکان سازماندهی و به تصویر کشیده می شود

Theme Builder یک برنامه مبتنی بر برنامه نویسی React است که نمای کلی از سایت را شامل می شود، از جمله تمام قسمت های سایت: هدر، فوتر، قالب صفحه عمومی، قالب مطلب عمومی و سایر موارد. هر قسمت از سایت به صورت ظاهری در دسترس است و این امر باعث می شود طراحی یک وب سایت بسیار آسان تر شود.

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

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

چگونه با سازنده قالب جدید کار کنیم

برای شروع ساخت سایت خود با استفاده از Theme Builder جدید، روی آیکون همبرگر در بالای سمت چپ ویرایشگر خود کلیک کنید، سپس روی “Theme Builder” کلیک کنید. همچنین می توانید با استفاده از نوار مدیریت و با استفاده از کلیدهای میانبر CMD / CTRL + Shift + E به این قسمت دسترسی پیدا کنید.

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

اگر سایت جدیدی دارید و هنوز هیچ بخشی ندارد، روی هر بخشی کلیک کنید و آن را بسازید.

پس از ساخت سربرگ (هدر)، می توانید به سمت طراحی قسمتهای سایت دیگر بروید و آنها را در هر صفحه ای که می خواهید قرار دهید.

بهبود عملکرد

المنتور همیشه در حال اصلاح و بهبود عملکرد است، اما این بار برخی از به روزرسانی های مهم را در کد و زیرساخت های خود انجام داده و این موارد باعث بهبود چشمگیر عملکرد شده است.

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

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

تغییرات سرعت بارگذاری صفحه

المنتور نسخه ۳.۰ شامل پیشرفت های قابل توجهی در فرآیندهای سمت سرور و نحوه رندر مقادیر CSS پویا است.

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

در پشت صحنه، هنگامی که المنتور مطلبی را برای ارسال به مرورگر آماده می کند، مطلب را از نظر مقادیر پویا اسکن و سپس واکشی می کند و در صورت داشتن مقادیر CSS ، آن را چاپ می کند. این فرایند وقت گیر و بسیار سنگین است.

در المنتور ورژن ۳.۰، به طور قابل توجهی زمان صرف شده برای این فرآیند را کاهش داده شده است. این کار با ذخیره لیستی از مقادیر پویا برای هر مطلب انجام می شود. پس از ایجاد آن لیست، هر زمان کسی از مطلب بازدید می کند، Elementor مستقیماً به سراغ این لیست می رود، بنابراین روند کار را سریعتر و راحت تر می کند. مقادیر پویا تحت تأثیر این بهینه سازی شامل تصاویر پس زمینه، رنگ ها و موارد دیگر است.

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

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