المان شبکه حلقه (Loop Grid) در المنتور

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

پیشنهاد ما: خرید سایت ارزان

تفاوت المان Loop Grid  با المان Posts  در المنتور

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

نحوه ساخت شبکه حلقه (Loop Grid)  در المنتور

المان شبکه حلقه (Loop Grid) در المنتورکه بخشی از قابلیت Loop Builder نسخه پرو است، یک ابزار قدرتمند برای نمایش محتوای پویا در یک طرح‌ بندی شبکه‌ ای قابل تنظیم است. این المان به شما امکان می‌ دهد یک قالب سفارشی برای نمایش آیتم‌ های تکراری، مانند پست‌ های وبلاگ، محصولات فروشگاه یا نمونه کارها، ایجاد کنید و سپس این قالب را به صورت خودکار در یک چید مان شبکه‌ ای منظم تکرار نمایید. مزیت اصلی این المان نسبت به ویجت‌های سنتی پست‌ها این است که کنترل کاملی بر طراحی هر آیتم دارید و می‌ توانید از انواع ویجت‌های المنتور و فیلد های سفارشی مانند ACF برای ساختن ظاهر دلخواه خود استفاده کنید، که این امر منجر به ایجاد صفحات آرشیو منحصر به فرد و جذاب می‌ شود که با اضافه شدن محتوای جدید به صورت خودکار به‌روزرسانی می‌ گردند. 

بخش محتوا در المان شبکه حلقه المنتور  

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

طرح‌ بندی در المان Loop Grid المنتور  

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

شما می توانید فیلم کامل آموزش این ویجت را که توسط استاد اسماعیلی از اساتید مجرب مجموعه آرتا رسانه، تدریس شده، در ادامه به صورت 100% رایگان مشاهده کنید. برای دیدن ویدئو این المان به کانال یوتیوب آرتا رسانه مراجعه نمایید.

کوئری در ویجت شبکه حلقه المنتور  

بخش کوئری ساز المان‌هایی مانند شبکه حلقه یافت می‌ شود. بخش کوئری به شما امکان می‌ دهد محتوای نمایش داده شده در حلقه را به صورت کاملاً سفارشی مدیریت و فیلتر کنید. در این قسمت می‌ توانید منبع داده (Source) را مشخص کنید مثلاً فقط پست‌ها یا فقط محصولات، معیارهای فیلتر کردن دقیق را بر اساس دسته‌دبندی‌دها، برچسب‌ها، نویسندگان خاص یا حتی فیلدهای سفارشی تعیین نمایید، و همچنین نحوه مرتب‌دسازی محتوا مثلاً بر اساس تاریخ جدید تر، قدیمی‌ تر، یا حروف الفبا را کنترل کنید؛ این تنظیمات کوئری به شما قدرت می‌ دهند تا دقیقاً مشخص کنید کدام محتوا در حلقه نمایش داده شود و از این طریق صفحات آرشیو هدفمند و پویایی بسازید

بخش صفحه‌ گذاری المان شبکه حلقه در المنتور  

صفحه‌ گذاری در المنتور یک قابلیت حیاتی است که در المان‌هایی مانند شبکه حلقه (Loop Grid)، پست‌ها (Posts) و محصولات (Products) فعال می‌ شود و به مدیریت حجم بالای محتوا کمک می‌ کند. این ویژگی با تقسیم محتوای کلی به چندین صفحه کوچک‌ تر، از طولانی شدن بیش از حد صفحه اصلی جلوگیری کرده و تجربه کاربری (UX) را بهبود می‌ بخشد. در بخش تنظیمات مربوطه، کاربران می‌ توانند سبک صفحه‌ بندی را انتخاب کنند؛ مثلاً می‌ توانند از دکمه‌های ساده قبلی/بعدی، شماره صفحات، یا سبک بارگذاری بیشتر از طریق دکمه یا اسکرول بی‌ نهایت استفاده کنند. این تنظیمات همچنین به شما امکان می‌ دهند استایل دکمه‌ها، رنگ‌ ها و تراز آن‌ها را شخصی‌ سازی کنید تا کنترل کاملی بر ناوبری سایت داشته باشید.

بخش استایل المان Loop Grid در المنتور  

در بخش استایل (Style) المان شبکه حلقه (Loop Grid) در المنتور، تمام تنظیمات مربوط به ظاهر بصری کارت‌های محتوا و فاصله بین آن‌ها مدیریت می‌ شود. در این قسمت می‌توانید فاصله بین ستون‌ها و ردیف‌ها را با دقت پیکسل یا درصد تنظیم کنید تا چید مان شبکه‌ ای منظم یا خلاقانه‌ ای داشته باشید. علاوه بر این، در صورتی که در بخش محتوا، گزینه‌ هایی مانند صفحه‌ بندی فعال شده باشند، تنظیمات استایل دکمه‌ ها یا شماره‌های صفحه‌ بندی نیز در همین تب در دسترس قرار می‌ گیرد که به شما امکان می‌ دهد رنگ، تایپوگرافی، حاشیه و افکت‌ های هاور (Hover Effects) آن‌ها را مطابق با طراحی کلی وب‌ سایت خود سفارشی‌ سازی کنید.

فاصله بین ستون ها و ردیف ها در شبکه حلقه

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

بخش پیشرفته المان Loop Grid در المنتور  

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

گزینه طرح بندی المان شبکه حلقه در المنتور  

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

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

گزینه موشن افکت به شما این قابلیت را می‌ دهد که انیمیشن‌ ها و جلوه‌های حرکتی جذاب به عناصر صفحه خود اضافه کنید تا وب‌ سایت شما پویاتر و جذاب‌ تر شود . این تنظیمات شامل دو دسته اصلی هستند: انیمیشن‌ های ورودی مانند Fade In، Slide In یا Zoom In که هنگام بارگذاری یا اسکرول کاربر به سمت عنصر فعال می‌ شوند؛ و افکت‌های اسکرول (Scroll Effects) که با حرکت دادن صفحه، باعث ایجاد جلوه‌هایی مانند حرکت پارالاکس عمودی یا افقی، شفافیت تدریجی (Opacity) یا مقیاس‌ پذیری می‌ شوند استفاده از موشن افکت‌ ها می‌ تواند توجه کاربر را به بخش‌های خاصی جلب کند، اما استفاده بیش از حد از آنها ممکن است باعث حواس‌ پرتی یا کاهش عملکرد وب‌ سایت شود.

بخش تبدیل المان Loop Grid در المنتور  

گزینه تبدیل مجموعه‌ ای از ابزارهای قدرتمند CSS را در اختیار شما قرار می‌ دهد تا بتوانید ظاهر و موقعیت عناصر را بدون تأثیرگذاری بر چیدمان کلی صفحه تغییر دهید این قابلیت شامل توابعی مانند چرخش برای چرخاندن عنصر در زوایای مختلف، مقیاس برای کوچک یا بزرگ کردن اندازه آن، کج کردن برای ایجاد جلوه‌های زاویه‌دار، و انتقال برای جابجایی دقیق عنصر در محورهای افقی و عمودی است با استفاده از این ابزارها، می‌توانید جلوه‌های بصری خلاقانه و تعاملی ایجاد کنید و با فعال‌ سازی گزینه هاور ، این تبدیل‌ها را به صورت انیمیشنی هنگام قرار گرفتن ماوس کاربر روی عنصر اعمال نمایید .

گزینه پس زمینه در ویجت شبکه حلقه  وردپرس

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

آموزش گزینه حاشیه در المنتور

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

بخش ماسک  در المان شبکه حلقه المنتور  

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

تنظیمات واکنش‌ گرا در شبکه حلقه (Loop Grid) المنتور  

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

بخش ویژگی ها المان شبکه حلقه المنتور 

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

بخش css سفارشی در شبکه حلقه (Loop Grid) المنتور  

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

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

کاربردهای عملی المان Loop Grid

کاربردهای Loop Grid  در المنتور بسیار گسترده است. در ادامه چند نمونه‌ی واقعی را ببینید :

• نمایش آخرین مقالات بلاگ با طراحی دلخواه
• نمایش محصولات فروشگاه ووکامرس با طرح اختصاصی
• نمایش نمونه‌کارها یا پروژه‌ها
• نمایش اعضای تیم یا مشتریان
• طراحی صفحه آرشیو دسته‌بندی‌ها یا برچسب‌ها

این ویژگی به‌خصوص برای طراحانی که می‌خواهند سایت‌های خاص و غیرتکراری بسازند، فوق‌العاده مفید است .

مزایای استفاده از Loop Grid  در المنتور

• طراحی کاملاً شخصی‌سازی‌شده  – ظاهر هر آیتم دقیقاً مطابق سلیقه شماست .  
• پشتیبانی از داده‌های داینامیک  – می‌توانید هر نوع داده‌ای را از وردپرس یا افزونه‌های دیگر نمایش دهید .  
• سبک‌تر و بهینه‌تر از المان Posts –  سرعت بارگذاری بهتر و کنترل دقیق‌تر بر کد خروجی .  
• سازگاری با افزونه‌های حرفه‌ای مثل ACF  و WooCommerce.

نکات سئو در استفاده از شبکه حلقه در المنتور

برای اینکه صفحات ساخته‌شده با Loop Grid  سئوی بهتری داشته باشند، چند نکته‌ی مهم را رعایت کنید :

• از برچسب‌های عنوان (H2, H3) در داخل قالب استفاده کنید .
• برای تصاویر،  Alt Text  داینامیک تنظیم کنید (مثلاً بر اساس عنوان نوشته) .
• لینک‌های هر آیتم را به صفحه‌ی اصلی محتوا متصل کنید تا ساختار لینک داخلی تقویت شود .
• اگر از صفحه‌بندی استفاده می‌کنید، مطمئن شوید تگ‌های  rel="next"    و  rel="prev"     به‌درستی کار می‌کنند (المنتور پرو معمولاً این مورد را رعایت می‌کند) .

برای اطلاع از قیمت سئو سایت کلیک کنید.

جمع بندی

المان شبکه حلقه در المنتور یا همان  Loop Grid ، ابزاری فوق‌العاده برای طراحان سایت است که می‌خواهند ظاهر بخش‌های داینامیک مثل بلاگ، فروشگاه یا نمونه‌کار را کاملاً شخصی‌سازی کنند .  

با این قابلیت دیگر نیازی نیست به طرح‌های آماده و محدود تکیه کنید؛ هر بخش از سایت می‌تواند دقیقاً مطابق سلیقه و برند شما طراحی شود .

اگر هنوز از المان‌های قدیمی مثل Posts  استفاده می‌کنید، پیشنهاد می‌شود حتماً Loop Grid  را امتحان کنید. تجربه کار با آن، نگاه شما به طراحی در المنتور را متحول می‌کند .

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