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

زمان های زیادی وجود دارد که به قراردادن سه ماژول در کنار هم نیاز داریم و می خواهیم ماژول ها چیزی مثل شکل زیر ظاهر شوند: برای اینکار ماژول های جداگانه ای برای هر یک از آیتم های خود تعریف کنید. برای هر یک از ماژول ها در برگه Advanced کلاس ماژول خاصی تعریف کنید. اگر بخواهید همه آنها یک سبک و ظاهر داشته باشند، می توانید نام کلاس مشترکی به هر سه بدهید.

زمان های زیادی وجود دارد که به قراردادن سه ماژول در کنار هم نیاز داریم و می خواهیم ماژول ها چیزی مثل شکل زیر ظاهر شوند: برای اینکار ماژول های جداگانه ای برای هر یک از آیتم های خود تعریف کنید. برای هر یک از ماژول ها در برگه Advanced کلاس ماژول خاصی تعریف کنید. اگر بخواهید همه آنها یک سبک و ظاهر داشته باشند، می توانید نام کلاس مشترکی به هر سه بدهید.

زمان تخصیص کلاس به ماژول ها در کادر Module Class Suffix، بایستی قبل از نام کلاس یک فاصله بزنید تا نام کلاس جدید به نام کلاس پیش فرض ماژول نچسبد. اگر یک فاصله در شروع نام کلاس بزنید، آنطور که باید رفتار خواهد کرد.

زمان تخصیص کلاس به ماژول ها در کادر Module Class Suffix، بایستی قبل از نام کلاس یک فاصله بزنید تا نام کلاس جدید به نام کلاس پیش فرض ماژول نچسبد. اگر یک فاصله در شروع نام کلاس بزنید، آنطور که باید رفتار خواهد کرد.

برای مثال اگر شما نام کلاس threeacross در این کادر متنی بدون فاصله تایپ کنید، و سپس ماژول را به پوزیشن-2 جوملا تخصیص دهید، نام کلاس به انتهای کلاس custom چسبیده و به شکل زیر در سند HTML صفحه به مرورگر ارسال می شود:

<div class="customthreeacross">
        ---Your module goes here---
<div>

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

<div class="custom threeacross">
        ---Your module goes here---
<div>

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

.threeacross {width: 32%; float: left; }

مثلا ممکن است در بخش media@ استیل شیت خود بخواهید پهنای پوزیشن را برای صفحه نمایش باریکتر به 100% ست کنید تا ماژول ها روی هم قرار بگیرند بجای اینکه در کنار هم باشند.

ممکن است کسی سئوال کند چرا هر سه محتوا را در یک جدول سه ستونی بجای ماژول قرار ندهیم؟

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

همچنین ممکن است این سئوال مطرح شود که چرا محتوای سه ماژول را در تگ <div> قرار ندهیم و همه را به یک ماژول تخصیص دهیم؟

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