طراحی یک وب سایت حرفه ای برای همه مناسب نبود ، خصوصاً اینکه همه احساس می کردیم کاملاً نیاز به یک متخصص کدنویسی و طراحی وب داریم. امروزه ، ما می بینیم که ابزارهای جدیدی برای اکوسیستم وردپرس در حال ظهور است ، تا بتواند یک راه حل ساده تر برای طراحی وب سایت ارائه دهد و این از بهترین مبتدیان است.

با توجه به طراحی پوسته های WordPress ، قبلاً مجبور شدیم افزونه را ارسال کنیم ویژوال آهنگساز، که قطعا یکی از بهترین ابزارها در مورد طراحی چیدمان است. البته لازم به ذکر است که این راه حل برای همه مناسب نیست. به همین دلیل است که در این آموزش شما را بیشتر با آن آشنا می کنیم پلاگین وردپرس المنتور که یک پلاگین وردپرس freemium (رایگان، اما قابل تمدید تحت اشتراک).

از کجا می توان Elementor را برای وردپرس دریافت کرد

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

اگر افزونه بتواند کاملاً شما را راضی کند ، می توانید مجوز کامل را با تمام قابلیت های موجود در سایت بدست آورید عنصر رسمی.

ویژگی های اصلی Elementor

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

نسخه رایگان نسخه کامل
ستون های چندگانه منوی پیمایش ، مقاله
ماژول ها متن ها، عنوان ها ماژول ها از WooCommerce (محصولات، دسته بندی ها)
ماژول های ویدیویی ، تصویر ، چرخ فلک ، گالری ، Soundcloud ادغام فیس بوک (صفحه ، دکمه ، نظرات)
ماژول به اشتراک گذاری جدول قیمت
ماژول HTML نمونه کارها، فرم
ماژول برای ویجت وردپرس ماژول تحقیق

 

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

با Elementor شروع کنید

ما قصد نداریم در اینجا کل مراحل نصب را پوشش دهیم. از آنجا که این یک افزونه وردپرس است ، روش نصب قبلاً در توضیح داده شده است یک آموزش قبلی. با این حال ، پس از نصب ، به صفحه اصلی افزونه منتقل می شوید.

صفحه ارائه delementor.png

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

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

notification plugin elementor.png

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

ثبت یک عنصر element.png مجوز

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

مجوز فعال elementor.png

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

نحوه استفاده از Elementor

Elementor در Pages و Posts در وردپرس کار می کند. چه از رابط کلاسیک استفاده کنید و چه از رابط کاربری جدید گوتنبرگ ، دکمه ای را مشاهده خواهید کرد که شما را به استفاده از سازنده Elementor دعوت می کند.

سازنده elementor.png

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

interface presentation elementor.png

بنابراین شما در سمت چپ کنترل های مختلف ارائه شده توسط این افزونه و در سمت راست ، پیش نمایش زنده تغییرات خود را دارید. در این آموزش ، ما از قالب Twenty Sixteen WordPress استفاده می کنیم.

بخشهای عنصر

بخش‌ها در Elementor گروه‌هایی از بلوک‌های عملکردی هستند که Elementor ارائه می‌دهد. تعداد بخش ها بستگی به این دارد که آیا از نسخه کامل استفاده می کنید یا خیر از WooCommerce، Yoast SEO یا سایر افزونه های سازگار. بسته به این شرایط، بخش های بیشتری یا کمتری در رابط خود خواهید داشت. از آنجایی که ما از نسخه کامل با افزونه استفاده می کنیم از WooCommerce فعال شد، این همان چیزی است که رابط کاربری ما به نظر می رسد.

بخش elementor.png

چگونه یک بلوک Elementor بگذاریم

پس از گسترش بخشی ، عناصر Elementor را پیدا خواهید کرد. بلوک های مختلف Elementor توسط "Drag & Drop" در ناحیه برجسته شده با خطوط نقطه گذاری قرار داده می شوند.

اضافه کردن بلوک elementors.png

نحوه انتخاب طرح در Elementor

قبل از افزودن بلوک در Elementor ، لازم است به یاد داشته باشید که با کلیک کردن روی دکمه "+" در بخش برجسته شده ، یک طرح را انتخاب کنید.

elementor.png را انتخاب کنید

بسته به نیاز خود ، چیدمانی را انتخاب می کنید که مناسب شما باشد. پس از انتخاب طرح ، نمایشی از آن قسمت در همان قسمت برجسته شده اید. این بخش به همان تعداد ستون مربوط به انتخاب شما نمایش داده می شود. در مورد من ، ستونی را انتخاب کردم که دارای 3 ستون باشد.

بخش عنصر با zone.png

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

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

در حال انتقال یک بخش elementor.png

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

عنصر بخش با 2 blocs.png

چگونگی استفاده از ابزارهای طراحی دیگر

پس از اتمام طراحی خود ، یکی از کارهایی که می خواهید انجام دهید ذخیره کار است. این گزینه را در پایین بخشی که بخشهای مختلف Elementor را نشان می دهد ، خواهید یافت.

elementor.png تهیه پشتیبان

شما می توانید بین ذخیره مستقیم (انتشار) ، و ذخیره به عنوان پیش نویس یا الگو انتخاب کنید. بعداً این نقاط مختلف را بیشتر بررسی خواهیم کرد.

در طول طراحی خود ، ممکن است بخواهید بدون رابط اضافی Elementor ، تغییرات را پیش نمایش کنید. تمام کاری که شما باید انجام دهید این است که بر روی نماد چشم کلیک کنید.

پیشنمایش تغییرات elementor.png

این اتفاق می افتد که در طول طراحی ، خطایی رخ می دهد (یک عمل غیر ارادی). در این حالت ، Elementor سابقه ای را ارائه می دهد ، که به شما امکان می دهد از طریق تمام اقدامات خود حرکت کنید.

اقدامات elementor.png

این به شما امکان می دهد تا به راحتی به عقب برگردید.

گزینه "Browser" ، که دقیقاً قبل از دکمه History قرار دارد ، به شما امکان می دهد بخشهای مختلف را در رابطه با مرورگر مورد استفاده بازدید کنندگان بیشتر اصلاح کنید. این گزینه امکان اصلاح پیشرفته ساختارهای بخش (عرض ستون) را برای شما فراهم می کند. شما باید خیلی دقیق اینجا تغییرات ایجاد کنید.

گزینه مرورگر elementor.png

دکمه "تنظیمات" به شما امکان می دهد گزینه های خاص صفحه مانند عنوان ، تصویر برجسته یا وضعیت را در سایر موارد تغییر دهید.

تنظیمات elementor.png

این برای این آموزش است ، ما در آموزش بعدی Elementor را بیشتر بررسی خواهیم کرد. دریغ نکنید که نگاهی به سایت رسمی که نمونه های بسیار موفقتری را ارائه می دهد.