جستجو برای:
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ
 
کنترل وب
دسترسی سریع
  • طراحی سایت
  • المنتور
  • وردپرس
  • ووکامرس
0

ورود و ثبت نام

  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ

بلاگ

کنترل وببلاگویدئوباکس جذاب در المنتور

باکس جذاب در المنتور

https://ctrlweb.ir/wp-content/uploads/2022/08/باکس-جذاب-در-المنتور.mp4

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

هدف از ساخت باکس جذاب در المنتور:

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

ساخت باکس جذاب در المنتور یکی از روش هایی که با استفاده از اون میتونیم علاوه بر جذاب تر کردن سایتمون از لحاظ بصری، کاربر رو به کشف این موضوع ترغیب کنیم که بخواد بفهمه که این المان چه سوپرایزی رو براش  داره!

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

بریم سر اصل آموزش ساخت باکس جذاب در المنتور:

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

 

تصویر چهارم آموزش ساخت باکس جذاب در المنتور | کنترل وب

 

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

 

تصویر دوم آموزش ساخت باکس جذاب در المنتور | کنترل وب

 

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

 

تصویرسوم آموزش ساخت باکس جذاب در المنتور | کنترل وب

 

برای اینکه پس زمینه کارتی که طراحی کردیم به پس زمینه موردنظرمون تبدیل بشه، نیاز داریم تا با استفاده از کد های سی اس اس این ویژگی رو به المان بخش داخلی بدیم. بنابراین باید به قسمت “ویرایش بخش داخلی” بریم. برای اینکار روی ویرایش بخش داخلی کلیک می کنیم تا تنظیمات بخش داخلی فعال بشه.

 

تصویر چهارم آموزش ساخت باکس جذاب در المنتور | کنترل وب

 

در قدم بعدی از طریق پنجره تنظیمات بخش داخلی به قسمت “پیشرفته” می ریم.

 

تصویر چهارم آموزش ساخت باکس جذاب در المنتور | کنترل وب

 

در قدم بعدی در قسمت پیشرفته، قسمتی به نام “custom css” یا “سی اس اس سفارشی” وجود داره. در این قسمت می تونیم کد های سی اس اس موردنظر خودمون رو قرار بدیم. بنابراین کد های سی اس اسی که در ادامه براتون قرار می دیم رو در این قسمت قرار بدین.

 

تصویر ششم آموزش ساخت باکس جذاب در المنتور | کنترل وب

 

 

بعد از اینکه این کد های سی اس اس رو در این قسمت قرار دادیم باید بخش داخلی موردنظر به ظاهری شبیه تصویر زیر تبدیل شده باشه. و این به خاطر کد های سی اس اسی هست که در قسمت قبلی توی این قسمت قرار دادیم.

 

تصویر هفتم آموزش ساخت باکس جذاب در المنتور | کنترل وب

 

برای اینکه المان هایی که درون کارتمون قرار دادیم روی قسمت های رنگی قرار بگیره و قسمت های رنگی با المان هایی که توی کارتمون قرار می دیم به طور صحیح دیده بشن، لازمه که ویژگی به نام “z index” اون ها رو عددی بیشتر از این ویژگی برای رنگ هامون قرار بدیم.

در اینن مرحله از قسمت ” پیشرفته” تنطیمات هر المان ، گزینه ای به نام ” ایندکس z “ یا “Z index”  وجود داره. باید عددی بیشتر از صفر رو در این قسمت وارد کنیم.

اینکار رو برای هر کدوم از المان هایی که درون کارتمون قرار میدیم تکرار می کنیم.

 

تصویر هشتم آموزش ساخت باکس جذاب در المنتور | کنترل وب

 

شخصی سازی کد های سی اس اس آموزش باکس جذاب در المنتور:

برای اینکه کد های سی اس اس رو شخصی کنیم، اول کد های سی اس اس متغیر هایی وجود دارن که میتونید با تغییر هر کدوم از این متغیر ها به متغیر های موردنظر طراحی خودتون این کد ها رو با توجه به نیازتون شخصی سازی کنین.

به عنوان مثال در کد های سی اس اس متغیری به نام blur– تعریف شده که با تغییر این متغیر می تونین میزان محو شوندگی رنگ های ایجاد شده در پس زمینه رو تغییر بدین.

به این ترتیب با طی کردن این مراحل می تونیم این کارت جذاب رو برای سایتمون طراحی کنیم D: امیدوارم از این آموزش لذت برده باشین.

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 5]
اشتراک گذاری:
کد های سی اس اس باکس جذاب در المنتور
دانلود فایل

برای مشاهده لینک دانلود لطفا وارد حساب کاربری خود شوید!

وارد شوید

پسورد فایل : ندارد گزارش خرابی لینک

محل نمایش فرم گزارش مشکل دانلود شما.
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!
مطالب زیر را حتما بخوانید
  • لیست قیمت در المنتور - کنترل وب
    لیست قیمت در المنتور

    12 بازدید

  • z ایندکس در المنتور | کنترل وب
    z ایندکس در المنتور

    14 بازدید

  • تغییر عرض سکشن در المنتور-کنترل وب
    تغییر عرض سکشن در المنتور

    22 بازدید

  • ساخت خط عمودی در المنتور-کنترل وب
    ساخت خط عمودی در المنتور

    32 بازدید

  • ماسک در المنتور-کنترل وب
    ماسک (Mask) در المنتور

    34 بازدید

  • نصب وردپرس روی لوکال هاست (زمپ) - کنترل وب
    نصب وردپرس روی لوکال هاست (زمپ)

    48 بازدید

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
دسته‌ها
  • آموزش المنتور
  • آموزش وردپرس
  • مقالات
  • ویدئو
نوشته‌های تازه
  • لیست قیمت در المنتور
  • z ایندکس در المنتور
  • تغییر عرض سکشن در المنتور
  • ساخت خط عمودی در المنتور
  • ماسک (Mask) در المنتور
لوگو کنترل وب

کنترل وب

مرجع آموزش هنر طراحی سایت

کنترل وب

مرجع آموزش هنر طراحی سایت

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

Telegram Instagram

دسترسی سریع

  • آموزش وردپرس
  • آموزش المنتور
  • آموزش ووکامرس
  • آموزش سئو
  • تریک css
  • آموزش وردپرس
  • آموزش المنتور
  • آموزش ووکامرس
  • آموزش سئو
  • تریک css

لینک های پر بازدید

  • ترفند المنتور
  • آموزش رایگان المنتور
  • دوره جامع وردپرس
  • آموزش html-css
  • مینی دوره آموزش وردپرس

جدید ترین آموزشها

لیست قیمت در المنتور

z ایندکس در المنتور

تغییر عرض سکشن در المنتور

ساخت خط عمودی در المنتور

ماسک (Mask) در المنتور

Telegram Instagram

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

لوگو کنترل وب
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت