طراحی یک وب سایت حرفه ای برای همه مناسب نبود ، خصوصاً اینکه همه احساس می کردیم کاملاً نیاز به یک متخصص کدنویسی و طراحی وب داریم. امروزه ، ما می بینیم که ابزارهای جدیدی برای اکوسیستم وردپرس در حال ظهور است ، تا بتواند یک راه حل ساده تر برای طراحی وب سایت ارائه دهد و این از بهترین مبتدیان است.
با توجه به طراحی پوسته های WordPress ، قبلاً مجبور شدیم افزونه را ارسال کنیم ویژوال آهنگساز، که قطعا یکی از بهترین ابزارها در مورد طراحی چیدمان است. البته لازم به ذکر است که این راه حل برای همه مناسب نیست. به همین دلیل است که در این آموزش شما را بیشتر با آن آشنا می کنیم پلاگین وردپرس المنتور که یک پلاگین وردپرس freemium (رایگان، اما قابل تمدید تحت اشتراک).
از کجا می توان Elementor را برای وردپرس دریافت کرد
ما به طور جدی در نظر داریم شما را قادر به دیدن پتانسیل افزونه کنید و راه حل رایگان به شما کمک می کند تا بدون پرداخت پولی شروع به کار کنید. این راه حل رایگان در دسترس است وردپرس.org بودن یک پلاگین وردپرس، دومی مانند سایر موارد نصب شده است افزونه از داشبورد.
اگر افزونه بتواند کاملاً شما را راضی کند ، می توانید مجوز کامل را با تمام قابلیت های موجود در سایت بدست آورید عنصر رسمی.
ویژگی های اصلی Elementor
قبل از شروع آموزش با مروری بر پلاگین ، ابتدا شما را با ویژگی های اصلی افزونه (نسخه رایگان و نسخه کامل) آشنا خواهیم کرد.
نسخه رایگان | نسخه کامل |
---|---|
ستون های چندگانه | منوی پیمایش ، مقاله |
ماژول ها متن ها، عنوان ها | ماژول ها از WooCommerce (محصولات، دسته بندی ها) |
ماژول های ویدیویی ، تصویر ، چرخ فلک ، گالری ، Soundcloud | ادغام فیس بوک (صفحه ، دکمه ، نظرات) |
ماژول به اشتراک گذاری | جدول قیمت |
ماژول HTML | نمونه کارها، فرم |
ماژول برای ویجت وردپرس | ماژول تحقیق |
توجه داشته باشید که این لیستی تا حدودی کامل از ویژگیهای مختلف ارائه شده توسط این افزونه است. جزئیات بیشتر را در اینجا خواهید یافت کاوش در وب سایت خود.
با Elementor شروع کنید
ما قصد نداریم در اینجا کل مراحل نصب را پوشش دهیم. از آنجا که این یک افزونه وردپرس است ، روش نصب قبلاً در توضیح داده شده است یک آموزش قبلی. با این حال ، پس از نصب ، به صفحه اصلی افزونه منتقل می شوید.
اگر این صفحه را روی صفحه نمایش خود دارید، پس به درستی آن را نصب کرده اید افزونه Elementor. ما در حال حاضر از نسخه کامل این آموزش استفاده می کنیم، اما رابط کاربری نباید خیلی متفاوت از نسخه رایگان باشد.
قبل از رفتن به رابط ویرایش ، از شما دعوت می کنم مجوز خود را ثبت کنید. این فقط برای کسانی که نسخه کامل را انتخاب کرده اند معتبر است. اگر نسخه رایگان دارید ، می توانید به بخش بعدی بروید. برای ثبت مجوز خود ، اعلانی را در وردپرس مشاهده خواهید کرد که باعث می شود مجوز خود را ثبت کنید.
برای رفتن به صفحه ثبت نام و کلیک بر روی آن ، کافیست بر روی آن کلیک کنید فعال کردن.
اگر مجوز شما معتبر باشد، معمولا به صفحه تایید شما نیاز دارید.
اگر به این صفحه نرسیدید ، از شما دعوت می کنم برای اطلاعات بیشتر با توسعه دهندگان پلاگین تماس بگیرید کمک به مشکل.
نحوه استفاده از Elementor
Elementor در Pages و Posts در وردپرس کار می کند. چه از رابط کلاسیک استفاده کنید و چه از رابط کاربری جدید گوتنبرگ ، دکمه ای را مشاهده خواهید کرد که شما را به استفاده از سازنده Elementor دعوت می کند.
در عمل ، شما همیشه نیازی به ویرایش پست های خود با استفاده از Elementor نخواهید داشت. بنابراین شما را به استفاده از افزونه فقط در صفحات دعوت می کنم. با کلیک بر روی دکمه ، به رابط طراحی Elementor دسترسی پیدا خواهید کرد که هوای دژاوو را می دهد (برای کسانی که از نرم افزار WordPress Customizer استفاده می کنند).
بنابراین شما در سمت چپ کنترل های مختلف ارائه شده توسط این افزونه و در سمت راست ، پیش نمایش زنده تغییرات خود را دارید. در این آموزش ، ما از قالب Twenty Sixteen WordPress استفاده می کنیم.
بخشهای عنصر
بخشها در Elementor گروههایی از بلوکهای عملکردی هستند که Elementor ارائه میدهد. تعداد بخش ها بستگی به این دارد که آیا از نسخه کامل استفاده می کنید یا خیر از WooCommerce، Yoast SEO یا سایر افزونه های سازگار. بسته به این شرایط، بخش های بیشتری یا کمتری در رابط خود خواهید داشت. از آنجایی که ما از نسخه کامل با افزونه استفاده می کنیم از WooCommerce فعال شد، این همان چیزی است که رابط کاربری ما به نظر می رسد.
چگونه یک بلوک Elementor بگذاریم
پس از گسترش بخشی ، عناصر Elementor را پیدا خواهید کرد. بلوک های مختلف Elementor توسط "Drag & Drop" در ناحیه برجسته شده با خطوط نقطه گذاری قرار داده می شوند.
نحوه انتخاب طرح در Elementor
قبل از افزودن بلوک در Elementor ، لازم است به یاد داشته باشید که با کلیک کردن روی دکمه "+" در بخش برجسته شده ، یک طرح را انتخاب کنید.
بسته به نیاز خود ، چیدمانی را انتخاب می کنید که مناسب شما باشد. پس از انتخاب طرح ، نمایشی از آن قسمت در همان قسمت برجسته شده اید. این بخش به همان تعداد ستون مربوط به انتخاب شما نمایش داده می شود. در مورد من ، ستونی را انتخاب کردم که دارای 3 ستون باشد.
بلوک های مختلف با علامت "+" در داخل ، مناطقی هستند که می توانند بلوک های Elementor را بپذیرند. اگر بدون انتخاب چیدمان ابتدا یک بلوک Elementor اضافه کنید ، طرح تک ستون به طور پیش فرض انتخاب می شود.
بخشهای عنصر را می توان با توجه به همان اصل "کشیدن و رها کردن" ، بین خود مرتب کرد. اگر دیگر نمی خواهید از آن استفاده کنید ، می توانید بخشی را حذف کنید.
در اینجا مثالی از بخشی وجود دارد که شامل 2 بلوک است یعنی بلوک عنوان و بلوک متن.
چگونگی استفاده از ابزارهای طراحی دیگر
پس از اتمام طراحی خود ، یکی از کارهایی که می خواهید انجام دهید ذخیره کار است. این گزینه را در پایین بخشی که بخشهای مختلف Elementor را نشان می دهد ، خواهید یافت.
شما می توانید بین ذخیره مستقیم (انتشار) ، و ذخیره به عنوان پیش نویس یا الگو انتخاب کنید. بعداً این نقاط مختلف را بیشتر بررسی خواهیم کرد.
در طول طراحی خود ، ممکن است بخواهید بدون رابط اضافی Elementor ، تغییرات را پیش نمایش کنید. تمام کاری که شما باید انجام دهید این است که بر روی نماد چشم کلیک کنید.
این اتفاق می افتد که در طول طراحی ، خطایی رخ می دهد (یک عمل غیر ارادی). در این حالت ، Elementor سابقه ای را ارائه می دهد ، که به شما امکان می دهد از طریق تمام اقدامات خود حرکت کنید.
این به شما امکان می دهد تا به راحتی به عقب برگردید.
گزینه "Browser" ، که دقیقاً قبل از دکمه History قرار دارد ، به شما امکان می دهد بخشهای مختلف را در رابطه با مرورگر مورد استفاده بازدید کنندگان بیشتر اصلاح کنید. این گزینه امکان اصلاح پیشرفته ساختارهای بخش (عرض ستون) را برای شما فراهم می کند. شما باید خیلی دقیق اینجا تغییرات ایجاد کنید.
دکمه "تنظیمات" به شما امکان می دهد گزینه های خاص صفحه مانند عنوان ، تصویر برجسته یا وضعیت را در سایر موارد تغییر دهید.
این برای این آموزش است ، ما در آموزش بعدی Elementor را بیشتر بررسی خواهیم کرد. دریغ نکنید که نگاهی به سایت رسمی که نمونه های بسیار موفقتری را ارائه می دهد.