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

Share

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
آموزش طراحی باکس نوشته
پخش ویدیو

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

همانطور که میبینید این 3 پوسته جزئیات و طراحی منحصر به فردی ندارد و دست شما را در طراحی بسته است.

امروز با استفاده از المنتور و یک افزونه جانبی، یک باکس را طراحی کرده و امکاناتی مانند تعداد بازدید به این ویجت اضافه می کنیم.

در آموزش های قبلی هم این کار را برای نمایش محصول تکی انجام داده ایم.

برای استفاده از این آموزش کافیه افزونه های زیر را نصب کنید:

افزودن پوسته به ویجت پست ها در المنتور

ایجاد قالب داینامیکی برای ویجت پست

خب بعد از نصب این افزونه به بخش قالب ها رفته و افزودن جدید را بزنید.

در پنجره باز شده در بخش نوع قالب گزینه Loop را انتخاب کنید. این گزینه با نصب افزونه Elementor Custom Skin به المنتور اضافه خواهد شد. در انتها دکمه ایجاد قالب را بزنید تا به ویرایشگر المنتور بریم.

سفارشی سازی ویجت پست ها

در ویرایشگر المنتور فقط یک بخش و بدون هیچ ستونی اضافه کنید.

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

استفاده از ویجت های داینامیکی

در پنل ویجت های المنتور 8 ویجت داینامیکی به شما پیشنهاد شده است. هر کدام از این ویجت ها را میتوانید استفاده کنید.سفارشی سازی ویجت پست ها

تصویر ویژه

ابتدا ویجت تصویر ویژه را قرا می دهیم. این ویجت تصویر شاخص هر نوشته را به صورت خودکار دریافت کرده و نمایش می دهد.

سفارشی سازی ویجت پست ها

عنوان پست

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

سفارشی سازی ویجت پست ها

اطلاعات نوشته

حالا می خواهیم نام نویسنده و تاریخ نوشته و همچنین تعداد بازدید هر پست را قرار دهیم.

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

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

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

سفارشی سازی ویجت پست ها

تعداد بازدید نوشته

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

بخوانید : نمایش پر بازدیدترین نوشته ها با استفاده از المنتور

سپس یک ویجت سربرگ در ستون سوم قرار دهید.

سفارشی سازی ویجت پست ها

حالا روی گزینه داینامیک کلیک کنید و از بین لیست گزینه فیلد ACF را انتخاب کنید.

تعداد بازدید هر نوشته در المنتور

حالا روی آیکون آچار کلیک کنید و در بخش تنظیمات کلید بازدید را که در آموزش قبلی ایجاد کردید را انتخاب کنید.

تعداد بازدید هر نوشته در المنتور

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

تعداد بازدید هر نوشته در المنتور

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

تعداد بازدید هر نوشته در المنتور

سفارشی سازی استایل

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

سفارشی سازی ویجت پست ها

مرحله نهایی

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

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

سفارشی سازی ویجت پست ها

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

ویرایش ویجت پست ها در المنتور

دانلود فایل اجرایی

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

دانلود فایل

خب به پایان یکی دیگر از آموزش های المنتور فارسی رسیدیم. امیدواریم از این آموزش هم به خوبی استفاده کرده باشید. اگر سوالی در مورد استفاده از افزونه Elementor Custom Skin دارید در بخش نظرات مطرح کنید.

045-microphone

مدرس :
محمدرضا احمدزاده

013-globe

سطح آموزش :
متوسط

035-essay

زمان آموزش :
6 دقیقه

فهرست مطالب

Avatar
hamed kamkar در 13:53

بسیار عالی و تسکر از آموزش خوبتون
در انتهای کار چطور میتونیم تمام کادر های پست تایپ هارو بر اساس ارتفاع یکسان کنیم؟
یعنی محدودیت برای تعداد کاراکتر عنوان و توضیحات بذاریم؟

پاسخ
Avatar
سعید در 19:44

ضمنا این اتفاق زمانی است که بهش لینک میدم

پاسخ
Avatar
سعید در 19:38

سلام وقتی من دکمه طراحی میکنم وقتی رنگش رو عوض و بروزرسانی انجام میدم
>>خطای فوربیدن 403<<
ظاهر میشه چیکار کنم
المنتور پرو هم دارم

پاسخ
المنتور فارسی
المنتور فارسی در 00:21

با سلام
از مقاله رفع خطای لودینگ المنتور استفاده کنید.

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

نوزده − 18 =

نیاز به کمک دارید؟ پیام دهید