مدرس دوره

مدرس دوره

نبی عبدی

مدت زمان ویدیو

زمان ویدیو

10:46 دقیقه

دیگر جلسات دوره

برو به دیگر جلسات

آموزش المنتور

دانلود ویدیو

برای دانلود ویدیو

وارد شوید

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

منتشر شده در تاریخ : 6, مرداد, 1401

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

آموزش نمایش نوشته‌ها یا مقالات در صفحه اصلی

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

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

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

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

قطعه کد سایه برای مقالات

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

selector h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
selector .elementor-post__card {
    padding: 25px 25px 10px;
}
selector .elementor-post__thumbnail__link {
    border-radius: 20px;
    overflow: hidden;
}

selector .elementor-post__card:hover{
    box-shadow: -8px 24px 56px 0px rgb(60 60 100 / 12%);
}
selector .elementor-post__excerpt {
     overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

جمع بندی

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

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

5/5 - (1 امتیاز)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

تا 90 درصد تخفیف روی تمامی دوره‌های سایت 😍 به مدت محدود...برو به جشنواره
+