ایجاد و بررسی کادر پویا و ایستا در مدیریت محتوا

در بالای هر صفحه تعدادی آیتم کنترلی وجود دارد که آن ها را به ترتیب از راست به چپ بررسی می کنیم:

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

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

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

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

پس از انتخاب کادر، تب های آن به شما نمایش داده خواهد شد که این تب ها برای تمام کادرهای پویا یکسان است. در زیر به بررسی این تب ها می پردازیم:

تب عنوان: 

عنوان: نام کادر در این قسمت قرار می گیرد.

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

Tag عنوان: از جمله اقداماتی که برروی سئو (Seo) سایت ها باید انجام گیرد، استفاده از انواع تگ Heading می‌باشد. زیرا با استفاده از آنها اولویت و اهمیت مطلب را برای خزنده های موتورهای جستجو که تمامی عوامل موثر برروی سئو سایت را بررسی می‌کنند، مشخص می‌نماید. از این رو اگر سئو (Seo) سایت برایتان با اهمیت است، برای هر کادر از لیست کشویی موجود، یکی از تگ ها را متناسب با اهمیت مطلب انتخاب نمایید.

نمایش عنوان در کادر: بصورت پیش فرض عنوان وارد شده برای کادر در سایت نمایش داده خواهد شد. درصورتی که نمی‌خواهید این عنوان در خروجی نمایش داده شود می‌توانید آن را غیرفعال نمایید.

آیکون کادر: می‌توان متناسب با محتوای کادر در کنار عنوان آن از آیکون های موجود، آیکون مناسبی را قرار داد.

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

عنوان و لینک بایگانی : می‌توان به جای لینک کردن عنوان کادر، یک نام برای عنوان لینک آرشیو در این قسمت وارد نمود و با دادن لینک صفحه مربوطه، برای هر کادر دسترسی به صفحه آرشیو ایجاد نمود.

تب نحوه نمایش:

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

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

همچنین می توانید با غیرفعال کردن این قسمت، کادرهای بدون قالب بسازید.

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

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

اولویت در بین باکسهای هم اولویت: درصورتی که چند کادر با اولویت یکسان داشته باشید، می‌توانید با اولویت دادن در این قسمت ترتیب قرار گرفتن آنها را کنترل نمایید.

عرض کادر: این بخش کنترل کننده واکنشگرایی کادرهای شما می‌باشد. در طراحی سایت های واکنشگرا تمام بخش هایی که اطلاعات و محتوا را شامل می‌شوند به 12 ستون عمودی تقسیم می‌شوند. با استفاده از این بخش می توانید مشخص کنید که هر کادر چند ستون از این 12 ستون را اشغال نماید.

برای مثال چنانچه در طراحی سایت خود بخواهید در یک ردیف 3 کادر را کنار هم قرار دهید باید نمایش این 3 کادر را در نمایشگرهای مختلف بصورت صحیح تنظیم نمایید تا خروجی درستی از طراحی سایت خود داشته باشید. برای این کار باید در نمایشگرهای عریض به هر کادر 4 ستون بدهید تا مجموع 4 کادر درکنار هم 12 ستون شود. معمولا نمایشگرهای متوسط را نیز مانند نمایشگر عریض ستون بندی می‌نمایند. اما در تبلت ها این ستون بندی تغییر کرده و به گونه ای انجام می‌گیرد که در هر ردیف حداکثر 2 کادر کنار هم باشند. در نتیجه تعداد را در تبلت برای هر کادر 6 ستون قرار دهید. با این شرایط دو کادر در ردیف اول و کادر سوم در زیر کادر اول در ردیف دوم قرار می‌گیرد. در موبایل به دلیل کوچک بودن صفحه نمایش، تمامی‌کادرها با ستون بندی کامل یعنی 12 قرار داده می‌شوند. همین علت تمامی‌ کادرها به ترتیب زیر هم قرار می‌گیرند.

درصورتی که بخواهید تنها یک کادر با عرض محدود در وسط صفحه قرار دهید باید عرض کادر را به میزان دلخواه کمتر از 12 قرار دهید و تعداد ستون های باقیمانده تا 12 را از طرفین به عنوان فاصله درنظر بگیرید.

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

با حذف فاصله از راست یا چپ کادرها به بخش حذف شده میچسبد.

هل دادن و کشیدن: هنگامی‌که کادرها کنار یکدیگر قرار می‌گیرند، در نمایش موبایل و تبلت، کادرها به ترتیب از سمت راست زیر هم مرتب می‌شوند. درصورتی که بخواهید ترتیب قرارگیری آن ها را تغییر دهید می‌توانید در نمایشگرهای مختلف با هل دادن و کشیدن آنها را جابجا کنید.

ارتفاع کادر: کادرها بصورت پیش فرض متناسب با محتوای مندرج در آنها ارتفاع می‌گیرند اما می‌توان به کادرها ارتفاع مشخصی با مقیاس پیکسل داد و ارتفاع آن ها را محدود نمود.

نام کلاس: درصورتی که در طراحی سایت یا پورتال از CSS Class خاصی استفاده شده باشد، می‌توان نام آن را در این قسمت مشاهده کرد. این پارامتر توسط برنامه نویس استفاده می شود.

تب پارامترها:

تب پارامترهای کادرهای پویا با یکدیگر متفاوت بوده و باتوجه به عملکرد آن ها دارای پارامترهای خاص خود می باشند.

تب رسانه مرتبط:

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

تب افکت:

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

تب تاریخ انتشار:

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

افزودن کادر ایستا: با استفاده از این آیتم می توانید یک کادر ایستا به صفحه اضافه نمایید.

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

پس از ایجاد کادرها، برای هریک آیتم هایی وجود دارد که در زیر از راست به چپ بررسی می شوند:

ویرایش کادر: با کلیک بر روی این آیتم، کادر جهت ویرایش باز می شود.

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

سطوح دسترسی برای کادر: با این آیتم میتوان دسترسی یک کاربر را به آن محدود کرد. با کلیک روی این گزینه می توانید کاربر موردنظر را انتخاب و دسترسی را برای آن مشخص نمایید.

کپی و حذف کادر: این آیتم عمل cut را انجام می دهد.

کپی: این آیتم عمل copy را برای کادر انجام می دهد.

وضعیت: هنگامی که وضعیت سبز رنگ است یعنی کادر فعال بوده و در سایت نمایش داده می شود و اگر آن را غیرفعال نمایید کادر وجود دارد اما در سایت نمایش داده نمی شود.

حذف: با این آیتم میتوان کادر را حذف نمود.

کد کادر ایستا: این کد فقط برای کادرهای ایستا وجود دارد که برای جستجوی راحت تر آن ها کاربرد دارد.

جستجو در کادرهای ایستا: در این بخش، با واردکردن کد کادر ایستا یا عنوان کادر می‌توان کادر موردنظر را جستجو کرد و اطلاعات آن را مشاهده نمود.

بازخوانی: صفحه را مجدد بارگزاری می کند.

حذف کادر: پس از انتخاب کادرها میتوان آن ها را با این آیتم حذف نمود.

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

کپی کادر: پس از انتخاب کادرها میتوان آن ها را با این آیتم کپی نمود.