صفحات تمام عرض

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

• Login 2
• Error 2
• Register 2
• Maintenance
• Forgot 2
• splash-ALL_VERSIONS
• splash-walk-ALL_VERSIONS

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

html

<div data-card-height="cover" class="card bg-VALUE">
 
    <div class="card-POSITION UTLILTY_SPACING_CLASS">
           <!--Enter your content here-->
    </div>
 
    <div class="card-overlay bg-black opacity-85"></div>
    <div class="card-overlay-infinite preload-img" data-src="images/pictures/_bg-infinite.jpg"></div>
</div>

کد بالا یک صفحه تمام عرض ایجاد میکند.

خط 1 کارت را به عنوان یک پوشش تعریف میکند، به این معنی که یک کارت تمام صفحه است، همانطور که در کارت‌های Height Control توضیح داده شده است.

خط 3 تا 5 موقعیت کارت روی صفحه نمایش است. هنگام استفاده از پوشش‌ها، میتوانید به تعداد دلخواه از divهای کارت استفاده کنید. کافیست این خطوط را کپی کنید و card-POSITION را با card-top / card-center و card-bottom جایگزین کنید. میتوانید محتوا را در هر 3 قسمت صفحه نمایش اضافه کنید.
همچنین میتوانید موقعیت محتوا را در سمت چپ و راست با استفاده از کلاس‌های float-left یا float-right در داخل خط 4 تنظیم کنید.

خط 7 لایه‌ی تیره‌ای است که روی تصویر اما زیر card-top/card-center/card-bottom ظاهر میشود. میتوانید شفافیت یا تیرگی لایه‌ را با استفاده از کلاس‌های کمکی Opacity تنظیم کنید.

جلوه بینهایت یا تصاویر کلاسیک

برای افکت پس‌زمینه نامحدود از خط 8 در کد بالا استفاده کنید و bg-VALUE را از خط 1 حذف کنید. تصویر خط 8 را با تصویر خودتان جایگزین کنید. کلاس preload-img را نگه دارید زیرا تصاویری که میتوانند در افکت‌های نامحدود پیمایش شوند، بسیار عریض‌تر از تصاویر معمولی خواهند بود و میتوانند کد را سنگین کنند. preload-img اطمینان حاصل میکند که تصویر در زمان بارگذاری صفحه تأثیر نمیگذارد.

برای تصویر استاتیک، کلاسیک از bg-VALUE استفاده کنید و خط 8 را حذف کنید.

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

توجه

اسلایدرها/کاروسل از جلوه‌های پس‌زمینه نامحدود پشتیبانی نمیکنند.

خیلی ساده! در صورتی که میخواهید از یک اسلایدر/کاروسل تمام صفحه استفاده کنید، از کد بالا به عنوان یک اسلاید استفاده خواهید کرد. بنابراین، کد بالا را بردارید و آن را داخل کد زیر قرار دهید.

html

<div class="cover-slider owl-carousel mb-0">
  <!-- put the card cover here-->
</div>

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

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