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

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

در حالی که Elementor گزینه‌ها و قابلیت‌های سفارشی‌سازی بسیاری را ارائه می‌دهد، اغلب جزئیات و بخش‌های کوچکتر افزونه را که می‌تواند تأثیر زیادی بر روند طراحی یک وب‌سایت داشته باشد، از دست می‌دهیم.

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

شروع با الگوهای از پیش ساخته

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

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

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

Envato Market

Envato market احتمالاً محبوب‌ترین بازار نه تنها برای قالب‌های Elementor، بلکه برای تم‌ها و افزونه‌های وردپرس است.

TemplateMonster

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

کتابخانه الگوی Elementor

کتابخانه الگوی Elementor – انبار قالب بومی برای Elementor، جدید است الگوهای رایگان و Premium اغلب ظاهر می شوند.

استفاده از کلیدهای فوری

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

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

عملکردها

<تغییر ایجاد شده در صفحه را دوباره انجام دهید

< /tr>

< /tbody>

واگرد	Ctrl / Cmd + Z	هر گونه تغییر ایجاد شده در صفحه را واگرد کنید
Redo	Ctrl / Cmd + Shift + Z
کپی	Ctrl / Cmd + C	کپی یک بخش، ستون یا ویجت
جای‌گذاری	Ctrl / Cmd + V	جای‌گذاری بخش، ستون یا ویجت
جای‌گذاری سبک	Ctrl / Cmd + Shift + V	جای‌گذاری بخش، ستون یا ویجت سبک
حذف	حذف	حذف بخش / ستون / ویجت ویرایش شده
تکراری	Ctrl / Cmd + D	تکراری یک بخش / ستون / ویجت که ویرایش شده است
ذخیره	Ctrl / Cmd + S	صفحه خود را در تاریخچه ویرایش ذخیره کنید

رفتن به

< tr readability="2">

پانل / پیش نمایش	Ctrl / Cmd + P< /td>	تغییر بین نمای پانل و پیش نمایش
ویرایش موبایل	Ctrl / Cmd + Shift + M	تغییر بین نماهای دسکتاپ، تبلت و موبایل
History	Ctrl / Cmd + Shift + H	Go به پانل تاریخچه
Navigator	Ctrl / Cmd + I	ناوبر را باز می کند
کتابخانه الگو	Ctrl / Cmd + Shift + L	قابلیت خوانایی کتابخانه الگوی ما را باز می کند
میانبرهای صفحه کلید	Ctrl / Cmd + ?	پنجره راهنمای میانبرهای صفحه کلید را باز می کند
خروج	ESC	تنظیمات را باز می‌کند و به خروج از داشبورد می‌رود

CSS سفارشی برای صفحات

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

برای انجام این کار، فقط باید از ویجت HTML و این قطعه کد داخل آن استفاده کنید:

به این مثال نگاهی بیندازید:

نوار جستجوی عنصر یاب

خیلی وقت‌ها وقتی روی طراحی صفحه کار می‌کنید، می‌خواهید به صفحات دیگر، تنظیمات، صفحه فروش یا هر جای دیگری بروید، و اگر: صفحه را ذخیره کنید > به داشبورد خود بازگردید، ممکن است زمان‌بر باشد. > صفحات را باز کنید > صفحه ای را که می خواهید باز کنید جستجو کنید. اگر مجبور شده باشید بارها و بارها این کار را انجام دهید، می تواند زمان و انرژی زیادی را هدر دهد.

خوشبختانه، Elementor یک راه حل داخلی برای ساده سازی و سرعت بخشیدن به فرآیند طراحی دارد. به جای این که تمام مشکلات را پشت سر بگذارید، می توانید به سادگی از Elementor Finder استفاده کنید. با جستجو در نوار جستجو می‌توانید مستقیماً به هر تنظیمات، الگو، صفحه یا بخش تم بروید. با کلیک بر روی کلیدهای Cmd/Ctrl + E در هر نقطه از داشبورد وردپرس می توان به Finder دسترسی پیدا کرد. این ویدیو را ببینید تا همه کارهایی را که می‌توانید با Finder انجام دهید، ببینید.

استفاده از Navigator

Navigator یک پنجره درخت ناوبری است که دسترسی آسان به هر عنصر در سازنده صفحه را فراهم می کند. این پنجره کوچک به شما امکان می دهد در میان عناصر پیمایش کنید و ویجت ها را به راحتی بکشید و رها کنید.

Navigator به ویژه برای صفحات طولانی یا صفحات با طراحی پیچیده چند لایه مفید است، و برای عناصر ترکیبی از Z-Index، منهای حاشیه، موقعیت مطلق و غیره. این به شما امکان می دهد به دسته های عنصری دسترسی داشته باشید که ممکن است در پشت دیگر قرار گیرند. عناصر.

شما می توانید به یکی از 3 روش ساده به Navigator دسترسی داشته باشید:

1. روی هر عنصری کلیک راست کرده و سپس روی Navigator کلیک کنید. این به طور خودکار شما را به عنصر خاصی در درخت پیمایش هدایت می کند.
2. روی دکمه عناصر در پاورقی پانل کلیک کنید.
3. از میانبر صفحه کلید Cmd/Ctrl + I استفاده کنید.

به این ویدیو نگاهی بیندازید تا آن را در عمل ببینید:

Navigator عملکردهای دیگری نیز دارد، مانند نام‌گذاری ویجت‌ها، جمع کردن و گسترش ویجت‌ها، شناور کردن یا اتصال پانل و نمایش یا پنهان کردن ویجت‌ها.

پالت رنگ خود را تعریف کنید

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

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

به این ویدیو نگاهی بیندازید:

Elementor یکی از بهترین صفحه سازها است، اما آیا به دکمه های پیش فرض و زشت فکر کرده اید؟ برگه ها؟ منوها؟ یا هر ویجت دیگری؟ این ویجت‌های پیش‌فرض به نظر می‌رسد که چندین سال پیش طراحی شده‌اند، یا شاید می‌خواستید از ویجتی که در پروژه A در پروژه B استایل داده‌اید دوباره استفاده کنید؟

در حال حاضر، نمی‌توانید سبک‌های ویجت را برای پروژه‌های آینده با Elementor ذخیره و استفاده مجدد کنید. خوشبختانه، افزونه رایگان WunderWP چند راه برای حل این مشکل ارائه می دهد.

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

با WunderWP، می‌توانید به راحتی سبک‌های ویجت خود را در Elementor ذخیره کرده و مجدداً استفاده کنید. ساده است: یک ویجت را سبک کنید، آن را در WunderWP Cloud (که رایگان است!) ذخیره کنید و بعداً برای ویجت های مشابه از آن استفاده کنید. این برای ویجت های ساده و پیچیده کار می کند. برای مثال، می‌توانید از این برای ذخیره یک ویجت عنوان که حاوی مقادیر تایپوگرافی متفاوت است یا برای یک ویجت تصویر با سایه‌های کشویی سفارشی‌شده استفاده کنید.

این در مورد الگوها نیز صدق می‌کند – می‌توانید الگوهای کامل یا جزئی را که ایجاد می‌کنید در WunderWP Cloud ذخیره کنید. این قالب وجود دارد، بنابراین وقتی آماده شدید، می‌توانید به راحتی آن را در یک صفحه یا وب‌سایت درج کنید. به این ترتیب فقط یک بار باید آن را بسازید و در زمان شما صرفه جویی می شود.

یا می‌توانید از قالب‌های محتوای آماده WunderWP استفاده کنید در حال حاضر، بیش از ۵۰ الگوی بخش آماده وجود دارد – مانند تماس، تماس برای اقدام، سرصفحه، پاورقی، خدمات، درباره، تیم، خدمات، شمارش معکوس و موارد دیگر – برای اهداف مختلف.

در حال اتمام

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

به نظر شما کدام نکته مفیدتر است و کدام را قبلا نمی دانستید؟ شاید شما هم چیزی می دانید که در اینجا ذکر نشده است؟ لطفاً آن را با دیگران به اشتراک بگذارید.