آموزش آیتم های صفحه ساز سایت ساز سی فایو بخش چهارم

آیتم های توضیح داده شده در این بخش:

۳۱- رنگ نشانگر:

با استفاده از این آیتم می توانید یک بلاک متن در صفحه قرار دهید (می توان تصویر ، آیکن و … را در آن اضافه کرد) که رنگ پس زمینه و رنگ زمینه هنگام هاور موس را به راحتی تنظیم کنید.

 

ویژگی ها:

  • محتوا: محتوای آیتم در این قسمت وارد کنید.
  • رنگ پس زمینه: نام رنگ یا کد رنگ مورد نظر را برای پس زمینه محتوا وارد کنید.
  • Background color | Hover: نام رنگ یا کد رنگ مورد نظر را برای پس زمینه هنگام هاور (hover) محتوا وارد کنید.
  • Border color (اختیاری): نام رنگ یا کد رنگ مورد نظر را برای رنگ لبه آیتم وارد کنید.
  • Border color | Hover (اختیاری): نام رنگ یا کد رنگ مورد نظر را برای رنگ لبه هنگام هاور (hover) وارد کنید.
  • Padding:  فاصله خارجی محتوا تا مرزآیتم را به پیکسل می توانید وارد کنید.
  • لینک: در صورت تنظیم، با کلیک بر روی آیتم، کاربر به لینک مورد نظر هدایت می شود.
  • Link | Target: می توانید تنظیم کنید که لینک در همین پنجره یا یک تب جدید باز شود.
  • Custom | Classes: کلاس های css دلخواه را که پیشتر تعریف کرده اید را در این قسمت می توانید وارد کنید.
  • Custom | Styles: کدهای css دلخواه را می توانید در این قسمت وارد کنید.

خروجی آیتم رنگ نشانگر در صفحه:

 

۳۲- چگونه کار می کند:

آیتم چگونه کار می کند به شما این امکان را می دهد مرحله های انجام یک پروسه را به خوبی در صفحه نمایش دهید که بیشتر مناسب صفحات فرود (landing page) می باشد.

see5-page-builder-tutorials-How-it-Works-item

 

ویژگی ها:

  • تصویر پس زمینه: تصویر آیتم را از این قسمت تنظیم کنید.
  • عدد: شماره مرحله
  • عنوان: عنوان مرحله در پایین تصویر قرار می گیرد.
  • محتوا: محتوای مرحله در پایین عنوان قرار می گیرد.
  • خط: در صورت انتخاب، در کنار عدد یک خط اضافه می شود.
  • لینک: در صورت تنظیم، با کلیک بر روی آیتم، کاربر به لینک مورد نظر هدایت می شود.
  • Link | Target: می توانید تنظیم کنید که لینک در همین پنجره یا یک تب جدید باز شود.
  • انیمیشین: انیمیشین ورودی هنگام نمایش آیتم را می توانید تنظیم کنید.

خروجی آیتم چگونه کار می کند در صفحه:

see5-page-builder-tutorials-How-it-Works-item-2

 

۳۳- اطلاعات جعبه:

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

محتوا در قالب یک لیست باید در باکس محتوا وارد شود (<li>محتوا در این قسمت وارد می شود.</li>)

see5-page-builder-tutorials-Info-Box--item

ویژگی ها:

  • عنوان: عنوان آیتم در بالای محتوا قرار می گیرد.
  • محتوا:  اطلاعات مورد نظر را در بین تگ های <li></li> باید وارد کنید.
  • تصویر پس زمینه: می توانید برای پس زمینه محتوا یک تصویر پس زمینه تنظیم کنید.
  • انیمیشین: انیمیشین ورودی هنگام نمایش آیتم را می توانید تنظیم کنید.

خروجی آیتم اطلاعات جعبه در صفحه:

 

۳۴- فهرست:

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

see5-page-builder-tutorials-List--item

 

ویژگی ها:

  • آیکن: آیکن فهرست را می توانید از لیست انتخاب کنید.
  • تصویر: بجای آیکن های پیش فرض می توانید از این قسمت آیکن سفارشی خود را تنظیم کنید
  • عنوان: عنوان آیتم در بالا  کنار آیکن نمایش داده می شود.
  • محتوا: در پایین عنوان نمایش داده می شود
  • لینک: در صورت تنظیم، با کلیک بر روی آیتم، کاربر به لینک مورد نظر هدایت می شود.
  • باز کردن در پنجره جدید: می توانید تنظیم کنید که لینک در همین پنجره یا یک تب جدید باز شود.
  • سبک: سبک نمایشی آیتم (With Background, Transparent, vertical, Ordered List) را از این قسمت انتخاب کنید.
  • انیمیشین: انیمیشین ورودی هنگام نمایش آیتم را می توانید تنظیم کنید.

خروجی آیتم فهرست در صفحه:

see5-page-builder-tutorials-List--item-2

 

۳۵- اسلایدر کامل پیشنهادات:

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

ویژگی ها:

  • موضوع: دسته پیشنهادات را از این قسمت انتخاب کنید.
  • Custom | Classes: کلاس های css دلخواه را که پیشتر تعریف کرده اید را در این قسمت می توانید وارد کنید.

خروجی آیتم اسلایدر کامل پیشنهادات در صفحه:

 

۳۶- اسلایدر نما پیشنهادات:

این آیتم مشابه آیتم اسلایدر کامل پیشنهادات، پیشنهادات را نمایش می دهد، یک تصویر کوچک بند انگشتی (thumbnail image) که در تنظیمات هر پیشنهاد قابل تعریف می باشد در کنار آیتم نمایش داده می شود.

see5-page-builder-tutorials-Offer-Slider-thumb--item

 

ویژگی ها:

  • موضوع: دسته پیشنهادات را از این قسمت انتخاب کنید.
  • سبک: سبک نمایشی آیتم (thumbnails at the left , thumbnails at the buttom) را می توانید از این قسمت انتخاب کنید.
  • Custom | Classes: کلاس های css دلخواه را که پیشتر تعریف کرده اید را در این قسمت می توانید وارد کنید.

خروجی آیتم اسلایدر نما پیشنهادات در صفحه:

see5-page-builder-tutorials-Offer-Slider-thumb--item-2

 

۳۷- ساعات کاری:

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

see5-page-builder-tutorials-Opening-Hours-item

 

ویژگی ها:

  • عنوان: عنوان آیتم در بالای محتوا قرار می گیرد.
  • محتوا: اطلاعات مورد نظر را در بین تگ های <li></li> باید وارد کنید.
  • تصویر پس زمینه: می توانید برای پس زمینه محتوا یک تصویر پس زمینه تنظیم کنید.
  • انیمیشین: انیمیشین ورودی هنگام نمایش آیتم را می توانید تنظیم کنید.

خروجی آیتم ساعات کاری در صفحه:

 

۳۸- گروه ما:

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

see5-page-builder-tutorials-Our-Team-item

 

ویژگی ها:

  • هیدینگ: یک تیتر که در بالای تصویر قرار می گیرد.
  • تصویر: تصویر آیتم را از این قسمت تنظیم کنید.
  • عنوان: عنوان این آیتم در پایین تصویر قرار می گیرد.
  • زیرنویس: در پایین عنوان قرار می گیرد.
  • تلفن: شماره تلفن را در این قسمت وارد کنید.
  • محتوا:  توضیحاتی خلاصه (معرفی کوتاه) درباره این عضو وارد کنید.
  • آدرس ایمیل: آدرس ایمیل را در این قسمت وارد کنید.
  • فیس بوک: لینک مورد نظر را وارد کنید.
  • توییتر: لینک مورد نظر را وارد کنید.
  • لینکداین: لینک مورد نظر را وارد کنید.
  • کارت ویزیت: لینک مورد نظر را وارد کنید.
  • نقل قول: در پایین محتوا و دکمه های شبکه های اجتماعی قرار می گیرد.
  • سبک: سبک های نمایشی مختلف برای آیتم را از این قسمت می توانید تنظیم کنید.
  • لینک: در صورت تنظیم، با کلیک بر روی آیتم، کاربر به لینک مورد نظر هدایت می شود.
  • Link | Target:  می توانید تنظیم کنید که لینک در همین پنجره یا یک تب جدید باز شود.
  • انیمیشن: انیمیشین ورودی هنگام نمایش آیتم را می توانید تنظیم کنید.

خروجی آیتم گروه ما در صفحه:

 

۳۹- لیست گروه ما:

مشابه آیتم گروه ما می توانید اعضای تیم خود را با استفاده از این آیتم معرفی کنید (با سبک نمایشی تمام عرض)

see5-page-builder-tutorials-Our-Team-list-item

 

ویژگی ها:

  • تصویر: تصویر آیتم را ازاین قسمت تنظیم کنید.
  • عنوان: عنوان آیتم در کنار تصویر قرار می گیرد.
  • زیرنویس: در پایین عنوان نمایش داده می شود.
  • تلفن: شماره تلفن را در این قسمت وارد کنید.
  • محتوا: توضیحاتی خلاصه (معرفی کوتاه) درباره این عضو وارد کنید.
  • نقل قول: متن نقل قول را در این قسمت وارد کنید.
  • آدرس ایمیل: آدرس ایمیل را در این قسمت وارد کنید.
  • فیس بوک: لینک مورد نظر را وارد کنید.
  • توییتر: لینک مورد نظر را وارد کنید.
  • لینکداین: لینک مورد نظر را وارد کنید.
  • کارت ویزیت: لینک مورد نظر را وارد کنید.
  • لینک: در صورت تنظیم، با کلیک بر روی آیتم، کاربر به لینک مورد نظر هدایت می شود.
  • Link | Target: می توانید تنظیم کنید که لینک در همین پنجره یا یک تب جدید باز شود.

خروجی آیتم لیست گروه ما در صفحه:

see5-page-builder-tutorials-Our-Team-list-item-4

 

۴۰- عکس جعبه:

یک جعبه جذاب با عنوان، متن، تصویر و یک اکت زیبا هنگام هاور موس.

see5-page-builder-tutorials-Photo-Box--item

 

ویژگی ها:

  • عنوان: عنوانآیتم در بالای تصویر نمایش داده می شود.
  • تصویر:  تصویر آیتم را از این قسمت تنظیم کنید.
  • محتوا: در صورت وارد کردن محتوا در پایین تصویر نمایش داده می شود.
  • Text Align: تراز متن (محتوا) را از این قسمت می توانید انتخاب کنید.
  • لینک:  در صورت تنظیم، با کلیک بر روی آیتم، کاربر به لینک مورد نظر هدایت می شود.
  • Link | Target: می توانید تنظیم کنید که لینک در همین پنجره یا یک تب جدید باز شود.
  • Greyscale Images: اگر می خواهید افکت خاکستری روی تصویر فعال شود، بله را انتخاب کنید. (تنها روی تصاویر دارای لینک کار می کند)
  • انیمیشین: انیمیشین ورودی هنگام نمایش آیتم را می توانید تنظیم کنید.

خروجی آیتم عکس جعبه در صفحه:

see5-page-builder-tutorials-Photo-Box--item-2

 

 

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هجده − 8 =