وبلاگ

آموزش افزونه JetGridBuilder | ساخت گرید نوشته و محصول در المنتور

آموزش افزونه JetGridBuilder | ساخت گرید نوشته و محصول در المنتور

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

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

[irinfobox]این مقاله به صورت دقیق ، تمام تنظیمات دو ابزارک افزونه JetGridBuilder – Posts Grid Builder و Terms Grid builder را مورد بررسی قرار می هد.[/irinfobox]

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

نحوه افزودن گرید به صفحه

روش اول نصب : پس از دانلود افزونه JetGridBuilder از لینک زیر ، به داشبورد وردپرس وب سایت خود رفته و افزونه ها> افزودن جدید را باز کنید. روی دکمه های “بارگذاری افزونه” و “Choose File” کلیک کنید ، فایل ZIP دانلود شده را انتخاب کنید و سپس دکمه “اکنون نصب شود” را فشار دهید.

آپلود افزونه دستی
آپلود افزونه دستی

از لینک زیر آخرین نسخه افزونه را می توانید دانلود کنید.

روش دوم نصب : در این روش به پیشخوان وردپرس > افزونه ها > افزودن بروید و در صفحه باز شده در کادر جستجو در سمت چپ عبارت “JetGridBuilder” را تایپ کنید و منتظر باشید تا افزونه برای شما از مخزن وردپرس جستجو شود. سپس بر روی دکمه نصب کلیک کنید و بعد از نصب بر روی فعال نمایید کلیک کنید.

نصب افزونه از مخزن وردپرس
نصب افزونه از مخزن وردپرس

وقتی نصب تمام شد ، دکمه “فعال نمایید” را فشار دهید. اکنون JetGritBuilder آماده کار است. به منوی برگه ها بروید و صفحه ای را که می خواهید گرید را در آن قرار دهید انتخاب کنید. روی دکمه “ویرایش با المنتور” کلیک کنید. در منوی ابزارک سمت راست، ابزارک های Posts Grid Builder و Terms Grid Builder را پیدا کنید.

ویجت سازنده گرید
ویجت سازنده گرید

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

اضافه کردن پست به گرید
اضافه کردن پست به گرید

دکمه “Add Posts” را بزنید. در پنجره ظاهر شده ، لیست تمام پست ها و انواع پستی را که در صورت داشتن پلاگین JetEngine ایجاد کرده اید ، مشاهده خواهید کرد. پست هایی را که می خواهید نشان دهید انتخاب کنید و دکمه “Select” را فشار دهید. اندازه هر گرید و ارتفاع شبکه را می توان به راحتی دستی تغییر داد.

اکنون می توانید گرید را مشاهده کنید ، بنابراین وقت آن است که وارد تنظیمات شویم.

بخش تنظیمات گرید

در زیر محتوا سه زیر منو وجود دارد. اولین آنها زیر منوی Grid است. هنگامی که آن را باز می کنید ، اولین گزینه ویژگی Posts خواهد بود که به شما امکان می دهد هر زمان که بخواهید پست های جدیدی را به گرید خود اضافه کنید. بیایید نگاهی به تنظیمات دیگر بیندازیم.

منوی گرید
منوی گرید
  • Vertical Compact : وقتی این گزینه فعال نیست ، می توانید کاشی های پست را در هر نقطه از گرید قرار دهید. و اگر آن را روشن کنید ، پست ها به طور خودکار در بالا تراز می شوند.
  • Gutter : در این قسمت می توانید عرض فاصله بین سلولهای گرید را انتخاب کنید.
  • Number of columns : حداقل تعداد ستون ها در شبکه 3 و حداکثر 50 است. بین این مقادیر ، شما آزادانه می توانید انتخاب کنید.
تنظیمات گریدبندی پست ها
تنظیمات گریدبندی پست ها
  • Items Type : این منوی کشویی به شما امکان می دهد شکل کلی کاشی های پست را انتخاب کنید. اگر گزینه “Post Content” را انتخاب کنید ، محتوای پست در صفحه نمایش داده می شود. گزینه “JetEngine Listing” به شما این امکان را می دهد تا یکی از لیست های ساخته شده قبلی را انتخاب کنید و از طرح آن برای کاشی های گرید استفاده کنید.

[irnot title=”نکته”]توجه داشته باشید که طراحی لیست اولویت بیشتری نسبت به گزینه های یک ظاهر طراحی شده در برگه استایل خواهد داشت. اگر به یک طراحی منحصر به فرد نیاز دارید ، بهتر است این کار را از ابتدا در تب استایل انجام دهید.[/irnot]

  • Items Style : در اینجا می توانید گزینه های ظاهری اضافی کاشی های پست را تعریف کنید. در نمای “استاندارد” ، تصویر کوچک روی اطلاعات متن قرار می گیرد و در حالت “همپوشانی محتوا” ، متن بر روی تصویر نشان داده می شود.
  • Woo Item Type : اگر محصولات WooCommerce را در شبکه قرار دهید ، این و ویژگی بعدی مفید خواهد بود. در اینجا می توانید انتخاب کنید تا موارد با روشی که تنظیم کرده اید با استفاده از پلاگین JetWooBuilder نشان داده شود.
  • Woo Item Style : در اینجا دوباره می توانید نوع شکل کاشی ها را انتخاب کنید – نوعی که تصویر کوچک روی متن نشان داده شده باشد یا یکی از مواردی که اطلاعات روی تصویر را نشان می دهد.
  • Loading Spinner : اگر می خواهید هنگام بارگیری پست ها یک نماد متحرک خاص نشان دهید ، این ضامن را روشن کنید. همچنین می توانید انتخاب کنید که آیا می خواهید چرخنده را فقط در طول فرآیند بارگیری نشان دهید. علاوه بر این ، می توانید نوع نماد متحرک را نیز برای آن انتخاب کنید.

در ویدئوی آموزشی همه بخش ها و تنظیمات به صورت کلی آموزش داده می شود و همچنین به صورت پروژه محور با همه تنظیمات کار می کنیم تا اصلا هیچ مشکلی در استفاده از افزونه نداشته باشید.

بخش تنظیمات Post Item

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

آیتم های پست گریدها
آیتم های پست گریدها
آیتم های پست گریدها2
آیتم های پست گریدها2

همچنین می توانید ترتیب عناصر کاشی را در زیر منوی استایل > Post Item Elements Order تغییر دهید.

مرتب سازی گریدبندی ها
مرتب سازی گریدبندی ها

بخش تنظیمات محصول ووکامرس (WooCommerce Product)

اگر می خواهید یک گریدبندی محصول ایجاد کنید و از افزونه ووکامرس برای وب سایت خود استفاده می کنید ، این زیر منو به شما کمک می کند تا در مورد عناصر بخش گرید خود تصمیم بگیرید. هر گزینه می تواند برخی از قسمتهای اطلاعات را نشان دهد یا پنهان کند. به عنوان مثال ، اگر انتخاب می کنید رتبه بندی محصول نمایش داده نشود ، فقط گزینه Star Rating را غیرفعال کنید. ترتیب عناصر را می توان در زیر منوی استایل > Post Item Elements Order تغییر داد.

گریدبندی محصولات ووکامرس در المنتور
گریدبندی محصولات ووکامرس در المنتور

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

بنابراین ، همه چیز در مورد تنظیمات JetGridBuilder است. شرایط Grid Builder تقریباً دارای لیست تنظیمات تقریباً یکسانی است و شرح این ویژگی ها با آنهایی که قبلاً خوانده اید مطابقت دارد. گریدهای خیره کننده ایجاد کنید و موفق شوید!

? فیلم آموزشی

https://youtu.be/tkQiq507Qr8
فیلم آموزش ساخت گرید نوشته و محصول در المنتور
4/5 - (5 امتیاز)
اشتراک گذاری:

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید

مشاوره تلفنی رایگان

در خدمت شما هستیم!

در صورت نیاز به مشاوره می توانید فرم را تکمیل نمایید و یا با ما در ارتباط باشید.