نکاتی برای سرعت بخشیدن به روند طراحی با Elementor

نکاتی برای سرعت بخشیدن به روند طراحی با Elementor

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


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

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

با قالب های Premade شروع کنید

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

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

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

بازار Envato

بازار Envato

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

TemplateMonster

TemplateMonster

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

کتابخانه المان Elementor

کتابخانه المان Elementor

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

از کلیدهای میانبر استفاده کنید

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

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

اقدامات

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

قابل اعتماد و متخصص

پانل / پیش نمایشCtrl / Cmd + Pبین پانل و نمای پیش نمایش جابجا شوید
ویرایش موبایلCtrl / Cmd + Shift + Mبین نماهای دسک تاپ ، رایانه لوحی و تلفن همراه جابجا شوید
تاریخCtrl / Cmd + Shift + Hبه پانل تاریخ بروید
ناوبرCtrl / Cmd + Iناوبر را باز می کند
کتابخانه الگوCtrl / Cmd + Shift + Lمعین کتابخانه قالب ما را باز می کند
کلید های میانبر صفحه کلیدCtrl / Cmd + ?پنجره راهنما میانبرهای صفحه کلید را باز می کند
ترک کنخروجتنظیمات را باز کرده و به خروج به داشبورد پرش می کند

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

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

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

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

کد سفارشی

نوار جستجوی یاب Elementor

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

خوشبختانه ، Elementor یک راه حل داخلی برای ساده سازی و سرعت بخشیدن به روند طراحی دارد. به جای گذر از این همه مشکل ، می توانید به سادگی از Elementor Finder استفاده کنید. می توانید مستقیماً با جستجوی در نوار جستجو ، به هر تنظیمات ، الگوی ، صفحه یا یک بخش موضوع پرش کنید. با کلیک بر روی کلیدهای Cmd / Ctrl + E در هر کجای داشبورد وردپرس ، به یاب قابل دسترسی است. این ویدیو را ببینید تا همه کارهایی را که می توانید با 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

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

سبک های سفارشی WunderWP

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

الگوی سفارشی WunderWP

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

الگوی آماده سازی WunderWP

بسته بندی کردن

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map