مستندات / ظاهر و قالب‌ها

ظاهر و قالب‌ها

مینیمال، دوبخشی، شیشه‌ای، شورت‌کد و المنتور.

ویدیو آموزشی

آموزش تصویری بخش «ظاهر و قالب‌ها»

در حال ضبط و جمع‌آوری ویدیو

نسخه ویدیویی این آموزش پس از آماده‌شدن در همین قسمت نمایش داده می‌شود.

محل تنظیم از منوی دربان، بخش «ظاهر» را باز کنید. تغییرات این صفحه روی فرم درون برگه، فرم پاپ‌آپ و صفحه ورود دربان اعمال می‌شوند.

فونت

فونت پیش‌فرض قالب

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

Kalameh و IRANYekanX

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

زبان پنل

پیروی از زبان سایت

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

انتخاب زبان ثابت

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

تشخیص زبان از روی نشانی (URL)

این گزینه چیست: کد زبان را از بخش ابتدایی نشانی صفحه می‌خواند؛ مانند نشانی‌هایی که پس از دامنه fa، en، ar یا tr دارند. با روشن‌کردنش چه اتفاقی می‌افتد: فرم با زبان همان نشانی نمایش داده می‌شود و در بخش «فرم‌ها» ورودی برچسب و متن راهنمای چندزبانه فعال می‌شود. چه زمانی استفاده شود: وقتی افزونه چندزبانه شما برای هر زبان یک زیرشاخه جدا در نشانی می‌سازد. به چه گزینه‌ای وابسته است: ساختار نشانی سایت باید واقعاً زیرشاخه‌ای باشد؛ این تشخیص بر کوکی اولویت دارد.

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

قالب

نام دقیق قالباین گزینه چیستبا انتخاب آن چه می‌شودزمان استفاده و وابستگی
مینیمال: یک کارت تمیز و سادهچیدمان ساده و کم‌جزئیات است.فرم در یک کارت خوانا با پس‌زمینه ساده نمایش داده می‌شود.برای بیشتر صفحات و موبایل مناسب است؛ به تنظیم دیگری وابسته نیست.
دوبخشی: فرم در کنار یک پنل رنگیفرم و محتوای تصویری یا متنی را کنار هم می‌گذارد.تنظیمات بخش «پنل دوبخشی» فعال و قابل استفاده می‌شوند.برای صفحه ورود مستقل و معرفی برند مناسب است؛ محتوای کناری به تنظیمات پنل دوبخشی وابسته است.
شیشه‌ای: کارت مات روی یک گرادیان ملایمکارت نیمه‌شفاف با پس‌زمینه رنگی است.گوی‌های رنگی و کارت شیشه‌ای ظاهر مدرن‌تری می‌سازند.برای صفحه‌های تبلیغاتی مناسب است؛ خوانایی آن به رنگ متن، کارت و پس‌زمینه وابسته است.

ایمیل کد تأیید

رنگ هدر ایمیل

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

رنگ کد تأیید

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

رنگ‌های قالب و پیش‌تنظیم‌ها

پیش‌تنظیم‌های رنگ

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

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

پنل دوبخشی

همه گزینه‌های این بخش فقط وقتی قالب «دوبخشی: فرم در کنار یک پنل رنگی» انتخاب شده باشد اثر دارند.

سمت پنل

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

محتوای پنل

این گزینه چیست: تعیین می‌کند پنل «تصویر یا GIF» نشان دهد یا «متن متحرک». با انتخاب‌کردنش چه اتفاقی می‌افتد: کنترل‌های مربوط به همان نوع محتوا نمایش داده می‌شوند. چه زمانی استفاده شود: تصویر برای نمایش محصول یا برند؛ متن متحرک برای نمایش چند مزیت کوتاه. به چه گزینه‌ای وابسته است: فقط قالب دوبخشی و کنترل‌های زیر.

نشانی تصویر یا GIF

این گزینه چیست: رسانه اصلی پنل تصویری است. با انتخاب رسانه یا وارد کردن نشانی چه اتفاقی می‌افتد: تصویر تمام فضای پنل را می‌پوشاند و ممکن است لبه‌های آن بریده شود. چه زمانی استفاده شود: تصویری با نسبت تقریبی ۲ به ۳ و سوژه در مرکز انتخاب کنید؛ نمونه مناسب ۱۲۰۰ در ۱۸۰۰ پیکسل است. به چه گزینه‌ای وابسته است: «محتوای پنل» باید «تصویر یا GIF» باشد؛ فیلد خالی، تصویر پیش‌فرض قالب را نگه می‌دارد.

تصویر یا GIF بالای متن (اختیاری)

این گزینه چیست: رسانه کوچکی بالای خطوط متن متحرک است. با انتخاب‌کردنش چه اتفاقی می‌افتد: تصویر وسط‌چین بالای متن دیده می‌شود. چه زمانی استفاده شود: برای لوگو، تصویر محصول یا نشان کمپین؛ اگر فقط متن می‌خواهید خالی بگذارید. به چه گزینه‌ای وابسته است: «محتوای پنل» باید «متن متحرک» باشد.

خطوط متن

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

متن فرم

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

نام دقیق گزینهاین گزینه چیست و با نوشتنش چه می‌شودزمان استفادهوابستگی
عنوان خوش‌آمدتیتر آغاز فرم را عوض می‌کند؛ نمونه «به فروشگاه ما خوش آمدید».برای هماهنگی لحن فرم با برند.فیلد خالی متن آماده زبان فعال را نشان می‌دهد.
زیرعنوان خوش‌آمدتوضیح زیر تیتر آغاز را عوض می‌کند؛ نمونه «شماره خود را برای ادامه وارد کنید».برای توضیح کوتاه کار بعدی.باید با شناسه‌های فعال، مانند ایمیل یا نام کاربری، سازگار باشد.
برچسب فیلد شناسهنام فیلد اول را به متن دلخواه تغییر می‌دهد.فقط وقتی متن خودکار «موبایل»، «ایمیل» یا «نام کاربری» برای مخاطب کافی نیست.اگر ایمیل یا نام کاربری را فعال می‌کنید، برچسب نباید فقط «شماره موبایل» باشد.
عنوان مرحلهٔ کدتیتر صفحه وارد کردن کد را عوض می‌کند؛ نمونه «کد دریافتی را وارد کنید».برای روشن‌تر کردن مرحله تأیید.در همه جریان‌های کد استفاده می‌شود.

کدهای کوتاه (شورت‌کد)

فرم درون‌خطی

این مورد چیست: شورت‌کد [darban_form] فرم کامل مشترک ورود و ساخت حساب را داخل برگه نمایش می‌دهد. با قرار دادنش چه اتفاقی می‌افتد: فرم در همان محل برگه باز است و کاربر بر اساس شماره و «حالت فرم» وارد یا عضو می‌شود. چه زمانی استفاده شود: برای یک صفحه ورود مستقل. به چه گزینه‌ای وابسته است: قالب، متن‌ها، حالت فرم و فیلدهای ثبت‌نام ذخیره‌شده را استفاده می‌کند.

دکمهٔ پاپ‌آپ

این مورد چیست: شورت‌کد [darban_button] یک دکمه می‌سازد. با قرار دادنش چه اتفاقی می‌افتد: با کلیک، فرم ورود در پاپ‌آپ باز می‌شود. چه زمانی استفاده شود: برای سربرگ، پابرگ یا صفحه‌ای که فرم دائمی نباید فضا بگیرد. به چه گزینه‌ای وابسته است: ظاهر پیش‌فرض آن از بخش «پیش‌فرض‌های دکمهٔ پاپ‌آپ» می‌آید.

نمونه تنظیم خود شورت‌کد: [darban_button text="ورود یا عضویت" icon="1" icon_only_mobile="1" bg="#4f46e5" color="#ffffff" icon_color="#ffffff" class="my-class"]. مقادیری که داخل شورت‌کد می‌نویسید فقط همان دکمه را تغییر می‌دهند.

احراز هویت دو عاملی

این مورد چیست: شورت‌کد [darban_two_factor] پنل راه‌اندازی و مدیریت برنامه Authenticator را برای عضو واردشده نشان می‌دهد. با قرار دادنش چه اتفاقی می‌افتد: عضو می‌تواند احراز هویت دو عاملی حسابش را مدیریت کند. چه زمانی استفاده شود: در برگه حساب کاربری اعضا. به چه گزینه‌ای وابسته است: کاربر باید وارد شده باشد و احراز هویت دو عاملی در بخش امنیت فعال باشد.

نام جایگزین فرم شورت‌کد [darban_login] نیز در نسخه فعلی همان فرم مشترک [darban_form] را نمایش می‌دهد؛ لازم نیست برای ورود و عضویت دو فرم جدا بسازید.

پیش‌فرض‌های دکمهٔ پاپ‌آپ

متن دکمه

این گزینه چیست: نوشته پیش‌فرض دکمه پاپ‌آپ است. با نوشتنش چه اتفاقی می‌افتد: همه دکمه‌هایی که متن جدا ندارند همین عبارت را نشان می‌دهند. چه زمانی استفاده شود: عبارتی روشن مانند «ورود یا عضویت» بنویسید. به چه گزینه‌ای وابسته است: متن نوشته‌شده در خود شورت‌کد بر این مقدار مقدم است.

نمایش یک آیکون کنار متن

این گزینه چیست: نشان ورود را کنار نوشته دکمه قرار می‌دهد. با روشن‌کردنش چه اتفاقی می‌افتد: آیکون و متن با هم دیده می‌شوند. چه زمانی استفاده شود: وقتی دکمه باید در سربرگ سریع‌تر تشخیص داده شود. به چه گزینه‌ای وابسته است: «رنگ آیکون» ظاهر آن را تعیین می‌کند و تنظیم خود شورت‌کد می‌تواند آن را تغییر دهد.

در موبایل، فقط آیکون نمایش داده شود

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

پس از ورود، یک نشانِ حساب همراه با منوی شناور نمایش داده شود

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

پس‌زمینه، رنگ متن و رنگ آیکون

این گزینه‌ها چیستند: سه رنگ پیش‌فرض دکمه پاپ‌آپ‌اند. با انتخاب‌کردنشان چه اتفاقی می‌افتد: رنگ سطح دکمه، نوشته و آیکون تغییر می‌کند. چه زمانی استفاده شوند: رنگ‌هایی با تضاد کافی و هماهنگ با سربرگ انتخاب کنید. به چه گزینه‌ای وابسته‌اند: رنگ‌های نوشته‌شده در خود شورت‌کد بر این مقادیر مقدم‌اند؛ «رنگ آیکون» زمانی دیده می‌شود که نمایش آیکون فعال باشد.

تنظیمات فنی

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

انتخابگر محرک

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

CSS سفارشی

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

JS سفارشی

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

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