نمایش نمونه کارها در صفحه اصلی المنتور

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

آموزش نمایش نمونه کارها در صفحه اصلی

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

سکشن نمایش نمونه کارها طراحی شده در این جلسه

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

قطعه کد پس زمینه سکشن

در زیر می‌توانید قطعه کد css که برای افزودن پس زمینه گرادینت به سکشن نمونه کارها استفاده کردیم را کپی کرده و در طرح خودتان استفاده کنید.

selector{
    background: linear-gradient(249.46deg, #FFEBD8 5.04%, #FFD9EB 56.39%, #FFD8D0 103.64%);
}

قطعه کد تنظیم عنوان در یک خط

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

selector h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

جمع بندی

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

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

• افزونه المنتور چیست؟
• نصب افزونه المنتور نسحه رایگان
• آشنایی کلی با افزونه صفحه ساز المنتور
• آموزش نصب افزونه المنتور نسخه پولی
• آموزش افزودن فونت فارسی به المنتور
• نصب افزونه وبکیما المنت
• آموزش طرح بندی و تنظیمات صفحه در المنتور
• آموزش کار با سکشن و ستون در المنتور
• آموزش 3 تب اصلی تنظیمات در المنتور
• آموزش مفهومی تم بیلدر المنتور
• آموزش طراحی هدر در المنتور
• آموزش طراحی منو موبایل در المنتور
• آموزش طراحی فوتر ریسپانسیو در المنتور
• آموزش طراحی صفحه اصلی سایت در المنتور
• طراحی سکشن دوم در صفحه اصلی المنتور
• طراحی بخش خدمات ما در صفحه اصلی